Design System

const theme = {
  colors: {
    primary: '#7c3aed',
    text: '#111827'
  }
}

interface Theme {
  colors: Record<string, string>
  fonts: string
}

<div class="btn">
  Click me
</div>

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

Lead paragraph — This is the opening paragraph of a section. It is slightly larger than body text to draw attention and set context for the content that follows.

Body Large — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump! The five boxing wizards jump quickly.

Body Regular — Standard body text at 0.9375rem. Used for most readable content across the design system. Good for paragraphs and longer form text.

Body Small — Secondary text at 0.875rem. Used for descriptions, captions, and supporting content that doesn't need primary emphasis.

Caption — Small text used for labels, metadata, timestamps, and other supplementary information.

Overline — 0.75rem / uppercase / tracking — Used for section labels

const greeting = "Hello, World!"; // JetBrains Mono code block

"The best way to predict the future is to invent it." — Alan Kay