Switch between the rendered Visual preview and the Raw DESIGN.md.
Savee embodies a minimalist, curated aesthetic designed for visual discovery and creative inspiration. The design system prioritizes clean typography, ample whitespace, and high-contrast navigation against deep, neutral backgrounds. The interface celebrates visual content through a gallery-first approach, with subtle interactive elements that fade into the background, allowing imagery to take center stage. This dark-light duality—from pitch-black navigation to cream-colored content areas—creates an elegant, sophisticated atmosphere that appeals to design professionals and creative practitioners seeking distraction-free inspiration browsing.
Key Characteristics:
#3E2DFF): Primary call-to-action buttons, active navigation states, and premium accent elements#2563EB): Secondary primary interactions, hover states on key UI elements#0039BF): Deepened variant for pressed states and high-contrast sections#CAAFFF): Subtle accent highlights, decorative elements, and premium feature callouts#6B5EFF): Secondary accent for secondary CTAs and tertiary navigation#FAFF00): Warning and alert states requiring user attention#FAFAFA): Primary light background for content areas#FDFDFD): Secondary light background for elevated surfaces#FFFFFF): Maximum brightness for isolated UI elements#E5E5E5): Primary border and divider color#D4D4D4): Secondary borders and subtle separators#A3A3A3): Secondary text and disabled states#737373): Tertiary text for deemphasized content#2C2C31): Footer and low-contrast backgrounds#000000): Deep background for premium sections and overlays#121214): Navigation backgrounds and high-contrast separators#0000 with alpha): Overlay and modal treatmentsPrimary: saveeFont (display-optimized sans-serif)
Fallback stack: system-ui, -apple-system, sans-serif
Secondary: saveeFont (consistent throughout)
Fallback stack: system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | saveeFont | 60px | 500 | 60px | 0px | Primary heading for hero sections |
| Heading 1 | saveeFont | 60px | 500 | 60px | 0px | Page title and major sections |
| Heading 4 | saveeFont | 24px | 500 | 30px | 0px | Section subheadings and card titles |
| Body / Paragraph | saveeFont | 36px | 500 | 40px | 0px | Hero taglines and large body text |
| Link / Navigation | saveeFont | 16px | 400 | 22px | 0px | Navigation links and hyperlinks |
| Caption / Small Text | saveeFont | 14px | 600 | 14px | 0px | Button labels, badges, and captions |
Primary Button
#3E2DFF#FFFFFF16px400saveeFont12px 24px9999pxnone22px46px#2C20CC, scale 1.02#1E1699#D4D4D4, Text Color #A3A3A3Secondary Button (Outlined)
rgba(0, 0, 0, 0)#73737316px400saveeFont12px 20px9999px1px solid #E5E5E522px46px#FAFAFA, Border Color #D4D4D4#E5E5E5, Border Color #A3A3A3Ghost Button
rgba(0, 0, 0, 0)#E5E5E516px400saveeFont0px9999pxnone22px#FFFFFF#CAAFFFContent Card
#FDFDFD1px solid #E5E5E58px24px0px 1px 3px rgba(0, 0, 0, 0.08)#D4D4D4, Shadow 0px 4px 12px rgba(0, 0, 0, 0.12)Image Gallery Card
#FAFAFAnone0px0pxrgba(0, 0, 0, 0.05), scale 1.01Section Container
#FFFFFF or #FAFAFA alternating64px 40px (desktop), 48px 20px (tablet)1280px0 autoText Input
#FFFFFF1px solid #E5E5E56px12px 16px16px40022px#2C2C31#A3A3A3#3E2DFF, Box Shadow 0 0 0 3px rgba(62, 45, 255, 0.1)#DC2626Select Dropdown
#FFFFFF1px solid #E5E5E56px12px 16px16px#2C2C31#D4D4D4#3E2DFF, Box Shadow 0 0 0 3px rgba(62, 45, 255, 0.1)Header Navigation
#12121464px0 40px#A3A3A316px400#FFFFFF, transition 200ms ease#3E2DFFNavigation Link (Auth)
rgba(0, 0, 0, 0)1px solid #E5E5E59999px8px 16px#73737316px40040px#FAFAFA, Border Color #D4D4D4Base unit: 4px (tokens use multiples: 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px, 80px, 112px)
Usage Context:
8px: Compact component spacing, small button padding12px: Input/button internal padding, tight margins16px: Standard padding for small UI elements, margins between inline items20px: Medium padding, form field spacing24px: Card padding, section spacing32px: Large component spacing, feature block margins40px: Horizontal section padding (tablet)48px: Vertical section margins, staggered spacing64px: Gap between major content sections80px: Vertical rhythm for hero sections112px: Maximum spacing between page sections1280px for main content16px (mobile), 24px (tablet), 40px (desktop)Savee prioritizes breathing room over density. Every major section is separated by minimum 64px vertical spacing. Content cards use 24px internal padding. Navigation elements maintain clear visual hierarchy through isolation—text floats in generous whitespace rather than crowding containers. This approach reduces cognitive load and emphasizes curation over quantity.
0px: Gallery images, full-bleed sections6px: Form inputs, subtle container corners8px: Content cards, component containers9999px: Buttons, fully rounded pill shapes| Level | Treatment | Use |
|---|---|---|
| Level 0 (Baseline) | No shadow | Backgrounds, neutral sections |
| Level 1 (Raised) | 0px 1px 3px rgba(0, 0, 0, 0.08) | Standard cards, containers |
| Level 2 (Lifted) | 0px 4px 12px rgba(0, 0, 0, 0.12) | Hover states on cards, active modals |
| Level 3 (Floating) | 0px 12px 24px rgba(0, 0, 0, 0.16) | Dropdowns, popovers, menus |
| Level 4 (Modal) | 0px 20px 40px rgba(0, 0, 0, 0.24) | Full-screen overlays, premium modals |
Shadow Philosophy: Shadows in Savee are subtle and restrained, enhancing visual hierarchy without disrupting the minimalist aesthetic. Elevation increases gradually with interaction intensity. Most UI surfaces use either no shadow or Level 1, reserving higher elevations for interactive states and modal overlays. Shadows always use black with varying opacity rather than colored shadows.
#3E2DFF (Electric Blue) for primary CTAs and actions that require user attention24px padding inside cards and containers9999px border radius exclusively to buttons and pill-shaped elements#A3A3A3 on dark backgrounds, transitioning to #FFFFFF on hover1.5x+ of font size) for body text and headings#FAFAFA and #FDFDFD alternately for section backgrounds to create visual rhythm64px margin60px heading size for hero text and primary page titlesLevel 1 shadows to card hover states, not their default state9999px) with rectangular components—reserve for buttons only14px except in code or specialized contexts1px or use borders other than #E5E5E5 without semantic reason#A3A3A3 baseline and #3E2DFF for active states| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, 20px padding, 16px font base, 40px section margin |
| Tablet | 640px–1023px | 2–4 columns, 32px padding, 20px gutters, 48px section margin |
| Desktop | 1024px+ | 4–12 columns, 40px padding, 24px gutters, 64px section margin |
| Large | 1280px+ | Max-width container, centered, full feature set |
44px × 44px for buttons and interactive elements40px height for input fields8px between adjacent touch targets12px on mobile for easier tapping40px (desktop) → 32px (tablet) → 20px (mobile)60px headings shrink to 36px on tablet, 28px on mobile64px (desktop) → 48px (tablet) → 32px (mobile)#3E2DFF)#2563EB)#FAFAFA)#FDFDFD)#121214)#E5E5E5)#121214)#737373)#A3A3A3)#D4D4D4)#CAAFFF)#FAFF00)Typography First: All text uses saveeFont. Headings are 60px (weight 500), body copy is 36px (weight 500) in hero sections, 16px (weight 400) in navigation, and captions are 14px (weight 600). Line heights always exceed font size for breathing room.
Color Discipline: Background sections alternate between #FAFAFA and #FDFDFD for rhythm. Dark navigation is always #121214. Primary actions use #3E2DFF. Borders are #E5E5E5 by default. Text hierarchy uses #121214 (dark) → #737373 (body) → #A3A3A3 (secondary).
Spacing Scale: Respect the spacing scale (8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 112px). Section margins minimum 64px. Card padding is 24px. Buttons use 12px vertical, 24px horizontal padding. No custom spacing—always pick from the scale.
Button Style: All buttons are 9999px rounded. Primary buttons are #3E2DFF with #FFFFFF text. Secondary buttons are outlined (#E5E5E5 border, #737373 text). Ghost buttons are transparent with #E5E5E5 text, hover to #FFFFFF. Height is always 46px for standard buttons.
Cards & Containers: Default background is #FDFDFD with 1px solid #E5E5E5 border. Padding is 24px. Subtle shadow on hover: 0px 4px 12px rgba(0, 0, 0, 0.12). Use border radius 8px except for images (no radius).
Navigation: Dark background #121214, text #A3A3A3, hover/active text #FFFFFF or #3E2DFF. Links in hero use #E5E5E5 text on #121214 background. Header height is 64px with 0 40px padding.
Inputs & Forms: White background #FFFFFF with 1px solid #E5E5E5 border, 6px radius, 12px 16px padding. Focus state: border #3E2DFF, shadow 0 0 0 3px rgba(62, 45, 255, 0.1). Text color is #2C2C31, placeholder is #A3A3A3.
Shadows Sparingly: Level 1 shadow (0px 1px 3px rgba(0, 0, 0, 0.08)) for cards in default state. Level 2 (0px 4px 12px rgba(0, 0, 0, 0.12)) on hover. No shadows on text or flat backgrounds—reserve elevation for containers only.
Responsive: Mobile uses single column with 20px padding, tablet uses 2–4 columns with 32px padding, desktop uses 4+ columns with 40px padding. Headlines shrink from 60px to 36px (tablet) to 28px (mobile). Section spacing compresses from 64px to 48px to 32px across breakpoints. Touch targets maintain 44px minimum.