Exaforce Design System
One source for every Exaforce web property.
Design tokens, the two self-hosted typefaces, the logo and icon set, and the theme script. Sites link to it or install it; nothing brand-level is copied into a site again.
Typefaces
Three variable faces, self-hosted, split by unicode range so a Latin page downloads two files and a Japanese page only the slices it uses. Family names are the … Variable ones; never the bare names.
--font-family-heading · weight axis 1–1000 · SIL OFL 1.1
--font-family-base · weight axis 100–900 · SIL OFL 1.1
--font-family-ja · applied by :lang(ja), Latin included · opt-in: link fonts-ja.css · weight axis 100–900 · SIL OFL 1.1
Type scale
Fluid between 375px and 1440px viewports. Each class sets size, line height, weight and tracking together.
Colour
Components use the semantic layer only. Every name below is prefixed --color-; the small figures are the oklch lightness, chroma and hue this theme resolves to right now, and hovering a chip shows the full token, its mapping and its value. Flip the theme to see them remap. Primitives are the Tailwind v4 palette, unchanged.
Palette (primitives)
All 26 families at all 11 steps, byte-identical to Tailwind v4. These never change with the theme. Components should not reference them directly; they are what the semantic tokens above point at. If a colour you need is not expressible semantically, add a semantic token rather than reaching down here.
Space, radius, motion
Spacing
Radii
Motion
Logo and mark
Each artwork in four variants. Prefer inlining -current: it takes the text colour around it and follows the theme toggle, which is what the header above does. Use -black or -white as an image when you know the background. -auto switches with the OS colour scheme, for READMEs and embeds you don't style.
Follows the theme (inlined -current)
Fixed ink, as <img>
Follows the OS (-auto, as <img>)
The OS tiles use the system colour scheme, not this page's toggle, so they can disagree with the page when you have forced a theme. That is the trade-off of -auto.
Ribbon
The swept-strand gradient behind hero bands and CTA panels, in three colourways. The ramps are shader data, not tokens: fed to the GPU as linear light, tuned by eye in the Ribbon Shader Studio, and published as ribbon-presets.json so the website and the tools read one file.
Favicon set
Icons
The platform set is first-party: marks for things Exaforce built, drawn once here and never substituted with a lookalike. The nav, chain and ui sets are UI furniture. All of those are drawn with currentColor, so they take the text colour of wherever they sit. The trust marks are fixed-colour certification artwork and should not be recoloured. Inlined here by fetch; reference them by path or paste the SVG.
Customer, investor and review logos
Third-party marks, used as supplied. Customers ship in three fixed inks — -color, -black for light surfaces, -white for dark — and must not be recoloured, since the black exports don't share one hex. Investor marks are single files drawn with currentColor, so they follow the theme when inlined. Which customers appear, and in what order, is each site's decision, not this file's.
Use it
Two ways in. Sites without a build step link to the hosted files; sites with a bundler install the package so everything ships in their own CSS.
No build step (vanilla HTML)
<!-- in <head>, in this order --> <link rel="preconnect" href="https://HOST"> <script src="https://HOST/v1/theme.js"></script> <link rel="stylesheet" href="https://HOST/v1/exaforce.css"> <!-- only on pages that render Japanese: --> <link rel="stylesheet" href="https://HOST/v1/fonts-ja.css"> <!-- optional, only if the first paint must be in the web font: --> <link rel="preload" as="font" type="font/woff2" crossorigin href="https://HOST/fonts/inter-tight-latin-wght-normal.HASH.woff2">
Pick /v1/ to receive approved updates automatically, or /1.1.9/ to pin. Hashed font names are listed in manifest.json. Want tokens without the element defaults? Link fonts.css and tokens.css instead of exaforce.css.
With a bundler (Astro, Vite)
npm install github:exaforce/force-design-system#v1.1.9 /* global.css */ @import '@exaforce/design-system'; /* fonts + tokens + base */ /* or, à la carte */ @import '@exaforce/design-system/fonts.css'; @import '@exaforce/design-system/tokens.css';
<!-- layout head -->
<script is:inline src="/theme.js"></script> <!-- copy from node_modules/@exaforce/design-system/src/theme.js -->
<img src={logo} alt="Exaforce" /> <!-- import logo from '@exaforce/design-system/assets/logo/exaforce-logo.svg' -->
Theme toggle
<button data-theme-toggle><span data-theme-label></span></button> <!-- cycles light → dark → system -->
<button data-theme-toggle="dark">Dark</button> <!-- sets one mode -->
ExaforceTheme.set('light'); ExaforceTheme.resolved(); // "light" | "dark"