Docs/Getting started
Getting started
Go from a brand guidelines PDF to an installed React design system. Most teams reach a first preview in one sitting.
5 minUpload your brandPDF, logos, fonts10 minReview the systemTokens, themes, components2 minInstall the packageReact + TypeScript
1. Create a system
Upload your guidelines and any logos or font files. Two.run extracts colours, type and logo rules, then asks you to lock anything that's already approved. Choose React + TypeScript as the target and pick a direction.
2. Install the package
Download the package from Delivery and add it to your repository.
# unzip into your workspace unzip fernlight-ds-1.0.0.zip -d packages/fernlight-ds // app/root.tsx import { ThemeProvider } from '@fernlight/ds'; import '@fernlight/ds/themes/dark.css';
3. Bring or export tokens
Already manage tokens elsewhere? Import a file in the W3C Design Tokens format, or export Two.run's tokens to keep using the tools your team already has.
i
Locked values in an imported file stay locked. Two.run won't rewrite them during generation or AI suggestions.
Supported formats
| Input / output | Format | Status |
|---|---|---|
| Brand guidelines | Supported | |
| Logos | SVG, PNG | Supported |
| Fonts | WOFF2, OTF, TTF | Supported |
| Tokens in / out | W3C Design Tokens (JSON) | Supported |
| Components | React 19 + TypeScript 5 | Supported |
| Brand book | PDF (.pptx soon) | Supported |
| Repository sync | GitHub, GitLab | Roadmap |