Library

Tokens Only

Use Sitka's design tokens in any framework — or no framework at all. Available as CSS custom properties, raw JSON (DTCG format), and a typed JS/TS module.

What's in the token set

Color

Brand · Neutral · Semantic

Spacing

0–96 px scale

Typography

Size · Weight · Leading

Border Radius

sm → full

Shadow

sm → xl · glass · glow

Motion

Duration · Easing curves

Option A — CSS custom properties

Paste the token block into your global stylesheet and reference tokens anywhere via rgb(var(--token-name)). Works in any framework.

tokens.css

css

:root {
  /* Color — surface */
  --background:      9   9  12;
  --surface:        13  13  17;
  --surface-raised: 22  22  28;

  /* Color — accent (Sitka cyan) */
  --accent:         0 192 232;
  --accent-subtle:  0  38  46;
  --accent-muted:   0  72  86;

  /* Color — text */
  --text-primary:   242 242 246;
  --text-secondary: 155 155 170;
  --text-tertiary:  100 100 115;

  /* Color — border */
  --border:          38  38  48;
  --border-subtle:   26  26  33;

  /* Border radius */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

/* Usage */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-md);
  color: rgb(var(--text-primary));
}

Option B — JSON (DTCG)

The canonical token file lives at src/tokens/tokens.json and follows the Design Token Community Group (DTCG) spec. Download it from the Token Export page or copy it into your pipeline directly.

tokens.json (excerpt)

json

{
  "$schema": "https://sitka.design/tokens/v1",
  "color": {
    "brand": {
      "cyan": { "$value": "#00C0E8", "$type": "color" },
      "500":  { "$value": "#34a865", "$type": "color" }
    },
    "semantic": {
      "success": { "$value": "#22c55e", "$type": "color" },
      "warning": { "$value": "#f59e0b", "$type": "color" },
      "error":   { "$value": "#ef4444", "$type": "color" }
    }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" },
    "16": { "$value": "64px", "$type": "dimension" }
  },
  "borderRadius": {
    "md":  { "$value": "10px", "$type": "dimension" },
    "lg":  { "$value": "14px", "$type": "dimension" },
    "full":{ "$value": "9999px", "$type": "dimension" }
  }
}

Option C — JS/TS module

For tooling, style-system integrations, or runtime lookups, import the tokens directly as a typed object:

tokens.ts

export const tokens = {
  color: {
    brand: {
      cyan:  "#00C0E8",
      "500": "#34a865",
      "600": "#289452",
    },
    neutral: {
      "0":   "#ffffff",
      "900": "#171717",
      "950": "#0a0a0a",
    },
    semantic: {
      success: "#22c55e",
      warning: "#f59e0b",
      error:   "#ef4444",
      info:    "#3b82f6",
    },
  },
  spacing: {
    "1":  "4px",
    "2":  "8px",
    "4":  "16px",
    "8":  "32px",
    "16": "64px",
  },
  borderRadius: {
    sm:   "6px",
    md:   "10px",
    lg:   "14px",
    xl:   "20px",
    full: "9999px",
  },
  shadow: {
    sm:    "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)",
    md:    "0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06)",
    glow:  "0 0 0 1px rgba(0,192,232,0.3), 0 0 20px rgba(0,192,232,0.15)",
  },
  motion: {
    duration: { fast: "150ms", normal: "250ms", slow: "400ms" },
    easing: {
      spring:       "cubic-bezier(0.16, 1, 0.3, 1)",
      springBouncy: "cubic-bezier(0.34, 1.56, 0.64, 1)",
    },
  },
} as const;

export type Tokens = typeof tokens;

Use it in style-in-JS, Emotion, styled-components, or any custom theming layer that accepts plain JS values.

Example — Emotion

tsx

import { css } from "@emotion/react";
import { tokens } from "./tokens";

const cardStyle = css`
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: ${tokens.borderRadius.md};
  box-shadow: ${tokens.shadow.md};
  padding: ${tokens.spacing["4"]};
  color: rgb(var(--text-primary));
`;

export function Card({ children }: { children: React.ReactNode }) {
  return <div css={cardStyle}>{children}</div>;
}

Automating with Style Dictionary

The DTCG-formatted tokens.json can be fed directly into Style Dictionary to generate platform-specific outputs (Swift, Kotlin, CSS, SCSS, JSON, JS, and more):

style-dictionary.config.js

export default {
  source: ["tokens/tokens.json"],
  platforms: {
    css: {
      transformGroup: "css",
      prefix: "sitka",
      buildPath: "dist/",
      files: [{ destination: "tokens.css", format: "css/variables" }],
    },
    js: {
      transformGroup: "js",
      buildPath: "dist/",
      files: [{ destination: "tokens.js", format: "javascript/es6" }],
    },
    ios: {
      transformGroup: "ios-swift",
      buildPath: "dist/",
      files: [{ destination: "SitkaTokens.swift", format: "ios-swift/class.swift" }],
    },
  },
};

Back to all libraries · Download tokens.json.