/* ============================================================================= Once UI — Colors + Type Tokens (flattened) Source: github.com/once-ui-system/core (packages/core/src/tokens) ---------------------------------------------------------------------------- Default config (apps/dev): theme=dark, neutral=gray, brand=blue, accent=indigo, border=playful, solid=contrast, surface=filled. This file uses that default. Switch by changing the [data-*] attrs on . ========================================================================== */ /* ----- STATIC + SCHEME RAMPS (12 stops per hue: 100=darkest .. 1200=lightest) Every color in Once UI is selected from one of these 17 ramps. */ :root { /* STATIC */ --static-transparent: #00000000; --static-white: #ffffff; --static-white-medium:#ffffff4D; --static-black: #000000; --static-black-medium:#0000004D; /* Brand "26" badge gradient — shared by every header badge (submit/vote/join/console). */ --brand-badge-gradient: linear-gradient(140deg, var(--scheme-blue-500), var(--scheme-cyan-600)); /* Text colour that sits on the gold solid (winner/finalist surfaces on the stage). */ --gold-on-solid: #1a1206; /* NEUTRALS */ /* gray (default neutral) */ --scheme-gray-100:#0A0A0A; --scheme-gray-200:#151515; --scheme-gray-300:#3F3F3F; --scheme-gray-400:#595959; --scheme-gray-500:#757575; --scheme-gray-600:#959595; --scheme-gray-700:#B2B2B2; --scheme-gray-800:#D2D2D2; --scheme-gray-900:#E0E0E0; --scheme-gray-1000:#EDEDED; --scheme-gray-1100:#F3F3F3; --scheme-gray-1200:#F9F9F9; --scheme-gray-600-15:#95959526; --scheme-gray-600-30:#9595954D; --scheme-gray-600-50:#95959580; /* sand (warm neutral) */ --scheme-sand-100:#0a0905; --scheme-sand-200:#171611; --scheme-sand-300:#414039; --scheme-sand-400:#5d5b54; --scheme-sand-500:#797770; --scheme-sand-600:#97958e; --scheme-sand-700:#b6b4ad; --scheme-sand-800:#d6d4cc; --scheme-sand-900:#e3e1d9; --scheme-sand-1000:#f0efe7; --scheme-sand-1100:#f7f5ed; --scheme-sand-1200:#fefcf4; --scheme-sand-600-15:#97958e26; --scheme-sand-600-30:#97958e4D; --scheme-sand-600-50:#97958e80; /* slate (cool neutral) */ --scheme-slate-100:#080811; --scheme-slate-200:#15151f; --scheme-slate-300:#3e3f4a; --scheme-slate-400:#595a66; --scheme-slate-500:#757683; --scheme-slate-600:#9697a5; --scheme-slate-700:#b2b3c1; --scheme-slate-800:#d2d3e2; --scheme-slate-900:#dfe0ef; --scheme-slate-1000:#ecedfc; --scheme-slate-1100:#f3f4ff; --scheme-slate-1200:#f9faff; --scheme-slate-600-15:#9697a526; --scheme-slate-600-30:#9697a54D; --scheme-slate-600-50:#9697a580; /* mint (cool tinted neutral) */ --scheme-mint-100:#030b0a; --scheme-mint-200:#0d1917; --scheme-mint-300:#364341; --scheme-mint-400:#505e5c; --scheme-mint-500:#6a7875; --scheme-mint-600:#8a9996; --scheme-mint-700:#a9b8b5; --scheme-mint-800:#c8d8d5; --scheme-mint-900:#d5e5e2; --scheme-mint-1000:#e2f3f0; --scheme-mint-1100:#e9f9f6; --scheme-mint-1200:#f0fffd; /* rose */ --scheme-rose-100:#110606; --scheme-rose-200:#1f1212; --scheme-rose-300:#4d3e3e; --scheme-rose-400:#675656; --scheme-rose-500:#847273; --scheme-rose-600:#a59393; --scheme-rose-700:#c2afaf; --scheme-rose-800:#e2cfcf; --scheme-rose-900:#f3dfdf; --scheme-rose-1000:#fde9e9; --scheme-rose-1100:#fff3f3; --scheme-rose-1200:#fffafa; /* dusk */ --scheme-dusk-100:#0d070d; --scheme-dusk-200:#1a131a; --scheme-dusk-300:#453d45; --scheme-dusk-400:#605860; --scheme-dusk-500:#7d747d; --scheme-dusk-600:#9e959e; --scheme-dusk-700:#bab1ba; --scheme-dusk-800:#dad1da; --scheme-dusk-900:#e7dee7; --scheme-dusk-1000:#f5ebf5; --scheme-dusk-1100:#fbf1fb; --scheme-dusk-1200:#fff8ff; /* SATURATED HUES */ /* red */ --scheme-red-100:#130507; --scheme-red-200:#2A0A10; --scheme-red-300:#830711; --scheme-red-400:#B6020C; --scheme-red-500:#E90507; --scheme-red-600:#FF5F53; --scheme-red-700:#FF9689; --scheme-red-800:#FDC6BD; --scheme-red-900:#FDD8D2; --scheme-red-1000:#FDEAE6; --scheme-red-1100:#FCF1EF; --scheme-red-1200:#FDF9F8; --scheme-red-600-15:#FF5F5326; --scheme-red-600-30:#FF5F534D; --scheme-red-600-50:#FF5F5380; /* orange */ --scheme-orange-100:#120605; --scheme-orange-200:#270D0A; --scheme-orange-300:#7C1A06; --scheme-orange-400:#AC2401; --scheme-orange-500:#DB3400; --scheme-orange-600:#FD6325; --scheme-orange-700:#FF9964; --scheme-orange-800:#FEC8A4; --scheme-orange-900:#FDDAC2; --scheme-orange-1000:#FDEADD; --scheme-orange-1100:#FCF2E9; --scheme-orange-1200:#FCF9F5; /* yellow (warning) */ --scheme-yellow-100:#100704; --scheme-yellow-200:#231009; --scheme-yellow-300:#6B2D09; --scheme-yellow-400:#924205; --scheme-yellow-500:#B85B02; --scheme-yellow-600:#E07B00; --scheme-yellow-700:#FE9C0B; --scheme-yellow-800:#FECC55; --scheme-yellow-900:#FEDE79; --scheme-yellow-1000:#FCEEA7; --scheme-yellow-1100:#FBF5CB; --scheme-yellow-1200:#FBFAEB; --scheme-yellow-600-15:#E07B0026; --scheme-yellow-600-30:#E07B004D; --scheme-yellow-600-50:#E07B0080; /* moss */ --scheme-moss-100:#080B04; --scheme-moss-200:#111707; --scheme-moss-300:#2F460C; --scheme-moss-400:#3C630A; --scheme-moss-500:#478309; --scheme-moss-600:#4FA900; --scheme-moss-700:#54CC01; --scheme-moss-800:#76ED53; --scheme-moss-900:#98F789; --scheme-moss-1000:#C0FDBB; --scheme-moss-1100:#DAFDD7; --scheme-moss-1200:#F0FDEF; /* green (success) */ --scheme-green-100:#040B07; --scheme-green-200:#081810; --scheme-green-300:#0D4929; --scheme-green-400:#0C6731; --scheme-green-500:#0A8637; --scheme-green-600:#08AC3A; --scheme-green-700:#01CF38; --scheme-green-800:#5FEF61; --scheme-green-900:#91F88C; --scheme-green-1000:#C0FDBB; --scheme-green-1100:#DAFDD7; --scheme-green-1200:#F0FDEF; --scheme-green-600-15:#08AC3A26; --scheme-green-600-30:#08AC3A4D; --scheme-green-600-50:#08AC3A80; /* emerald */ --scheme-emerald-100:#040B0A; --scheme-emerald-200:#081816; --scheme-emerald-300:#0D483C; --scheme-emerald-400:#0C6551; --scheme-emerald-500:#0A8466; --scheme-emerald-600:#08A97C; --scheme-emerald-700:#01CB90; --scheme-emerald-800:#56ECAD; --scheme-emerald-900:#84F6C3; --scheme-emerald-1000:#B4FDDA; --scheme-emerald-1100:#D7FCEA; --scheme-emerald-1200:#EEFDF5; /* aqua */ --scheme-aqua-100:#050B0D; --scheme-aqua-200:#081719; --scheme-aqua-300:#0C464B; --scheme-aqua-400:#0C6367; --scheme-aqua-500:#0B8184; --scheme-aqua-600:#08A6A5; --scheme-aqua-700:#01C7C3; --scheme-aqua-800:#4DE9DC; --scheme-aqua-900:#78F6E4; --scheme-aqua-1000:#B0FCEE; --scheme-aqua-1100:#D3FCF3; --scheme-aqua-1200:#ECFDF9; /* cyan */ --scheme-cyan-100:#050911; --scheme-cyan-200:#0A1525; --scheme-cyan-300:#094074; --scheme-cyan-400:#045B9C; --scheme-cyan-500:#0279BE; --scheme-cyan-600:#049EE2; --scheme-cyan-700:#17C0FD; --scheme-cyan-800:#60E4FC; --scheme-cyan-900:#82F1FC; --scheme-cyan-1000:#B3FAFC; --scheme-cyan-1100:#D4FBFC; --scheme-cyan-1200:#EFFCFD; /* blue (default brand) */ --scheme-blue-100:#0A071B; --scheme-blue-200:#0D0B44; --scheme-blue-300:#0019CB; --scheme-blue-400:#033CF8; --scheme-blue-500:#2D69FA; --scheme-blue-600:#5A93FC; --scheme-blue-700:#84B5FD; --scheme-blue-800:#B4D6FB; --scheme-blue-900:#CBE3FB; --scheme-blue-1000:#E0EFFC; --scheme-blue-1100:#EBF5FC; --scheme-blue-1200:#F6FAFD; --scheme-blue-600-15:#5A93FC26; --scheme-blue-600-30:#5A93FC4D; --scheme-blue-600-50:#5A93FC80; /* indigo (default accent) */ --scheme-indigo-100:#0E0718; --scheme-indigo-200:#1C0B35; --scheme-indigo-300:#3D01C5; --scheme-indigo-400:#5625F7; --scheme-indigo-500:#7358FA; --scheme-indigo-600:#9585FA; --scheme-indigo-700:#B3A9FD; --scheme-indigo-800:#D2CEFB; --scheme-indigo-900:#E0DEFA; --scheme-indigo-1000:#EDEDFB; --scheme-indigo-1100:#F3F2FC; --scheme-indigo-1200:#F9F9FD; --scheme-indigo-600-15:#9585FA26; --scheme-indigo-600-30:#9585FA4D; --scheme-indigo-600-50:#9585FA80; /* violet */ --scheme-violet-100:#0E0512; --scheme-violet-200:#210B2B; --scheme-violet-300:#60099B; --scheme-violet-400:#7D04E4; --scheme-violet-500:#9745F7; --scheme-violet-600:#B07AFA; --scheme-violet-700:#C7A2FD; --scheme-violet-800:#DDCBFB; --scheme-violet-900:#E6DCFB; --scheme-violet-1000:#F0EBFC; --scheme-violet-1100:#F5F3FC; --scheme-violet-1200:#FAF8FD; /* magenta */ --scheme-magenta-100:#100511; --scheme-magenta-200:#250A26; --scheme-magenta-300:#70077B; --scheme-magenta-400:#9902B3; --scheme-magenta-500:#BD1DE8; --scheme-magenta-600:#D166FA; --scheme-magenta-700:#DC98FD; --scheme-magenta-800:#E8C7FB; --scheme-magenta-900:#EFD9FB; --scheme-magenta-1000:#F5E9FC; --scheme-magenta-1100:#F8F1FC; --scheme-magenta-1200:#FBF8FD; /* pink */ --scheme-pink-100:#12050B; --scheme-pink-200:#280A1A; --scheme-pink-300:#7D074A; --scheme-pink-400:#AE0169; --scheme-pink-500:#DE028E; --scheme-pink-600:#F854BE; --scheme-pink-700:#FD8BE4; --scheme-pink-800:#FCC0F1; --scheme-pink-900:#FCD5F5; --scheme-pink-1000:#FCE7F9; --scheme-pink-1100:#FCF0FA; --scheme-pink-1200:#FDF8FC; } /* ----- FUNCTION LAYER -------------------------------------------------------- Maps the active brand/neutral/accent role to a scheme ramp. Default config (data-brand=blue, data-neutral=gray, data-accent=indigo). */ :root, [data-brand="blue"] { --function-brand-100:var(--scheme-blue-100); --function-brand-200:var(--scheme-blue-200); --function-brand-300:var(--scheme-blue-300); --function-brand-400:var(--scheme-blue-400); --function-brand-500:var(--scheme-blue-500); --function-brand-600:var(--scheme-blue-600); --function-brand-700:var(--scheme-blue-700); --function-brand-800:var(--scheme-blue-800); --function-brand-900:var(--scheme-blue-900); --function-brand-1000:var(--scheme-blue-1000); --function-brand-1100:var(--scheme-blue-1100); --function-brand-1200:var(--scheme-blue-1200); --function-brand-600-15:var(--scheme-blue-600-15); --function-brand-600-30:var(--scheme-blue-600-30); --function-brand-600-50:var(--scheme-blue-600-50); } :root, [data-accent="indigo"] { --function-accent-100:var(--scheme-indigo-100); --function-accent-200:var(--scheme-indigo-200); --function-accent-300:var(--scheme-indigo-300); --function-accent-400:var(--scheme-indigo-400); --function-accent-500:var(--scheme-indigo-500); --function-accent-600:var(--scheme-indigo-600); --function-accent-700:var(--scheme-indigo-700); --function-accent-800:var(--scheme-indigo-800); --function-accent-900:var(--scheme-indigo-900); --function-accent-1000:var(--scheme-indigo-1000); --function-accent-1100:var(--scheme-indigo-1100); --function-accent-1200:var(--scheme-indigo-1200); --function-accent-600-15:var(--scheme-indigo-600-15); --function-accent-600-30:var(--scheme-indigo-600-30); --function-accent-600-50:var(--scheme-indigo-600-50); } :root, [data-neutral="gray"] { --function-neutral-100:var(--scheme-gray-100); --function-neutral-200:var(--scheme-gray-200); --function-neutral-300:var(--scheme-gray-300); --function-neutral-400:var(--scheme-gray-400); --function-neutral-500:var(--scheme-gray-500); --function-neutral-600:var(--scheme-gray-600); --function-neutral-700:var(--scheme-gray-700); --function-neutral-800:var(--scheme-gray-800); --function-neutral-900:var(--scheme-gray-900); --function-neutral-1000:var(--scheme-gray-1000); --function-neutral-1100:var(--scheme-gray-1100); --function-neutral-1200:var(--scheme-gray-1200); --function-neutral-600-15:var(--scheme-gray-600-15); --function-neutral-600-30:var(--scheme-gray-600-30); --function-neutral-600-50:var(--scheme-gray-600-50); } :root { /* info uses gray, warning yellow, danger red, success green */ --function-info-100:var(--scheme-gray-100); --function-info-600:var(--scheme-gray-600); --function-info-300:var(--scheme-gray-300); --function-info-400:var(--scheme-gray-400); --function-info-500:var(--scheme-gray-500); --function-info-800:var(--scheme-gray-800); --function-info-900:var(--scheme-gray-900); --function-info-1000:var(--scheme-gray-1000); --function-warning-100:var(--scheme-yellow-100); --function-warning-300:var(--scheme-yellow-300); --function-warning-400:var(--scheme-yellow-400); --function-warning-500:var(--scheme-yellow-500); --function-warning-600:var(--scheme-yellow-600); --function-warning-700:var(--scheme-yellow-700); --function-warning-800:var(--scheme-yellow-800); --function-warning-900:var(--scheme-yellow-900); --function-warning-1000:var(--scheme-yellow-1000); --function-warning-600-50:var(--scheme-yellow-600-50); --function-danger-100:var(--scheme-red-100); --function-danger-200:var(--scheme-red-200); --function-danger-300:var(--scheme-red-300); --function-danger-400:var(--scheme-red-400); --function-danger-500:var(--scheme-red-500); --function-danger-600:var(--scheme-red-600); --function-danger-700:var(--scheme-red-700); --function-danger-800:var(--scheme-red-800); --function-danger-900:var(--scheme-red-900); --function-danger-1000:var(--scheme-red-1000); --function-danger-600-50:var(--scheme-red-600-50); --function-success-100:var(--scheme-green-100); --function-success-300:var(--scheme-green-300); --function-success-400:var(--scheme-green-400); --function-success-500:var(--scheme-green-500); --function-success-600:var(--scheme-green-600); --function-success-700:var(--scheme-green-700); --function-success-800:var(--scheme-green-800); --function-success-900:var(--scheme-green-900); --function-success-1000:var(--scheme-green-1000); --function-success-600-50:var(--scheme-green-600-50); } /* ----- SEMANTIC LAYER (dark theme default) ----------------------------------- The names actually used in product code. Each role has: -background-{strong|medium|weak} : surface fills -on-background-{strong|medium|weak}: text on those surfaces -solid-{strong|medium|weak} : filled buttons/badges -on-solid-{strong|weak} : text on solids -border-{strong|medium|weak} : strokes -alpha-{strong|medium|weak} : translucent overlays (15/30/50%) */ :root, [data-theme="dark"] { --page-background: var(--function-neutral-100); --backdrop: var(--static-black-medium); /* brand (e.g. primary CTA blue) */ --brand-background-strong: var(--function-brand-300); --brand-background-medium: var(--function-brand-200); --brand-background-weak: var(--function-brand-100); --brand-on-background-strong: var(--static-white); --brand-on-background-medium: var(--function-brand-900); --brand-on-background-weak: var(--function-brand-700); --brand-solid-strong: var(--function-brand-500); --brand-solid-medium: var(--function-brand-400); --brand-solid-weak: var(--function-brand-300); --brand-on-solid-strong: var(--static-white); --brand-on-solid-weak: var(--function-brand-900); --brand-border-strong: var(--function-brand-400); --brand-border-medium: var(--function-brand-300); --brand-border-weak: var(--function-brand-200); --brand-alpha-strong: var(--function-brand-600-50); --brand-alpha-medium: var(--function-brand-600-30); --brand-alpha-weak: var(--function-brand-600-15); /* neutral (default chrome: backgrounds, text, borders) */ --neutral-background-strong: var(--function-neutral-300); --neutral-background-medium: var(--function-neutral-200); --neutral-background-weak: var(--function-neutral-100); --neutral-on-background-strong: var(--static-white); --neutral-on-background-medium: var(--function-neutral-900); --neutral-on-background-weak: var(--function-neutral-700); --neutral-solid-strong: var(--function-neutral-500); --neutral-solid-medium: var(--function-neutral-400); --neutral-solid-weak: var(--function-neutral-300); --neutral-border-strong: var(--function-neutral-400); --neutral-border-medium: var(--function-neutral-300); --neutral-border-weak: var(--function-neutral-200); --neutral-alpha-strong: var(--function-neutral-600-50); --neutral-alpha-medium: var(--function-neutral-600-30); --neutral-alpha-weak: var(--function-neutral-600-15); /* accent (secondary/decorative) */ --accent-background-strong: var(--function-accent-300); --accent-background-medium: var(--function-accent-200); --accent-background-weak: var(--function-accent-100); --accent-solid-strong: var(--function-accent-500); --accent-on-solid-strong: var(--static-white); --accent-alpha-medium: var(--function-accent-600-30); --accent-border-medium: var(--function-accent-300); /* status */ --danger-solid-strong: var(--function-danger-600); --danger-on-solid-strong: var(--static-white); --danger-background-medium: var(--function-danger-200); --danger-border-medium: var(--function-danger-300); --danger-on-background-medium: var(--function-danger-900); --warning-solid-strong: var(--function-warning-600); --warning-background-medium: var(--function-warning-200); --warning-on-background-medium: var(--function-warning-900); --warning-border-medium: var(--function-warning-300); --success-solid-strong: var(--function-success-600); --success-background-medium: var(--function-success-200); --success-on-background-medium: var(--function-success-900); --success-border-medium: var(--function-success-300); } [data-theme="light"] { --page-background: var(--function-neutral-1200); --backdrop: var(--static-white-medium); --brand-background-strong: var(--function-brand-800); --brand-background-medium: var(--function-brand-1000); --brand-background-weak: var(--static-white); --brand-on-background-strong: var(--function-brand-100); --brand-on-background-medium: var(--function-brand-400); --brand-on-background-weak: var(--function-brand-500); --brand-solid-strong: var(--function-brand-600); --brand-solid-medium: var(--function-brand-500); --brand-on-solid-strong: var(--static-white); --brand-border-medium: var(--function-brand-900); --neutral-background-strong: var(--function-neutral-800); --neutral-background-medium: var(--function-neutral-1000); --neutral-background-weak: var(--static-white); --neutral-on-background-strong: var(--function-neutral-100); --neutral-on-background-medium: var(--function-neutral-400); --neutral-on-background-weak: var(--function-neutral-500); --neutral-border-medium: var(--function-neutral-900); --neutral-border-weak: var(--function-neutral-1000); --neutral-alpha-weak: var(--function-neutral-600-15); --neutral-alpha-medium: var(--function-neutral-600-30); /* status — mirror the dark-theme semantic block so danger/warning/success backgrounds re-map under data-theme="light" instead of inheriting dark. */ --danger-solid-strong: var(--function-danger-600); --danger-on-solid-strong: var(--static-white); --danger-background-medium: var(--function-danger-200); --danger-border-medium: var(--function-danger-300); --danger-on-background-medium: var(--function-danger-900); --warning-solid-strong: var(--function-warning-600); --warning-background-medium: var(--function-warning-200); --warning-on-background-medium: var(--function-warning-900); --warning-border-medium: var(--function-warning-300); --success-solid-strong: var(--function-success-600); --success-background-medium: var(--function-success-200); --success-on-background-medium: var(--function-success-900); --success-border-medium: var(--function-success-300); } /* ============================================================================= TYPOGRAPHY ---------------------------------------------------------------------------- Once UI ships 4 font roles: heading | body | label | code. Defaults are Geist (sans) + Geist Mono. The TTFs below are real variable fonts loaded from /fonts (axis: weight 100–900, plus italic statics). Also bundled: Oswald, Fjalla One, Supermercado One. These are NOT default Once UI fonts — they're available as alternative display families for projects that need a more characterful heading look. To use them, override --font-heading on :root or on a parent element. ========================================================================== */ /* --- Geist (sans, variable weight) --- */ @font-face { font-family: "Geist"; src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Geist-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } /* --- Geist Mono (variable weight) --- */ @font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } /* --- Alternative display families (not Once UI defaults — opt-in) --- */ @font-face { font-family: "Oswald"; src: url("fonts/Oswald-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Oswald-VariableFont_wght.ttf") format("truetype"); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fjalla One"; src: url("fonts/FjallaOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Supermercado One"; src: url("fonts/SupermercadoOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Family role tokens (apps override these via --font-{role} CSS vars) */ --font-heading: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-label: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Alternative display families (use by overriding --font-heading) */ --font-display-condensed: "Oswald", "Fjalla One", "Geist", sans-serif; --font-display-fjalla: "Fjalla One", "Oswald", "Geist", sans-serif; --font-display-bubble: "Supermercado One", "Geist", sans-serif; /* Weights */ --font-weight-thin: 100; --font-weight-extraLight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semiBold: 600; --font-weight-bold: 700; --font-weight-extraBold: 800; /* Display (huge marketing type, used with --font-heading) */ --font-size-display-xl: 5rem; --line-height-display-xl: 5rem; --font-size-display-l: 4rem; --line-height-display-l: 4.25rem; --font-size-display-m: 3rem; --line-height-display-m: 3.25rem; --font-size-display-s: 2.5rem; --line-height-display-s: 3rem; --font-size-display-xs: 2rem; --line-height-display-xs: 2.5rem; /* Heading (sectional, used with --font-heading) */ --font-size-heading-xl: 1.5rem; --line-height-heading-xl: 2rem; --font-size-heading-l: 1.33rem; --line-height-heading-l: 1.75rem; --font-size-heading-m: 1.25rem; --line-height-heading-m: 1.5rem; --font-size-heading-s: 1.125rem;--line-height-heading-s: 1.5rem; --font-size-heading-xs: 1rem; --line-height-heading-xs: 1.25rem; /* Body (paragraphs, used with --font-body) */ --font-size-body-xl: 1.25rem; --line-height-body-xl: 1.75rem; --font-size-body-l: 1.125rem; --line-height-body-l: 1.5rem; --font-size-body-m: 1rem; --line-height-body-m: 1.5rem; --font-size-body-s: 0.875rem; --line-height-body-s: 1.125rem; --font-size-body-xs: 0.75rem; --line-height-body-xs: 1rem; /* Label (UI text, used with --font-label) */ --font-size-label-xl: 1.125rem; --line-height-label-xl: 1.5rem; --font-size-label-l: 1rem; --line-height-label-l: 1.25rem; --font-size-label-m: 0.925rem; --line-height-label-m: 1.25rem; --font-size-label-s: 0.825rem; --line-height-label-s: 1rem; --font-size-label-xs: 0.75rem; --line-height-label-xs: 0.875rem; /* Role-strength weights */ --font-weight-body-default: var(--font-weight-normal); --font-weight-body-strong: var(--font-weight-bold); --font-weight-label-default: var(--font-weight-normal); --font-weight-label-strong: var(--font-weight-semiBold); --font-weight-heading-default: var(--font-weight-normal); --font-weight-heading-strong: var(--font-weight-semiBold); --font-weight-display-default: var(--font-weight-light); --font-weight-display-strong: var(--font-weight-semiBold); } /* ----- SEMANTIC TYPE CLASSES Use these on elements directly. Display has negative letter-spacing that tightens with size — a signature Once UI move. */ .font-display { font-family: var(--font-heading); } .font-display.font-xl { font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); letter-spacing: -0.05em; } .font-display.font-l { font-size: var(--font-size-display-l); line-height: var(--line-height-display-l); letter-spacing: -0.04em; } .font-display.font-m { font-size: var(--font-size-display-m); line-height: var(--line-height-display-m); letter-spacing: -0.03em; } .font-display.font-s { font-size: var(--font-size-display-s); line-height: var(--line-height-display-s); letter-spacing: -0.02em; } .font-display.font-xs { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); } .font-heading { font-family: var(--font-heading); } .font-heading.font-xl { font-size: var(--font-size-heading-xl); line-height: var(--line-height-heading-xl); } .font-heading.font-l { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); } .font-heading.font-m { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); } .font-heading.font-s { font-size: var(--font-size-heading-s); line-height: var(--line-height-heading-s); } .font-heading.font-xs { font-size: var(--font-size-heading-xs); line-height: var(--line-height-heading-xs); } .font-body { font-family: var(--font-body); } .font-body.font-xl { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); } .font-body.font-l { font-size: var(--font-size-body-l); line-height: var(--line-height-body-l); } .font-body.font-m { font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); } .font-body.font-s { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); } .font-body.font-xs { font-size: var(--font-size-body-xs); line-height: var(--line-height-body-xs); } .font-label { font-family: var(--font-label); } .font-label.font-xl { font-size: var(--font-size-label-xl); line-height: var(--line-height-label-xl); } .font-label.font-l { font-size: var(--font-size-label-l); line-height: var(--line-height-label-l); } .font-label.font-m { font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); } .font-label.font-s { font-size: var(--font-size-label-s); line-height: var(--line-height-label-s); } .font-label.font-xs { font-size: var(--font-size-label-xs); line-height: var(--line-height-label-xs); } .font-code { font-family: var(--font-code); } .font-code.font-m { font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); } .font-code.font-s { font-size: var(--font-size-label-s); line-height: var(--line-height-label-s); } .font-default { font-weight: var(--font-weight-display-default); } .font-strong { font-weight: var(--font-weight-display-strong); } /* ============================================================================= RADII (default border="playful") ---------------------------------------------------------------------------- playful: 4/8/12/16/20px ramp + 999px full conservative: 2/4/6/10/12, rounded: 16/20/20/28/32, sharp: 0 ========================================================================== */ :root, [data-border="playful"] { --radius-xs: 0.25rem; --radius-s: 0.5rem; --radius-m: 0.75rem; --radius-l: 1rem; --radius-xl: 1.25rem; --radius-full: 999rem; } [data-border="conservative"] { --radius-xs:0.125rem; --radius-s:0.25rem; --radius-m:0.375rem; --radius-l:0.625rem; --radius-xl:0.75rem; --radius-full:999rem; } [data-border="rounded"] { --radius-xs:1rem; --radius-s:1.25rem; --radius-m:1.25rem; --radius-l:1.75rem; --radius-xl:2rem; --radius-full:999rem; } [data-border="sharp"] { --radius-xs:0; --radius-s:0; --radius-m:0; --radius-l:0; --radius-xl:0; --radius-full:999rem; } /* ============================================================================= SHADOWS — three layered drop-shadows per step, 12/8/8% opacities ========================================================================== */ :root { --shadow-xs: 0px 0px 1px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.08); --shadow-s: 0px 0px 2px rgba(0,0,0,0.12), 0px 1px 4px rgba(0,0,0,0.08), 0px 4px 8px rgba(0,0,0,0.08); --shadow-m: 0px 0px 2px rgba(0,0,0,0.12), 0px 2px 4px rgba(0,0,0,0.08), 0px 8px 8px rgba(0,0,0,0.08); --shadow-l: 0px 2px 4px rgba(0,0,0,0.12), 0px 8px 12px rgba(0,0,0,0.08), 0px 8px 16px rgba(0,0,0,0.08); --shadow-xl: 0px 4px 4px rgba(0,0,0,0.12), 0px 8px 12px rgba(0,0,0,0.08), 0px 24px 24px rgba(0,0,0,0.08); } /* ============================================================================= SPACING — Once UI uses a rem-based 4px grid via --static-space-N where N is the pixel value (4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80...) ========================================================================== */ :root { --static-space-2: 0.125rem; /* 2px */ --static-space-4: 0.25rem; /* 4px */ --static-space-8: 0.5rem; /* 8px */ --static-space-12: 0.75rem; /* 12px */ --static-space-16: 1rem; /* 16px */ --static-space-20: 1.25rem; /* 20px */ --static-space-24: 1.5rem; /* 24px */ --static-space-32: 2rem; /* 32px */ --static-space-40: 2.5rem; /* 40px */ --static-space-48: 3rem; /* 48px */ --static-space-56: 3.5rem; /* 56px */ --static-space-64: 4rem; /* 64px */ --static-space-80: 5rem; /* 80px */ --static-space-104: 6.5rem; /* 104px */ --static-space-128: 8rem; /* 128px */ } /* ============================================================================= TRANSITIONS — micro for component states, macro for layout/page ========================================================================== */ :root { --transition-eased: ease-in-out; --transition-micro-short: all 0.1s ease-in-out; --transition-micro-medium: all 0.2s ease-in-out; --transition-micro-long: all 0.4s ease-in-out; --transition-macro-short: all 0.15s ease-in-out; --transition-macro-medium: all 0.3s ease-in-out; --transition-macro-long: all 0.6s ease-in-out; } /* ============================================================================= BASE — html sets font-family + neutral text color, matching apps/dev ========================================================================== */ html { font-family: var(--font-body); font-weight: var(--font-weight-normal); font-size: 16px; color: var(--neutral-on-background-strong); background: var(--page-background); } body { margin: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; }