/* ==================================================================== PROBE GROUP — Design System Tokens "Digital Life Ecosystem" / 数字生命生态 ==================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* -------------------------------------------------------------- CORE BRAND COLORS -------------------------------------------------------------- */ --probe-orange: #FF752B; /* dominant brand orange (rgb 255,117,43) */ --probe-orange-soft: #F9A05D; /* gradient top */ --probe-orange-deep: #DD3C28; /* gradient bottom (flame red) */ --probe-orange-burnt: #DF7F14; /* secondary heading orange */ --probe-rust: #A04E26; /* deep rust used for "PR_BE" wordmark */ --probe-amber: #F69155; /* spec-canonical brand orange */ /* Earth / neutral foundations */ --paper: #FAFAF7; /* paper white (spec) */ --paper-warm: #FBF5F0; /* warmer paper (rgb 251,245,240) */ --paper-cream: #FAF6F1; /* cream tint (rgb 250,246,241) */ --paper-stone: #F1EBE2; /* stone tint */ --ink: #1A1A1A; /* spec-canonical ink black */ --ink-292: #292929; /* body text in figma (rgb 41,41,41) */ --earth-grey: #6B5D4F; /* spec earth grey */ --earth-deep: #3E2C1F; /* deep earth (footer top) */ --earth-mid: #66441F; /* mid earth (footer bottom, body text accent) */ --earth-soil: #3E311F; /* soil */ --line: #E7E7EA; --line-warm: #E3DDD6; --muted: #9D9C9A; /* -------------------------------------------------------------- SEMANTIC TOKENS -------------------------------------------------------------- */ --bg: var(--paper); --bg-elevated: #FFFFFF; --bg-warm: var(--paper-warm); --bg-cream: var(--paper-cream); --bg-deep: var(--earth-deep); --bg-soil: var(--earth-soil); --fg: var(--ink-292); --fg-strong: var(--ink); --fg-muted: var(--earth-grey); --fg-faint: var(--muted); --fg-on-deep: #FFFFFF; --fg-on-deep-muted: rgba(255,255,255,0.72); --accent: var(--probe-orange); --accent-text: var(--probe-orange); /* headings, eyebrow labels */ --accent-text-burnt: var(--probe-orange-burnt); --accent-on-deep: var(--probe-orange); --link: var(--probe-orange); /* -------------------------------------------------------------- BRAND GRADIENTS -------------------------------------------------------------- */ --gradient-flame: linear-gradient(180deg, #F9A05D 0%, #DD3C28 100%); --gradient-flame-soft: linear-gradient(180deg, #F9A05D 0%, #EF3B24 100%); --gradient-earth-deep: linear-gradient(180deg, #3E311F 28%, #66441F 88%); --gradient-paper: linear-gradient(180deg, #FAFAF7 0%, #F1EBE2 100%); /* -------------------------------------------------------------- TYPOGRAPHY — families -------------------------------------------------------------- The Figma file uses Noto Sans / Noto Sans CJK SC throughout, but the brand spec calls for a serif display ("宣言感" / manifesto). We pair Noto Sans (body & UI) with Fraunces (display, manifesto). Substitution: Fraunces is a Google Fonts stand-in for the intended bespoke serif — flag for replacement. -------------------------------------------------------------- */ --font-display: 'Fraunces', 'Noto Serif SC', Georgia, 'Songti SC', serif; --font-sans: 'Noto Sans', 'Noto Sans SC', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', ui-monospace, monospace; /* -------------------------------------------------------------- TYPE SCALE -------------------------------------------------------------- */ --t-eyebrow: 0.8125rem; /* 13 — uppercase eyebrow */ --t-caption: 0.75rem; /* 12 */ --t-small: 0.875rem; /* 14 */ --t-body: 1rem; /* 16 */ --t-body-lg: 1.125rem; /* 18 */ --t-h6: 1.25rem; /* 20 */ --t-h5: 1.5rem; /* 24 — heading scale used in figma */ --t-h4: 1.875rem; /* 30 */ --t-h3: 2.25rem; /* 36 */ --t-h2: 3rem; /* 48 — section title */ --t-h1: 3.75rem; /* 60 — page hero */ --t-display: 5.5rem; /* 88 — manifesto display (Noto Sans Bold 88px exists in figma) */ --t-mega: 7.5rem; /* 120 — hero numerals */ /* -------------------------------------------------------------- SPACING (4-pt rhythm) -------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 30px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 100px; --space-13: 144px; /* Editorial generosity: figma-observed gaps are 30/40/80px between sections. Hero verticals run 100–235px tall. */ /* -------------------------------------------------------------- RADII -------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; /* cards & most surfaces */ --radius-md: 12px; --radius-lg: 16px; --radius-pill: 22px; /* primary button */ --radius-full: 9999px; /* -------------------------------------------------------------- SHADOWS (figma-observed) -------------------------------------------------------------- */ --shadow-card: 0 0.5px 2px 1.6px rgba(0,0,0,0.03), 0 0 4px 0 rgba(0,0,0,0.12); --shadow-elev: 0 2px 10px 0 rgba(0,0,0,0.08), 0 0.5px 2px 1.6px rgba(0,0,0,0.03); --shadow-button: inset 0 4px 4px 0 rgba(255,117,43,0.30), 0 2px 4px 0 rgba(255,117,43,0.30), 0 1px 12px -2px rgba(255,117,43,0.20); --shadow-soft: 0 4px 8px 0 rgba(0,0,0,0.06), 0 1px 4px 3.2px rgba(0,0,0,0.03); /* -------------------------------------------------------------- LAYOUT -------------------------------------------------------------- */ --container: 1440px; --container-narrow: 1162px; --gutter: 48px; /* -------------------------------------------------------------- MOTION -------------------------------------------------------------- */ --ease-organic: cubic-bezier(.22,.61,.36,1); /* breathy, biological */ --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; } /* ==================================================================== BASE TYPE STYLES (semantic) Use as classes (.h1) or copy values into your own selectors. ==================================================================== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .h1, h1.display { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-strong); } .h-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.02em; color: var(--fg-strong); } .h2 { font-family: var(--font-sans); font-size: var(--t-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--fg-strong); } .h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: 500; line-height: 1.15; color: var(--fg-strong); } .h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: 500; line-height: 1.2; color: var(--fg-strong); } .h5, .section-title { font-family: var(--font-sans); font-size: var(--t-h5); font-weight: 500; line-height: 1.25; color: var(--accent-text); /* figma: section titles in orange */ } .h6 { font-family: var(--font-sans); font-size: var(--t-h6); font-weight: 500; line-height: 1.3; } .p, p { font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.6; color: var(--fg); } .lede { font-family: var(--font-display); font-size: var(--t-h5); font-weight: 400; line-height: 1.45; letter-spacing: -0.005em; color: var(--fg-strong); } .small { font-size: var(--t-small); } .tiny { font-size: var(--t-caption); color: var(--fg-muted); } .mono, code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } .numeral { font-family: var(--font-display); font-size: var(--t-mega); font-weight: 500; line-height: 1; color: var(--accent-text); font-feature-settings: 'tnum' 1; }