Switch between the rendered Visual preview and the Raw DESIGN.md.
Maito embodies a modern, sophisticated editorial platform aesthetic with a premium feel grounded in deep, sophisticated color contrasts. The design balances clean minimalism with vibrant accent colors—predominantly cool blues and teals that evoke professionalism and trust, layered over deep charcoals and pure whites. The visual language emphasizes clarity and hierarchy through generous whitespace, elegant serif typography for display text, and precise sans-serif for functional content. The overall mood is refined yet approachable, designed for creators and founders who demand both aesthetic excellence and functional efficiency. Soft shadows and subtle depth create a polished interface that feels contemporary without sacrificing readability or accessibility.
Key Characteristics
#2563EB): Main brand action color, primary CTAs, highlight accent in UI#60A5FA): Secondary primary applications, supporting accent color#93C5FD): Highlights, emphasis states, accent backgrounds (most frequently used)#BFDBFE): Lighter accent backgrounds, secondary emphasis#34D399): Success states, alternative accent, complementary highlight#A7F3D0): Soft success states, gentle emphasis backgrounds#D1FAE5): Lightest accent tier, subtle backgrounds, gentle overlays#FDE047): Warning alerts, caution indicators, status messaging (primary warning)#FACC15): Secondary warning states, alternative caution messaging#F59E0B): Tertiary warning, high-priority alerts#FFFFFF): Primary background, card surfaces, content containers (most frequent)#FAFAFA): Subtle background tint, secondary surface layer#A8A8A8): Tertiary text, disabled states, placeholder content#808080): Secondary text color, muted content#323232): Tertiary dark element#242424): Primary text color, strong content hierarchy#141414): Deep background, highest contrast element#090909): Darkest backgrounds, deep overlays, high-contrast text (third most frequent)#FFFFFF): Main card and container background#FAFAFA): Secondary container background, slight visual separation#242424): Subtle borders, dividers, separation linesPrimary Display Font: Newsreader (serif)
"Newsreader", "Georgia", "Garamond", serifSecondary Functional Font: Geist Variable (sans-serif)
"Geist Variable", "Helvetica Neue", "Arial", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 | Newsreader | 86px | 300 | 89.6px | 0px | Hero headlines, main landing messaging |
| Display 2 | Newsreader | 60px | 300 | 60px | 0px | Secondary display, section headers |
| Heading 3 | Geist Variable | 17px | 500 | 21.25px | 0px | Subsection headers, card titles |
| Body Large | Geist Variable | 22px | 400 | 30.8px | 0px | Primary content, feature descriptions |
| Body Regular | Geist Variable | 16px | 400 | 24px | 0px | Standard body text, link content |
| Button / Label | Geist Variable | 13px | 500 | 21px | 0px | Button text, badges, labels, small UI elements |
| Caption / Meta | Geist Variable | 13px | 500 | 21px | 0px | Metadata, timestamps, secondary labels |
| Code / Small | Geist Variable | 13px | 400 | 21px | 0px | Code blocks, technical content |
Primary Button (Dark with subtle border)
rgba(255, 255, 255, 0.2)#FFFFFF13px, weight 500, line-height 21px0px 16px40px8px1px solid transparentrgba(2, 3, 6, 0.32) 0px 2px 3px -1px, rgba(32, 37, 50, 0.74) 0px 0px 0px 1pxrgba(255, 255, 255, 0.3)Secondary Button (Solid White)
#FFFFFF#24242413px, weight 500, line-height 21px0px 16px40px8px1px solid rgba(255, 255, 255, 0.2)oklab(0 none none / 0.08) 0px 2px 3px -1px, oklab(0.14 0 0 / 0.1) 0px 0px 0px 1pxrgba(255, 255, 255, 0.95)Ghost Button (Transparent)
rgba(0, 0, 0, 0)#FFFFFF13px, weight 500, line-height 21px0px 16px40px8px0px solid transparentnonergba(255, 255, 255, 0.1)Small Icon Button
rgba(255, 255, 255, 0.2)#FFFFFF16px, weight 400, line-height 24px0px32px32px8px0px solid transparentnonergba(255, 255, 255, 0.3)Standard Card
#FFFFFF8px24px or 40px depending on content density1px solid #FAFAFA or 1px solid #E5E7EBoklab(0.14 0 0 / 0.1) 0px 0px 0px 1px#242424Elevated Card (Featured)
#FFFFFF8px48px1px solid #E5E7EBoklab(0.14 0 0 / 0.1) 0px 2px 8px -1px, oklab(0.14 0 0 / 0.1) 0px 0px 0px 1px#242424Subtle Background Container
#FAFAFA8px24px to 40px1px solid #F3F4F6none#242424Text Input
#FFFFFF1px solid #E5E7EB8px12px 16px16px, weight 400, line-height 24px#242424#A8A8A8#2563EB, box-shadow 0px 0px 0px 3px rgba(37, 99, 235, 0.1)40pxForm Label
13px, weight 500, line-height 21px#2424248pxblockHelper Text
13px, weight 400, line-height 21px#8080806pxHeader Navigation
16px, weight 400, line-height 24px#FFFFFF (primary nav), rgba(255, 255, 255, 0.75) (secondary)48px minimum16px 24px0px solid transparent#FFFFFF with full opacitySidebar Navigation
#FFFFFF13px to 16px, weight 400 to 500#242424#FAFAFA with left border 3px solid #2563EB12px 16px8px#F3F4F6Primary Link
16px, weight 400, line-height 24px#FFFFFF (on dark), #2563EB (on light)none1px solid transparentall 200ms ease-in-outSecondary Link
13px, weight 500, line-height 21pxrgba(255, 255, 255, 0.75) (on dark), #808080 (on light)none1opacity 200ms ease-in-outBase Unit: 8px
Spacing Scale:
8px – Tight gaps between adjacent elements, micro-interactions12px – Small padding within compact components16px – Standard gap between related elements, button padding20px – Comfortable spacing between component sections24px – Standard padding in cards and containers28px – Medium section separation32px – Content margin, moderate vertical spacing40px – Large padding in containers, feature sections48px – Generous container padding, prominent features56px – Major section spacing64px – Large vertical rhythm between page sections80px – Maximum spacing for hero sections and breaksUsage Context:
12px to 16px padding24px to 48px padding56px to 80px64px minimumMax Width: 1200px for primary content containers; 1400px for full-width experiences
Column Strategy:
24px between columnsSection Patterns:
1200px70% / Sidebar 30% with 24px gapMaito employs aggressive whitespace to promote clarity and reduce cognitive load. Every major section is separated by substantial breathing room (minimum 56px vertical margin). Card-based layouts float in generous white backgrounds. Typography sizes and line heights are intentionally generous to prevent visual crowding. This creates a premium, editorial feel that emphasizes content quality over information density.
0px – Structural elements, full-width sections6px – Images, small thumbnails, subtle softening8px – Buttons, inputs, cards, most UI components (primary standard)12px – Large feature cards, prominent containers16px – Extra-large containers, hero sections, major feature blocks50% (fully rounded) – Avatar images, badge elements, circular buttons| Level | Treatment | Use |
|---|---|---|
| None | No shadow, flat | Minimal UI, icons, text-only elements |
| Subtle | rgba(2, 3, 6, 0.32) 0px 2px 3px -1px, rgba(32, 37, 50, 0.74) 0px 0px 0px 1px | Buttons, standard cards, input fields |
| Medium | oklab(0.14 0 0 / 0.1) 0px 2px 8px -1px, oklab(0.14 0 0 / 0.1) 0px 0px 0px 1px | Elevated cards, modals, featured content |
| Deep | oklab(0 none none / 0.08) 0px 2px 12px -1px, oklab(0.14 0 0 / 0.1) 0px 0px 0px 1px | Overlays, dropdowns, maximum elevation |
Shadow Philosophy:
Maito uses restrained, directional shadows that create subtle depth without overwhelming the interface. Shadows employ a consistent light source (top-left) with two-layer construction: a soft blur layer for ambient shadow and a crisp border layer for material separation. This approach maintains visual clarity while establishing hierarchy. Dark backgrounds limit shadow visibility—white surfaces receive more pronounced shadow treatment for perceptual contrast. All shadows are cool-toned (dark gray/black) rather than warm, aligning with the brand's contemporary aesthetic. Transitions between elevation states use smooth 200ms easings to guide user perception.
24px padding in contained spaces8px standard, 6px for images, 12px for prominent features8px-based scale12px: Minimum touch targets and readability16px: Maintain visual cohesion with the component system| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | 4-column grid, full-width containers, 16px padding, 13px body text |
| Tablet | 768px–1023px | 8-column grid, 24px gutters, 16px body text, sidebar collapses |
| Desktop | 1024px–1279px | 12-column grid, 24px gutters, full layout, 22px body text |
| Wide | ≥1280px | 12-column grid with 1200px max-width container, centered layout |
40px height × 40px width for primary interactions32px height (line-height based) with 12px horizontal padding32px minimum on mobile, 40px on desktop40px minimum height with 16px vertical padding48px minimum height for touch-friendly targeting12px gap to prevent accidental activation80px to 40px; headline font scales from 86px to 32px (Display 2)24px gaps48px to 24px; single-column layout below tablet16px minimum; display headlines proportionally reduce while maintaining hierarchy24px padding#2563EB)#FFFFFF)#FFFFFF)#090909)#242424)#242424)#93C5FD)#34D399)#FDE047)#A8A8A8)#FAFAFA)#242424) or off-white edge8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 56px, 64px, or 80px; no in-between valuesrgba(255, 255, 255, 0.2)), white text, 8px border-radius, 13px font, 16px horizontal padding, minimum 40px height1px subtle border, 8px radius, 24px–48px padding depending on content<768px), scale up typography and spacing proportionally, stack multi-column layouts vertically40px56px–80px between sections), elegant serif headlines, sophisticated dark/light contrast, restraint in visual decoration