BrandKitEditor

Controlled form over a BrandKit: hex fields with a native color picker and contrast hints, font selects, a radius slider, logo uploads, and the review alert with Approve for an extracted kit.

Playground

Auto dark mode is saved with the kit; the preview's Follow appearance, Light and Dark controls are temporary. Colors always edit the base palette. Legacy kits stay light until Auto is selected.

kit
mode
appearance
logos
extraction

Content preview

Preview only. Your saved colors stay unchanged.

Preview appearance
Northwind Traders logoNorthwind Traders

Make your next move.

Bring your ideas into focus with a look that feels like you, wherever your work takes you.

Explore what's possible
Built around your ideas

A place for the details that make your brand yours.

Northwind Traders logo
  • Primary
  • On primary
  • Background
  • Foreground
  • Card
  • Muted
  • Border
  • Accent
HeadingFraunces
BodyWork Sans
Radius12px

Identity

Extracted

A successful pull costs 3 credits, even if you discard it. Nothing is saved until you save or create the kit.

Colors

Dark modeAuto creates a dark version for dark appearances. These fields always edit your base colors.

On primary on primary: 5.5:1

Foreground on background: 17.2:1

Type and shape

Heading font
Body font
12

Logo

Northwind Traders logo
Logodata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2232%22%20viewBox%3D%220%200%2096%2032%22%3E%3Ctext%20x%3D%224%22%20y%3D%2224%22%20fill%3D%22%231c1917%22%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20font-weight%3D%22700%22%3EBrand%3C%2Ftext%3E%3C%2Fsvg%3E
No logo
Logo on dark

Documents

How your PDFs are laid out. Every document you make starts from these.

Page size
Orientation
Spacing
Headings
Body
Header rule
Printed at the foot of every page. Leave it empty to use your brand name.
<BrandKitEditor
  kit={draft}
  onChange={setDraft}
  onSave={save}
  onApprove={approve}
/>