Introducing the design data layer

Move your brand from Figma to production

Fernwood keeps your visual identity honest by collecting, versioning and delivering design tokens and assets to every codebase you own — on every commit.

Start for free Book a demo

Already relied on by 1,284 product teams

Halden Kestrel ORCHARD LABS Polaris Vantage Studio

Merrow Bramble & Co FOLDWORK inCanto Tallow#

Your brand. Your products.
Always in step.

Meet the design data layer your engineers stop arguing with.

Every brand is a stack of tiny decisions

Every day your team picks a shade, a step on the spacing scale, a border radius. Those choices are what make a product feel like yours — and what quietly drift apart across platforms.

Colors · Moss

Text styles

Heading

Subtitle

Body

Icons

Gradients

1 Title

desktop-heading-1 Sora-SemiBold base-space-4 text-high-emphasis

2 Spacer

base-space-6

3 Description

desktop-body-large Sora-Regular base-space-4 text-low-emphasis

123

Your brand is what tells people apart from every other tab they have open

A recognisable, consistent surface helps people find what they came for and finish the job without second-guessing the interface.

Every product and platform in step — automatically.

With one source of truth, a decision made on Tuesday morning lands translated into each platform's own format before standup ends.

.JSON

StorefrontiOS JSON

.XML

Field appAndroid XML

.CSS

ConsoleWeb CSS

Meet the design data layer you keep sketching on whiteboards.

Your brand and your products, kept in step by Fernwood.

Collect design decisions

Connect the tools your team already opens and build a networked design API in an afternoon.

Store

Distribute

@fernwoodapp / Halden-Design-System Send feedback Portrait by Prince on Pexels

Color (7)

Search… Sync tokens Sources (1) Active

NamePreviewValueAddedUpdatedSource

Colors / Mossrgba(35, 122, 86, 1)Mar. 14, 20264 minutes ago Fernwood · Core file · Local styles

Colors / Inkrgba(21, 32, 27, 1)Mar. 14, 20264 minutes ago Fernwood · Core file · Local styles

Colors / Fernrgba(111, 191, 143, 1)Mar. 14, 20264 minutes ago Fernwood · Core file · Local styles

Colors / Stonergba(205, 211, 206, 1)Mar. 12, 20264 minutes ago Fernwood · Core file · Local styles

Colors / Emberrgba(201, 134, 60, 1)Mar. 12, 20264 minutes ago Fernwood · Core file · Local styles

For designers

Turn static styles into a living system that every service and platform can read.

Own the decisions instead of the handoff doc
Ship a style change without booking engineering time
See exactly where each token landed, platform by platform

One source of truth for every token you publish

Gradients

Spacings

4PX SYSTEM

Meet your next-generation design API

Figma and Fernwood, always in step

Open-source and custom parsers

to-tailwindto-theme-ui to-jsxto-sass-map svgoconvert-font suffix-bysvg-to-jsx +31

A design API shaped like your pipeline

Color shades

Typeface assets

For developers

Say goodbye to design QA tickets. Build efficient pipelines on top of open-source parsers.

Stop hand-patching tokens and assets release after release
Control exactly what gets synced into your project, and how
Get an automatic pull request for every design update

For managers

Adopt one shared design language, and get back the consistency your roadmap keeps borrowing against.

Grow the team without growing the drift
Cut 3 weeks off the average interface refresh
Put design and engineering on the same source of truth

Align and scale your teams, your brand and your products. Always in step.

Control style updates from inside your codebase

Your team is unusual and so is your repo. A flexible configuration keeps you in charge of exactly what Fernwood writes, whatever stack you are running.

Read the documentation

01 {
02   "repository": "@halden/design-system",
03   "personalAccessToken": "4f9c23aa581b321d34c58e",
04   "rules": [
05     {
06       "name": "Design Tokens / Colors",
07       "path": "assets/styles/variables/colors.css",
08       "filter": {
09         "types": ["color"]
10       },
11       "parsers": [
12         {
13           "name": "sort-by",
14           "options": {
15             "keys": ["name"]
16           }
17         },
18         {
19           "name": "to-css-custom-properties"
20         }
21       ]
22     }

Trusted by product teams

Join the people building with Fernwood in the community forum ↗

Kestrel

We used to keep a spreadsheet of which app had which grey. That spreadsheet has been deleted, which is the highest compliment I can pay a tool.

Maartje de KortProduct Designer

Halden

Fernwood is the missing link between our design and engineering teams. Tokens land in the repo as a reviewable pull request, so nobody has to trust a screenshot.

Idris BelloFront-end Engineer

FOLDWORK

Perfect addition to our front-end boilerplate. Tokens, assets, fonts — everything arrives straight from the design file. Less configuration, more shipping.

Portrait by Thanh Xuan Nguyen Ly on Pexels

Priya RaghunathanDesign Systems Lead

inCanto

We rebranded two products and a marketing site in nine days. Previous attempt took a quarter and we still found the old orange in production.

Tobias LindqvistHead of Platform

Polaris

The audit view alone paid for the year. It showed us 62 unmanaged colours sitting in the checkout flow that nobody had signed off on.

Rosa AmayaStaff Designer

Let's build the design data layer of your dreams, together

We support Figma today and ship a GitHub app, an API and a CLI to match how developers actually work. Which tools should join the catalogue next?

Request an integration

Your brand. Your products.Always in step.

Meet the design data layer your engineers stop arguing with.

Start for free Book a demo