Skip to content
Book a call (opens in a new tab)
Book a call (opens in a new tab)

A design system your agents can read. Free.

546 design tokens and 48 components, in Figma and in code, written so a person or an agent can make on-brand work without a meeting.

Get the filesSee every component (opens in a new tab)
The simbolik design system, drawn in characters.
components
48
design tokens
546
themes, 1 attribute apart
2
for all of it
$0

This page is the demo.

Every part below is the real component, and it all works. Point at one to see the design tokens it reads.

See all in Showroom (opens in a new tab)

  • Design tokens rebuilt

    Both themes are up to date.

    One value typed by hand

    The checker found it in settings.css.

  • ⌘K
  • Components and the design tokens they read
    Buttonsmbk-btn59
    Switchsmbk-switch27
    Inputsmbk-input24
  • Rebuilding design tokens64%

  • Every value is a design token, and every one has a name.

  • Simon MartinDesigner, simbolik
    DesignAI
    Follow on X (opens in a new tab)

  • Primitive color in button.css

    Use the semantic role. Primitives never reach CSS.

  • What is a design token?
    A design choice with a name, such as a color, a space or a timing, so people and tools use the same one.
    Can an agent read it?
    Yes. Every component ships with a manifest that lists its options.
  • Copy the design token name
    ⌘C
  • DraftBetaPassingDegradedFailing
    FigmaCSSReact

Inside a component, press Escape to reach its Showroom link.

Point at any component

Its design tokens show here.

Dark mode is a single attribute away.

Every color and shadow is a named role, so the same screen redraws itself when the theme flips. Press its switch, or give it a few seconds.

data-theme="dark"

simbolik

Alpha

48 components and 546 design tokens, in Figma and in code.

Dark theme

One attribute changed.

  • color.surface.canvas
  • color.text.default
  • color.surface.brand
  • color.surface.default
  • color.feedback.info.surface-subtle
  • color.text.subtle
  • color.border.edge-highlight
  • color.action.brand.background

Depth comes in floors.

Each surface is a floor or a well cut into one, with its shadow set by a design token instead of picked by eye.

  • RaisedCards and menus. The thing you act on.
  • DefaultSections, panels, the header.
  • WellCut into a floor: fields, code, pictures.
  • CanvasThe page itself. Everything stands on it.

Readable by machines, on purpose.

Design tokens as data, components as manifests and rules as checks, so an agent gets something it can't argue with.

See a site built inside it

~/signup

Make a sign-up screen for the mobile app.

Readbrief.md

  • One column, email and password.

Readsimbolik/

  • 13 foundations: color, typography, space, motion and more
  • 546 design tokens
  • 48 component manifests
  • 12 rules the checker enforces

Pickcomponents

  • input, button, checkbox, link

Writesignup.html

  • Built from 4 components

Writesignup.css

.site-signup__panel {
  padding: var(--smbk-space-inset-2xl);
  background: #f3f5f8;
}

Runnpm run check

  • 1 violation
  • raw-value Design value written by hand
  • signup.css:3 background: #f3f5f8
  • Raw color #f3f5f8. Use a semantic color role (--smbk-color-*).

Editsignup.css

  background: #f3f5f8;
  background: var(--smbk-color-surface-default);

Runnpm run check

  • 0 violations

Reviewcontrast

  • Text at 4.5:1 or more, light and dark

Reviewscreenshots

  • Phone and desktop, both themes

Shipped: the sign-up screen

2 files, 0 violations

  1. Request
  2. Brief
  3. System
  4. Build
  5. Check
  6. Review
  7. Ship

Free, all of it.

Nothing is locked behind a paid tier, so rebrand it, fork it and build your own product on it.

$0everything included
Get the filesInspect everything first (opens in a new tab)

Follow the system as it grows.

I build in public, on X.

Follow @s1mbolik (opens in a new tab)LinkedIn (opens in a new tab)

Need this for your company? Book a call (opens in a new tab).