Switch between the rendered Visual preview and the Raw DESIGN.md.
Luviio is a bold, unapologetically confident design system built for creative technologists and vibe coders. The visual language embraces high-contrast typography, tactile depth, and earthy warmth—combining warm neutrals and sage tones with striking crimson accents that demand attention. Every component feels printed rather than floating, grounded by razor-sharp 2px shadows and intentional spacing. The system radiates energy and personality while maintaining clarity and accessibility, making it equally at home in experimental interfaces and production applications. It's a design system that refuses to whisper.
Key Characteristics
#AB1509): Primary call-to-action buttons, active states, critical UI signals, and brand identity. High impact, demands interaction.#8A1107): Hover and pressed states for primary elements; deepens interaction feedback.#8B8B7A): Secondary accents and muted highlights; brings earthy calm to layouts.#5C5C4F): Tertiary accent for subtext emphasis and secondary UI elements.#E6D8C3): Soft accent borders, input placeholders, and warm dividers; humanizes cold interfaces.#C2A68C): Subtle text overlays and warm text tints for secondary copy.#0000EE): Web-standard hyperlink color for semantic link identification.#6B7280): Secondary interactive elements and muted buttons.#000000): Primary text, high-contrast headings, borders, and hard shadows; the system's dominant text color.#151515): Slightly softened black for body text on cream backgrounds.#333333): Reduced-contrast body text for secondary information.#7A7F86): Muted secondary text and helper labels.#E6E6E6): Subtle dividers and hairline borders.#FDF0EE): Warm, off-white primary background; suggests paper and earthiness.#F5F5F0): Input backgrounds, card surfaces, and secondary container fills.#FFFFFF): Pure white overlays, modals, and elevation surfaces.#E6D8C3): Input borders, card dividers, and soft separation lines; warm and welcoming.#E64B3C): Error states, validation failures, and destructive actions; distinct from brand crimson.Primary Font: DM Sans
'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
DM Sans is the workhorse geometric sans-serif driving the system's weight-forward personality. Used for headings, body copy, inputs, and most UI labels.
Secondary Font: Space Mono
'Space Mono', 'Courier New', monospace
Space Mono is a fixed-width typeface reserved for navigation links and code-adjacent UI where monospace personality adds character.
Fallback Font: Arial
Arial, sans-serif
Arial serves as fallback for button elements and legacy contexts where font loading may fail.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | DM Sans | 76px | 900 | 82px | 0px | Hero headlines; maximum impact |
| Display Large | DM Sans | 52px | 900 | 57.2px | 0px | Section headings; bold confidence |
| Heading 3 | DM Sans | 22px | 800 | 33px | 0px | Subsection titles; strong hierarchy |
| Heading 4 | Space Mono | 12px | 700 | 24px | 0px | Secondary labels; monospace accent |
| Body | DM Sans | 12px | 400 | 24px | 0px | Body copy and default text |
| Body Compact | DM Sans | 15px | 400 | 24px | 0px | List items and slightly larger body |
| Button / UI | Arial | 13.3px | 400 | normal | 0px | Button and form labels |
| Span / Label | DM Sans | 11px | 600 | 24px | 0px | Badges, tags, and inline labels |
| Input | DM Sans | 16px | 400 | normal | 0px | Form input text and placeholders |
| Link | Space Mono | 20px | 700 | 24px | 0px | Primary navigation links; monospace presence |
#AB1509#FFFFFF10px 22px2px solid #00000012px#000000 2px 2px 0px 0px43.5px#8A1107, shadow intensifies1px 1px 0px 0px2px solid #000000, offset 2px#AB1509#FFFFFF14px 24px2px solid #00000012px#000000 2px 2px 0px 0px51.5px#8A11071px 1px 0px 0px2px solid #000000, offset 2pxtransparent#00000010px 22px2px solid #00000012px#000000 2px 2px 0px 0px43.5px#F5F5F01px 1px 0px 0px2px solid #000000, offset 2pxtransparent#0000008px 10px12pxrgba(0, 0, 0, 0.04)rgba(0, 0, 0, 0.08)2px solid #000000#F5F5F0#00000036px 28px1px solid #E6D8C316pxrgba(171, 21, 9, 0.08) 0px 4px 32px 0px, rgba(0, 0, 0, 0.05) 0px 1px 6px 0px24pxrgba(171, 21, 9, 0.12) 0px 6px 40px 0px#AB1509 within cards#FFFFFF1px solid #E6D8C316px32px 36pxrgba(0, 0, 0, 0.06) 0px 4px 20px 0pxrgba(171, 21, 9, 0.1)#AB15094px 12px9999px1px solid rgba(171, 21, 9, 0.2)24px#F5F5F0#00000016px 20px2px solid #00000012px57px#8B8B7A2px solid #AB1509, box shadow inset 0px 0px 0px 1px #AB15092px solid #E64B3C, background tint rgba(230, 75, 60, 0.02)#F5F5F0#00000013px 16px2px solid #E6D8C312px50px#8B8B7A2px solid #AB1509, background #FFFFFF2px solid #E64B3C18px × 18px2px solid #0000004px (checkbox), 50% (radio)#FFFFFF#AB15092px solid #AB15092px solid #000000, offset 2pxtransparent / #FFFFFF (on scroll)44px0px 40px#000000#000000#AB15091px solid #E6E6E6 (on scroll)rgba(0, 0, 0, 0.06) 0px 4px 20px 0px (on scroll)#0000000px 0px#AB1509, underline 2px solid #AB1509#AB1509, underline 2px solid #AB1509#0000004px 0px#AB1509#AB1509, underline 1px solid #AB1509#7A7F86/ in #7A7F86#000000, weight 600#AB1509Base Unit: 4px
Spacing Scale (multiples of 4px):
4px: Micro spacing (inline padding, tight lists)8px: Compact spacing (button groups, small gaps)12px: Comfortable spacing (form labels, list items)16px: Standard padding (input fields, standard container padding)20px: Section gap (between logical groups)24px: Medium margin (section headings, card stacks)28px: Large margin (major section breaks)32px: Substantial padding (card internals, large containers)36px: Extra-large padding (hero sections, feature cards)40px: Padding threshold (main container padding)44px: Extra margin (page sections)48px: Rhythm gap (between major sections)Usage Context:
10px–14px vertical, 22px–24px horizontal16px 20px padding36px 28px padding40px–48px between sections16px between interactive elements1440px (viewport-relative, centered)40px on desktop, 20px on tablet, 16px on mobileWhitespace is active and intentional. Never crowd elements; let components breathe. The system embraces generous margins and padding to reduce cognitive load and guide visual hierarchy. Whitespace creates calm within bold typography and color choices.
4px: Images, small nested elements6px: Compact UI components, avatar frames12px: Primary buttons, input fields, secondary containers16px: Feature cards, major containers, modals9999px: Badges, pill-shaped buttons, circular avatars| Level | Treatment | Use |
|---|---|---|
| Base | No shadow, border: 1px solid #E6D8C3 | Input fields, text layers, default surface |
| Raised | #000000 2px 2px 0px 0px | Buttons, interactive elements, tactile feedback |
| Soft Elevation | rgba(171, 21, 9, 0.08) 0px 4px 32px 0px, rgba(0, 0, 0, 0.05) 0px 1px 6px 0px | Feature cards, content containers, subtle depth |
| High Elevation | rgba(0, 0, 0, 0.06) 0px 4px 20px 0px | Navigation bars (on scroll), floating elements |
| Pressed | #000000 1px 1px 0px 0px | Active button states, compressed feedback |
Shadow Philosophy: Luviio uses printed, tactile shadows rather than soft floating shadows. The signature 2px hard offset on buttons creates a "paper lifted from page" effect. Larger containers use subtle soft shadows (brand-color tinted) for depth without artificiality. Shadows always include a black outline shadow and a soft atmospheric shadow to anchor elements to the page.
#E6D8C3) on light backgrounds for softness; use black borders on primary elements for strength.#AB1509) for primary CTAs, active states, and critical signals.#333333, #5C5C4F) instead.12px vertical gap.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 360px–599px | Single column, 16px padding, 44px touch targets, stacked buttons |
| Tablet | 600px–1023px | Two-column grids, 24px padding, 48px touch targets, side-by-side buttons |
| Desktop | 1024px–1439px | Three-column grids, 32px padding, flexible layouts, full navigation |
| Large Desktop | 1440px+ | Centered max-width container, four-column grids, full-width sections |
44px × 44px (mobile and tablet)48px × 56px (buttons, form fields)44px × 44px inside transparent wrapper8px between adjacent links50px (tablet/mobile), 57px (desktop)40px (desktop) → 24px (tablet) → 16px (mobile)14px on mobile if needed20px–24px rhythm on mobile; don't compress below 12px#AB1509) — use for "Start Building", main action buttons#8A1107)#FDF0EE) or Light Neutral (#F5F5F0)#FFFFFF)#000000)#000000), or Charcoal Text (#333333) for secondary#F5F5F0)#E6D8C3)#E6D8C3)#E64B3C)#000000) or Crimson Brand (#AB1509) for active#000000), 2px solid, offset 2px#E6D8C3) or Light Gray (#E6E6E6)Start with Crimson — Every primary CTA button is #AB1509 with #000000 border and 2px 2px 0px 0px shadow. This is the system's calling card.
Typography is Weight, Not Size — Use DM Sans 900 for h1 (76px), 900 for h2 (52px), 800 for h3 (22px). Hierarchy comes from weight. Do not scale down headlines; restructure content.
Shadows are Printed, Not Floating — All interactive elements get #000000 2px 2px 0px 0px shadow (buttons, cards). Hover adds depth, press reduces to 1px 1px 0px 0px. Large containers get soft colored shadow: rgba(171, 21, 9, 0.08) 0px 4px 32px 0px.
Spacing Locks to 4px Grid — All padding, margin, and gaps are multiples of 4px. Buttons: 10px 22px. Cards: 36px 28px. Sections: 40px–48px. Never improvise spacing.
Warm Borders on Light, Black on Dark — Input and card borders use #E6D8C3 (warm beige) for softness. Primary buttons and navigation use #000000 for boldness. Maintains visual hierarchy.
Border Radius Scales with Prominence — Inputs and secondary elements: 12px. Cards and containers: 16px. Badges and pills: 9999px. Images: 6px.
Contrast is Non-Negotiable — Black text on cream (#FDF0EE), white on crimson. All body copy must meet 7:1 WCAG AA. Test before ship.
Focus Rings Always Visible — Every button, input, and link gets outline: 2px solid #000000 on :focus. Accessibility is required, not optional.
Mobile Touch Targets are 44px Minimum — All interactive elements at 600px and below must be at least 44px × 44px. Pad button internals or wrap in transparent bounding box.
Card Hierarchy via Padding and Shadow — Standard feature card: 36px 28px padding, #F5F5F0 background, 1px solid #E6D8C3 border, soft red-tinted shadow. Copy this pattern; don't invent new card types.