SeinX Design Tokens

Canonical design token set for SeinX. Dark-first, WCAG AAA body text, Plus Jakarta Sans.

Usage

CSS (drop-in)

<link rel="stylesheet" href="https://design.seinx.ai/design-tokens.css">

All tokens are CSS custom properties on :root with --sx- prefix:

body {
  background: var(--sx-smoke);
  color: var(--sx-neutral-100);
  font-family: var(--sx-font-family);
}

npm

npm install seinx-design-tokens

import tokens from 'seinx-design-tokens';
console.log(tokens.color.core.signal.$value); // "#3ddc84"

Fonts (v1.1.0+)

Plus Jakarta Sans is bundled as a variable woff2 (upright + italic). Import the @font-face declarations:

@import 'seinx-design-tokens/fonts';          /* declares Plus Jakarta Sans */
@import 'seinx-design-tokens/tokens.css';     /* provides --sx-font-family */

This is the authoritative source for the brand font. Consumers should not import fonts from other downstream SeinX packages.

Branding (v1.2.0+)

Canonical brand marks ship in dist/branding/:

| File | Use | Size | |------------------|---------------------------------------------------------------|---------| | logo.svg | Wordmark — headers, footers | ~2 KB | | icon.svg | Standalone X — app icon, social cards | ~380 KB | | favicon.svg | Browser tab favicon, rounded square | <1 KB | | og-en.png | Open Graph card (EN), 1200×630 (OG spec) | ~580 KB | | og-nl.png | Open Graph card (NL), 1200×630 (OG spec) | ~580 KB | | og-canvas.png | Frozen canvas raster — backdrop source for OG / icon | ~1.9 MB |

Import via subpath:

import logoUrl from 'seinx-design-tokens/branding/logo.svg?url';
import ogEnUrl from 'seinx-design-tokens/branding/og-en.png?url';

Or copy at build time:

cp node_modules/seinx-design-tokens/dist/branding/* public/

Vector marks use real Plus Jakarta Sans ExtraBold glyph outlines (no font references — fully self-contained SVGs). Source-of-truth in src/branding/. Maintainers regenerate via node src/branding/generate.mjs (requires devDependencies + macOS sips).

JSON (fetch)

const tokens = await fetch('https://design.seinx.ai/design-tokens.json').then(r => r.json());

Token Format

Source uses the W3C Design Tokens Community Group (DTCG) format.

Development

node src/build.js    # validate + generate dist/

Visual Reference

See the specimen at design.seinx.ai.

License

MIT for tokens. Plus Jakarta Sans is under the SIL Open Font License.