FeatureKitAI + Design Systems

Brand preview

See your brand run this whole site.

Drop in a logo or a screenshot. Your browser pulls out the colours, maps them to tokens, fixes any contrast that fails AA and re-themes every page. Then take the tokens for web, iOS and Android.

01 · Your brand

Start with an image

Runs in this tab. Your image is never uploaded.

No file handy? Try a sample
Corner radius

02 · Preview

Same components, your colours

These are the site’s real components, drawn with the generated tokens in both modes.

Light

Design system

One token layer, every platform.

Web, iOS and Android read the same colours, type and radius, so a change ships everywhere at once.

7colour tokens per mode
2modes, light and dark
4output formats
  • bg#F1F4F7
  • fg#0D1418
  • mid#4A5A66
  • linergba(13,20,24,.14)
  • acc#0A66C2
  • acc2#0A7A52
  • on#FFFFFF
Dark

Design system

One token layer, every platform.

Web, iOS and Android read the same colours, type and radius, so a change ships everywhere at once.

7colour tokens per mode
2modes, light and dark
4output formats
  • bg#0F1418
  • fg#E4EEF4
  • mid#8FA6B4
  • linergba(228,238,244,.14)
  • acc#4CC2FF
  • acc2#5BE9B9
  • on#04212F

03 · Contrast

Checked against WCAG AA

contrastWCAG 2.1 AAlight + dark
Waiting for coloursPick an image or a sample above.

04 · Tokens

Take the tokens with you

The same brand, emitted for each platform by the generators that build this site.

Pick an image or a sample to generate tokens.

Next

Want the real thing?

This preview maps colours. A FeatureKit design system adds your type, components and the front end on web, iOS and Android.

Talk to us