Typography

A guide to the typography, colors, and components used in this design system.

This page demonstrates the typography, color palette, and reusable components available in this design system. It serves as a reference for ensuring consistency across the portfolio.

Headings

Headings are set in PP Migra (Display) and Inter (Body).

Heading 1 (Display)

Heading 2 (Section)

Heading 3 (Subsection)

Heading 4 (Group)

Heading 5 (Label)

Heading 6 (Caption)

Text Styles

Body text is set in Inter. Here are common text text styles:

Bold text for emphasis.
Italic text for nuance.
~~Strikethrough text~~ for deleted content.
Inline code for technical terms.
Text links for navigation.
Highlighted text for attention.

Blockquotes

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Claude Bernard Quote (Serif)

“But while I accept specialization in the practice, I reject it utterly in the theory of science.”
Click to learn more

Claude Bernard

Usage Instructions


<blockquote class="font-serif text-2xl md:text-3xl italic text-slate-800 dark:text-slate-100 leading-relaxed"> “Quote text here...” <footer class="mt-6 text-base
                    md:text-sm not-italic font-sans text-slate-500 uppercase tracking-widest">: Author Name </footer> </blockquote>

Lists

Unordered List

First item
Second item
- Nested item
- Another nested item
Third item

Ordered List

First step
Second step
1. Sub-step A
2. Sub-step B
Third step

Tables

Variable	Description	Value
`--accent`	Primary accent color	Blue
`--text-primary`	Main text color	Dark Gray
`--bg-primary`	Page background	White/Dark

Data Table

Common Table Classes

w-full - Full width
text-left - Left align text
border-collapse - Standard table border behavior

Name	Role	Status	Last Active
Alice johnson	Frontend Developer	Active	2 hours ago
Bob Smith	Product Designer	Away	1 day ago

Breakout Utilities

Breakout utilities allow elements to span beyond their parent container, touching the edges of the viewport. This is useful for full-width images, call-to-action sections, or decorative dividers within a centered layout.

Breakout Panel

This panel uses .breakout-both. Even though it's inside a constrained container, it spans the full width of the screen.

Available Classes

.breakout-both (or .breakout): Spans both left and right edges.
.breakout-left: Spans to the left edge only.
.breakout-right: Spans to the right edge only.

UI Elements

Panel Label

Used for labeling sections or panels. Class: .panel-label

Pills

Standard Pill Cyan Pill Accent Pill Gray Pill Outline Pill

Pills are inline-flex components used for tags, categories, or status indicators. They use text-xs which makes them suitable for small UI elements. By default, .pill has a white/slate background.

Pill Classes

.pill - Base style (White/Slate background)
.pill-cyan - Cyan theme
.pill-accent - Brand accent theme
.pill-gray - Subtle gray theme
.pill-outline - Border only style

Tab Pills

Interactive pill-shaped tabs used for switching between content sections. Features an accent ring on active state and subtle hover animations.

With Icons

✨ My Perks content panel. This shows when the first tab is active.

Text Only (MDX Safe)

Notice: These buttons contain <p> tags (common in MDX), but global CSS neutralizes the margins.

📋 Overview: A high-level summary of the topic.

Tab Pill Classes

Active state: ring-2 ring-accent text-slate-900 dark:text-white
Inactive state: ring-2 ring-slate-200 text-slate-600 dark:ring-slate-700 dark:text-slate-400
Hover state: hover:-translate-y-px hover:ring-accent hover:text-slate-900 dark:hover:text-white

Structure

Base classes: px-4 py-2 rounded-full text-sm font-bold transition-all duration-300 bg-transparent cursor-pointer ring-2 whitespace-nowrap
MDX compatibility: Global CSS neutralizes margins on <p> tags within buttons.
State management: Use JavaScript to toggle active/inactive classes on click.

Header Toggle (Labs)

A styled <details> element used in Labs/Simulators to provide collapsible context.

About

This component is used to hide secondary information or "About" text. It leverages CSS group utilities for the rotation animation.

Accordion

A collapsible content section with a blue accent chevron. Used for expandable content blocks in labs and writing pages.

Default Accordion (Closed)

This accordion starts closed. Clicking the header toggles it open. The blue chevron rotates 180 degrees when expanded.

Open Accordion

This accordion starts open via the open prop. Content is revealed immediately on page load.

Supports any child content (text, lists, grids, code blocks)
Blue accent chevron with smooth rotation
Default mb-8 spacing, overridable via class prop

Usage

<Accordion title="Section Title" open={true}>
  Content here...
</Accordion>

Props

title (string, required): Heading text
open (boolean, default: false): Start expanded
class (string): Additional classes (e.g. class="mb-0")

BuiltWith

An outlined metadata panel that lists the tech stack used to build a lab or project. Visually distinct from the content Accordion: smaller text, bordered container, and a grid of label/value cards.

Built With

Language

TypeScript

Framework

React

Charts

Recharts

Diagrams

Beautiful Mermaid

Static Site

Astro

Usage

<BuiltWith items={[
  { label: "Language", value: "TypeScript" },
  { label: "Framework", value: "React" },
]} />

Props

items (Array<{ label: string; value: string }>, required): Tech stack entries
class (string): Additional classes for the outer container

Audio

A procedural soundboard using the customized Web Audio API engine. Click buttons to trigger synthesized sounds.

Soundboard

Web Audio API

Volume20%

Piano (C4–B5)

Color Palette

The design system uses a set of CSS variables for theming.

Accent

--accent

Accent Dark

--accent-dark

Test

Black

--black

Gray

--gray

Gray Light

--gray-light

Gray Dark

--gray-dark

Bg Primary

--bg-primary

Bg Secondary

--bg-secondary

Tailwind Color Palette

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

SVG Filters

The design system includes a set of SVG duotone filters. Hover to see the filter name.

Original

.image-treatment

Blue & Red

.duotone-blue-red

Black & Gray

.duotone-black-gray

Black & White

.duotone-black-white

Purple & Yellow

.duotone-purple-yellow

Black & Cyan

.duotone-black-cyan

Plum & Mint

.duotone-plum-mint

Blue & Orange

.duotone-blue-orange

Berry & Yellow

.duotone-berry-yellow

Slideshow

A reusable slideshow component that supports both PDF documents and image galleries. Navigate using the arrows, dots, or keyboard left/right keys.

PDF Slideshow

Displays each page of a PDF document as a separate slide. Uses pdf.js for rendering.

Nike Brochure

Usage (PDF)

<Slideshow pdfSrc="/path/to/file.pdf" title="Title" />

Image Slideshow

Displays a collection of images in sequence with smooth transitions.

Beachbody Campaign

Usage (Images)

<Slideshow images={[img1, img2]} title="Title" />

With Border

<Slideshow images={[img1, img2]} title="Title" imageBorder={true} />

The imageBorder prop adds a 2px border (gray-200 in light mode, gray-800 in dark mode)

Interactive Components

Lightbox / Dialog

A reusable lightbox component built on the native <dialog> element. It supports custom triggers, closing via the 'X' button, clicking outside, or the Esc key.