Design System

A complete brand from a single logo.

This sample style guide was generated by Logofai: every colour, type style and component comes from the brand mark above.

Get started View typography
ConfidentCraftedEffortless

01 · Colour system

Palette

Semantic colour tokens for both modes. Use the token, never the raw hex, so themes stay swappable.

LIGHT MODE

Core

Primary#1452F2Main actions, links and key highlights
On Primary#FFFFFFText and icons placed on primary
Accent#F2A413Emphasis moments and promotions
Accent 2#12B5A5Charts, tags and secondary highlights

Surfaces

Background#FFFFFFPage background
Surface#F5F6F8Cards and raised panels
Surface 2#ECEEF2Wells, table stripes and hover fills
Border#E4E7ECHairlines and dividers

Text

Text#0E0F12Headings and primary copy
Text 2#5A5F69Supporting copy
Muted#8A909CPlaceholders and disabled states

DARK MODE

Core

Primary#4A7BFFMain actions, links and key highlights
On Primary#FFFFFFText and icons placed on primary
Accent#FFC14DEmphasis moments and promotions
Accent 2#2BD4C3Charts, tags and secondary highlights

Surfaces

Background#0B0C0FPage background
Surface#14161BCards and raised panels
Surface 2#1D2027Wells, table stripes and hover fills
Border#272B34Hairlines and dividers

Text

Text#F2F3F5Headings and primary copy
Text 2#A9AEB9Supporting copy
Muted#6E7480Placeholders and disabled states

02 · Typography

Type scale

Headings set in Inter Tight, body copy in Inter. Sizes pair with fixed line heights for a steady vertical rhythm.

Display · 56/1.05Inter Tight 700
A complete brand from a single logo.
H1 · 40/1.1Inter Tight 700
Build once, stay consistent
H2 · 30/1.15Inter Tight 600
Every surface speaks the same language
H3 · 22/1.25Inter Tight 600
Feature card title
Eyebrow · 12Inter 600 · tracked
Section label
Lead · 19/1.55Inter 400
This sample style guide was generated by Logofai: every colour, type style and component comes from the brand mark above.
Body · 16/1.6Inter 400
Clear authoritative body paragraphs carry the product's voice. Links and emphasis use the primary colour sparingly so attention lands where it matters.
Small · 14/1.5Inter 400
Fine print, footnotes and legal copy.
Label · 13.5Inter 600
Form field label
Code · 13.5 monoui-monospace
--primary: var(--primary);

03 · Actions

Buttons

Pill-shaped actions in four weights plus an accent variant. One primary action per view.

04 · Containers

Cards

Pricing, feature, testimonial and promotional cards, all built from the same surface and radius tokens.

Starter

Essential

$XX
  • Core features
  • Community support
  • Monthly reports
Most popular

Advanced

$XX
  • Everything in Essential
  • Priority support
  • Advanced analytics
  • Unlimited seats
Teams

Expert

$XX
  • Everything in Advanced
  • Dedicated manager
  • Custom contracts

Measured, not guessed

Colour tokens are read from the real logo pixels.

Ready for developers

CSS variables and a design.md you can paste into AI builders.

Light and dark, done

Both modes ship tuned and readable out of the box.

“It felt like hiring a brand studio, except it was done before my coffee got cold.”
A Logofai customer
“It felt like hiring a brand studio, except it was done before my coffee got cold.”
A Logofai customer

05 · Inputs

Forms

Comfortable targets, visible labels and a strong focus ring. Click into a field to see the focus state.

We reply within one business day.

06 · Disclosure

FAQ

What am I looking at?

A live sample of the style guide Logofai generates from a logo.

Is my result this complete?

Yes, every design system includes all of these sections for your brand.

Can developers use it directly?

Yes, tokens are CSS custom properties plus a design.md for hand-off.

Does dark mode come included?

Always. Try the toggle in the top-right corner.

07 · Rhythm

Spacing

An 8-based scale. Compose layouts only from these steps.

4px
8px
12px
16px
24px
32px
48px
64px
96px

Radius

6px
10px
base 14px
20px
pill

08 · Depth

Elevation

Four shadow levels. Most UI lives on levels 1 and 2; reserve 4 for modals.

--sh-1
--sh-2
--sh-3
--sh-4

09 · Breakpoints

Responsive

NameMin widthContainerColumns
Mobile0fluid − 32px4
Tablet640pxfluid − 48px8
Laptop1024px960px12
Desktop1280px1120px12
360
640
1024
1280
1536