Design System Inspired by AgentMailLegacy format

AgentMail's design system embodies a modern, developer-centric aesthetic with a sophisticated dark-mode foundation. The visual language prioritizes clarity and technical precision, combining deep charcoal neutrals with vibrant cyan and blue accent colors that evoke a sense of innovation and computational elegance. The system favors minimal ornamentation, clean typography, and deliberate use of whitespace to create an interface that feels both powerful and approachable. There's a distinct emphasis on code visibility and API-first thinking, reflected in the prominent use of monospace typography and code-block styling. The overall mood is professional yet forward-thinking—designed for AI engineers and developers who appreciate both aesthetics and functionality.

Key Characteristics

• Dark-mode dominant with deep charcoal (#18181B, #09090B) as primary backgrounds

• Vibrant cyan (#89DDFF) and blue accents (#9ABDF5, #7AA2F7) for interactive focus

• Minimal borders and geometric precision with sharp corners (no excessive rounding)

• Technical typography hierarchy emphasizing code legibility

• High contrast between text and backgrounds for accessibility

• Strategic use of subtle shadows for depth without visual noise

• Status colors (warning orange, error red, success green) for semantic feedback

### Buttons

Primary Button

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #FFFFFF

• Font: Inter, 14px, weight 500

• Padding: 8px 16px

• Height: 36px

• Border Radius: 8px

• Border: 0px solid rgba(100, 100, 100, 0.1) (none)

• Box Shadow: none

• Line Height: 20px

• Hover State: Text color shifts to #89DDFF, subtle background tint rgba(137, 221, 255, 0.1)

• Active State: Background rgba(137, 221, 255, 0.2), text #89DDFF

• Disabled State: Text color #71717B, opacity 0.5

Secondary Button

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #FFFFFF

• Font: Inter, 14px, weight 500

• Padding: 8px 16px

• Height: 36px

• Border Radius: 8px

• Border: 1px solid #27272A

• Box Shadow: none

• Line Height: 20px

• Hover State: Background rgba(137, 221, 255, 0.1), text #89DDFF

• Active State: Background rgba(137, 221, 255, 0.2), border 1px solid #89DDFF

• Disabled State: Border 1px solid #71717B, text #71717B

Ghost Button

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #FFFFFF

• Font: Inter, 14px, weight 500

• Padding: 8px 16px

• Height: 36px

• Border Radius: 8px

• Border: 0px solid rgba(100, 100, 100, 0.1) (none)

• Box Shadow: none

• Line Height: 20px

• Hover State: Text color #89DDFF, background rgba(137, 221, 255, 0.05)

• Active State: Background rgba(137, 221, 255, 0.15)

Icon Button

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #09090B (or inherit from context)

• Font: Geist Mono, 14px, weight 400

• Padding: 0px 0px 0px 0px

• Height: 24px

• Width: 24px

• Border Radius: 8px

• Border: 0px

• Box Shadow: none

• Line Height: 20px

• Hover State: Background rgba(137, 221, 255, 0.1)

### Cards & Containers

Dark Card (Code Container)

• Background: #18181B

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Padding: 16px 24px

• Border Radius: 8px

• Border: 0px solid rgba(100, 100, 100, 0.1) (none)

• Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

• Line Height: 24px

Feature Card

• Background: #18181B

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Padding: 16px 24px

• Border Radius: 8px

• Border: 1px solid #27272A

• Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

• Line Height: 24px

• Hover State: Border color #89DDFF, box-shadow enhanced to 0px 25px 50px -12px rgba(0, 0, 0, 0.6)

Transparent Container

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Padding: 16px 24px

• Border Radius: 8px

• Border: 0px solid rgba(100, 100, 100, 0.1) (none)

• Box Shadow: none

• Line Height: 24px

Tag / Badge Card

• Background: #18181B

• Text Color: #A9B1D6

• Font: Geist Mono, 14px, weight 500

• Padding: 8px 12px

• Border Radius: 8px

• Border: 0px

• Box Shadow: none

• Height: 36px

• Hover State: Background #27272A, text #89DDFF

### Inputs & Forms

Text Input

• Background: rgba(0, 0, 0, 0.045) (subtle dark tint)

• Text Color: #FFFFFF

• Font: Geist Mono, 14px, weight 400

• Padding: 4px 12px

• Height: 36px

• Border Radius: 8px

• Border: 1px solid rgba(100, 100, 100, 0.15)

• Box Shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)

• Line Height: 20px

• Placeholder Color: #9F9FA9

• Focus State: Border 1px solid #89DDFF, box-shadow 0px 0px 0px 2px rgba(137, 221, 255, 0.2)

• Error State: Border 1px solid #E40014, text color #FFFFFF, box-shadow 0px 0px 0px 2px rgba(228, 0, 20, 0.1)

Form Label

• Font: Geist Mono, 14px, weight 500

• Text Color: #FFFFFF

• Line Height: 14px

• Margin Bottom: 8px

### Navigation

Top Navigation Bar

• Background: #09090B (deepest black) or transparent with box-shadow: md

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Padding: 0px 16px

• Height: 56px

• Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.05), 0px 4px 6px -4px rgba(0, 0, 0, 0.05) (md shadow)

• Line Height: 24px

Navigation Link

• Background: rgba(0, 0, 0, 0) (transparent)

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Padding: 0px 0px (inline with bar)

• Border: 0px

• Hover State: Text color #89DDFF

• Active State: Text color #89DDFF, border-bottom 2px solid #89DDFF

Dropdown Menu

• Background: #18181B

• Text Color: #FFFFFF

• Font: Inter, 14px, weight 400

• Padding: 8px 0px

• Border Radius: 8px

• Border: 1px solid #27272A

• Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1) (md shadow)

### Links

Inline Link (Body)

• Text Color: #89DDFF

• Font: Inter, 14px, weight 500

• Line Height: 20px

• Text Decoration: underline

• Hover State: Text color #7DCFFF, opacity 0.8

• Active State: Text color #7AA2F7

• Visited State: Text color #9ABDF5

Link with Arrow

• Text Color: #FFFFFF

• Font: Inter, 16px, weight 400

• Line Height: 24px

• Hover State: Text color #89DDFF, arrow icon color #89DDFF

### Spacing System

Base Unit: 4px

Spacing Scale with Usage Contexts:

• 4px: Gaps between closely related elements, icon spacing

• 8px: Small padding inside components, tight grouping

• 12px: Input field padding (vertical)

• 16px: Standard padding inside cards, horizontal spacing in navigation

• 20px: Section margins, vertical spacing between elements

• 24px: Card padding (vertical and horizontal), generous internal spacing

• 32px: Large section padding, between major component groups

• 48px: Gap between distinct page sections

• 64px: Margin between major content blocks

• 80px: Top/bottom padding of full-width sections

• 96px: Extra-large section padding for hero areas

• 176px: Maximum inter-section spacing (gutters on ultra-wide layouts)

### Grid & Container

Max Width: 1024px (standard navigation width observation) — inferred for main content containers

Container Strategy:

• Full-width sections on mobile/tablet with 96px padding per side on desktop

• Column grid: Flexible 12-column layout on desktop, 4-column on tablet, 2-column on mobile

• Section patterns: Hero (full-width), Feature grid (3-4 columns), Content + Sidebar (main + 300px sidebar)

Gutter: 16px horizontal spacing between grid columns

### Whitespace Philosophy

AgentMail prioritizes breathing room through generous padding and margins. The design uses whitespace strategically to separate content blocks, preventing cognitive overload. Dark backgrounds amplify the visual impact of whitespace; negative space is as important as filled space. Section breaks rely on vertical whitespace (48px to 96px) rather than visual dividers, creating a clean, uncluttered aesthetic. This approach emphasizes content hierarchy and allows the eye to rest between sections.

### Border Radius Scale

• 0px: Sharp corners (legacy/technical components, code blocks, some button variants)

• 4px: Subtle rounding (minor UI elements, tags)

• 8px: Standard rounding (buttons, cards, inputs, navigation dropdowns, badges)

• 12px: Generous rounding (large cards, hero sections)

• 16px: Maximum rounding (large containers, modal dialogs)

### Breakpoints

| Breakpoint Name | Width | Key Changes |

|-----------------|-------|-------------|

| Mobile | 320px – 639px | Single-column layout, full-width sections, 96px padding reduced to 16px, navigation collapses to hamburger menu, button height remains 36px but width stretches to available space |

| Tablet | 640px – 1023px | Two-column grid (max), section padding 48px, navigation remains expanded with adjusted spacing, cards stack in 2-column grid, hero text reduces to h2 sizing |

| Desktop | 1024px – 1439px | Full layout activation, three to four-column grids, max container width 1024px, full navigation bar with dropdowns, hero section at full h1 scale |

| Wide / 2K | 1440px and above | Max container width increases to 1280px, side margins grow to 176px, grid expands to 4-6 columns, hero sections remain at max scale, section padding increases to 96px |

### Touch Targets

Minimum Touch Target Size: 44px × 44px for all interactive elements on mobile devices.

Implementation:

• Buttons: minimum 36px height with padding to reach 44px effective touch area

• Links: minimum 24px height with 8px vertical padding

• Form inputs: minimum 36px height (meets requirement on mobile)

• Icon buttons: 24px size with 8px padding around, resulting in 40px touch area (round up to 44px spacing)

• Spacing between interactive elements: minimum 8px horizontal/vertical gap to prevent accidental taps

### Collapsing Strategy

Navigation:

• Desktop: Horizontal menu bar with dropdowns (56px height)

• Tablet: Horizontal menu with reduced font size (14px instead of 16px)

• Mobile: Hamburger icon (icon button 24px + padding), full-screen overlay menu on tap

Typography:

• Hero text: h1 60px (desktop) → h2 48px (tablet) → h2 36px (mobile, inferred scale)

• Section headings: h2 48px → 36px (tablet) → 28px (mobile)

• Body text: 18px (desktop) → 16px (tablet) → 14px (mobile)

Grid/Layout:

• Desktop: 3-4 column card grids, main + sidebar layout

• Tablet: 2-column card grids, single-column content with bottom sidebar

• Mobile: 1-column layout, full-width cards, stacked sections

Spacing Collapse:

• Desktop sections: 96px top/bottom padding → Tablet: 48px → Mobile: 24px

• Desktop gaps: 48px between blocks → Tablet: 32px → Mobile: 16px

• Container max-width: 1024px (desktop) → 100% with 16px padding (mobile)

### Quick Color Reference

Use these mappings when building UI components:

• Primary CTA / Focus: Cyan (#89DDFF) — apply to button hover states, link underlines, focus rings, active navigation items

• Secondary CTA: Blue (#9ABDF5) — alternative interactive accent for less prominent actions

• Background (Primary): Deep Black (#09090B) — main page background

• Background (Secondary): Dark Charcoal (#18181B) — cards, containers, elevated surfaces

• Heading Text: White (#FFFFFF) — all headings and strong labels

• Body Text: Off-White (#FAFAFA) — body paragraphs and secondary content

• Helper Text: Muted Gray (#9F9FA9) — placeholder text, disabled states, captions

• Border: Dark Gray (#27272A) — container edges, input borders, separators

• Success State: Green (#9ECE6A) — confirmation messages, success indicators

• Warning State: Orange (#F99C00) — caution alerts, warning messages

• Error State: Red (#E40014) — validation errors, destructive actions

### Iteration Guide

Follow these 10 rules when implementing or iterating on AgentMail UI:

1. Always use `#89DDFF` for interactive focus states — it's the signature cyan accent. Apply to button hover, input focus, active nav links, and all interactive emphasis.

2. Every button must be at least `36px` tall with padding; no smaller clickable elements. Use 8px 16px padding as the standard for medium buttons.

3. Dark backgrounds only: Primary sections use #09090B, secondary containers use #18181B. Never use light backgrounds without explicit design direction.

4. Monospace fonts for code and inputs exclusively — Geist Mono for form labels/inputs, ui-monospace for code blocks. Inter only for body, headings, and UI labels.

5. Apply `md` shadow (`0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)`) to all raised cards and dropdowns; use lg shadow only on modals or deep hover states.

6. Maintain `24px` padding inside cards (vertical and horizontal). Never pad less than 16px inside containers; whitespace is mandatory.

7. Set border-radius to `8px` for buttons, inputs, and cards. Sharp corners (0px) only for legacy/code components; no mixing of radius values within a component family.

8. Type hierarchy through weight and size, never color alone — H1 is 60px 600-weight, body is 18px 400-weight. Avoid color-only hierarchy; use size/weight first.

9. Line-height minimum 1.4x the font size — Body text at 18px gets 27px line-height; inputs at 14px get 20px. Tight line-height creates readability issues.

10. Every interactive element must have a visible hover state — buttons shift text to #89DDFF, cards gain lg shadow, links underline and lighten. No element should feel "dead" on hover.