v0.1.0

Next.js 15

Tailwind v4

shadcn/ui

Design System

Living reference for the visual language and components of curiouslychase.com. Geist for display. Hanken Grotesk for body. Brick-red accent. No border-radius on cards.

Browse components View tokens

color

Color

Semantic tokens

Background

--background

Background Alt

--background-alt

Foreground

--foreground

Card

--card

Muted

--muted

Border

--border

Primary

--primary

Secondary

--secondary

Accent

--accent

Destructive

--destructive

Brand palette

Brick Red

--brick-red

Ink

--ink

Paper

--paper

Warm Line

--warm-line

Warm Muted

--warm-muted

Warm Section

--warm-section

type

Typography

Geist for headings and display (up to 900 black). Hanken Grotesk for body. Geist Mono for labels and data.

.displayNotice. Assert. Explore.

.h1Applied AI for small teams

.h2What I focus on

.h3Organizational transformation

.h4Recent writing

.leadEvery structural decision is a bet on what matters. Nothing is a flourish.

.bodyBase body — 16px. Default reading size for all prose content across the site.

.smallSmall — 14px, muted. Metadata, captions, secondary info.

.monoSECTION LABEL · DATES · METADATA · 2026-11-14

buttons

Buttons

Variants

Sizes

States

badges

Badges & Status

Default

Secondary

Outline

Destructive

Common usage patterns

Published

Draft

Archived

Featured

cards

Cards

Default Card (shadcn)

Default Card

Rounded corners, subtle shadow, card background.

Use for contained content blocks with standard elevation.

With badge

Header metadata pattern.

Topic

Content body beneath a topic badge.

Muted fill

Lower emphasis card.

bg-muted/30 for secondary information areas.

TicksCard — accent corners

Default

Corner marks, sm

Accent-colored registration corners. Subtle border all around.

cornerSize="lg"

Larger corner marks

More prominent registration corners for hero-level elements.

dotGrid

Dot grid background

Marks a canvas or drop zone. Dots use --border color.

TicksCard — post preview (live pattern)

2026-11-01

How I structure AI workflows for small teams

A look at the patterns that consistently outperform ad-hoc prompting at scale.

2026-10-14

The socio-technical stack

Why org design and software architecture are the same problem.

2026-09-28

Notice. Assert. Explore.

My creative process distilled into three words I can actually remember.

alerts

Alerts

Default

Neutral informational alert. Standard bg with border.

Destructive

Use for errors, warnings, or irreversible actions.

forms

Forms

Input

Disabled

navigation

Navigation

The site header is used on every page via the root layout. It lives in SiteHeader.tsx.

Default state — at top of page

Chase Adams

bg/60 · blur-sm · border-transparent

Scrolled state — past 4px

Chase Adams

bg/90 · backdrop-blur-md · border-border/60

Scroll behavior

Border and blur appear after 4px of scroll via a scroll event listener. Transition is 200ms.

Active link

Active nav item gets font-medium + a 1px after: underline matching foreground.

Mobile menu

Full-screen overlay at md breakpoint. Escape key closes it. Body scroll is locked while open.

Identity

Avatar with green online dot. Mono uppercase wordmark. Both link to home.

Prototype pages

Header is hidden entirely on /playground/* routes so prototypes get full canvas.

Notes variant

On /note/* routes a minimal pill avatar replaces the full header.

layout

Spacing & Layout

Grid — 3 col

col-1

col-2

col-3

Spacing scale

Tailwind spacing units (1 = 4px)