/* ========================================================================== Dynamic Mockups — design tokens (Brand Guidelines v1.0) -------------------------------------------------------------------------- Transcribed from design-system/tokens/*.css. Custom properties and @font-face only: loading this file site-wide paints nothing by itself, so legacy pages are unaffected until they opt in with the `dm` class. Element/component rules live in dm/base.css and are scoped to `.dm`. ========================================================================== */ /* ---------- Fraunces 72pt SuperSoft (self-hosted; 400 is the brand weight; never synthesize bold — pick a cut) ---------- */ @font-face { font-family: "Fraunces 72pt SuperSoft"; src: url("../../fonts/fraunces/Fraunces_72pt_SuperSoft-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces 72pt SuperSoft"; src: url("../../fonts/fraunces/Fraunces_72pt_SuperSoft-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces 72pt SuperSoft"; src: url("../../fonts/fraunces/Fraunces_72pt_SuperSoft-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---------- Primary palette (bases) ---------- */ --dm-pink: #F3397A; --dm-lime: #A5D544; --dm-orange: #F39F39; --dm-cyan: #2AD3DC; /* Pink ramp (dark → light) */ --dm-pink-1000: #320012; --dm-pink-900: #750029; --dm-pink-800: #980136; --dm-pink-700: #B2023F; --dm-pink-600: #CB0A4E; --dm-pink-500: #DA165B; --dm-pink-400: #F3397A; --dm-pink-300: #FE5E96; --dm-pink-200: #F47CA6; --dm-pink-100: #FAA5C3; --dm-pink-50: #FFCEDF; --dm-pink-0: #FFEAF2; /* Lime ramp */ --dm-lime-1000: #182301; --dm-lime-900: #537906; --dm-lime-800: #6D9F09; --dm-lime-700: #7DB30E; --dm-lime-600: #8AC317; --dm-lime-500: #95CC26; --dm-lime-400: #A5D544; --dm-lime-300: #D3F06D; --dm-lime-200: #E0FB7F; --dm-lime-100: #EAFFA1; --dm-lime-50: #FCFECA; --dm-lime-0: #FFFFF1; /* Orange ramp */ --dm-orange-1000: #321C00; --dm-orange-900: #754000; --dm-orange-800: #985401; --dm-orange-700: #B26202; --dm-orange-600: #CB740A; --dm-orange-500: #DA8116; --dm-orange-400: #F39F39; --dm-orange-300: #FEC25E; --dm-orange-200: #F4CE7C; --dm-orange-100: #FAE1A5; --dm-orange-50: #FFEFBC; --dm-orange-0: #FEFDDA; /* Cyan ramp */ --dm-cyan-1000: #011819; --dm-cyan-900: #005964; --dm-cyan-800: #027886; --dm-cyan-700: #038A9A; --dm-cyan-600: #06A2B4; --dm-cyan-500: #09BEC7; --dm-cyan-400: #2AD3DC; --dm-cyan-300: #52E5EF; --dm-cyan-200: #8CFFFB; --dm-cyan-100: #B7FFFF; --dm-cyan-50: #E2FDF9; --dm-cyan-0: #FBFDFC; /* ---------- Supporting palette (bases) ---------- */ --dm-purple: #A386EC; --dm-blue: #56ADEA; --dm-mint: #45C6A8; --dm-green: #72DF58; --dm-yellow: #EBD824; --dm-red: #F16A60; /* Purple ramp */ --dm-purple-1000: #130438; --dm-purple-900: #210665; --dm-purple-800: #2B0A81; --dm-purple-700: #3E18A0; --dm-purple-600: #532ABC; --dm-purple-500: #6945C6; --dm-purple-400: #8563DD; --dm-purple-300: #A386EC; --dm-purple-200: #C5B1F7; --dm-purple-100: #DFD3FF; --dm-purple-50: #EEE7FF; --dm-purple-0: #F8F6FF; /* Blue ramp */ --dm-blue-1000: #032A47; --dm-blue-900: #05436F; --dm-blue-800: #085287; --dm-blue-700: #0B5E9A; --dm-blue-600: #0F6DB0; --dm-blue-500: #157CC5; --dm-blue-400: #3095DD; --dm-blue-300: #56ADEA; --dm-blue-200: #79C2F7; --dm-blue-100: #96D0F9; --dm-blue-50: #C0E1F9; --dm-blue-0: #EEF6FC; /* Mint ramp */ --dm-mint-1000: #042E24; --dm-mint-900: #094D3D; --dm-mint-800: #116A55; --dm-mint-700: #1A8169; --dm-mint-600: #26987E; --dm-mint-500: #2FBA9A; --dm-mint-400: #36B396; --dm-mint-300: #45C6A8; --dm-mint-200: #65D3B9; --dm-mint-100: #8DDFCC; --dm-mint-50: #BDEDE2; --dm-mint-0: #EBFCF8; /* Green ramp */ --dm-green-1000: #0A2D01; --dm-green-900: #114803; --dm-green-800: #196606; --dm-green-700: #207E08; --dm-green-600: #2A9C0D; --dm-green-500: #32B212; --dm-green-400: #4ECE2F; --dm-green-300: #72DF58; --dm-green-200: #9CEF89; --dm-green-100: #BCF7AE; --dm-green-50: #D4F5CC; --dm-green-0: #F2F9F0; /* Yellow ramp */ --dm-yellow-1000: #494204; --dm-yellow-900: #6C6104; --dm-yellow-800: #857807; --dm-yellow-700: #9D8E08; --dm-yellow-600: #B6A610; --dm-yellow-500: #D0BE1A; --dm-yellow-400: #EBD824; --dm-yellow-300: #F3E452; --dm-yellow-200: #F6EA7A; --dm-yellow-100: #F8EFA5; --dm-yellow-50: #F9F4C7; --dm-yellow-0: #FBFAF0; /* Red ramp */ --dm-red-1000: #450702; --dm-red-900: #6E0C05; --dm-red-800: #891108; --dm-red-700: #A7150A; --dm-red-600: #C01A0E; --dm-red-500: #DA1916; --dm-red-400: #EC4E43; --dm-red-300: #F16A60; --dm-red-200: #FB9992; --dm-red-100: #FFBBB6; --dm-red-50: #FFD5D1; --dm-red-0: #FFF3F1; /* ---------- Neutral ramp (dominates every layout) ---------- */ --dm-neutral-1000: #21221D; --dm-neutral-900: #3B3C36; --dm-neutral-800: #4F5049; --dm-neutral-700: #6F7168; --dm-neutral-600: #818279; --dm-neutral-500: #93948B; --dm-neutral-400: #C4C6B9; --dm-neutral-300: #D0D1C5; --dm-neutral-200: #DADBD2; --dm-neutral-100: #E5E5DF; --dm-neutral-50: #ECEDE5; --dm-neutral-0: #F4F5F1; /* ---------- Semantic aliases ---------- */ --dm-ink: #21221D; --dm-text-body: #21221D; --dm-text-secondary: #6F7168; --dm-text-tertiary: #93948B; --dm-text-inverse: #F4F5F1; --dm-text-inverse-secondary: #DADBD2; --dm-surface-page: #F4F5F1; --dm-surface-card: #ECEDE5; --dm-surface-raised: #FBFDFC; --dm-surface-dark: #21221D; --dm-surface-white: #FFFFFF; --dm-border-hairline: #C4C6B9; --dm-border-card: #E5E5DF; --dm-border-card-soft: #DADBD2; --dm-divider-on-dark: #4F5049; /* What sits on top of an ink fill (the dark button, the dark card). Its own token because a dark page flips it — see the .dm-dark block below. */ --dm-on-ink: #FFFFFF; /* The tick colour. Its own token because it has to lighten on an ink ground — read this, never a --dm-lime-* step, in a component that can go dark. */ --dm-check: #7DB30E; --dm-accent-primary: #F3397A; --dm-eyebrow-bg: #E2FDF9; --dm-eyebrow-text: #027886; --dm-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.16); /* ---------- Typography ---------- */ --dm-font-display: "Fraunces 72pt SuperSoft", "Fraunces", serif; --dm-font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dm-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --dm-text-hero: 108px; --dm-text-display: 80px; --dm-text-h1: 64px; --dm-text-h2: 48px; --dm-text-h3: 32px; --dm-text-h4: 24px; --dm-text-body-lg: 18px; --dm-text-body-md: 16px; --dm-text-body-sm: 14px; --dm-text-label: 12px; --dm-text-label-sm: 10px; /* line heights: display 90–110%, body 135–150%, labels 125% */ --dm-leading-display: 1.1; --dm-leading-tight: 0.9; --dm-leading-heading: 1.2; --dm-leading-body: 1.5; --dm-leading-body-snug: 1.35; --dm-leading-label: 1.25; /* letter spacing: display -2% to -1%; body always 0 */ --dm-tracking-display: -0.02em; --dm-tracking-body: 0; /* ---------- Shape, spacing, effects ---------- */ --dm-radius-badge: 4px; --dm-radius-button: 8px; --dm-radius-card: 12px; --dm-radius-card-inner: 16px; --dm-space-1: 4px; --dm-space-2: 8px; --dm-space-3: 16px; --dm-space-4: 24px; --dm-space-5: 32px; --dm-space-6: 48px; --dm-card-padding: 24px; --dm-card-padding-lg: 48px; --dm-page-margin: 48px; --dm-hairline: 1px solid var(--dm-border-hairline); --dm-card-inset: inset 0 0 0 1px var(--dm-border-card); --dm-glass-blur: blur(24px); /* ---------- Layout ---------- The site header is fixed, so `.dm` pages reserve its height themselves. */ --dm-header-h: 72px; --dm-header-h-tight: 60px; /* ---------- Motion (one easing for the whole brand) ---------- */ --dm-ease-press: cubic-bezier(0.22, 1, 0.36, 1); --dm-dur-in: 640ms; --dm-stagger: 70ms; } /* ========================================================================== Dark pages -------------------------------------------------------------------------- A whole page runs dark without dark variants of every component: this remaps the SEMANTIC aliases only, and every rule downstream already reads from them. The colour ramps are untouched, so an accent still means the same colour and a `--dm-lime-400` check is still that green. Put `dm-dark` on the page wrapper, beside the page id:
Scoped to a wrapper, not to `.dm`, so a dark page can hold a light island (or the reverse) by nesting another scope. Two things do NOT flip and should not: the site header and footer, which declare their own colour because they render on legacy pages too. The header has its own dark variant at the bottom of dm/header.css. ========================================================================== */ .dm-dark { --dm-ink: #F4F5F1; --dm-text-body: #F4F5F1; --dm-text-secondary: #C4C6B9; --dm-text-tertiary: #93948B; --dm-text-inverse: #21221D; --dm-text-inverse-secondary: #4F5049; /* What sits on an ink fill inverts with the ink itself. */ --dm-on-ink: #21221D; --dm-check: #A5D544; --dm-surface-page: #16170F; --dm-surface-card: #21221D; --dm-surface-raised: #2A2B25; --dm-surface-white: #21221D; --dm-surface-dark: #0E0F09; --dm-border-hairline: #4F5049; --dm-border-card: #3B3C36; --dm-border-card-soft: #4F5049; --dm-divider-on-dark: #4F5049; /* The button's hover step has to darken from the light ink, not lighten. */ --dm-neutral-900: #FFFFFF; --dm-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.5); --dm-card-inset: inset 0 0 0 1px #3B3C36; background: var(--dm-surface-page); color: var(--dm-text-body); }