---
version: alpha
name: Dayos
description: "A wall of black grotesque caps beside candy-bright, terrazzo-speckled 3D ERP blocks."
colors:
  on-surface-variant: "#979797"
  on-surface: "#000000"
  surface: "#e5e5e5"
  error: "#c9372c"
  primary: "#fff100"
  white: "#ffffff"
  grey-100: "#f3f3f3"
  grey-600: "#444444"
  grey-800: "#2f2f2f"
  dark-surface: "#1a1a1a"
  green-vivid: "#00fd74"
  green-tint: "#d1ffca"
  green-deep: "#0a2d05"
  pink-vivid: "#ff7ef2"
  pink-tint: "#ffd5f8"
  pink-deep: "#3d0e35"
  blue-vivid: "#00d1ff"
  orange-vivid: "#ff6838"
  purple-vivid: "#8000ff"
typography:
  caption:
    fontFamily: Suisse Intl
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Suisse Intl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: Suisse Intl
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Suisse Intl
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Suisse Intl
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  subheading:
    fontFamily: Suisse Intl
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Suisse Intl
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  title:
    fontFamily: Suisse Intl
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  display-s:
    fontFamily: Suisse Intl
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.015em
  display:
    fontFamily: Suisse Intl
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: -0.02em
  display-xl:
    fontFamily: Suisse Intl
    fontSize: 130px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
rounded:
  small-chip-inline: 4px
  input-small-control: 8px
  control: 10px
  button-tag: 12px
  card: 24px
  panel: 32px
  large-panel: 48px
  hero-block-feature: 64px
spacing:
  p0: 0.4rem
  p1: 0.8rem
  p2: 1.6rem
  p3: 2.4rem
  p4: 3.2rem
  p5: 4.0rem
  p6: 4.8rem
  p8: 6.4rem
  p10: 8.0rem
  section-margin: 9.6rem
  nav-height: 8rem
---
# Dayos — Style Reference
> A wall of black grotesque caps beside candy-bright, terrazzo-speckled 3D ERP blocks.

**Theme:** mixed

Dayos runs a light-dominant editorial canvas — near-white greys under enormous black uppercase display type — and then detonates it with a six-hue chromatic block system (yellow, green, pink, blue, orange, purple), each hue carrying three tones: a vivid pop, a pastel tint, and a near-black deep shade for the same family. The signature move is scale and contrast: a headline set in heavy Suisse Intl at 130px, tracked razor-tight, left-aligned against a bone-grey field, paired with playful 3D-rendered blocks that stack legacy-ERP logos (SAP, Oracle, ServiceNow) as speckled concrete masses. Typography is a single grotesque worked across four weights, with a condensed cut and a mono cut held in reserve. Layout is a wide 12-column grid (up to 2560px) with a floating pill nav and generous 8rem side margins. Neutrals do the structural work; the chromatic families are reserved for imagery, section panels, and pillar accents — never scattered.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--cl-black` | Primary text, hero display caps, the header CTA pill fill. The workhorse ink. |
| White | `#ffffff` | `--cl-white` | Base page background (`--cl-bg1`), card fill, text on dark/chromatic panels. |
| Grey 100 | `#f3f3f3` | `--cl-grey-100` | Secondary surface (`--cl-bg2`) — the floating nav pill, secondary button fill. |
| Grey 200 | `#e5e5e5` | `--cl-grey-200` | Hero canvas wash and hairline borders; the quiet stage the caps stand on. |
| Grey 500 | `#979797` | `--cl-grey-500` | Muted / secondary text, disabled labels, mid borders. |
| Grey 600 | `#444444` | `--cl-grey-600` | Nav link text, tertiary label ink — one notch softer than pure black. |
| Grey 800 | `#2f2f2f` | `--cl-grey-800` | Dark section surface, footer ground. |
| Dark surface | `#1a1a1a` | *(inferred)* | Near-black panel background for inverted sections (measured, unnamed in tokens). |
| Yellow | `#fff100` | `--cl-yellow` | The loudest brand pop — 3D blocks, highlight fills. Editorial energy, not a CTA color. |
| Green Vivid | `#00fd74` | `--cl-green-1` | Saturated acid green accent; sparingly, for highlights and marks. |
| Green Tint | `#d1ffca` | `--cl-green-2` | Pastel pillar surface (`--cl-pillar1`) — soft panel background. |
| Green Deep | `#0a2d05` | `--cl-green-3` | Near-black green (`--cl-pillar2`) — deep panel / text-on-tint pairing. |
| Pink Vivid | `#ff7ef2` | `--cl-pink-1` | Bright magenta block accent seen in the hero render. |
| Pink Tint | `#ffd5f8` | `--cl-pink-2` | Pastel pink panel surface. |
| Pink Deep | `#3d0e35` | `--cl-pink-3` | Near-black plum for inverted pink panels. |
| Blue Vivid | `#00d1ff` | `--cl-blue-1` | Cyan accent, matched tint/deep pair below. |
| Orange Vivid | `#ff6838` | `--cl-orange-1` | Warm coral accent, matched tint/deep pair. |
| Purple Vivid | `#8000ff` | `--cl-purple-1` | Electric violet accent, matched tint/deep pair. |
| Error | `#c9372c` | `--cl-error-1` | System red for validation states only — never decorative. |

*Each chromatic family (green, pink, blue, orange, purple) ships as a matched triad — `-1` vivid, `-2` tint, `-3` near-black deep — plus `-2` error. The full triads are frozen intact in Quick Start; the table features the load-bearing roles a designer actually reads.*

## Tokens — Typography
### Suisse Intl — the whole system: hero display caps, headings, body, and labels · `--font-suisse`
- **Substitute:** Neue Haas Grotesk, Inter, Helvetica Neue
- **Weights:** 400 (regular), 450 (subhead), 500 (medium / nav), 700 (bold display) — the family loads 100–900 in normal and italic
- **Sizes:** 12, 14, 16, 18, 20, 28, 40, 48, 64, 80, 130px
- **Line height:** ~0.95 on the giant display caps; ~1.4–1.5 on body
- **Letter spacing:** near-zero to slightly negative on display; the huge uppercase caps read tight and structural
- **Role:** One grotesque does all the work — the identity is weight and scale, not family-switching. Body and heading are the same typeface; hierarchy comes from jumping 16px → 130px.

### Suisse Intl Condensed — reserved condensed cut for tight ranged headings/labels · `--font-suisse-cond`
- **Substitute:** Suisse Intl Condensed, Roboto Condensed, Helvetica Neue Condensed
- **Weights:** shares the family's medium/bold range
- **Sizes:** used at heading scale where horizontal economy matters
- **Line height:** tight
- **Letter spacing:** neutral
- **Role:** A held-in-reserve narrow cut for dense heading rows; not the hero face.

### Suisse Intl Mono — monospace for code, data, and technical labels · `--font-suisse-mono`
- **Substitute:** Suisse Intl Mono, JetBrains Mono, IBM Plex Mono
- **Weights:** 400–500
- **Sizes:** 12–16px caption/label range
- **Line height:** ~1.4
- **Letter spacing:** neutral
- **Role:** Technical accent — eyebrow labels, metrics, code-flavored detail. Quiet, never headline.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 14px | 1.4 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-body` |
| Body Large | 18px | 1.5 | 0 | `--text-lg` |
| Lead | 20px | 1.45 | 0 | `--text-lead` |
| Subheading | 28px | 1.3 | 0 | `--text-subheading` |
| Heading | 40px | 1.1 | -0.01em | `--text-heading` |
| Title | 48px | 1.05 | -0.01em | `--text-title` |
| Display S | 64px | 1.0 | -0.015em | `--text-display-sm` |
| Display | 80px | 0.98 | -0.02em | `--text-display` |
| Display XL | 130px | 0.95 | -0.02em | `--text-display-xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (`--p0` = .4rem)   **Density:** comfortable — big editorial air, 9.6rem section margins

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| p0 | 0.4rem (4px) | `--p0` |
| p1 | 0.8rem (8px) | `--p1` |
| p2 | 1.6rem (16px) | `--p2` |
| p3 | 2.4rem (24px) | `--p3` |
| p4 | 3.2rem (32px) | `--p4` |
| p5 | 4.0rem (40px) | `--p5` |
| p6 | 4.8rem (48px) | `--p6` |
| p8 | 6.4rem (64px) | `--p8` |
| p10 | 8.0rem (80px) | `--p10` |
| Section margin | 9.6rem | `--section-margin` |
| Nav height | 8rem | `--nav-height` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chip / inline | 4px |
| Input / small control | 8px |
| Control | 10px |
| Button / tag | 12px |
| Card | 24px |
| Panel | 32px |
| Large panel | 48px |
| Hero block / feature | 64px |
| Icon button (circle) | 50% |

### Shadows
None. The scan measured zero box-shadows — depth comes entirely from luminance steps, chromatic panels, and the rendered 3D imagery, not from cast shadows.

### Layout
- **Page max-width:** 2560px (`--grid-max-width`)
- **Grid:** 12 columns, 2.4rem column gap (`--grid-column-gap`), 8rem side margins (`--grid-side-margin`)
- **Section gap:** 9.6rem (`--section-margin`)
- **Card padding:** editorial — cards carry radius (24px) with content-driven internal padding
- **Nav:** 8rem tall zone with a floating rounded-full pill container

## Components
### Floating Pill Nav
**Role:** The primary top navigation — a single rounded-full container floating over the hero.
Light grey fill (`--cl-grey-100` #f3f3f3), fully rounded, holding centered nav links in Grey 600 (#444) at 14px / weight 500. The logo (hexagonal gear mark + "Dayos" wordmark) sits outside the pill at top-left in black; the CTA sits outside at top-right.

### Header CTA — "Schedule a Demo"
**Role:** The primary conversion action in the header.
Black pill (`--cl-black` fill), white text, fully rounded (rounded-full), compact padding. High-contrast and confident — the black CTA is the header's only filled button; the brand yellow is held for imagery, never the CTA.

### Primary Button (Yellow)
**Role:** In-page primary action on light sections.
Yellow fill (`--cl-yellow` #fff100), black text, ~12–16px radius, no shadow. The one place the loud brand yellow becomes interactive; reserve it for a single hero-level action per section.

### Secondary Button
**Role:** Lower-priority action beside a primary.
Grey 100 fill (#f3f3f3), black text, matched radius, no border, no shadow. Reads as a quiet chip against white.

### Icon Button
**Role:** Circular utility control (arrows, close, small toggles).
Grey 100 fill (#f3f3f3), `border-radius: 50%`, black glyph. Neutral and unobtrusive.

### Nav Link
**Role:** Inline navigation and text links.
Grey 600 (#444) at 14px / weight 500 in the nav; body links go to black (#000) at 16px / weight 400. No underline at rest.

### Hero Display Heading
**Role:** The page-defining statement.
Suisse Intl 700 at up to 130px, black, uppercase, left-aligned, line-height ~0.95, tracked tight. Breaks across multiple lines as a solid typographic wall — the primary brand gesture.

### Section Heading
**Role:** Mid-page section titles.
Suisse Intl at 40–80px, weight 450 on dark/inverted panels and 700 on light; color flips to white (`--cl-white`) over dark or chromatic-deep surfaces.

### Card
**Role:** Content container on light surfaces.
White fill (`--cl-white`), 24px radius, no border, no shadow — separation is by radius and background contrast alone.

### Chromatic Pillar Panel
**Role:** Feature / value panels that carry the color system.
Pastel tint surface (e.g. `--cl-green-2` #d1ffca as `--cl-pillar1`) paired with the family's near-black deep tone (e.g. `--cl-green-3` #0a2d05 as `--cl-pillar2`) for text or an inner block. Each panel commits to ONE hue family, using its matched triad.

### Inverted Dark Section
**Role:** High-contrast breaks between light sections.
Near-black surface (#1a1a1a / `--cl-grey-800` #2f2f2f), white headings and body, no shadow. Used to reset rhythm and let chromatic accents glow.

## Do's and Don'ts
### Do
- Let the black display caps carry the page — go big (80–130px), tight, uppercase, left-aligned.
- Keep neutrals structural: white and the grey ramp (#f3f3f3 → #2f2f2f) do the layout work.
- Commit each chromatic panel to a single hue family and use its matched triad (vivid `-1`, tint `-2`, deep `-3`).
- Keep the header CTA black; keep the yellow for imagery and at most one in-page primary.
- Convey depth with luminance steps and radius, not shadows — there are none.
- Float the nav as a single grey rounded-full pill; keep logo and CTA outside it.

### Don't
- Don't scatter the accent hues — six vivid colors at once turns editorial confidence into confetti.
- Don't add drop shadows or glows; the system is explicitly shadow-free.
- Don't switch typefaces for hierarchy — stay in Suisse Intl and move weight/scale instead.
- Don't paint the CTA yellow in the header; that role belongs to black.
- Don't tighten the layout — the 8rem margins and 9.6rem section gaps are the calm the loud type needs.
- Don't use the error red (#c9372c) decoratively; it is validation-only.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Base page ground (`--cl-bg1`). |
| 0b | Hero wash | `#e5e5e5` | Bone-grey hero stage behind the caps. |
| 1 | Raised | `#f3f3f3` | Nav pill, secondary buttons, quiet chips (`--cl-bg2`). |
| 2 | Card | `#ffffff` | Content cards, 24px radius on canvas. |
| 3 | Chromatic panel | tint (`#d1ffca`, `#ffd5f8`, `#bef3ff`, `#ffe0c4`, `#e7cfff`) | Single-hue feature panels. |
| 4 | Inverted | `#1a1a1a` / `#2f2f2f` | Dark section breaks, white type. |

## Elevation
Flat by law. The scan returned no shadows, so depth is expressed as a luminance ladder — white canvas → #f3f3f3 raised → #e5e5e5 wash → #1a1a1a inverted — plus the physical 3D-rendered block imagery, which supplies all the "real" dimensionality the flat UI deliberately avoids. Radius (24–64px) does the softening a shadow normally would.

## Imagery
The signature asset is playful, photoreal 3D renders: chunky interlocking blocks and cog-shaped modules in the brand palette — yellow, acid green, magenta pink — molded from a speckled terrazzo/concrete texture, with legacy-ERP logos (SAP, Oracle, ServiceNow) embossed into the grey masses. The metaphor is literal and confident: enterprise software as heavy, colorful, stackable matter. Renders sit on the bone-grey canvas with soft real lighting (contradicting the flat UI on purpose). Elsewhere, keep it clean — no stock photography, no gradients, no icons competing with the type.

## Layout
Wide and contained: a 12-column grid capping at 2560px with 8rem side margins and 2.4rem gutters, so on large screens content breathes rather than stretches. The hero is asymmetric — a full-height wall of left-aligned display caps on the left, the 3D render bleeding in from the right. Sections are separated by 9.6rem margins and alternate light canvas with occasional inverted dark or single-hue chromatic panels. Navigation is a single floating grey pill, centered, with the wordmark and CTA anchored to the outer corners.

## Typography Signature
This is a one-face system that gets its whole personality from scale. Suisse Intl — a neutral Swiss grotesque — is pushed to an extreme: 130px, weight 700, uppercase, line-height compressed toward 0.95, tracking pulled slightly negative, so multi-line headlines stack into a single dense typographic slab. That "wall of caps" against a quiet bone-grey field is the brand. Body drops all the way to 16px in the same face, so the hierarchy reads as pure size contrast (an ~8x jump) rather than family or color contrast. The condensed and mono cuts are deliberately rationed — condensed for tight heading rows, mono for technical labels — keeping the voice unmistakably one typeface, confidently loud at the top and calmly plain in the body.

## Agent Prompt Guide
## Quick Color Reference
- background: `#ffffff` (hero wash `#e5e5e5`) / text: `#000000` / surface: `#f3f3f3` / border: `#e5e5e5` / accent: `#fff100` (yellow) / primary action: `#000000` (black pill — yellow is imagery, not CTA)

## Example Component Prompts
1. **Floating pill nav**: A rounded-full nav bar, fill #f3f3f3, centered links in #444 at 14px weight 500, floating over a #e5e5e5 hero. Logo (hex gear + "Dayos" wordmark, black) at top-left outside the pill; a black rounded-full "Schedule a Demo" button (white text) at top-right.
2. **Hero display wall**: Left-aligned uppercase headline in Suisse Intl 700 at clamp(48px, 9vw, 130px), color #000, line-height 0.95, letter-spacing -0.02em, stacked over 3–4 lines on a #e5e5e5 canvas; a 20px #444 subhead below.
3. **Chromatic pillar panel**: A feature card, radius 32px, fill #d1ffca, with a deep #0a2d05 inner block and white text; no shadow. One hue family only.
4. **Primary button**: Yellow #fff100 fill, black text, 12px radius, no border, no shadow; use once per section for the top action.
5. **Inverted section**: Full-width band, background #1a1a1a, white Suisse Intl heading at 80px weight 450, generous 9.6rem vertical padding, no shadow.

## Similar Brands
- **Vercel** — the same big-black-grotesque-on-near-white editorial confidence, shadow-light and structural.
- **Linear** — a single restrained typeface plus one detonating accent, held with discipline.
- **Stripe (Sessions / brand renders)** — playful photoreal 3D objects used as the primary hero imagery over clean UI.
- **Ramp** — enterprise B2B directness with oversized type and a limited, high-contrast palette.
- **Framer** — a bright multi-hue accent system disciplined by lots of neutral canvas and rounded panels.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals */
  --cl-white: #ffffff;
  --cl-black: #000000;
  --cl-grey-100: #f3f3f3;
  --cl-grey-200: #e5e5e5;
  --cl-grey-300: #dbdbdb;
  --cl-grey-400: #c6c6c6;
  --cl-grey-500: #979797;
  --cl-grey-600: #444444;
  --cl-grey-800: #2f2f2f;
  --cl-dark-surface: #1a1a1a; /* inferred: measured, unnamed */

  /* Colors — Chromatic triads (vivid / tint / deep) */
  --cl-yellow: #fff100;
  --cl-green-1: #00fd74;
  --cl-green-2: #d1ffca;
  --cl-green-3: #0a2d05;
  --cl-pink-1: #ff7ef2;
  --cl-pink-2: #ffd5f8;
  --cl-pink-3: #3d0e35;
  --cl-blue-1: #00d1ff;
  --cl-blue-2: #bef3ff;
  --cl-blue-3: #000a3d;
  --cl-orange-1: #ff6838;
  --cl-orange-2: #ffe0c4;
  --cl-orange-3: #4c0a01;
  --cl-purple-1: #8000ff;
  --cl-purple-2: #e7cfff;
  --cl-purple-3: #190031;
  --cl-error-1: #c9372c;
  --cl-error-2: #ffeceb;

  /* Semantic aliases */
  --cl-bg1: var(--cl-white);
  --cl-bg2: var(--cl-grey-100);
  --cl-color1: var(--cl-black);
  --cl-pillar1: var(--cl-green-2);
  --cl-pillar2: var(--cl-green-3);

  /* Typography — Families */
  --font-suisse: 'Suisse Intl', 'Neue Haas Grotesk', Inter, 'Helvetica Neue', sans-serif;
  --font-suisse-cond: 'Suisse Intl Condensed', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
  --font-suisse-mono: 'Suisse Intl Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-lg: 18px;
  --text-lead: 20px;
  --text-subheading: 28px;
  --text-heading: 40px;
  --text-title: 48px;
  --text-display-sm: 64px;
  --text-display: 80px;
  --text-display-xl: 130px;
  --leading-tight: 0.95;
  --leading-heading: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --p0: 0.4rem;
  --p1: 0.8rem;
  --p2: 1.6rem;
  --p3: 2.4rem;
  --p4: 3.2rem;
  --p5: 4rem;
  --p6: 4.8rem;
  --p8: 6.4rem;
  --p10: 8rem;
  --section-margin: 9.6rem;
  --nav-height: 8rem;
  --grid-column-gap: 2.4rem;
  --grid-side-margin: 8rem;
  --grid-max-width: 2560px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-button: 12px;
  --radius-card: 24px;
  --radius-panel: 32px;
  --radius-panel-lg: 48px;
  --radius-hero: 64px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey-100: #f3f3f3;
  --color-grey-200: #e5e5e5;
  --color-grey-300: #dbdbdb;
  --color-grey-400: #c6c6c6;
  --color-grey-500: #979797;
  --color-grey-600: #444444;
  --color-grey-800: #2f2f2f;
  --color-dark-surface: #1a1a1a; /* inferred */

  /* Colors — Chromatic triads */
  --color-yellow: #fff100;
  --color-green-1: #00fd74;
  --color-green-2: #d1ffca;
  --color-green-3: #0a2d05;
  --color-pink-1: #ff7ef2;
  --color-pink-2: #ffd5f8;
  --color-pink-3: #3d0e35;
  --color-blue-1: #00d1ff;
  --color-blue-2: #bef3ff;
  --color-blue-3: #000a3d;
  --color-orange-1: #ff6838;
  --color-orange-2: #ffe0c4;
  --color-orange-3: #4c0a01;
  --color-purple-1: #8000ff;
  --color-purple-2: #e7cfff;
  --color-purple-3: #190031;
  --color-error-1: #c9372c;
  --color-error-2: #ffeceb;

  /* Typography — Families */
  --font-suisse: 'Suisse Intl', 'Neue Haas Grotesk', Inter, 'Helvetica Neue', sans-serif;
  --font-suisse-cond: 'Suisse Intl Condensed', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
  --font-suisse-mono: 'Suisse Intl Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-lg: 18px;
  --text-lead: 20px;
  --text-subheading: 28px;
  --text-heading: 40px;
  --text-title: 48px;
  --text-display-sm: 64px;
  --text-display: 80px;
  --text-display-xl: 130px;

  /* Spacing */
  --spacing-p0: 0.4rem;
  --spacing-p1: 0.8rem;
  --spacing-p2: 1.6rem;
  --spacing-p3: 2.4rem;
  --spacing-p4: 3.2rem;
  --spacing-p5: 4rem;
  --spacing-p6: 4.8rem;
  --spacing-p8: 6.4rem;
  --spacing-p10: 8rem;
  --spacing-section: 9.6rem;
  --spacing-nav: 8rem;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-button: 12px;
  --radius-card: 24px;
  --radius-panel: 32px;
  --radius-panel-lg: 48px;
  --radius-hero: 64px;
}
```