Color Palette

The full palette — semantic tokens for UI, and the brand ramps they're built from. All values are CSS custom properties in global.css using HSL.

Theme colors

Each card shows a background color with its paired foreground color as text — so you can immediately judge contrast. These are the tokens Basis UI components read directly.

UI colors

Single-use tokens for structural UI elements — not surfaces or text, but borders, inputs, and focus rings.

Brand ramp — Navy

Brand ramp — Lemon

Neutral scale

Component aliases

The --color-* tokens are backward-compatible aliases used by the handbuilt components (Button, Nav, Footer, Carousel, SectionLabel). They sit on top of the semantic tokens above. Fixed aliases always resolve to the same value regardless of theme. Theme-aware aliases flip automatically — toggle dark mode above to see them change.

Fixed — same in light and dark

Theme-aware — flips with dark mode

Intentionally excluded

Shadcn/ui defines additional token groups that this site does not use. They are absent by design — not an oversight.

Typography

The type scale used across the site. Fraunces for display headings, Geist for everything else. Sizes are defined as CSS variables in global.css.

Basis UI Components

Astro components from Basis UI, customized to match this palette. Each one is a copy-paste component — source lives in src/components/ui/. Toggle the preview to see dark mode.

The token pipeline

Every color decision starts in Figma as a variable and ends up in a live component through a four-layer chain. A brand update touches one value and cascades everywhere.

Step 1 — Figma variable (designer's source of truth)
         color/navy = #081F5D

Step 2 — Brand ramp token in global.css
         --navy-900: 223.8 84.2% 19.8%;  /* stored as HSL, no hsl() wrapper */

Step 3 — Semantic mapping in global.css (the bridge layer)
         --primary: 223.8 84.2% 19.8%;   /* "primary" maps to Deep Navy */
         --ring:    221.1 82.6% 36.1%;   /* focus rings use Navy 700 */

Step 4 — Basis UI component in Button.astro
         bg-primary   → resolves --primary → #081F5D in light / #C0D4F4 in dark
         hover:bg-ring → shifts to Navy 700 on hover / focus

Component gallery

Variant → token reference

Each variant name maps to a specific semantic token pair. Changing the token in global.css updates every component that uses that variant instantly.

Button / Badge variants → token used
─────────────────────────────────────────────
default      → bg-primary       text-primary-foreground
secondary    → bg-secondary     text-secondary-foreground
destructive  → bg-destructive   text-destructive-foreground
outline      → border-border    bg-background    hover:bg-accent
ghost        → bg-transparent   text-foreground  hover:bg-accent
link         → text-primary     (underline on hover)

Card variants → token used
─────────────────────────────────────────────
default      → bg-card          border-border
muted        → bg-muted         border-border
outline      → bg-transparent   border-2 border-border

Astro Components

Hand-built components specific to this site. These predate the Basis UI migration and may be refactored over time. What you see here is the real component — no separate demo version.

import Button from '../components/Button.astro';

<!-- Primary (default) -->
<Button label="LinkedIn" href="https://linkedin.com/in/..." variant="primary" />

<!-- Secondary -->
<Button label="Download Resume" href="/resume.pdf" variant="secondary" download={true} />

<!-- Disabled -->
<Button label="Coming Soon" href="#" variant="primary" disabled={true} />

<!-- Icon left (no href = renders as <button>, not <a>) -->
<Button label="Reset" variant="secondary" icon='<svg ...>...</svg>' />

<!-- Apply .text-link to any <a> tag -->
<a href="/some-page" class="text-link">Link label</a>

<!-- In a navigation list -->
<ul>
  <li><a href="#color" class="text-link">Color</a></li>
  <li><a href="#typography" class="text-link">Typography</a></li>
</ul>

import SectionLabel from '../components/SectionLabel.astro';

<SectionLabel label="Selected Work" />

import Nav from '../components/Nav.astro';

<Nav />

import ProjectCard from '../components/ProjectCard.astro';

<ProjectCard title="Project title goes here" />

import ThemeToggle from '../components/ThemeToggle.astro';

<ThemeToggle />

import Carousel from '../components/Carousel.astro';

<Carousel />

import Footer from '../components/Footer.astro';

<Footer />