Not another token manager — a system generator

Design and code, running together.

Bring your brand guidelines. Get tokens, themes, React + TypeScript components, documentation and a brand book — generated together, inspectable before you adopt them.

Create a system See it run

fernlight LogoFull lockup

Full logo lockup

Mark and wordmark, generated from page 3 of the Fernlight guidelines. Clearspace and minimum size come from the same tokens your components use.

Generated with Two.run

fernlight

Your brand, built once — as a system you can ship.

Brand book, design files, code — most teams build their brand three times. Two.run builds it once.

You bringinput

Brand guidelines (PDF)Logos (SVG/PNG)Font filesToken files · W3C JSON, Tokens Studio, Style Dictionary

Two.run generatessystem

TokensThemesComponentsExample screensDocumentationBrand book

You receiveoutput

Installable packageEditable source you ownValidation reportInstall guide

Generate

→Primitive, semantic and component tokens
→Light, dark and multi-brand themes
→React + TypeScript components and example screens

Inspect

→Change a token, see every component it touches
→AI suggestions arrive as proposals, never silent edits
→Lock approved brand values

Adopt

→Installable package with install guide
→Validation report: passed, failed, needs review
→A brand book generated from the same source

Most tools manage one layer. Two.run builds all nine.

From the first PDF to an installable package — every layer generated from one source, so a change at the top flows all the way down.

01 Brand intelligence Reads guidelines, logos and fonts into structured brand data. Brand profile

02 Art direction Proposes visual directions, compared on the same real screen. Chosen direction

Where most token tools focus

03 Tokens Primitive, semantic and component tiers — each traceable to its source. Token architecture

04 Themes Light, dark and multi-brand from one structure. Theme files

05 Components React + TypeScript with variants, states and accessibility built in. Component library

06 Screens Real screens composed only from your components. Gaps are flagged. Example app

07 Brand book A guidelines deck generated from the same source as the code. PDF

08 Validation Contrast, focus and type checks — evidence, not claims. Report

09 Delivery A versioned, installable package you own. Package

Next Repository sync & pull requestsTeam review & releasesEnterprise governance

Seven capabilities. One source of truth.

Each one stands on its own. Together they take you from a brand PDF to a shipped product.

fernlight

Reads your brand like a designer would.

Guidelines, logos and fonts become structured, lockable brand data — with the page each value came from.

Explore brand intelligence →

Tokens, themes and type — generated, not configured.

Explore →

<Button variant="primary"> Create workspace </Button>

@fernlight/ds 1.0.0
├─ tokens/   W3C JSON
├─ themes/   light · dark
├─ src/      React + TypeScript
└─ docs/     yours

Source you own. No runtime, no lock-in.

See how install works →

Works alongside the token tools you already use.Two.run imports and exports the W3C Design Tokens format. Generate your system here, keep managing tokens wherever your team already does.

Supported formats →

Live example

Two views.
One decision.

Cycling themes live

Designrendered

RRiverside Ops Invite

Setup Workspace Team Billing Step 1 of 3

TeamPersonal

Create your workspace

You can change these settings later.

Workspace name

Team size11–50 RegionOceania

Invite teammates after setup

Draft saved

color.action.primary → teal.600 radius.control → 10px

Codethemes/fernlight-light.css

1/* themes/fernlight-light.css */
2[data-theme="fernlight-light"] {
3  --color-action-primary: var(--teal-600);  /* #0F766E */
4  --color-surface-default: var(--neutral-0);
5  --radius-control: 10px;
6  --font-family-body: "IBM Plex Sans";
7}
8
9// Onboarding.tsx — identical in every theme
10<Card>
11  <Heading>Create your workspace</Heading>
12  <TextField label="Workspace name" />
13  <Checkbox label="Invite teammates after setup" />
14  <Button variant="primary">Create workspace</Button>
15</Card>

Content and layout stay. Only the tokens change.

Editable source, yours to keep

Everything in one package

fernlight-ds-1.0.0.zipValidated · ready to install

tokens/primitive · semantic · component

themes/light · dark

src/components/React + TypeScript

examples/realistic screens

docs/usage · a11y · decisions

guidelines/brand book · PDF

VALIDATION.mdthe report

The package

Download.
Unzip. Import.

One archive per version: tokens, themes, components, examples, docs, the brand book and the validation report for exactly what you received.

// app/root.tsx
import { ThemeProvider } from '@fernlight/ds';
import '@fernlight/ds/themes/light.css';

teal.600primitive color.action.primarysemantic Savebutton.primarycomponent

Token architecture

Primitive, semantic and component layers — every value traceable.

LIGHTteal.600 Continue

DARKteal.400 Continue

Themes

Light, dark or many brands on one set of components.

  <Button variant="primary">  Continue </Button> <Switch checked /> 

Continue Notify me Remember

React components

Typed API, variants, states and token dependencies.

Version 1.0Brand
Guidelines

Brand book

A guidelines deck generated from the same tokens. PDF now; .pptx coming soon.

Button Use one primary action per view. Pair it with a secondary when there is an alternative.

DoBackSave

Don'tBackSave

Documentation

Usage, accessibility notes and the reasoning behind decisions.

Text contrast, both themesPass

Visible keyboard focusPass

Component API typesPass

Icon button labelsReview

VALIDATION.md · v1.0.0

Validation report

What passed, what failed and what needs a person.

Supported today: React 19, TypeScript 5, CSS Modules with CSS custom properties, W3C Design Tokens import and export. Not yet: automatic repository migration, pull requests, team approvals.

Bring your brand.We'll run with it.

Create a system

Progress saves as you go.