Skip to content

·marketing·

SMET.CO logo

Design system

Typography, semantic colors, and UI patterns using tokens from global.css.

Typography

Sans (default)

Rethink Sans — body copy for UI and magazine chrome. The quick brown fox jumps over the lazy dog.

Serif

Prata — editorial emphasis and pull quotes. The quick brown fox jumps over the lazy dog.

Mono

IBM Plex Mono — code, labels, and technical asides. const theme = "marketing";

Type scale

  • text-xs Agency-grade shopper signals
  • text-sm Agency-grade shopper signals
  • text-base Agency-grade shopper signals
  • text-lg Agency-grade shopper signals
  • text-xl Agency-grade shopper signals
  • text-2xl Agency-grade shopper signals
  • text-3xl Agency-grade shopper signals
  • text-4xl Agency-grade shopper signals

Muted foreground for secondary lines, captions, and de-emphasized UI.

Primary emphasis for titles and key labels.

Semantic colors

background
foreground
primary
secondary
muted
accent
destructive
border
card
popover

Chart

1
2
3
4
5

Radii and borders

Theme radius is 0rem — surfaces use square corners unless you opt into utilities like rounded-md.

rounded-none
rounded-md
rounded-lg

Shadows

shadow-2xs

shadow-xs

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Interactive patterns

Interactive demos use transition-colors duration-200. With prefers-reduced-motion: reduce, chip/input transitions are disabled via .ds-interactive.