Switch between the rendered Visual preview and the Raw DESIGN.md.
Luviio is a bold, unapologetically vibrant design system crafted for creative technologists and vibe coders. It marries earthy warmth with razor-sharp precision, delivering high-contrast typography and tactile components that feel almost printable through the screen. The aesthetic is grounded yet energetic—rooted in sage greens, warm clay tones, and deep blacks that create a sense of intentional calm paired with visual punch. Every shadow is hard-edged and deliberate, never floating; every margin and padding follows a rigid 4px grid. This system celebrates weight-driven hierarchies, geometric clarity, and accessible-by-default interactions. It's designed for builders who want breathing room, confidence in their choices, and components that ship ready to go.
Key Characteristics
#AB1509): Primary action buttons, key brand accents, and high-priority CTAs. Most frequently used across the system (316 instances).#8A1107): Hover and active states for primary red; a darker, more intense variant.#5C5C4F): Secondary visual accents and refined calming elements; used for depth and visual rest.#8B8B7A): Tertiary accent color for metadata, secondary text, and supporting information.#E6D8C3): Soft, warm accent used in borders and light UI elements; pairs with primary red for balance.#C2A68C): Subtle warm tone for hover states and soft interactive feedback.#6B7280): Neutral gray for secondary iconography and subtle dividers.#0000EE): External links and web-standard link color; used sparingly for distinction.#E64B3C): Error messages, validation failures, and danger states.#000000): Primary text, bold headings, and foreground elements (528 instances—most used color).#151515): Subtle variations on black; very dark backgrounds or ultra-high contrast text.#333333): Secondary text and muted elements.#7A7F86): Placeholder text and disabled states.#E6E6E6): Fine dividers and minimal borders.#FDF0EE): Primary light surface for hero sections and full-width containers.#F5F5F0): Secondary light surface for cards, inputs, and contained sections; slightly warmer than pure white.#FFFFFF): Raised surfaces and pure contrast overlays.#E6D8C3): Input and card borders; soft yet defined separation.Primary: DM Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Secondary: Space Mono, "Courier New", monospace
Fallback: Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | DM Sans | 76px | 900 | 82px | Normal | Hero headline; maximum visual impact |
| Heading / H2 | DM Sans | 52px | 900 | 57.2px | Normal | Section headline; bold authority |
| Subheading / H3 | DM Sans | 22px | 800 | 33px | Normal | Card title and module heading |
| Heading / H4 | Space Mono | 12px | 700 | 24px | Normal | Uppercase label; technical, monospace voice |
| Body / Paragraph | DM Sans | 16px | 400 | 24px | Normal | Primary body text; comfortable reading |
| Body Small | DM Sans | 12px | 400 | 24px | Normal | Secondary body text and descriptions |
| List Item | DM Sans | 15px | 400 | 24px | Normal | List and bullet content |
| Span / Tag | DM Sans | 11px | 600 | 24px | Normal | Badge and label text; semi-bold emphasis |
| Link | Space Mono | 20px | 700 | 24px | Normal | Primary navigation link; monospace emphasis |
| Input / Form | DM Sans | 16px | 400 | Normal | Normal | Form field text; comfortable tap target |
| Button | DM Sans or Arial | 13px–15px | 700 or 400 | 19.5px or Normal | Normal | Action text; varies by button variant |
normal for compact inline rendering.#000000) on light surfaces; avoid colored text for readability.#AB1509 (Luviio Red)#FFFFFF (White)10px 22px (small variant) or 14px 24px (large variant)2px solid #000000 (black outline)12px#000000 2px 2px 0px 0px (hard offset shadow)43.5px (small) or 51.5px (large)#8A1107; shadow intensifies to #000000 3px 3px 0px 0px#000000 1px 1px 0px 0px; background remains #8A11072px solid #0000EE outline offset by 4px#FFFFFF or transparent#000000 (Black)10px 22px2px solid #00000012px#000000 2px 2px 0px 0px43.5px#F5F5F0; text remains black; shadow intensifies to 3px 3px 0px 0px#E6E6E6; shadow collapses to 1px 1px 0px 0px2px solid #0000EE outline offset by 4px#000000 or #AB1509 (context-dependent)8px 10px1px solid transparent for alignment)12px#F5F5F0; shadow adds #000000 1px 1px 0px 0px#E6E6E6#F5F5F0 (Off White)#000000 (Black)36px 28px1px solid #E6D8C3 (warm border)16pxrgba(171, 21, 9, 0.08) 0px 4px 32px 0px, rgba(0, 0, 0, 0.05) 0px 1px 6px 0px (soft brand-tinted shadow)24pxrgba(171, 21, 9, 0.12) 0px 6px 40px 0px263px (standard content card)#F5F5F036px 28px1px solid #E6D8C316px#AB1509 (red icon top-left)#5C5C4F#F5F5F0 (Off White)#000000 (Black)16px 20px2px solid #000000 (default state) or 2px solid #E6D8C3 (compact variant)12px57px (large) or 50px (compact)#7A7F86 (Stone Gray)2px solid #AB1509; outline ring 2px solid #AB1509 offset by 2px2px solid #E64B3C; error text below in #E64B3C, 12px, weight 400#F5F5F0#00000013px 16px2px solid #E6D8C3 (warm border)12px50px2px solid #AB150920px × 20px2px solid #0000004px (checkbox) or 50% (radio)#AB1509#FFFFFF2px solid #0000EE outline offset by 2px#FFFFFF or transparent#000000 (default) or #AB1509 (active/hover)0px (nav items flow naturally)44px (touch-safe minimum)#AB1509; underline appears 2px solid #AB1509 offset by 2px#AB1509; underline persistent#AB1509#FFFFFF10px 22px2px solid #00000012px#000000 2px 2px 0px 0px#8A1107#FDF0EE (Cream)#AB1509 (Red)4px 12px1px solid #E6D8C39999px (fully rounded)24px#FDF0EE1px solid #E6D8C3#AB15096px 12px9999pxBase Unit: 4px
Scale:
4px: Micro-spacing within dense components (gap between icon and text)8px: Tight spacing between related elements12px: Small margin for minor sections16px: Standard padding for inputs and buttons20px: Gap between component clusters24px: Margin for subsections within a card28px: Card internal padding (horizontal)32px: Standard padding for larger containers36px: Card internal padding (vertical); section padding40px: Large section padding44px: Hero section spacing; navigation height48px: XL gap between major sectionsUsage Context:
10px 22px to 14px 24px (padding)36px 28px (padding)16px 20px (large) or 13px 16px (compact)48px vertical margin8px or 12px gapsMax Width: 1440px (desktop container) with 40px side padding
Column Strategy:
12px gutter12px gutter12px gutterSection Pattern:
900px text width)1440pxSpace is intentional and earned. Every margin and padding follows the 4px base unit; no arbitrary values. Sections breathe with 48px gaps between them, creating rhythm and preventing cognitive overload. Within cards, 36px padding top/bottom and 28px left/right create calm, focused reading zones. Input fields and buttons maintain 16px padding for comfortable interaction. The system favors generous margins over cramped layouts—vibe coders deserve room to think.
4px: Minimal radius on small containers; subtle rounding on images6px: Image corner radius; small component rounding12px: Button and input radius; primary interaction elements16px: Card and large container radius; generous rounded feel9999px: Fully rounded badges and pill-shaped elements| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; box-shadow: none | Ghost buttons, transparent overlays, minimal UI |
| Ground (sm) | rgba(171, 21, 9, 0.08) 0px 4px 32px 0px, rgba(0, 0, 0, 0.05) 0px 1px 6px 0px | Cards, light depth, subtle brand tint |
| Raised (md) | #000000 2px 2px 0px 0px (hard offset) | Buttons, form inputs, clickable surfaces |
| Floating (lg) | rgba(0, 0, 0, 0.06) 0px 4px 20px 0px | Modals, dropdowns, navigation overlays |
| Tactile (xl) | #000000 3px 3px 0px 0px (intensified offset) | Button hover states, highly interactive surfaces |
Shadow Philosophy:
Luviio rejects floating, diffuse shadows in favor of hard, printed edges. The 2px offset shadow on buttons and inputs creates a tactile, grounded feel—as if the component sits on the page, not suspended above it. Softer shadows (sm, lg) reserved for cards and containers use a subtle brand-tinted blur to add depth without losing the printed aesthetic. Hover states intensify the offset (3px) to signal readiness. This approach reinforces the system's commitment to clarity and intentional interaction—every shadow has a purpose and weight.
#000000; all text on dark backgrounds is #FFFFFF. Avoid colored text except for links and errors.44px height; links 32px target zone. Never go below 24px for interactive hit areas.#E6D8C3. This warm tone creates soft, intentional separation without harsh contrast.#AB1509 red sparingly for primary CTAs. It is the loudest color; overuse dilutes impact. Secondary actions should default to ghost or secondary button styles.2px solid #0000EE offset by 2px.#AB1509 or #0000EE) and error states (#E64B3C).4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px.12px buttons, 16px cards.opacity: 0.5) or change text color to #7A7F86 with a subtle background shift.#000000 black for body text on colored backgrounds. Drop opacity to rgba(0, 0, 0, 0.9) or switch to a lighter neutral if contrast fails.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 360px–599px | 4-column grid, single-column cards, 40px side padding reduced to 16px, 12px gap between items, full-width buttons |
| Tablet | 600px–1023px | 8-column grid, 2-column card layout, 32px side padding, 16px gap, buttons scale to 90% width in forms |
| Desktop | 1024px–1439px | 12-column grid, 3-column card layout, 40px side padding, max-width container 1200px, full-width buttons optional |
| Wide | 1440px+ | 12-column grid, max-width container 1440px centered, consistent 40px side padding, comfortable spacing for extended layouts |
44px × 44px for all buttons and interactive elements10px 22px (height 43.5px)32px height; ensure text sits comfortably within this zone50px–57px height depending on size variant20px × 20px with 8px margin around for accurate touch44px height; 16px horizontal padding between nav linksMobile (360px–599px):
36px 28px → 24px 16px (cards)76px → 52px, h2 52px → 36px (inferred)Tablet (600px–1023px):
36px 28px12px gutterDesktop (1024px+):
1200px–1440px; center on screen1200px+ width#AB1509) — buttons, badges, active states#000000) — all body text and headings on light backgrounds#F5F5F0) — cards, inputs, secondary surfaces#FDF0EE) — full-width hero and marquee sections#E6D8C3) — input and card borders#5C5C4F) — callouts and supporting text#E64B3C) — validation and warning messages#0000EE) — external links; red (#AB1509) for internal CTAs#7A7F86) — placeholder and disabled statesrgba(171, 21, 9, 0.08) 0px 4px 32px 0px, rgba(0, 0, 0, 0.05) 0px 1px 6px 0px#000000 2px 2px 0px 0px (hard offset, never blur-only)Start with typography. All headings use DM Sans at weights 900 (h1/h2) or 800 (h3); body text is 16px weight 400. Never deviate from these anchor values without design review.
Apply the 4px grid strictly. Every spacing value must be divisible by 4px. Padding, margins, gaps, and line-height must align to the scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px.
Use hard shadows on interactive elements only. Buttons and form inputs: #000000 2px 2px 0px 0px. Cards: soft brand-tinted rgba(171, 21, 9, 0.08) 0px 4px 32px 0px. Never apply blur-only shadows to buttons.
Respect the color hierarchy. Primary actions are #AB1509; secondary actions are ghost or outlined black (2px solid #000000). Limit brand red use to maximize impact. All text defaults to #000000 on light surfaces, #FFFFFF on dark.
Enforce minimum touch targets. All clickable elements (buttons, inputs, nav items, links) must be at least 44px × 44px or equivalent hit zone. Form inputs minimum 50px height; buttons minimum 43.5px.
Border and radius consistently. Inputs and buttons: 12px. Cards: 16px. Badges: 9999px. Images: 6px. Never mix radii within the same component type.
Test at mobile first (360px), then tablet (600px), then desktop (1440px). Ensure single-column mobile layouts collapse gracefully; tablet uses 2 columns for cards; desktop shows full 3-column grids and expanded navigation.
Add focus rings to every interactive element. outline: 2px solid #0000EE; outline-offset: 2px. Non-negotiable for accessibility and keyboard navigation.
Use Space Mono only for navigation and links (20px weight 700 for logo; 14px weight 500 for nav items). All other text is DM Sans.
Validate contrast ratios. Primary text (#000000) on #F5F5F0 = WCAG AAA. Links (#AB1509) on #FFFFFF = WCAG AA. If contrast fails, increase text weight or adjust background; never reduce font size as a workaround.