Color Palette

The full color system. Semantic tokens for new components, brand ramps for visual identity, and --color-* aliases for the handbuilt components.

Theme colors

UI colors

Use for borders, inputs, and focus rings. Not for surfaces or text.

Brand ramp — Navy

Brand ramp — Lemon

Neutral scale

Component aliases

Use for the handbuilt Astro components. Fixed aliases stay the same in both themes. Theme-aware aliases flip with the theme. Toggle the theme to see the change.

Fixed — same in light and dark

Theme-aware — flips with dark mode

The token pipeline

A color decision starts in Figma and reaches a live component through three layers. A brand change touches one value and cascades everywhere.

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

Step 2 — Brand ramp in global.css
         --navy-900: 223.8 84.2% 19.8%;   /* 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 */
         --color-navy:  hsl(var(--navy-900));       /* legacy alias for handbuilt components */

Step 4 — Component use
         Custom Astro:   color: var(--color-navy);  /* Footer, WorkCard, Button */
         Basis UI:       bg-primary                 /* Tailwind utility reading --primary */

Intentionally excluded

These token groups don't exist in this system. Omitted by choice, not oversight.

Typography

Fraunces for display headings. Geist for everything else.

Text Link

Inline link style for body copy. Apply the .text-link class to any <a> tag.

Spacing

Use for padding, margins, and gaps. A 9-step scale from 4px to 96px.

Primitives

The smallest reusable building blocks: standalone actions and inline labels.

<Button label="Primary" href="/work" />
<Button label="Secondary" href="/about" variant="secondary" />
<Button label="External" href="https://example.com" external />
<Button label="Resume" href="/resume.pdf" download />

<SectionLabel label="Selected Work" />

<BackLink href="/work" />
<BackLink href="/work" label="Back to work" />

Cards

Content-bearing surfaces. Use for grids of work, writing, or field notes.

Project Card Stable

Displays a project as an image with a title beneath.

Anatomy

Project title

Variants

With image

[ image ]

No image (placeholder)

Properties

Name	Type	Default	Notes
title	string	required	Card heading shown below the image.
image	string	—	Image src. When omitted, a placeholder appears.

Tokens used

• --color-surface
• --color-charcoal
• --color-heading

Usage notes

• Use in a flex row to display multiple projects side by side.
• Omit the image only during development or when the project doesn't have a cover yet.

View code

<ProjectCard title="Project title" image="/images/work/project.png" />

Field Note Card Stable

Two-column card showing a field note body alongside an artifact preview.

Anatomy

Card title

First paragraph. Short description of the experiment or note.

Second paragraph. Optional follow-up detail.

Tools:

Tool one Tool two

Explore experiment

Artifact caption

Properties

Name	Type	Default	Notes
title	string	required	Card heading.
body	string	required	Long copy. Paragraphs separated by blank lines.
tools	Tool[]	required	List of tool badges. Empty array hides the row.
toolsLabel	string	"Tools:"	Override the tools-row label.
exploreHref	string	—	When omitted, the explore link is hidden.
exploreLabel	string	"Explore experiment"	Override the explore link label.
artifact	Artifact	required	Right-column artifact preview.

Tokens used

• --color-surface
• --color-charcoal
• --color-royal-blue

Usage notes

• Use on the Field Notes archive page (/field-notes) for entries that have a paired experiment.
• Stack vertically with a comfortable gap. Body reads left, artifact reads right on desktop; collapses to one column on mobile.

View code

<FieldNoteCard
  title="Card title"
  body="Paragraph one.\n\nParagraph two."
  tools={[{ label: "Figma" }]}
  exploreHref="/writing/some-slug"
  artifact={{ image: "/images/x.png", alt: "", caption: "Caption" }}
/>

Writing Card Stable

Link card to a writing entry, with an optional 'New' badge.

Anatomy

Card title

Short description of the writing entry.

Variants

Default

Standard writing card without a badge.

New

With New badge

Featured most recently. The lemon badge overlays the image.

Properties

Name	Type	Default	Notes
href	string	required	Destination URL.
image	string	—	Cover image src. When omitted, a placeholder appears.
alt	string	—	Alt text for the image.
title	string	required	Card heading.
desc	string	required	Short description shown under the title.
isNew	boolean	false	Adds a lemon "New" badge in the top-right of the image.

Tokens used

• --color-surface
• --color-charcoal
• --color-lemon
• --color-navy

Usage notes

• Use on the home page Field Notes section and the /field-notes archive.
• Pass isNew for entries within the recency window so visitors can see what just shipped.

View code

<WritingCard
  href="/writing/some-slug"
  image="/images/writing/cover.png"
  alt="Cover"
  title="Article title"
  desc="One-line description."
  isNew={true}
/>

Work Card Stable

Flip card showing a project thumbnail on the front and case details on the back.

Anatomy

Channels:

voice

screen

Pattern label

Card title

Tap for details

Case Detail

Back face heading

First paragraph on the back face.

Second paragraph.

Outcome

Stat

description

Tap to return

Properties

Name	Type	Default	Notes
id	string	required	Unique id used for the flip interaction and lightbox target.
pattern	string	required	Small label above the title (e.g. "Learnable Efficiency").
title	string	required	Project title shown on the front face.
backHeading	string	required	Heading shown on the back face after flipping.
backParagraphs	string[]	required	Body paragraphs on the back face.
stats	Stat[]	required	Highlight stats on the back face.
image	string	required	Front-face thumbnail.
imageAlt	string	""	Image alt text. Empty marks it decorative.
channels	Channel[]	required	Channel dots (voice, screen, camera, gesture, gaze).
lightboxDesc	string	required	Description shown when the lightbox opens.
eager	boolean	false	Hints the image loader to fetch eagerly for above-the-fold cards.

Tokens used

• --color-navy
• --color-surface
• --color-royal-blue
• --color-citrine

Usage notes

• Use in the Selected Work section on the home page.
• Click the card to flip; click the expand button to open the lightbox.
• Set eager on the first one or two cards that appear above the fold to speed up first paint.

View code

<WorkCard
  id="some-id"
  pattern="Pattern label"
  title="Project title"
  backHeading="Heading on the back"
  backParagraphs={["First paragraph", "Second paragraph"]}
  stats={[{ value: "First", desc: "of its kind" }]}
  image="/images/work/thumb.png"
  channels={[{ type: "voice", label: "voice" }]}
  lightboxDesc="Description when expanded."
/>

Other Components

Carousel Stable

Manually controlled image carousel with arrow buttons, pagination dots, and keyboard navigation.

Anatomy

User-Centric 0 to 1 Product Design

Google Pixel Magnifier

View case study

Assistive Technology

Voice Access for Android

View case study

AI-Powered Products

Lookout - Assistive Technology App by Google

View case study

UX and Product Design

My Volkswagen - Web, Mobile, and In-Vehicle Portal

View portfolio archive

UX Prototyping - Digital Services

Porsche Connect Store - Concept and Prototyping of Third-Party Integrations

View portfolio archive

Multi-Modal Interaction Design

Sound Journey App - A Unique Interactive Soundtrack for Every Trip

View portfolio archive

Research and Development

Volkswagen Virtual Cockpit and Conversational Navigation Concepts

View portfolio archive

Properties

Name	Type	Default	Notes
No props. Slide content is defined inside Carousel.astro as a slides array (image, title, subtitle, optional href, optional cta).

Tokens used

• --color-surface
• --color-charcoal
• --color-heading
• --color-lemon

Usage notes

• Use sparingly. A carousel hides content behind interaction, so reach for it only when a sequence of slides actually helps the reader.
• Navigation: arrow buttons, pagination dots, or left/right arrow keys. No auto-scroll, so the visitor stays in control (WCAG 2.2.2).
• To change the slides, edit the slides array at the top of Carousel.astro. If you need this carousel in more than one place with different content, refactor it to accept a slides prop first.

View code

<Carousel />

<ThemeToggle />

Site Patterns

Recurring layouts that appear on every page.

<Nav />

<Footer />

Basis UI Components

Components from Basis UI. Status dots below show what's in use.

Component gallery