/* ============================================================ Fireworks Design Tokens (CORRECTED) ============================================================ Drop-in replacement for _ds/fireworks-ai-design-system-/tokens.css Same token names, same structure, same comments as the file it replaces. Only the VALUES change, so nothing that consumes these tokens needs to be touched. Every value below is measured from the live fireworks.ai (2026-09-11) rather than chosen by eye. Changed lines are marked with a "was:" note so the diff is reviewable. ============================================================ */ /* ----------- Fonts ----------------------------------------- Inter is the reading face: headings and body. The label face is a MONOSPACE. The real one is ABC Favorit Mono (Dinamo, commercial licence). JetBrains Mono stands in for it and is a good stand-in: it carries the same even-width rhythm against Inter, which is the contrast the whole system rests on. Do not set labels in Inter. Nunito Sans is not part of the Fireworks system and has been dropped. --fw-font-support now resolves to Inter. NOTE: the @import below sat AFTER the @font-face blocks in the original file. CSS requires @import to precede every other rule, so it was invalid and silently ignored. It is moved to the top here. (The page also links these fonts from index.html, which is why they still rendered.) */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"); @font-face { font-family: "Inter"; src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ----------- Brand -------------------------------------- */ --fw-brand: #6726FE; /* was #6720FF. purple-400 */ --fw-brand-light: #FAF7FF; /* was #F7F3FF. the site's hover wash */ --fw-brand-ink: #FFFFFF; /* unchanged */ --fw-brand-hover: #501BC4; /* was #581AD6. purple-500 */ --fw-brand-pressed: #3C1590; /* was #4813B3. purple-600 */ /* ----------- Neutrals ----------------------------------- Fireworks runs a warm-free, slightly cool neutral ramp. The originals here were purple-tinted greys, which read as a different brand next to the real thing. */ --fw-ink: #16181D; /* was #000000. neutrals-900, not pure black */ --fw-ink-secondary: #5A5E63; /* was #6E6E7F. gray. 6.5:1 on white */ --fw-ink-inverse: #FFFFFF; /* unchanged */ --fw-surface: #FFFFFF; /* unchanged */ --fw-surface-muted: #F5F5F5; /* was #F7F7F8. neutrals-25 */ --fw-surface-elevated: #F2F2F2; /* was #EEEEF2. neutrals-50 */ --fw-border: #E6EAF4; /* was #E4E4EB. the one hairline the site uses everywhere */ /* ----------- Feedback ----------------------------------- The originals were Apple's iOS system colours. These are the Fireworks ramps. */ --fw-info: #1756FF; /* was #007AFF. blue-300 */ --fw-success: #06B96A; /* was #34C759. success-500 */ --fw-warning: #F8910D; /* was #FF9500. warning-500 */ --fw-danger: #F14539; /* was #D70015. red-500 */ --fw-danger-strong: #B32519; /* red-700. red-500 fails contrast as small text */ --fw-info-soft: #C0DFFA; /* was #E8F2FF. blue-25 */ --fw-success-soft: #EEFDF4; /* was #E6F8EB. success-50 */ --fw-warning-soft: #FDF8EA; /* was #FFF2DF. warning-50 */ --fw-danger-soft: #FCF3F2; /* was #FCE5E7. red-50 */ /* ----------- Radii -------------------------------------- Fireworks is squarer than most systems. Buttons, inputs, cards and panels are all square. The only curves on the site are nav links and small icon buttons at 8px, and fully round badges. */ --fw-radius-sm: 0; /* was 8px. buttons, inputs, chips */ --fw-radius-md: 0; /* was 12px. cards, menus */ --fw-radius-lg: 0; /* was 16px. modals, feature panels */ --fw-radius-nav: 8px; /* NEW. nav links and small icon buttons only */ --fw-radius-full: 9999px; /* unchanged. badges and pills */ /* ----------- Spacing (4px base) ------------------------- Unchanged. Fireworks is also on a 4px base. */ --fw-space-0-5: 2px; --fw-space-1: 4px; --fw-space-2: 8px; --fw-space-3: 12px; --fw-space-4: 16px; --fw-space-5: 20px; --fw-space-6: 24px; --fw-space-8: 32px; --fw-space-10: 40px; --fw-space-12: 48px; --fw-space-16: 64px; --fw-space-20: 80px; /* ----------- Elevation ---------------------------------- The original comment here was already right: borders do almost all the work, shadows are for floating surfaces only. Kept as written. Only the brand shadow's rgb was off. */ --fw-shadow-button: 0 1px 2px 0 rgba(10,13,18,0.05), inset 0 -2px 0 0 rgba(10,13,18,0.05), inset 0 0 0 1px rgba(10,13,18,0.18); --fw-shadow-button-brand: 0 1px 2px 0 rgba(103,38,254,0.20), /* was rgba(103,32,255,...) */ inset 0 -2px 0 0 rgba(10,13,18,0.12), inset 0 0 0 1px rgba(10,13,18,0.15); --fw-shadow-popover: 0 12px 24px -8px rgba(10,13,18,0.12), 0 4px 8px -2px rgba(10,13,18,0.08); --fw-shadow-modal: 0 24px 48px -12px rgba(10,13,18,0.24); /* ----------- Focus -------------------------------------- NEW. The site uses a solid 3px purple outline on :focus-visible, not a translucent wash. */ --fw-focus-ring: 3px solid #6726FE; /* ----------- Type --------------------------------------- */ --fw-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fw-font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --fw-font-support: "Inter", ui-sans-serif, system-ui, sans-serif; /* was Nunito Sans, not a Fireworks face */ --fw-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* NEW. The label face, which is what buttons, eyebrows, nav items and metadata are set in. Aliased to the mono so that swapping in real ABC Favorit Mono later is a one-line change here. */ --fw-font-label: var(--fw-font-mono); /* NEW. Links are blue on the real site; the brand purple is for buttons and focus, not for inline links. */ --fw-link: #1756FF; /* blue-300 */ /* Sizes. Deliberately unchanged. Fireworks' own display scale is 24 / 30 / 36 / 48 / 60px, which does not line up with the 56 / 40 / 28 / 20 here. Snapping to it would flatten hierarchy this site chose on purpose, and the tracking below is what actually carries the brand. Leave the sizes; fix the tracking. */ --fw-text-display-size: 56px; --fw-text-display-lh: 1.08; --fw-text-h1-size: 40px; --fw-text-h1-lh: 1.15; --fw-text-h2-size: 28px; --fw-text-h2-lh: 1.25; --fw-text-h3-size: 20px; --fw-text-h3-lh: 1.35; --fw-text-body-size: 16px; --fw-text-body-lh: 1.55; --fw-text-small-size: 14px; --fw-text-small-lh: 1.45; --fw-text-caption-size: 12px; --fw-text-caption-lh: 1.4; /* NEW. Every step of the Fireworks display scale works out to the same ratio, so one value covers every heading. */ --fw-heading-tracking: -0.04em; /* And the matching positive tracking for uppercase labels. */ --fw-label-tracking: 0.04em; /* NEW. 550 is a real Fireworks weight and the workhorse for headings and UI. Body copy stays at 400. */ --fw-weight-heading: 550; --fw-weight-body: 400; /* ----------- Motion ------------------------------------- */ --fw-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ --fw-duration-fast: 120ms; /* @kind other */ --fw-duration: 200ms; /* @kind other */ --fw-duration-slow: 320ms; /* @kind other */ /* ----------- Layout ------------------------------------- */ --fw-max-width: 1200px; --fw-gutter: 24px; } /* ----------- Base ------------------------------------------ */ html, body { font-family: var(--fw-font-sans); color: var(--fw-ink); background: var(--fw-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *:focus-visible { outline: var(--fw-focus-ring); outline-offset: 2px; } /* ----------- Type primitives ------------------------------- Weights drop from 600 to 550, and every heading takes the same -0.04em. Those two changes are most of what makes type read as Fireworks. */ .fw-display { font-family: var(--fw-font-display); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-display-size); line-height: var(--fw-text-display-lh); letter-spacing: var(--fw-heading-tracking); } .fw-h1 { font-family: var(--fw-font-display); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-h1-size); line-height: var(--fw-text-h1-lh); letter-spacing: var(--fw-heading-tracking); } .fw-h2 { font-family: var(--fw-font-display); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-h2-size); line-height: var(--fw-text-h2-lh); letter-spacing: var(--fw-heading-tracking); } .fw-h3 { font-family: var(--fw-font-display); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-h3-size); line-height: var(--fw-text-h3-lh); letter-spacing: var(--fw-heading-tracking); } .fw-body { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-body); font-size: var(--fw-text-body-size); line-height: var(--fw-text-body-lh); } .fw-body-bold { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-body-size); line-height: var(--fw-text-body-lh); } .fw-small { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-body); font-size: var(--fw-text-small-size); line-height: var(--fw-text-small-lh); } .fw-small-bold { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-small-size); line-height: var(--fw-text-small-lh); } .fw-caption { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-body); font-size: var(--fw-text-caption-size); line-height: var(--fw-text-caption-lh); color: var(--fw-ink-secondary); } .fw-caption-bold { font-family: var(--fw-font-sans); font-weight: var(--fw-weight-heading); font-size: var(--fw-text-caption-size); line-height: var(--fw-text-caption-lh); } /* The eyebrow is a label, so it takes the label face and the system's +0.04em, not the body face at +0.12em. */ .fw-eyebrow { font-family: var(--fw-font-label); font-weight: var(--fw-weight-heading); font-size: 12px; line-height: 1.3; letter-spacing: var(--fw-label-tracking); text-transform: uppercase; color: var(--fw-ink-secondary); } .fw-link { color: var(--fw-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fw-link:hover { color: var(--fw-brand); } .fw-mono { font-family: var(--fw-font-mono); font-size: 13px; } /* NEW. The primary button, the single most brand-bearing component: uppercase label face, +0.04em, purple, square. */ .fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: var(--fw-radius-sm); font-family: var(--fw-font-label); font-size: 14px; font-weight: var(--fw-weight-heading); letter-spacing: var(--fw-label-tracking); text-transform: uppercase; white-space: nowrap; cursor: pointer; background: var(--fw-brand); color: var(--fw-brand-ink); transition: background var(--fw-duration) var(--fw-ease); } .fw-btn:hover { background: var(--fw-brand-hover); } .fw-btn:active { background: var(--fw-brand-pressed); } .fw-btn--secondary { background: var(--fw-surface); color: var(--fw-ink); box-shadow: inset 0 0 0 1px var(--fw-border); } .fw-btn--secondary:hover { background: var(--fw-brand-light); } /* ----------- Layout helpers used by previews -------------- */ .fw-page { max-width: var(--fw-max-width); margin: 0 auto; padding: 64px 32px 96px; } .fw-section { margin-top: 64px; } .fw-section:first-of-type { margin-top: 40px; } .fw-rule { height: 1px; background: var(--fw-border); border: 0; margin: 40px 0 32px; } .fw-meta { color: var(--fw-ink-secondary); font-size: 13px; }