Daily themes
Typography and color shift every day within safe layout bounds.
Toggle the theme control in the nav to preview adaptation.
Design System Guide
Visual reference for theme-responsive primitives. Toggle the daily theme in the nav to see how components adapt — or explore past themes onDaily Themes. Agent contract: design.md.
Colors
Core color tokens that adapt to light/dark mode and daily themes.
--color-bg
--color-text
--color-link
--color-link-hover
--color-border
--color-muted
--color-sidebar-bg
--color-nav-bg
--color-card-bg
--color-nav-text
Typography
Text styles that respond to theme font pairings and weights.
.text-heading
The quick brown fox
.text-body
The quick brown fox jumps over the lazy dog. This paragraph demonstrates the body text style with proper line height and letter spacing.
.text-caption
Caption text for metadata and secondary information
.text-mono
const theme = 'dynamic';
.text-muted
Muted text for less prominent content
Size Scale
.text-xs - Extra small text
.text-sm - Small text
.text-base - Base text
.text-lg - Large text
.text-xl - Extra large text
.text-2xl - 2X large text
.text-3xl - 3X large text
Cards
Card variants respond to [data-card-style] theme attribute.
.card
Default Card
Standard card with border and background.
.card-elevated
Elevated Card
Card with shadow, no border.
.card-outlined
Outlined Card
Strong border with an opaque background.
.card-filled
Filled Card
Solid background, no border.
.card-interactive
Interactive Card
Hover to see lift effect.
ThemeCard component
Agent-built card using ThemeCard.astro — primitives, tokens, opaque surface.
Opaque cards
No glass — legibility over blur.
design.md
Token spacing
Gap and padding use var(--spacing-*) only.
Card with Header/Footer
Card Header
This is the card body content with proper spacing.
Surfaces
Background surfaces with different elevation levels.
.surface
Default surface
.surface-raised
Elevated surface
.surface-sunken
Recessed surface
Images
Image styles respond to [data-image-style] and [data-image-hover] attributes.
.img-themed
.img-frame + .img-thumbnail
Avatars
.img-avatar-sm.img-avatar.img-avatar-lgBadges
Small labels for status, categories, or counts.
Default.badge
Primary.badge-primary
Muted.badge-muted
Links
Link styles respond to [data-link-style] theme attribute.
Inputs
Form elements that adapt to theme colors.
Dividers
Horizontal rules for separating content.
.divider
.divider-subtle
.divider-thick
.divider-subtle
.divider-thick
Spacing
Spacing utilities using the spacing scale.
xs (4px)sm (8px)md (16px)lg (24px)xl (32px)2xl (48px)3xl (64px)
Theme-tunable spacing
Use these when a daily theme should be able to tune rhythm; otherwise prefer --spacing-*.
--card-padding--content-padding--section-spacing--container-padding
Border Radius
sm
md
lg
xl
full
Layout
Grid and flexbox utilities.
Grid
Col 1
Col 2
Col 3
Flexbox
Flex 1
Flex 1
Flex 1
Start
End
Content pages
Secondary pages (Advising, Investing, Now, Works) share rhythm via .content-page* inlayout.css. Prefer these over per-page section CSS.
.content-page__intro
Lead paragraphs use prose sizing. Pair the shell with .container-narrow for reading width.
.content-page__lede — muted supporting copy.
.content-page__section
- Bullet lists use
.content-page__list--bullets - Linked lists use
.content-page__list--linked
Linked list
- Advisingexample linked row with note
Motion
Use var(--duration-*) and var(--ease-*) — never hardcode0.3s or raw cubic-bezier(...) in new CSS.
Durations
--duration-fast (0.15s)
--duration-normal (0.2s)
--duration-slow (0.3s)
--duration-slower (0.4s)
--duration-slowest (0.6s)
Hover the tracks (desktop) to compare durations with --ease-standard.
Easings
--ease-inertia--ease-inertia-smooth--ease-standard--ease-emphasized--ease-spring
Focus
Keyboard focus uses --focus-ring* tokens. Tab through the controls below — do not hardcodeoutline: 2px solid ….
--focus-ring-width--focus-ring-offset--focus-ring-color--focus-ring
Contrast
Daily themes must keep body, link, muted, and nav text at WCAG AA (4.5:1) against page, card, and nav backgrounds. Generator gate: scripts/lib/contrast.mjs · CI: npm run audit-contrast:check.
text on bg
Body copy on page background
text on card
Body copy on card surface
muted on bg
Muted supporting text
link on bg
nav text on nav bg
Navigation label
Current theme
Live data-* attributes from the active daily theme. Navigation is framework-controlled and is not theme-variable. Browse the archive on Daily Themes.
Theme active
Checking...
Card style
—
Link style
—
Hero layout
—
Image style
—
Grid style
—
Background texture
—
Footer style