How to use StyleBook

Colours

Browse → Colours is the full colour library: a filterable grid of swatches you can search by name or hex, and narrow down by family, mood, style, or collection.

Click into any colour to see its detail view:

• Its RGB and HSL values alongside the hex code, for whichever format you need.
• A real contrast check against pure white and pure black, so you can tell at a glance whether it works as text on a light surface, a dark surface, or both.
• A short editorial note — what the colour evokes, where it tends to work well, and what to watch out for. It’s written once per colour and shows up everywhere that colour appears (browse grid, Preview Lab, Studio), behind the small “i” icon on the swatch.

Click the star on any swatch to favorite it — favorites are saved to your account and show up on your dashboard.

Fonts

Browse → Fonts works the same way, rendered in each font’s own typeface so you’re never reading a font’s name in a system font. Filter by category (serif, sans, display, mono, handwriting), mood, or use-case, and edit the live preview text on any card to see how that specific font handles your own words — a heading, a sentence, whatever you’re actually going to use it for.

Each font card also suggests pairings — fonts from the library that tend to work well alongside it, if you’re picking a heading/body combination and want a sensible starting point.

Themes

Browse → Themes is a curated gallery of complete looks — a colour palette, a font pairing, and a type scale, bundled together and judged as a system rather than as separate pieces. Filter by category: minimal, bold, luxury, playful, earthy, tech, elegant, retro, neon, coastal, editorial, or brutalist.

Open any theme’s detail page and you’ll see it rendered on a small live mockup — a card, a button, a heading, body text — so you’re judging it the way it’ll actually be used, not as an isolated swatch list. From there you can send it straight into Studio to keep building on it.

Preview Lab

The Preview Lab (at /studio/compare, and embedded inside Studio too) is where you check whether colours and fonts actually work together, before committing to them. It’s three connected views you switch between with tabs, all sharing the same selection:

• Side-by-side swatches — drag colours into a row and reorder them. Every adjacent pair shows a live contrast badge (WCAG AA/AAA pass or fail), so problem combinations are obvious immediately, not something you discover later.
• Mood mockup — the same colours applied to a small fixed layout — a card with a heading, a paragraph, a button, an input — so you see them as backgrounds, text, and accents, which is how they’ll actually be used.
• Font-on-colour — pick a heading font and a body font and see them rendered directly on that mockup, at real type sizes, on the real background colour. This is the step that answers “does this font actually go with this colour” — something no swatch grid or font card can show on its own.

Your selection persists as you flip between the three tabs, and “Send to Studio” carries whatever you’ve got into a new or existing project.

Studio

Studio (at /studio) is where a project actually gets assembled and edited, by hand or starting from an AI-generated result. It’s one live canvas showing a realistic product page — not a sheet of isolated component swatches — built from the same components your export ultimately uses.

Building a palette

Pick colours and assign each one a role — primary, secondary, accent, background, surface, text, and muted text. The canvas updates live as you change roles, so you always see the palette in context rather than as a flat list.

Type

Choose a heading font and a body font, then set the type scale: a base size plus a named ratio (Golden Ratio, Perfect Fourth, and others) that generates every heading and body size from those two numbers, so your headings and body copy stay in proportion instead of being picked one at a time by eye.

Click-to-edit

Click almost anything on the canvas — a button, a card, an input, a badge, a table, the navigation — and an inspector opens for exactly that component. Changes apply live to every instance of that component on the canvas, and where a control shares its styling with a related element (for example, the primary button’s colour also drives the outline and ghost button variants), the inspector says so directly, rather than leaving it to be discovered by trial and error.

You can also preview a component’s hover, active, disabled, or focus state without needing to actually hover or click it — useful for checking a state you’ve customised without hunting for the right element to trigger it on.

Showcase vs. generated content

Studio can show either a fixed showcase page (a realistic layout covering every component type) or, after an AI Generate result, the actual page structure the AI chose for your brand. Both render inside the same canvas with the same styling system, so switching between them never changes how a component looks — only what content it’s showing.

AI Generate

AI Generate (at /studio/ai) is a text box: describe your brand, its audience, and its mood, and Gemini returns a complete starting point — a palette, a font pairing, and a type scale — along with a written explanation of why each choice was made. That reasoning is shown prominently on the result screen, not tucked away, because it’s meant to build trust in the result, not just decorate it.

If the first result isn’t quite right, you don’t have to start over — regenerate with specific feedback (“more muted,” “less corporate,” “warmer”) and it adjusts from there. Once you’re happy with a direction, open it straight into Studio to fine-tune manually, assign roles, or adjust the type scale by hand.

Read the AI Disclaimer for what to double-check before treating a generated result as final.

Tokens

Everything you build in Studio — every colour role, font, type-scale step, spacing value, radius, and shadow — is a design token: a named value rather than a one-off number, so the same decision is reused consistently everywhere it applies instead of being redefined in twenty different places. That’s what makes exporting possible at all: the export formats below are just that same token set, written out in the shape a particular tool or codebase expects.

Both light and dark variants are generated for every project, so a token like “surface” or “text-muted” resolves to the right value automatically depending on which theme is active — you edit the role once, not each mode separately.

Exports

From any project’s export drawer, every token set can be copied or downloaded in nine formats, grouped by what you’re exporting for:

Design tools

• Figma — Tokens Studio token sets, with light and dark wired up as swappable themes.
• Design Tokens — the W3C DTCG standard format, importable via Figma’s Tokens Studio or Design Tokens plugin.
• Style Guide — a Markdown document of every token in the system, ready to drop into a README or a client handoff.

Web

• CSS — custom properties for :root, with a [data-theme=“dark”] override block.
• Tailwind — a drop-in tailwind.config.js with your colours, fonts, type scale, spacing, shadows, and breakpoints.
• React — a typed theme object for styled-components, Emotion, or plain props.

Native apps

• SwiftUI — colour, font-size, spacing, and radius constants for an iOS target.
• Flutter — AppColors / AppTheme with light and dark ThemeData.

Data

• JSON — a human-readable dump of the whole system. Not meant to be imported anywhere — this is the one for reading, not tooling.

There’s also a one-click PDF style guide from the export drawer — a clean, logo-less layout of your palette and type system, useful for sharing outside the app entirely.

Exporting real components to Figma

Beyond token files, StyleBook can export the actual Studio canvas — real, editable Figma frames bound to Figma Variables, not just a token file you have to reconnect by hand. This uses a small StyleBook Figma plugin:

1. In the export drawer’s Figma tab, click “Figma Components ↗” and choose whether to include the current canvas, the full component library, or both.
2. Click generate — this produces a one-time code, valid for 30 minutes.
3. In Figma, install the StyleBook Import plugin and run it, then paste that code in when it asks.
4. The plugin builds real Figma frames — buttons, cards, inputs, and the rest — as fully editable components with their hover, active, disabled, and focus variants intact.

Separately, the “Design Tokens” or “Figma” export tabs give you a plain token file for the Tokens Studio plugin, if all you want is the variables rather than built frames — see the in-app hints on each tab for exactly which file does what.

Accounts & projects

Signing in (just a username and password — see the Privacy Policy for why that’s all it asks for) lets you save projects and favorites to your account instead of losing them when you close the tab.

Your Dashboard lists every saved project with a thumbnail — click in to keep editing, right where you left off. From Account settings you can also permanently delete your account, which removes every saved project and favorite along with it.

Accessibility

The essentials — labels, alt text, semantic landmarks, keyboard operability, skip-to-content — are on for everyone, everywhere in the app, with no toggle required. Beyond that, Account settings has a set of opt-in visual preferences (high contrast, larger text, underlined links, reduced transparency, reduced motion) for anyone who wants the interface to look different from the app’s default design. These are stored only in your browser, apply instantly, and don’t require an account.