UI Style Guide
Cool Ivory Theme · Libre Baskerville · Global Default
Color Palette
Base Colors
Primary BG
#fffff8
Secondary BG
#f8f8f5
Text Primary
#2c2c2c
Text Secondary
#5a5a5a
Accent & Semantic Colors
Accent Blue
#4a6fa5
Success Green
#5a8a6a
Warning Gold
#b8923a
Danger Red
#b85a5a
Info Teal
#5a8a9a
Light Variants (for backgrounds)
Blue Light
#e8eef5
Success Light
#e8f2eb
Warning Light
#f5f0e0
Danger Light
#f5e8e8
Info Light
#e8f0f2
Typography
Heading 1 — Libre Baskerville
Heading 2 — Section Title
Heading 3 — Subsection
Heading 4 — Minor heading
Body text with bold emphasis and italic style. This is what normal paragraph text looks like. The line height is set to 1.7 for comfortable reading on ivory backgrounds.
This is a link styled with underline. Inline code uses monospace.
This is a blockquote for important statements or quotes.Small text for captions and secondary information.
Tables
| Task | Frequency | Description | Status |
|---|---|---|---|
| Email triage | Daily | Review all work email, summarize key items, flag urgent | Active |
| Content drafting | 3x/week | Draft blog posts, LinkedIn posts, social content | Pending |
| Deal research | Per deal | Deep research on founders, companies | In Progress |
| Portfolio review | Weekly | Check news, updates on portfolio companies | Overdue |
Buttons
Standard Buttons
Semantic Buttons
Button Sizes
Badges / Tags
Default Primary Success Warning Danger Info
In Context
Daily Weekly Monthly As Needed
Alerts / Notices
Info: This is an informational message providing context or tips.
Success: The operation completed successfully.
Warning: Please review this item before proceeding.
Error: Something went wrong. Please try again.
Form Elements
Cards
Default Card
Simple card with border. Use for grouping related content.
Muted Card
Card with secondary background. Use for less prominent content.
Code Blocks
/* CSS Variables */
:root {
--bg-primary: #fffff8;
--text-primary: #2c2c2c;
--accent-blue: #4a6fa5;
--success: #5a8a6a;
--danger: #b85a5a;
}