Back to DesignMD
elena “elena occhioni” occhioni
Generated Jun 21, 2026
C
elena “elena occhioni” occhioni
Generated Jun 21, 2026
Switch between the rendered Visual preview and the Raw DESIGN.md.
Cupertino embodies a refined, contemporary luxury aesthetic that merges high-end artistic direction with strategic business clarity. The visual language is deliberately minimalist yet bold—pristine backgrounds frame carefully composed imagery, while typography remains sparse and purposeful. The atmosphere is sophisticated and aspirational, avoiding clutter in favor of breathing space and deliberate contrast. This is a design system for brands that blur the boundary between art and commerce, presenting themselves as thoughtful strategists rather than conventional service providers. The overall mood is calm confidence with occasional bursts of visual impact, achieved through extreme tonal separation and meticulous whitespace management.
Key Characteristics
#000000): Primary background, dominant text color, structural element providing maximum contrast and visual anchor#212121): Secondary text, navigation elements, subtle interactive states requiring distinction from pure black#FBFBF9): Page backgrounds, card surfaces, provides warmth against pure black without clinical sterility#000000): Default link state, inherits from primary text; underline or opacity change on hover#212121): Secondary navigation links; maintains hierarchy through weight and position rather than color#FBFBF9): Primary container background, all card and panel backgrounds#212121): Subtle borders, section separators, maintains visual continuity without contrast shockPrimary (Display & Headers): Stack Sans Text, fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif Secondary (Headings & UI): Roboto Condensed, fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif Accent (Emphasis & Labels): Messapia Bold, fallback: "Courier New", monospace Body (Prose & Navigation): Times New Roman, fallback: Georgia, serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Stack Sans Text | 80px | 200 | 96px | -0.5px | Hero headlines, dramatic impact |
| Display L | Stack Sans Text | 60px | 200 | 72px | -0.3px | Primary page titles |
| Heading L | Roboto Condensed | 26px | 300 | 31.2px | 0px | Section titles, card headers |
| Body Feature | Messapia Bold | 115.2px | 400 | 230.4px | 0px | Large typographic moments, emphasis |
| Body M | Times New Roman | 16px | 400 | 16px | 0px | Standard body text, links, captions |
| UI Label | Messapia Bold | 11px | 400 | 26.4px | 0px | Navigation, UI controls, metadata |
Default State
background-color: rgba(0, 0, 0, 0)color: #212121font-size: 11pxfont-weight: 400font-family: "Messapia Bold"padding: 0pxborder-radius: 0pxborder: nonebox-shadow: noneheight: 26pxline-height: 26.4pxHover State
opacity: 0.7color: #000000transition: opacity 200ms ease, color 200ms easeActive State
color: #000000border-bottom: 2px solid #000000padding-bottom: 2pxDefault State (Body)
background-color: rgba(0, 0, 0, 0)color: #000000font-size: 16pxfont-weight: 400font-family: "Times New Roman"padding: 0pxborder-radius: 0pxborder: nonebox-shadow: noneline-height: 16pxtext-decoration: underlinetext-decoration-thickness: 1pxtext-underline-offset: 3pxHover State
opacity: 0.65transition: opacity 200ms easeFocus State
outline: 2px solid #212121outline-offset: 2pxDefault State
background-color: #000000color: #FBFBF9font-size: 14pxfont-weight: 400font-family: "Messapia Bold"padding: 16px 32pxborder-radius: 0pxborder: nonebox-shadow: noneheight: autoline-height: 16.8pxtext-transform: nonecursor: pointerHover State
background-color: #212121transition: background-color 200ms easeActive State
background-color: #000000opacity: 0.8Disabled State
background-color: #FBFBF9color: #212121opacity: 0.5cursor: not-allowedDefault State
background-color: transparentcolor: #000000font-size: 14pxfont-weight: 400font-family: "Messapia Bold"padding: 16px 32pxborder: 2px solid #000000border-radius: 0pxbox-shadow: noneheight: autoline-height: 16.8pxcursor: pointerHover State
background-color: #000000color: #FBFBF9border-color: #000000transition: background-color 200ms ease, color 200ms easeActive State
background-color: #212121border-color: #212121Default State
background-color: #FBFBF9border: noneborder-radius: 0pxpadding: 48pxbox-shadow: noneWith Divider
border-top: 1px solid #212121border-bottom: 1px solid #212121padding: 48px 0pxOverlay Card (Dark)
background-color: rgba(0, 0, 0, 0.85)color: #FBFBF9padding: 64pxborder-radius: 0pxText Input - Default
background-color: #FBFBF9color: #000000font-size: 16pxfont-family: "Times New Roman"padding: 12px 16pxborder: 1px solid #212121border-radius: 0pxline-height: 16pxText Input - Focus
border: 2px solid #000000outline: nonebox-shadow: noneText Input - Filled
background-color: #FBFBF9border: 1px solid #000000Placeholder Text
color: #212121opacity: 0.6Form Label
font-size: 11pxfont-weight: 400font-family: "Messapia Bold"color: #000000line-height: 13.2pxtext-transform: nonemargin-bottom: 8pxCaption Text
font-size: 14pxfont-weight: 400font-family: "Times New Roman"color: #212121line-height: 16.8pxBase Unit: 8px
Scale:
8px: Tight spacing, icon padding12px: Input padding, small gaps16px: Standard component padding24px: Section margins, moderate breathing room32px: Large gaps, container padding48px: Generous section padding64px: Major section separation100px: Hero section margins120px: Page-level spacingUsage Context:
1440px for content containers32px between columns; increases to 48px for featured content120px top/bottom for major sections; 100px for subsectionsWhitespace is not filler—it is structure. The design employs extreme contrast between dense typography moments and completely empty areas. Large images float in void, single headlines span full widths with minimal content below, and negative space creates reading rhythm. This approach privileges clarity and deliberation over maximizing information density.
0px: All UI elements (buttons, inputs, cards, containers)—sharp edges maintain geometric precision| Level | Treatment | Use |
|---|---|---|
| Base | box-shadow: none | Standard surfaces, containers, default UI state |
| Raised | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) | Floating panels, modal overlays, hover states |
| Floating | box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.16) | Dropdowns, tooltips, modal dialogs, emphasis |
| Maximum | box-shadow: 0px 16px 64px rgba(0, 0, 0, 0.20) | Full-screen overlays, critical modals, hero imagery |
Shadow Philosophy The design system employs minimal elevation. Most components sit flat on surfaces with no shadow; elevation is reserved for interactive moments (hover, modal) or content that requires visual separation. Shadows use pure black with high transparency to maintain cohesion with the monochromatic palette. Offset is always vertical; no horizontal spread preserves geometric purity.
#000000) and charcoal (#212121) as primary contrast driversborder-radius: 0px across all components48px margins; major sections with 100px+#000000, #212121, #FBFBF9)0.6 on hover states; ensure sufficient contrast| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column, 100% width; 48px margins; heading sizes reduce by 20%; stacked navigation |
| Tablet | 768px–1199px | 6-column grid; heading sizes reduce by 10%; 64px margins; navigation condenses to hamburger |
| Desktop | 1200px–∞ | 12-column grid; full typography scale; 100–120px section margins; horizontal navigation |
44px for all interactive elements (buttons, links, form fields)44px for buttons and touch controls12px minimum around touch targets to prevent accidental activation24px minimum vertical spacing between interactive elements48px (desktop) to 32px (tablet) to 16px (mobile)120px to 80px to 48px across breakpoints100% on mobile; gutters reduce to 16px#000000)#212121)#FBFBF9)#212121)#000000) with underline, opacity 0.65 on hoverborder-radius: 0px—maintain sharp geometric forms across UI#000000 on #FBFBF9 is the baseline; use only for maximum legibilityline-height ≥ 120% of font size100px+ spacingbox-shadow: none11px weight 400