HTML
Typography

Display Heading One

Section Heading Two

Subsection Heading Three

Micro Heading Four

Nullam ultrices erat eros, eget ultricies diam volutpat elementum. Aenean pulvinar quis tellus quis rutrum. Nam finibus bibendum rutrum. Nullam blandit at erat non semper.

Body copy at base size. Morbi feugiat risus vel augue volutpat, a consequat ipsum efficitur. Integer blandit sapien vitae risus inline link here aliquet, vel eleifend nulla euismod.

Mauris a semper urna, at pharetra augue. Nullam risus felis, malesuada vel facilisis eget, suscipit vitae est. Aenean tincidunt in erat sed facilisis. Morbi tellus urna, congue id leo ac, dapibus semper quam. Aenean convallis eu sapien cursus iaculis. Nullam ultrices bibendum nunc non consequat. Nulla imperdiet vestibulum nunc, porttitor fermentum urna pretium sed. Etiam odio mi, varius vel felis ac, vestibulum vulputate lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus pellentesque mi eu ultricies. Sed sollicitudin, orci eu accumsan fringilla, augue neque vehicula nisl, eget aliquam risus dui ac mauris. Etiam eu metus nec neque molestie hendrerit. Cras orci ex, malesuada ac ullamcorper aliquet, rhoncus tempor leo. Nulla volutpat porta augue quis fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc at neque fringilla, dictum nisi a, aliquet quam.

"The details are not the details. They make the design." — Charles Eames

Inline: strong, emphasis, highlighted text, struck through, inline code, Ctrl+C, HTML.

Lists

Unordered

  • Sparkling water
  • Pickled ginger
  • Sesame oil
  • Fish sauce

Ordered

  1. Preheat pan
  2. Add oil and wait
  3. Season protein
  4. Sear four minutes

Description

REST
Stateless HTTP architecture
GraphQL
Query language for APIs
gRPC
High-perf RPC framework
Media
Fig 1. Responsive image with <figure> and <figcaption>.
Fig 2. Video embed placeholder with poster art.
Table
Component Tag ARIA Role Notes
Navigation<nav>navigationLandmark element
Main content<main>mainOne per page
Article<article>articleSelf-contained piece
Aside<aside>complementaryRelated content
Footer<footer>contentinfoPage/section footer
CSS
Color System
900
800
700
600
500
400
300
200
100
50
Blue
Violet
Pink
Red
Amber
Green
Cyan
Teal
Type Scale
72Aa
48Aa
36Aa
24Aa
18Aa
16Aa — Body copy. The quick brown fox.
14Aa — Caption / metadata / labels
12Aa — Fine print, overlines
Spacing Tokens
4px
8px
12px
16px
24px
32px
48px
64px
96px
Border Radius
2px
4px
8px
12px
16px
24px
full
Elevation / Shadow
flat
sm
md
lg
xl
2xl
Animatiacs
fade
slide up
cool
pulse
Nope
bounce
JS
Form Controls
We'll never share your email.
Notifications
Billing cycle
Buttons & States
Alerts & Toasts
Info — New features available. Check the changelog.
Success — Your changes have been saved successfully.
Warning — You're approaching your storage limit (87%).
Error — Could not connect to server. Please retry.
State & Interactivity
0 count
Modal Dialog
Tabs Component

Product overview content. Describe what it does, who it's for, and why it exists. Keep this to 2–3 punchy sentences.

  • Node.js ≥18, TypeScript 5.x
  • Bundle size: 4.2 kB gzip
  • Zero runtime dependencies

v2.1.0 — Added dark mode tokens, new spacing scale.

v2.0.0 — Complete rewrite in TypeScript.

v1.9.3 — Patch: fixed Safari flex gap bug.

Accordion / Disclosure
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Design tokens are named variables that store design decisions — colors, spacing, typography — making them reusable and easy to update across the whole product.
Utility classes handle one-off layout tweaks and low-level spacing. Encapsulate anything that repeats three or more times into a named component.
Progress & Loaders
Upload progress0%
Storage used87%
Indeterminate
Badges, Chips & Tags
Default Info Success Warning Error Beta Outline