Design system

Micah

Lindenberger

Version 1 · October 2026 · Hover the title

Scroll

Principles

Six rules the work follows.

Everything below comes from four live sites: the 2026 mini portfolio, the rental application case study, Lattice and the earlier case studies at micahburger.com. These rules are what they share.

  1. 01

    The work leads.

    One idea per screen. Text on the left, the product on the right.

  2. 02

    Scale contrast.

    Very large, tightly set titles against small, quiet body copy and labels. Titles sit under a line-height of 1 with negative tracking.

  3. 03

    Color lives in the page.

    Each project owns its background. Chrome stays neutral and inverts against it automatically.

  4. 04

    Warm neutrals.

    Never pure black on pure white for text. Ink is #141414, paper is #F4F1EC, cream is #FAF7F3.

  5. 05

    Quiet, fast, directional motion.

    Media moves first, copy follows. Exits are shorter than entrances. Every animation has a reduced-motion version.

  6. 06

    Restraint.

    Fewer elements, fewer words. Nothing decorative that does not explain the work.

Registers

Two registers, one hand.

Pick one before building. A register sets the color, type, layout and stack. A case study can also carry a product register: the real product UI, scoped under .product so it never styles the shell.

Deck

A mini portfolio. Three to six projects, one per screen, each in its own color.

Type
Proxima Nova, Inter
Stack
Vite + React, no animation library
Live
2026folio.micahburger.com

Long-form

One deep case study read top to bottom. Dark, editorial, annotated screens.

Type
Instrument Sans, Inter, IBM Plex Mono
Stack
Plain HTML, CSS, JS. GSAP for one signature moment
Live
applicants.micahburger.com

Color

Warm neutrals, one accent.

One palette. Neutrals do the work; the accent is saved for large marks. Click any swatch to copy its value.

Type

Big and tight. Small and quiet.

Titles carry the page. Everything else steps back.

Graphite scale

HeroInstrument Sans 600
7.5vw / .95 / -.03em
Design system
Section headlineInter 500
38px / 1.15 / -.01em
Designed to be picked back up.
DisplayInstrument Sans 600
clamp(30px, 3.6vw, 54px) / 1.04
Making payment make sense.
Item titleInstrument Sans 600
19px
No clear sense of progress
BodyInter 300
16px / 1.6, soft
Reducing the number of steps helped, but the bigger change was giving the application a visible structure.
LabelIBM Plex Mono 400
10px, uppercase, .14em
Arc one · Moment one
NumberIBM Plex Mono 400
20px, accent
01

Deck scale

MICAH LINDENBERGER
Applicant
experience

Applying for a rental is long, sensitive, mostly completed on a phone, and ends with a payment.

Title
Proxima Nova 400, clamp(40px, 5.2vw, 94px), line-height .79, -.03em. Mobile 64px / .88.
Stacked title
clamp(56px, 6vw, 96px), weight 900, line-height .94, one span per line.
Body
18px / 1.4, mobile 16px. 16px between paragraphs.
Header
Inter 500, 14px / 1.15, -.01em. Name in uppercase.
Disciplines
13px, .02em, 75% opacity, joined with a middle dot.

Space and surface

Generous margins. Few surfaces.

Space does the grouping. Surfaces, radii and shadows are used sparingly and always from this short list.

Graphite

  • --space-sectionclamp(64px, 10vw, 120px)
  • --gutterclamp(20px, 6vw, 48px)
  • --content-max1080px, 1300 to 1407 for media

Deck

  • --page-margin-left140px
  • --page-margin-top130px
  • --page-margin64px
  • --page-margin-mobile28px, top 96px

Radius and shadow

--radius-sm8px--shadow-sm
--radius-md14px--shadow-md
--radius-lg20px--shadow-lg
pill999px

Motion

Quiet, fast, directional.

Five curves cover everything. Distances stay small: 12px for lists, 16px for copy, 24px for reveals, 40px for direction. Only transform and opacity move, plus a page color wash.

Deck project change

Media leaves 320ms, copy follows 120ms later. New media arrives at 160ms, copy at 320ms. Page color crossfades 560ms.

MICAH LINDENBERGERMenu2026 Mini portfolio

Overview zoom

FLIP with the Web Animations API, 650ms move curve. Others dim to 15% in 200ms. Click a card, then click again or press Escape.

Scroll reveal

Rise 24px and fade, 400ms enter curve, once per section.

Hover grow

Pills 1.12, cards 1.05, 320ms enter curve. Fine pointers only.

Menu

Drawer and jump list

In: 36px and fade, 240ms enter curve. Out: 180ms exit curve.

Custom cursor

16px white dot with difference blending. Orange over anything clickable, darker while grabbing. Move into the box.

Drag me

Hero scramble

GSAP SplitText. On hover each character flashes a spark color for 300ms, rippling out from the center. Half swap to a random glyph, a third show their width. After 6s idle a random line plays every 4s.

The live version is the title at the top of this page.

Page to page

Recommended for multi-page sites. Native View Transitions with the same curves. Chrome, Edge and Safari animate it, Firefox simply navigates.

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .32s cubic-bezier(.65,0,.35,1) both vt-out; }
::view-transition-new(root) { animation: .38s cubic-bezier(.23,1,.32,1) .16s both vt-in; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(16px); } }
.case-hero-media { view-transition-name: hero-media; }

Reduced motion

Required on every build. Transitions drop to 120ms, keyframes are removed, view changes become a 150ms crossfade, carousels stop, zooms become fades, and the hero is never split.

Components

A short list of parts.

Most pages need only these. Each one already exists on a live site.

MICAH LINDENBERGERMenu2026 Mini portfolio
MICAH LINDENBERGERMenu2026 Mini portfolio
MICAH LINDENBERGERClose2026 Mini portfolio

Deck header

Centered, Inter 500 14px. The pill fills with the header color and takes the page color as its text, so it always inverts.

Phone
260w, 9/19, r36
Card
340w, 4/3, r18
Desktop
440w, 16/10, r14

Media frames

Placeholders inside a 786 by 762 box. Real exported screens drop the frame and its shadow.

Progress dots

8px circles, 12px apart, with a 12px invisible hit area. Active dot is the text color at 90%.

2 / 7·Thesis

Section pill

Fixed bottom right. Opens the jump list. Hidden while the hero is in view. Try the real one on this page.

  1. 01

    No clear sense of progress

    The flow never said how much was left.

  2. 02

    Errors caught too late

    Typos surfaced after reports were pulled.

Numbered breakdown

Mono number in accent, Instrument Sans title, short body, hairline rule between items.

Moment one

  1. 01When a step is complete, its number becomes a check.
  2. 02The primary action changes from Start to Continue.

Annotation notes

Sit beside a screen. Sticky on wide screens so they travel with the phone they describe.

Text control

Mono 11px, uppercase, muted. Underline appears on hover. Never accent colored.

01Hero02Thesis03Diagnosis

Jump list

Mono 12px on the surface color. The current section takes the accent.

Layouts

Text left, work right.

The deck holds one composition per screen. The long-form page stacks a few repeatable sections.

Text600px
clamp(48px, 8vw, 125px)
Media786 × 762
14013064
Deck project. Both columns centered vertically. Bleed, panel and open share this frame; panel fills the page with the active slide's color.
Overview. Black page, two columns, 56px gap, padding 140 64 96. Each card is the real page scaled with container query units. One column under 900px.
Work
history
Resume. Label column minmax(240px, 380px), content 1fr, 64px apart. 72px logos, 56px between rows.
Hero
Long-form. 120px section padding, 1080px reading column, widened to 1300 for text and screen pairs. Notes stick beside the screen.

Breakpoints

900px
Columns stack, the deck scrolls, header turns fixed with a color scrim.
600px
Tighter header, 12px gaps.
2000px
The composition centers instead of stretching.

Portfolio patterns

Ways to show the work.

Five patterns for indexes and case studies. The ideas come from Semplice's portfolio grids; every value here is rebuilt in this system's tokens and motion.

Table index

Rows on hairline rules. Hover fills the row with that project's page color, from the bottom, 250ms enter curve. A preview follows the cursor with a soft lag. Use it as a homepage index.

01Applicant experienceRentSpreeMobile UX 02Requesting an applicationRentSpreeAgent workflow 03MessagingRentSpreePlatform design 04Rental AssistantRentSpreeAI product design 05Rental application redesignRentSpreeCase study

Text index

Large centered titles. Hover dims the others to 20% and brings that project's screen up behind, 400ms enter curve. Calmer than the table, for three to six projects.

Before and after

Drag the divider, or focus it and use the arrow keys. The divider settles with the 400ms settle curve when you click instead of drag. Every redesign case study should have one.

Before: the original application step, with a reuse upsell and payment summary.
After: the redesigned application start, with the agent, four clear sections and time to complete.
V1V2

Rental application redesign

The old step led with an upsell and a subtotal. The new one starts with who gets the application, how long it takes and what comes next.

Frame
Both images exported on the same canvas, so the divider lines up.
Labels
Mono tags, V1 left, V2 right. Never color-code them.

Scroll-lit statement

One sentence per case study, usually the thesis. Words go from rule gray to foreground as the line crosses the middle of the screen. Plain scroll position, no library. Reduced motion shows it fully lit.

Payment placement was never the real variable. Comprehension was. That idea became the foundation for the next test.

Cursor labels

On these patterns the dot grows into a pill that says what a click does: View on links, Drag on the slider. Ink on the active cursor color. Fine pointers only; touch never sees it.

Size
16px dot grows to a 28px tall pill, 250ms enter curve.
Type
IBM Plex Mono 10px, uppercase, .14em, #141414 on #ff5a36.
Markup
data-cursor="View" on any element. The nearest one wins.

Case studies

Problem, move, proof.

Two templates. Both end with something measured.

Deck card

Applicant experience

Problem. Applying for a rental is long, sensitive, mostly completed on a phone, and ends with a payment.

Move. I restructured the application into clear chapters that follow the applicant's mental model.

Media. Three screens, each with a plain label.

  • Title: two to four words naming the surface.
  • First paragraph: who, what context, why it is hard.
  • Second paragraph starts with "I" and a strong verb.
  • Optional third line: status or one number.

Long-form, seven sections

  1. 01HeroProject name, then "Case study / Micah Lindenberger". Nothing else.
  2. 02ThesisWhy it matters to the business. Two paragraphs and a collage.
  3. 03DiagnosisThree numbered breakdowns.
  4. 04Arc oneOutcome as the headline. Annotated moments.
  5. 05Arc twoSame weight as arc one.
  6. 06Arc threeSame weight again. Flag a thin one.
  7. 07CloseMeasured outcomes, how it was built, what comes next.

Every case study needs at least one number.

"22% rise in video call scheduling." "Closings 3 days faster." If the number is not known yet, leave a marked placeholder. Never invent one.

Voice

Say less. Mean it.

No em dashes.

The flow had no save point. People left.

The flow had no save point — and people left.

Headlines are sentences.

Designed to be picked back up.

Progress & Resumption Framework

First person for decisions.

I collapsed the common path to a few taps.

The team leveraged synergies to streamline workflows.

Name the real insight.

Payment placement was never the real variable, comprehension was.

We tested several payment placements.

Restraint over addition.

Cut the adjective, the second example and anything the screen already shows.

An incredibly intuitive, beautifully crafted, seamless experience.