Design System

Inter · Generated with TokenLab · April 6, 2026

Primary Color#6366f1

Secondary Color#a855f7

Font FamilyInter

Type Scale1.25 (Major Third)

Base Size16px

Spacing Unit4px

Color Palette

The color system defines primary, secondary, and semantic palettes. Each color has 11 shades (50–950) for flexible usage across backgrounds, text, borders, and interactive states.

primary

#f5f5fa

100

#e9eaf6

200

#c8c9ef

300

#999beb

400

#5e61e8

500

#1519ea

600

#161ac0

700

#161898

800

#131571

900

#0f114d

950

#0a0a29

secondary

#f7f5fa

100

#f0e9f7

200

#dcc6f0

300

#c395ee

400

#a558ee

500

#820bf4

600

#6d0fc8

700

#58109e

800

#440f76

900

#2f0c4f

950

#1a082b

neutral

#f7f7f7

100

#efeff0

200

#dadadc

300

#c0c0c4

400

#a0a0a7

500

#7a7b85

600

#67686f

700

#53545a

800

#404045

900

#2c2d2f

950

#19191a

success

#f5faf7

100

#eaf5ee

200

#cbecd7

300

#9fe4b9

400

#69dd94

500

#26d968

600

#23b358

700

#208e48

800

#1b6a38

900

#144827

950

#0c2716

warning

#faf9f4

100

#f7f3e9

200

#f1e6c6

300

#f0d994

400

#f0cb56

500

#f7bd08

600

#ca9c0c

700

#a07c0e

800

#775d0e

900

#50400c

950

#2b2308

error

#faf5f5

100

#f6e9e9

200

#efc8c8

300

#eb9999

400

#e95e5e

500

#eb1414

600

#c11515

700

#981515

800

#721313

900

#4d0f0f

950

#2a0909

Typography Scale

A modular type scale based on a 1.25 ratio (Major Third) with a 16px base. Each step includes recommended weight, line-height, and letter-spacing for optimal readability.

NameSampleSizeWeightHeightSpacing

6xlThe quick brown fox76.3px8001.1-0.025em

5xlThe quick brown fox61px7001.1-0.025em

4xlThe quick brown fox48.8px7001.1-0.025em

3xlThe quick brown fox39.1px6001.2-0.025em

2xlThe quick brown fox31.3px6001.4-0.01em

xlThe quick brown fox25px5001.4-0.01em

lgThe quick brown fox20px5001.40em

baseThe quick brown fox16px4001.60em

smThe quick brown fox12.8px4001.60em

xsThe quick brown fox10.2px4001.60em

Spacing Scale

Consistent spacing creates rhythm and hierarchy. Built on a 4px base unit, the scale covers micro-adjustments through large layout gaps.

1px / 0.0625rem

0.5

2px / 0.125rem

4px / 0.25rem

1.5

6px / 0.375rem

8px / 0.5rem

12px / 0.75rem

16px / 1rem

20px / 1.25rem

24px / 1.5rem

32px / 2rem

40px / 2.5rem

48px / 3rem

64px / 4rem

80px / 5rem

96px / 6rem

Buttons

Button components provide clear interactive affordance. Use variants for visual hierarchy, sizes for context, and gradients for emphasis on primary actions.

Variants

PrimarySecondaryOutlineGhostDestructive

Gradient

Gradient ButtonPill Gradient

Sizes

SmallMediumLarge

With Icons

Next Create Favorite

Cards

Cards group related content and actions. Support for images, gradient covers, and action buttons makes them versatile across dashboards, marketing pages, and content feeds.

Basic Card

Standard card with a subtle tinted placeholder.

Gradient Card

Uses primary-to-secondary gradient as a cover.

Action Card

Includes a call-to-action button.

Learn More

Modals

Modal dialogs interrupt the user flow for confirmations, alerts, or focused tasks. Available in multiple widths. Always include a clear dismiss action.

Small Dialog

Are you sure you want to proceed? This action cannot be undone.

CancelConfirm

Medium Dialog

Are you sure you want to proceed? This action cannot be undone.

CancelConfirm

Containers

Container components constrain content width and provide consistent padding. Use background variations — light, dark, and gradient — to create visual hierarchy between page sections.

Light Container

Use for secondary content sections or subtle separation between page areas.

Dark Container

Use for high-contrast sections like footers, CTAs, or feature highlights.

Gradient Container

Use for hero sections, promotional banners, or key call-to-action areas.