Overview
This design system establishes the foundation for building consistent, accessible, and maintainable UI components. It defines typography scales, color palettes, spacing systems, and component patterns used throughout the site.
Typography
Consistent typography creates hierarchy and improves readability.
Page Title
text-3xl sm:text-4xlMain page headings. Use with font-display.
Example Page Title
Section Title
text-xlSection headings within pages.
Section Title
Body Text
text-smDefault body text, summaries, and descriptions. Replaces text-[13px].
This is body text used for summaries, descriptions, and general content. It provides good readability while maintaining a clean, minimal aesthetic.
Meta Text
text-xs font-monoDates, tags, labels, and small metadata. Replaces text-[11px].
Small Heading
text-base font-displaySmall headings, card titles, and list item titles. Replaces text-[15px].
Small Heading Example
Use canonical classes:
text-xs font-mono
text-sm
text-base font-displayMaintain consistency:
Use the same typography classes for the same semantic purpose across all pages.
Avoid arbitrary sizes:
text-[11px]
text-[13px]
text-[15px]Don't mix patterns:
Avoid using different font sizes for the same semantic role in different components.
Colors
Semantic color tokens for consistent theming.
Accent
bg-accentPrimary actions, links, highlights, and interactive elements.
Foreground
text-foregroundPrimary text color, headings, and high-contrast elements.
Muted
bg-mutedBackgrounds for cards, code blocks, and subtle UI elements.
Border
border-borderBorders, dividers, and subtle separators.
Muted Foreground
text-muted-foregroundSecondary text, descriptions, and less prominent content.
Background
bg-backgroundMain page background color.
Spacing
Consistent spacing creates visual rhythm and hierarchy.
Common Spacing Values
8pxgap-2 | p-2 | space-y-212pxgap-3 | p-3 | space-y-316pxgap-4 | p-4 | space-y-424pxgap-6 | p-6 | space-y-632pxgap-8 | p-8 | space-y-848pxgap-12 | p-12 | space-y-1264pxgap-16 | p-16 | space-y-16Use consistent spacing tokens like space-y-4, gap-6, and p-8.
Avoid arbitrary spacing values like gap-[13px] or p-[17px].
Components
Reusable UI components built with shadcn/ui and Tailwind CSS.
Slides
Presentation slide primitives for the JSON-driven slides engine. These components are designed for readability at presentation distance and PDF export.
Example Slide
16:9 aspect ratio canvas
<SlideFrame>...</SlideFrame>SlideHeadlineBold Statement Here
SlideSublineSupporting tagline or subtitle
SlideBodyBody text for supporting paragraphs, readable at presentation distance.
SlideFootnoteSource: Example citation or footnote
- First bullet point with important info
- Second point explaining a concept
- Third point with actionable item
- Fourth point wrapping up the list
<SlideList items={["Item 1", "Item 2"]} />Bars variant:
Stats variant:
Short description of the first feature.
- Sub-item A
- Sub-item B
- Sub-item C
Another feature with a brief explanation.
Horizontal:
Phase 1
Initial setup
Phase 2
Development
Phase 3
Launch
Vertical:
Step 1
Define the problem
Step 2
Research solutions
Step 3
Implement and test