For designers

A visual playground that ships safely

Build colour, type and space by eye, see it on real components in every mode, and send it out with a review behind it.

Join the waitlistRead the Quickstart
Palette · LarkspurOKLCH
seed #5B4BD6
Lightcontrast on white
Dark, tunedcontrast on night
Step
600
#5b4bd6
On white
Body text 6.1:1
Dark step on night
Large text only 4.0:1
oklch(51.4% 0.204 281.7)

Pick a seed. Everything on this page follows it.

Design tools

Build the foundations by eye

Pick a few things. See the whole scale, light and dark, before you apply it.

Type scale
  1. 4xl
    39.81px    Larkspur
  2. 3xl
    33.18px    Foundations
  3. 2xl
    27.65px    Grow it by eye
  4. xl
    23.04px    Grow it by eye
  5. lg
    19.2px    Grow it by eye
  6. base
    16px    Readable at every size, light or dark.
  7. sm
    13.33px    Readable at every size, light or dark.
Spacing · T-shirt, 4 px grid
2xs4px
xs8px
sm12px
md16px
lg24px
xl32px
2xl48px
3xl64px
One token · two values
LightPublishcolor.brand.default#5b4bd6
DarkPublishcolor.brand.default#6b62e2

  1. A palette from one colour

    Light and dark ramps in OKLCH, and every step says what text it can carry.

    Design tools on Tokens

  2. A type scale in a minute

    Pick a ratio and see it on real text. Fluid between two widths, if you like.

  3. Spacing that snaps

    T-shirt, linear or geometric, on your grid.

  4. Dark gets its own values

    Edit Dark in Dark. Light never notices.

Brand Book

Guidelines people actually open

This is the real Brand Book, drawn live for a sample brand. Try each layout, and Dark.

Editorial. A cover, then a long magazine read.

Larkspur · Brand Book · v2.4.0
Drawing the book…

  1. Five layouts, one book

    Docs, Editorial, Board, Chapters or Spec sheet. Readers can switch if you let them.

    See the Brand Book

  2. Arranged your way

    Drag sections, choose each one’s view, Comfortable or Compact.

  3. Never out of date

    Every release rebuilds it, in your own tokens.

  4. Public when you’re ready

    Make it public and your Community page becomes the book.

Icons & Logos

Every icon and logo, in one place

Icons · Phosphor
Larkspur logo, mark with text, on a light background
Web · Lockupon light
Larkspur logo, mark with text, on a dark background
Web · Lockupon dark
Larkspur mark, reversed out of the brand colour
Social · Markreversed
Larkspur favicon at 64, 32 and 16 pixels
Favicon pack64 · 32 · 16

  1. Bring a whole icon set

    Lucide, Material, Heroicons, Phosphor, Font Awesome and more, from a link.

    See Icons & Logos

  2. Logo sets for every use

    Web, Print, Social: each logo on the background it’s made for.

  3. A favicon pack in one click

    favicon.ico, the Apple touch icon and web app sizes, made in your browser.

  4. Released like tokens

    Add one, it’s a minor. Remove one, it waits for a reviewer.

Figma

Stay in Figma. Stay in step.

Review · Card · from FigmaReal result
FigmaStoaken
82%Close

Faithful from 90%Close from 70%

Tokens
4 of 4 found in this Brand
Values on tokens
4 of 22
Most of the gap
the photo

Measured by the Review’s own code on the Card in Stoaken’s Figma test file. Figma sent a photo; until one is uploaded Stoaken draws a placeholder, and the score says so.

  1. Variables, both ways

    Approved releases land as Figma variables. Your edits come back for review.

    The Figma plugin

  2. Components that look right

    Auto layout, styles, text and variants, carried over property by property.

  3. A score, not a promise

    Each one measured against Figma’s own picture, with a score.

  4. Icons, both ways

    Your icons arrive as Figma components. Figma icons come back for review.

Your way of working

A workspace that starts with the design

  1. The Creative view

    Your colours, Brand Book, icons and components first. Developer tools wait lower down.

    Choose a view

  2. A short tour on every screen

    Spotlight shows what each part does, once. Turn it off any time.

  3. Move fast before 1.0

    With velocity, only breaking changes wait for review.

    How velocity works

  4. Bring everyone in

    Reviewers and viewers are always free.

Design it by eye. Ship it with a yes.

Free for two editors. Reviewers and viewers are always free.

Join the waitlistSee pricing