Ostensibly Why

Style Guide

Notes, examples, and interface fragments for checking the current visual direction.

Palette

background var(--background) foreground var(--foreground) surface 1 var(--surface-1) surface 2 var(--surface-2) surface 3 var(--surface-3) accent var(--accent) accent hover var(--accent-hover) accent soft var(--accent-soft) muted var(--muted) muted foreground var(--muted-foreground) border var(--border) border strong var(--border-strong) link var(--link) code background var(--code-background)

Longform Content

This paragraph uses the default body treatment. It includes a sample link, strong text, emphasis, inline code, and a keyboard hint like Ctrl K.

A blockquote gives secondary material a quieter rhythm while still holding enough contrast for careful reading.

Lists

  • Readable spacing for short notes.
  • Nested color choices for markers and secondary text.
  • Enough contrast for scanning across themes.

Table

Item Status Note
Typography Active Fluid scale with compact headings.
Color Draft Warm neutrals with red accents. 
const site = "Ostensibly Why"
const description = "Notes on tech and life."

Components

Muted Surface

A quiet panel for grouped information, metadata, or small summaries.

View projects

Accent Surface

A stronger treatment for primary actions or important callouts.

Subscribe

Callouts

Note

This is the default informational callout treatment.

Tip

Use the theme toggle to compare the palette in both modes.

Warning

Muted yellow backgrounds can become visually loud if overused.