Style Guide

DS-2 tokens · DS-3 Button · DS-4 Typography · DS-5 Form controls · DS-6 Chips · DS-7 Cards.

Background

Background

Sample text using semantic token classes.

Card

Card

Sample text using semantic token classes.

Primary

Primary

Sample text using semantic token classes.

Secondary

Secondary

Sample text using semantic token classes.

Muted

Muted

Sample text using semantic token classes.

Accent

Accent

Sample text using semantic token classes.

Destructive

Destructive

Sample text using semantic token classes.

Success

Success

Sample text using semantic token classes.

Warning

Warning

Sample text using semantic token classes.

Info

Info

Sample text using semantic token classes.

Radius Scale

rounded-sm
rounded-md
rounded-lg
rounded-xl

Button — variants

Button — sizes

Button — states

Heading — levels

Heading H1 — Large Page Title

Heading H2 — Section Title

Heading H3 — Subsection Title

Heading H4 — Small Title

Heading H5 — Minor Title
Heading H6 — Smallest Title

Heading — colors

Default color heading

Muted color heading

Accent color heading

Paragraph — sizes & variants

This is a large paragraph with comfortable reading line-height. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

This is base paragraph text, the standard size for body content across the design system.

Small paragraph text ideal for secondary information or captions.

Extra small text for minor details or disclaimers.

Paragraph — weights & colors

Normal weight paragraph text.

Medium weight paragraph text.

Semibold weight paragraph text.

Muted color paragraph text.

Accent color paragraph text.

Label — variations

Code — inline & block

Inline code example:

Use to define a variable.

Block code example:

function greet(name) {
  console.log(`Hello, ${name}!`);
  return true;
}

Input — states & sizes

Textarea — states & resize

Switch — interactive

Notifications enabled

Small size switch

Error state

FormField — composition

Keep title concise and specific.

Describe medium, concept, and dimensions.

Badge — variants

DefaultSuccessWarningInfoDestructive

Badge — sizes

SmallMedium

TagChip — static

Sketch
Acrylic
Commissioned

TagChip — removable

Use the remove button to delete a tag from the selection.

Oil
Landscape
Original

Card — base primitives

Portfolio Insights

Weekly snapshot of your gallery performance.

Keep cards composable with header/content/footer primitives.

Updated 2h ago

StatCard — metrics

Profile views

12,480
+12.4%

Compared to last week

Inquiries

87
-2.1%

Compared to last week

ProgressCard — completion

Portfolio completion

72%
72%

Add 3 more projects to reach 100%.

Verification

95%
95%

Almost done, one final step left.

Skeleton — loading states