Spec

An A inside crop marks: a component framed on a spec sheet. Two drawings share one shape, a master for 32px and up and a heavier one for small sizes.

• The A takes the text color; the crop marks are always signal.
• Keep clear space of one crop-mark length on every side.
• At 24px and below, use the small drawing (the Mark component switches automatically).
• Never go below 16px, recolor the crop marks or rotate the mark.

import { Mark, Wordmark } from '@/app/components/brand/logo';

<Mark size={26} />          // picks the small drawing at 24px and below
<Wordmark />                // mark + "alex andrade"

Paper and ink with one signal color. Every value is a semantic token; light and dark change the value, never the name. Contrast is checked against WCAG on every build of this page.

• --backgroundPage ground#f4f4f0 · #111111
  no text use
• --surfaceRaised areas: inline code, image wells#ffffff · #1c1c1a
  no text use
• --foregroundPrimary text, rules and outlines#111111 · #f4f4f0
  light 17.1:1 ≥ 4.5dark 17.1:1 ≥ 4.5on --background
• --mutedSecondary text and metadata#555550 · #a1a19a
  light 6.8:1 ≥ 4.5dark 7.3:1 ≥ 4.5on --background
• --lineHairlines and dividers#d9d9d2 · #2e2e2b
  no text use
• --signalCrop marks, focus rings and fills. Never small text.#f04e17 · #ff6a33
  light 3.3:1 ≥ 3dark 6.6:1 ≥ 3on --background
• --signal-textAccent text and links#c2410c · #ff6a33
  light 4.7:1 ≥ 4.5dark 6.6:1 ≥ 4.5on --background
• --primaryPrimary button fill#111111 · #ff6a33
  no text use
• --on-primaryText on primary#f4f4f0 · #111111
  light 17.1:1 ≥ 4.5dark 6.6:1 ≥ 4.5on --primary
• --code-bgCode blocks#111111 · #0a0a0a
  no text use

// Tailwind utilities map to the tokens
<p className="text-muted">…</p>
<div className="border-line bg-surface">…</div>

/* or the CSS variables directly */
outline: 2px solid var(--signal);

• Display72px · 1.02 · -0.035em · boldHero and page titles

  Design systems that humans and AI agents get right.

• Heading48px · 1 · -0.025em · boldSection headings

  Design systems that humans and AI agents get right.

• Title36px · 1.25 · -0.025em · boldFeatures, cards and article titles in lists

  Design systems that humans and AI agents get right.

• Lead20px · 1.625 · regular · mutedIntros under a title

  Design systems that humans and AI agents get right.

• Body17px · 32px · regularLong-form reading

  Design systems that humans and AI agents get right.

• LabelMono · 13px · regularEyebrows, dates and navigation

  Design systems that humans and AI agents get right.

• TagMono · 12px · regular · mutedTags, captions and fine print

  Design systems that humans and AI agents get right.

The signature element. Crop marks frame the one thing that matters in a view: the portrait, the featured post, the share image title. Size them with two variables.

<div className="crop-marks p-4">…</div>

<div className="crop-marks p-4 [--crop-len:28px] [--crop-w:3px]">…</div>

• alex andradeThe wordmark is always lowercase.
• // writingMono comments label sections and metadata.
• 01 · 02 · 03Numbers give sections an order, like a spec.
• I built, we learnedFirst person, plain words, no hype.

• tokens.jsonDesign Tokens format, both themes
• mark-light.svgFor light backgrounds
• mark-dark.svgFor dark backgrounds
• app-icon.svgSquare icon, no transparency