/* ============================================================ Simple Design System — Foundations Source: "Simple Design System (Community)" Figma file ============================================================ */ /* Inter from Google Fonts (1:1 with Figma source). Roboto Mono from Google Fonts (1:1 with Figma source). Geist used in annotations only — loaded for parity. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&family=Geist:wght@400;500;600&display=swap"); /* Brand-provided faces. Academy Engraved LET is used for hero/display accents; STIX Two Text is the serif body face for editorial layouts. */ @font-face { font-family: "Academy Engraved LET"; src: url("./fonts/Academy_Engraved_LET_Fonts.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "STIX Two Text"; src: url("./fonts/STIXTwoText.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ---------- Color primitives ---------- */ --sds-white: rgb(255, 255, 255); --sds-black: rgb(0, 0, 0); /* Neutral scale (from Figma: 30, 44, 48, 117, 178/179, 217, 227, 245, 255) */ --sds-neutral-1000: rgb(30, 30, 30); --sds-neutral-900: rgb(44, 44, 44); --sds-neutral-800: rgb(48, 48, 48); --sds-neutral-700: rgb(68, 68, 68); --sds-neutral-600: rgb(117, 117, 117); --sds-neutral-500: rgb(178, 178, 178); --sds-neutral-400: rgb(179, 179, 179); --sds-neutral-300: rgb(217, 217, 217); --sds-neutral-200: rgb(227, 227, 227); --sds-neutral-150: rgb(230, 230, 230); --sds-neutral-100: rgb(245, 245, 245); /* Brand (pink/magenta in source — easily themed) */ --sds-brand-bg: rgb(250, 225, 250); --sds-brand-border: rgb(241, 158, 220); --sds-brand-text: rgb(138, 34, 111); /* Danger */ --sds-danger-bg: rgb(254, 233, 231); --sds-danger-border: rgb(236, 34, 31); --sds-danger-text: rgb(144, 11, 9); --sds-danger-strong: rgb(192, 15, 12); /* Warning */ --sds-warning-bg: rgb(255, 241, 194); --sds-warning-bg-alt: rgb(255, 251, 235); --sds-warning-border: rgb(191, 106, 2); --sds-warning-text: rgb(82, 37, 4); --sds-warning-on: rgb(64, 27, 1); --sds-warning-fill: rgb(232, 185, 49); /* Success / Positive */ --sds-success-fill: rgb(20, 174, 92); --sds-success-on: rgb(235, 255, 238); /* Accent (purple in scrim/overlay accents) */ --sds-accent-violet: rgb(151, 71, 255); /* ---------- Semantic background ---------- */ --bg-base: var(--sds-white); --bg-secondary: var(--sds-neutral-100); --bg-tertiary: var(--sds-neutral-300); --bg-disabled: var(--sds-neutral-100); --bg-brand: var(--sds-neutral-900); /* primary action bg */ --bg-brand-hover: var(--sds-neutral-1000); --bg-neutral: var(--sds-neutral-300); --bg-success: var(--sds-success-fill); --bg-warning: var(--sds-warning-fill); --bg-danger: var(--sds-danger-border); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-blanket: rgba(0, 0, 0, 0.7); /* ---------- Semantic text ---------- */ --fg-base: var(--sds-neutral-1000); --fg-secondary: var(--sds-neutral-600); --fg-tertiary: var(--sds-neutral-400); --fg-disabled: var(--sds-neutral-400); --fg-on-brand: var(--sds-neutral-100); /* text on dark button */ --fg-on-success: var(--sds-success-on); --fg-on-warning: var(--sds-warning-on); --fg-on-danger: var(--sds-danger-bg); --fg-brand: var(--sds-brand-text); --fg-danger: var(--sds-danger-text); --fg-warning: var(--sds-warning-text); /* ---------- Semantic border ---------- */ --border-base: var(--sds-neutral-300); --border-strong: var(--sds-neutral-900); --border-brand: var(--sds-brand-border); --border-danger: var(--sds-danger-border); --border-warning: var(--sds-warning-border); /* ---------- Typography (Inter primary, Roboto Mono code) ---------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-serif: "STIX Two Text", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-display: "Academy Engraved LET", "STIX Two Text", Georgia, serif; /* Type scale — pulled from Figma styles */ --type-title-hero: 700 72px/1.05 var(--font-sans); /* "Title Page" */ --type-subtitle: 400 48px/1.1 var(--font-sans); --type-heading: 700 24px/1.2 var(--font-sans); /* letterspacing -0.02em */ --type-subheading: 400 20px/1.2 var(--font-sans); --type-body: 400 16px/1.4 var(--font-sans); --type-body-strong: 600 16px/1.4 var(--font-sans); --type-body-emphasis: 400 16px/1.4 var(--font-sans); /* italic */ --type-body-link: 400 16px/1.4 var(--font-sans); /* underline */ --type-body-small: 400 14px/1.4 var(--font-sans); --type-body-small-strong: 600 14px/1.4 var(--font-sans); --type-body-code: 400 16px/1 var(--font-mono); --type-input: 400 16px/1 var(--font-sans); --type-button: 400 16px/1 var(--font-sans); --type-tag: 400 16px/1.4 var(--font-sans); /* Heading letter-spacing */ --tracking-heading: -0.02em; /* ---------- Space (single Space scale) ---------- */ --space-50: 2px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-600: 24px; --space-800: 32px; --space-1200: 48px; --space-1600: 64px; --space-2400: 96px; --space-4000: 160px; /* ---------- Radius ---------- */ --radius-small: 4px; --radius-base: 8px; --radius-large: 16px; --radius-full: 9999px; /* ---------- Drop shadow scale ---------- */ --shadow-100: 0 1px 2px rgba(12, 12, 13, 0.05); --shadow-200: 0 1px 2px rgba(12, 12, 13, 0.05), 0 2px 4px rgba(12, 12, 13, 0.05); --shadow-300: 0 4px 8px rgba(12, 12, 13, 0.08), 0 2px 4px rgba(12, 12, 13, 0.05); --shadow-400: 0 8px 16px rgba(12, 12, 13, 0.1), 0 4px 6px rgba(12, 12, 13, 0.05); --shadow-500: 0 16px 24px rgba(12, 12, 13, 0.12), 0 6px 12px rgba(12, 12, 13, 0.08); --shadow-600: 0 24px 48px rgba(12, 12, 13, 0.18), 0 8px 16px rgba(12, 12, 13, 0.1); /* Inner shadows */ --shadow-inner-100: inset 0 1px 2px rgba(12, 12, 13, 0.05); --shadow-inner-200: inset 0 2px 4px rgba(12, 12, 13, 0.08); --shadow-inner-300: inset 0 4px 6px rgba(12, 12, 13, 0.1); --shadow-inner-400: inset 0 6px 10px rgba(12, 12, 13, 0.12); /* Blur */ --blur-overlay: blur(0px); /* dark scrim, no blur */ --blur-blanket: blur(4px); /* darker + blur */ --blur-glass: blur(4px); /* light glass */ } /* ============================================================ Semantic element styles — drop colors_and_type.css into a page and these elements pick up the system automatically. ============================================================ */ html, body { font: var(--type-body); color: var(--fg-base); background: var(--bg-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--type-title-hero); letter-spacing: var(--tracking-heading); margin: 0; } h2 { font: var(--type-subtitle); margin: 0; } h3 { font: var(--type-heading); letter-spacing: var(--tracking-heading); margin: 0; } h4 { font: var(--type-subheading); margin: 0; } h5 { font: var(--type-body-strong); margin: 0; } h6 { font: var(--type-body-small-strong); margin: 0; } p { font: var(--type-body); margin: 0 0 var(--space-300); } small { font: var(--type-body-small); color: var(--fg-secondary); } strong, b { font-weight: 600; } em, i { font-style: italic; } a { color: var(--fg-base); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--fg-secondary); } code, kbd, samp, pre { font: var(--type-body-code); background: var(--bg-secondary); border-radius: var(--radius-small); padding: 2px 6px; } pre { padding: var(--space-400); overflow: auto; } hr { border: 0; border-top: 1px solid var(--border-base); margin: var(--space-600) 0; }