Alpha

Design Tokens

The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.

Typography System

A comprehensive 6-role typography system designed for clarity, hierarchy, and beautiful reading experiences. Each role serves a specific purpose in your design system.

Display

Maximum visual impact for hero sections, landing pages, and marketing materials. Features tight line-height and negative letter-spacing for dramatic effect.

display(size)
display(xs) Section headers
Display XS

Smaller display text

display(sm) Feature titles
Display Small

Small display size

display(base) Page headers
Display Base

Standard display size

display(lg) Hero sections
Display Large

Large display text

display(xl) Landing pages
Display XL

Extra large display

display(2xl) Marketing headers
Display 2XL

Double XL display

display(hero) Main hero text
Hero Display

Hero section display

display(banner) Promotional banners
Banner

Banner display text

Heading

Semantic HTML headings for document structure and SEO. Provides clear visual hierarchy with balanced typography.

heading(level)
heading(h1) Page titles
Heading Level 1

Primary page title

heading(h2) Major sections
Heading Level 2

Section headers

heading(h3) Subsections
Heading Level 3

Subsection titles

heading(h4) Components
Heading Level 4

Component headers

heading(h5) Minor sections
Heading Level 5

Small headings

heading(h6) Fine details
Heading Level 6

Tiny headings

Title

Component identifiers for cards, modals, and UI elements. Balanced weight and spacing for clear labeling without dominating.

title(size)
title(xs)

Extra Small Title

Badges, tags

title(sm)

Small Title

List items

title(base)

Base Title

Cards, sections

title(lg)

Large Title

Feature cards

title(card)

Card Title Example

Card headers

title(modal)

Modal Title

Dialog headers

title(section)

Section Title

Section headers

Body

Optimized for readability with generous line-height and comfortable spacing. The workhorse of content presentation.

body(size)
body(xs) Legal text

Extra small body text for fine print and disclaimers

Tiny text

body(sm) Descriptions

Small body text for secondary content and descriptions

Small content

body(base) Main content

Base body text is optimized for readability with comfortable line height

Standard text

body(lg) Lead paragraphs

Large body text for emphasized paragraphs and introductions

Large text

body(article) Blog posts

Article body text with optimal reading width and line height for long-form content

Article optimized

body(prose) Documentation

Prose variant provides the best reading experience for extended text with enhanced typography

Enhanced prose

Label

Functional UI text for buttons, forms, and interactive elements. Clear and concise with enhanced weight for small sizes.

label(size)
Extra Small Label

Compact UI

Small Label

Dense forms

Base Label

Form fields

Button Label

Buttons

Input Label

Input fields

Tab Label

Tab bars

BADGE

Status badges

Caption

Supplementary information that doesn't compete for attention. Intentionally subdued color and weight for supporting content.

caption(size)
caption(xs) Timestamps

Extra small caption text

caption(sm) Helper text

Small caption for additional context

caption(base) Image captions

Base caption provides supplementary information

caption(figure) Media captions

Figure 1: Example caption for images and diagrams

caption(form) Input hints

Password must be at least 8 characters

caption(hint) UI hints

Hint: Try using keyboard shortcuts

Bold Utility

Fine-tune font weights independently of typography roles

Aa
bold(thin) 100
Aa
bold(light) 300
Aa
bold(normal) 400
Aa
bold(medium) 500
Aa
bold(semi) 600
Aa
bold(bold) 700
Aa
bold(extra) 800
Aa
bold(black) 900

Line Height

Control the vertical spacing between lines of text using the integrated font() syntax

Tight line height for display text

font(base/none)
1 Headings

Slightly tighter line height

font(base/tight)
1.25 Display text

Comfortable title spacing

font(base/snug)
1.375 Titles

Default readable line height

font(base/normal)
1.5 Body text

More spacious line height

font(base/relaxed)
1.625 Comfortable reading

Extra space between lines

font(base/loose)
2 Spacious

Letter Spacing

Adjust the horizontal spacing between characters using the integrated font() syntax

Typography

font(lg/1.5/tighter)
-0.05em Very tight

Typography

font(lg/1.5/tight)
-0.025em Tight

Typography

font(lg/1.5/normal)
0 Default

Typography

font(lg/1.5/wide)
0.025em Wide

Typography

font(lg/1.5/wider)
0.05em Wider

Typography

font(lg/1.5/widest)
0.1em Widest

Pro Tips

Semantic HTML

Always use the appropriate HTML element. heading(h1) should be used with <h1> tags.

Combine Utilities

Mix typography roles with other utilities: display(hero) gradient hover:glow

Responsive Typography

Use responsive prefixes: display(base) md:display(lg)

Typography in Action

See how different typography roles work together to create beautiful, functional interfaces

Article

Getting Started with AdorableCSS

Learn the fundamentals of our intuitive CSS framework and start building beautiful interfaces in minutes.

5 min read Read More →

Create Account

name@example.com

We'll never share your email

NEW

Dark Mode Support

Built-in dark mode with automatic theme detection and smooth transitions.

Available in v2.0+