AlignUI· Design Systemalignui.com

Figma-first design system · comprehensive tokens

The design system that scales with your team.

AlignUI structures its system in three layers — design tokens (500+ variables), components (80+ primitives), and patterns (composed layouts). The Figma and React versions share the same vocabulary exactly.

Color Palette28 tokens

background#ffffff

surface#ffffff

surface-muted#f7f7f7

surface-secondary#f2f2f2

ink#0a0a0a

ink-inverted#ffffff

text-secondary#2e2e2e

text-emphasis#3d3d3d

text-muted#525252

text-tertiary#707070

text-disabled#8f8f8f

text-placeholder#b8b8b8

on-background#0a0a0a

on-surface#0a0a0a

on-primary#ffffff

primary#335cff

primary-tint#e1e9ff

accent#f05023

success#1fc16b

warning#f9c700

error#e5404c

border#ebebeb

border-strong#3d3d3d

focus-ring#99adff

focus-ring-soft#ccd5ff

shadow-near#f5f5f5

shadow-edge#ededed

shadow-soft#e6e6e6

Buttons

TypographyGoogle Font

Figtreebrand uses Inter Variable

display-hero

Align your system.

80px · 550 · -2.8px

display-large

Tokens, components, patterns

48px · 550 · -1.344px

heading-1

40px · 550 · -0.8px

heading-2

text-label-m-medium · 14px Inter 500 · ls -0.084px

32px · 550 · -0.896px

heading-3

28px · 550 · -0.56px

IconsRi

Set: Ri · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Tokens, components, patterns

AlignUI structures its system in three layers — design tokens (500+ variables), components (80+ primitives), and pattern…

Design System

none

badge

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Tokens, components, patterns

AlignUI structures its system in three layers — design tokens (500+ variables), components (80+ primitives), and patterns (composed layouts). The Figma and React versions…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemAlignUI

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to AlignUI.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// AlignUI tokens
export const theme = {
  primary: "#335cff",
  radius: "9px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

AlignUI is the first Figma kit where the code and the design file are actually the same system.

AlignUI · Design System