Component

Design tokens

Cream canvas, chalkboard panels, charcoal ink, sky CTA, and crayon accents. JetBrains Mono everywhere for now. Radius stays at 2px; elevation is a hard offset plate.

Cream Paper

#f4efea

Board

#2c322c

Chalk Dust

#f3efe3

Charcoal Ink

#383838

Sky Crayon

#6fc2ff

Canary Banner

#ffde00

Coral Sketch

#f38e84

Mint Sketch

#38c1b0

Lilac Sketch

#b291de

Ice Wash

#ebf9ff

Typeface: JetBrains Mono (display + UI)
Tracking: 0.02em
Radius: 2px everywhere
Lift shadow: fixed ink plate · face eases 300ms
Max width: 1200px
Display weights: 300–400 for headlines

Component

Typography

One family for now: JetBrains Mono. Light weights for headlines, regular/medium for UI. Board panels still work for contrast — same type, dust-on-board color.

Mono on cream · ink

Hello, portfolio

Selected work

Case study notes

Body and chrome share the same mono face. Personality comes from weight, case, color, and layout — not a second font (yet).

Mono on board · dust

Today's brief

Ship something sharp

Board panels are for featured statements — hero moments, chapter breaks, or a single memorable line.

Family

JetBrains Mono

Headlines

Light weight · optional uppercase

UI / body

Regular / medium

Component

Buttons

Primary sky fill for main CTAs. Secondary is white outline. Rainbow borders cycle crayon colors across tiles. Nav CTA is flat (no shadow). A fixed ink plate stays put while the face eases up and down over 300ms.

Primary

sky fill · ink border · hard shadow

Secondary

white fill · ink border · hard shadow

Rainbow

rotating crayon borders

Nav

sky fill · white text · no shadow

Rainbow cycle: 8 outline colors

Component

Top navigation

White bar, ink bottom border, brand left, uppercase links center, ghost login + flat sky CTA right. No sticky elevation — keep the header lightweight.

Portfolio

Component

Hero

Cream canvas. Light-weight uppercase mono display. Short supporting sentence. Two CTAs (primary + secondary). Optional logo strip below. Keep the first viewport to brand + headline + sentence + CTAs + one visual.

Chalkboard + ink

Infrastructure for answers

Fast, serverless ideas with chalk for the voice and mono for the tools.

AheadGoodshipTogetherFinQoreDavid AI

Component

Product screenshot frame

White (or dark) panel framed by a 2px ink border and hard offset shadow. Optional hand-drawn cloud/triangle accents. Use for project previews and product mockups.

Agent console3 questions left

❯ why did weekly active ducks dip?

● Queried warehouse — dip isolated to EU flock (−22% after 07-28 release).

⎿ ran on duckling agent-7f2 (isolated)

Component

Marquee banner

Full-bleed canary yellow strip. Uppercase mono text scrolling horizontally. No border, no shadow — a rhythmic visual reset between sections.

Data Warehouse + AIHypertenancyDucklings per AgentZero ContentionScale IndependentlyData Warehouse + AIHypertenancyDucklings per AgentZero ContentionScale Independently

Component

Testimonial quote card

Canary wash background, ink border, large open-quote glyph, body quote, white name label card, and a Read more link.

Agent-driven queries would create a serious cost problem on compute-heavy warehouses. This architecture is an excellent fit for the kind of exploration agents need.

Pablo Ferrari

Director of Data Engineering

Community tweet card

White surface, ink border, no shadow. Avatar + name + handle header, body copy below. Border alone defines the card edge.

Alex Rivers

@alexbuilds

𝕏

Shipped a portfolio kit with cream paper, mono type, and hard offset shadows. Feels like a notebook that can ship product.

Jordan Lee

jordan.lee

The 2px radius + press-into-shadow buttons are doing all the brand work. Zero glow, zero pills, still playful.

Component

Text input / search

White field, 2px ink border, 2px radius. Focus washes to ice blue. Label above in uppercase mono; optional muted hint below.

SearchEnter to run a sample queryEmail