Micah Carroll — Design System Reference

1. Visual Theme & Atmosphere

micahcarroll.com strips the personal-site format down to a single move: white type floating on a near-black field. The canvas isn’t pure black — rgb(12, 12, 12) carries a luminance of 0.047, just enough warmth to avoid the dead flatness of #000 — and against it, every piece of type, every border, every link renders in flat rgb(255, 255, 255). There is no accent color anywhere in the extracted system. No blue link, no brand hue, no status color. The site reads less like a portfolio and more like a link hub for a creator’s video presence — the markup exposes a .creative-container, a .sticky-nav that dims to 60%-opacity black on scroll, and a trio of .link-link elements pointing to a main YouTube channel, a retro-gaming channel, and a vlogging channel. The whole thing is quiet, monochrome, and unfussy — a single typeface, a single weight discipline, and restraint standing in for a whole brand system.

2. Color Palette & Roles

Foundation — the entire palette

• rgb(12, 12, 12) — page/section canvas (div.creative-container), luminance 0.047 — not pure black, but close
• rgb(255, 255, 255) — text, borders, and default outline color, used everywhere without variation
• rgba(0, 0, 0, 0.6) — sticky nav overlay (div.sticky-nav), luminance 0 — a darker, semi-transparent scrim layered above the canvas as you scroll
• rgba(0, 0, 0, 0) — transparent body background and transparent link backgrounds; nothing is ever filled

There is no secondary hue, no tint, no status color, and no gradient anywhere in the extracted data. This is a two-value system — near-black and white — with a third, translucent black used purely as a navigational scrim. Depth and hierarchy are never carried by color; they’re carried entirely by opacity and size.

3. Typography Rules

Typeface: Inter (Inter, sans-serif) — the only font family detected, used for headings, body, and links alike.

Principles

• One weight for everything. Every extracted selector — h1, h3, body, p, a — sits at weight 500. There is no bold, no light, no italic. Hierarchy is delivered by size alone (32 → 24 → 16), never by weight.
• A flat -0.7px tracking, regardless of size. Unlike most type systems that tighten tracking as size grows, this site applies the exact same -0.7px letter-spacing across a 32px h1 and a 16px paragraph. It reads as a deliberate, almost mechanical consistency rather than an optically-tuned scale.
• font-feature-settings: normal and text-transform: none across the board — no OpenType tricks, no uppercase treatments, no small caps.
• No line-height override — every selector reports normal, leaving the browser’s default leading in place. Nothing here is fussed over beyond size and tracking.

4. Component Stylings

Links (.link-link, e.g. “Main Youtube Channel,” “Retro Gaming Channel,” “Vlogging channel you”)

• Background: transparent (rgba(0, 0, 0, 0)) at all times — links never get a filled pill or button treatment
• Text/border: rgb(255, 255, 255) in both default and hover states — color never shifts
• Hover/focus feedback is opacity-only: default state is opacity: 1, hover (or focus, on the one link that swaps hover for a focus state) drops to opacity: 0.7. No transform, no underline change, no box-shadow.
• Default outline is rgb(255, 255, 255) none 3px — a 3px white outline defined but not rendered (none style) until an interactive/focus-visible state calls for it.

Sticky nav (div.sticky-nav)

• rgba(0, 0, 0, 0.6) background — a translucent scrim, distinct from the opaque rgb(12, 12, 12) page canvas, letting whatever sits behind it stay faintly visible.

Border radius

• A single value, 4px, used wherever rounding appears — small and utilitarian, never a pill or a sharp 0.

Shadows

• None detected. Every surface is flat; separation comes from the luminance step between canvas (0.047) and nav scrim (0), not from cast shadows.

5. Layout Principles

• The structural elements are nearly unstyled: section carries 0px padding/margin, and body keeps the browser-default 8px margin with 0px padding — this is a site that leans on component-level spacing (inside .creative-container and similar wrappers) rather than global rhythm rules.
• header is the one structural exception, carrying 0px 0px 8px padding — an 8px breathing gap under the header content before whatever follows begins.
• Breakpoints sit at 430 / 768 / 1024 / 1440 — a small-phone cutoff (430, matching modern large-phone viewport widths) alongside the standard tablet/laptop/desktop set, suggesting the layout is tuned as much for phone-sized video/link taps as for desktop browsing.
• No CSS custom properties were detected — the system carries no design tokens in the cascade; values are applied directly per element.

6. Depth & Elevation

Depth here is almost nonexistent, and what little exists is opacity-driven rather than shadow-driven:

• Canvas vs. nav scrim — the page sits at luminance 0.047 (rgb(12, 12, 12)); the sticky nav overlays a rgba(0, 0, 0, 0.6) scrim on top, functionally darker (effective luminance trends toward 0) without introducing a new hue.
• Interaction depth is opacity, not elevation — hovering or focusing a link doesn’t lift it, shadow it, or recolor it; it simply dims to 70% opacity. This is the site’s only “elevation” language.
• No box-shadow values were extracted anywhere in the system.

7. Do’s and Don’ts

Do

• Set the canvas to rgb(12, 12, 12) — not pure black — and keep all text and borders at flat rgb(255, 255, 255).
• Hold every weight at 500 and drive hierarchy purely through size (32px → 24px → 16px).
• Apply the same -0.7px letter-spacing across every text size, from h1 down to body — don’t taper it.
• Use opacity (1 → 0.7) as the entire interaction language for links; skip color shifts, underlines, and transforms.
• Keep border radius at a restrained 4px wherever rounding is needed.
• Layer a rgba(0, 0, 0, 0.6) scrim for sticky/overlay navigation rather than a new opaque color.

Don’t

• Don’t introduce a second hue or accent color — this system is white-on-near-black and nothing else.
• Don’t vary font weight for emphasis; the whole site sits at 500.
• Don’t add drop-shadows or elevation effects — the system has none, and depth is handled by opacity and luminance alone.
• Don’t scale letter-spacing down as text gets larger — the flat -0.7px tracking is a deliberate signature here, not an oversight.
• Don’t fill link backgrounds or add borders on hover — the only hover signal is dimming to 70% opacity.

8. Responsive Behavior

Four breakpoints — 430, 768, 1024, 1440 — cover phone, tablet, laptop, and desktop. The inclusion of 430 (rather than a rounder 480 or 375) signals the layout was checked against modern large-phone viewports specifically, consistent with a site whose primary content is likely consumed via phone taps on outbound video links. Typography carries no responsive overrides in the extracted data — the 32/24/16px scale and the flat -0.7px tracking appear to hold constant across breakpoints, letting the layout (not the type) do the adapting.

9. Agent Prompt Guide

Build a UI that matches micahcarroll.com’s design language.

Set the page canvas to rgb(12, 12, 12) — a soft near-black, not pure #000. Set all text, borders, and default outlines to flat rgb(255, 255, 255); do not introduce any second color or accent hue anywhere in the interface. Use Inter as the only typeface, at a constant weight of 500 for every role — headings, body, links — and drive hierarchy purely through size: 32px for top-level headings, 24px for sub-heads, 16px for body text and links. Apply a flat -0.7px letter-spacing uniformly across all of those sizes; do not taper it down for smaller text. Give links a transparent background at all times, matching text color to the canvas foreground (rgb(255, 255, 255)), and make the entire interaction model opacity-based: default opacity: 1, hover/focus opacity: 0.7 — no color change, no underline, no transform, no shadow. Keep border radius restrained at 4px. For a sticky or overlay navigation bar, use a translucent rgba(0, 0, 0, 0.6) scrim rather than a new opaque surface color. Add no box-shadows anywhere — this system communicates depth only through the luminance gap between the near-black canvas and the darker nav scrim. Target breakpoints at 430 / 768 / 1024 / 1440px, keeping typography constant across all of them.

Generated by Sparkbites — extracted from live CSS analysis