Systemly — Design System Builder

Brand basics

Fill in your brand details — the preview updates live.

Brand name

Industry

Brand personality — optional

Colors

Primary

Accent

Surface

·

Typography

Display font Type to search · or upload ↑

🔍

↑

Body font Type to search · or upload ↑

🔍

↑

Display

Lora

Aa Bb Cc

Body

DM Sans

The quick fox

Border radius

8px

Export formats

◈

Figma Library

.fig

{ }

CSS Tokens

.css

⚛

React Components

.zip

⊟

PDF Style Guide

.pdf

Your brand, beautifully systemed.

Buttons

Badges

Active Pending Draft

Input

Card

Brand

Patient overview

Next appointment scheduled for Thursday at 2:00 PM. Two pending lab results awaiting review.

2 pending

DisplayThe headline

H1Page heading

H2Section heading

BodyThe quick brown fox jumps over the lazy dog.

CaptionSupporting text and metadata

Color tokens

primary

#111827

accent

#2D6EF5

surface

#F0F2F8

success

#4E9E76

warning

#D97B2A

danger

#C94040

Your Brand

Design system · 128 tokens · Generated just now

Color palette

Typography

Display

Aa

Lora

Heading 1

Heading 2

Heading 3

Body

Aa

DM Sans

Body text sample with normal weight and comfortable reading size.

Caption · Label · Metadata

Components

Buttons

Badges

New Active Success Warning Error

Input

Focused input state…

Spacing scale

4

8

16

24

40

64

Semantic color tokens

Background

background

--color-bg · #FFFFFF

background-subtle

--color-bg-subtle · #F9FAFB

background-muted

--color-bg-muted

Foreground

foreground

--color-fg

foreground-muted

--color-fg-muted · #6B7280

accent

--color-accent

Border

border-default

--color-border · #E5E7EB

border-accent

--color-border-accent

States

success

--color-success · #4E9E76

warning

--color-warning · #D97B2A

destructive

--color-destructive · #EF4444

Type scale

Token

Sample

Size

Line-h

Weight

--text-5xl

Aa

36px

1.1

600

--text-3xl

Heading 1

24px

1.2

500

--text-2xl

Heading 2

20px

1.3

500

--text-xl

Heading 3

18px

1.4

500

--text-base

Body text — comfortable reading size

15px

1.6

400

--text-sm

Small text, labels, secondary info

13px

1.5

400

--text-xs

CAPTION · META

11px

1.4

500

Shadows & elevation

none

--shadow-none

sm

--shadow-sm

md

--shadow-md

lg

--shadow-lg

xl

--shadow-xl

Accent shadow

--shadow-accent · 0 4px 16px accent/35%

Form components

Select

Choose an option

--radius-md · --border-default · --bg-input

Checkbox

Checked

Unchecked

Indeterminate

Radio

Selected

Unselected

Toggle

On

Off

--radius-full · --color-accent (on state)

Feedback components

Info alert

Something useful the user should know about.

Success alert

Your changes have been saved.

Error alert

Something went wrong. Please try again.

Toast

System generated successfully ✕

--bg-inverse · --text-inverse · --radius-lg

Tooltip

--bg-inverse · z-index: 50 · --radius-sm

Breakpoints & grid

xs

320px

sm

640px

md

768px

lg

1024px

xl

1280px

2xl

1536px

12-column grid

columns: 12 · gutter: 16px · margin: 24px

Your design system is ready.

128

Tokens

4

Formats

2

Fonts

12

Components

Export

Figma Tokens

Import with Systemly plugin

↓ .json

{ }

CSS Tokens

Custom properties + Tailwind config

↓ .css

⚛

React Components

Tailwind + shadcn, pre-themed

Soon

⊟

PDF Style Guide

Print or save as PDF

↓ .pdf