MakPow Design System

Color

The site follows your device: light or dark. Semantic tokens are what components use; the dark values live in .theme-auto inside a prefers-color-scheme: dark query, and admin stays light. Contrast is measured against the page background, or, for fills, with ink text on top. Text on yellow is always dark (--text-on-yellow).

Aa --background-primary #fafafa Page background Dark: #0A0A0A 16.67:1 · AAA

Aa --background-secondary #ffffff Cards, fields, buttons Dark: #161616 17.4:1 · AAA

--text-primary #1a1a1a Headings and body ink Dark: #F5F5F5 16.67:1 · AAA

--text-secondary #404040 Body text Dark: #D4D4D4 9.93:1 · AAA

--text-muted #737373 Captions, meta, hints Dark: #A3A3A3 4.54:1 · AA

Aa --border-light #e5e5e5 · var(--gray-200) Card and field borders Dark: #262626 13.82:1 · AAA

Aa --border-medium #a3a3a3 · var(--gray-400) Input borders Dark: #404040 6.9:1 · AA

Aa --signal-yellow #FFD23F Primary actions, selection, links 12.05:1 · AAA

Aa --primary-600 #CCAA33 Primary hover 7.76:1 · AAA

--red-700 #b91c1c Errors 6.2:1 · AA

Gray scale

50 100 200 300 400 500 600 700 800 900

Type

Systems that live in code

--font-display

Bigshot One. Page titles and section headings (h1, h2). One weight, so it never fakes bold.

Office Badger

--font-heading

Inter. Smaller headings, tile titles, labels.

I design systems that live in code.

--font-sans

Inter. Body text, nav, buttons, forms.

Every artist was first an amateur.

--font-quote

Trocchi. Blockquotes. Regular only, so quotes stay upright instead of a faked italic.

Heading scale

Headings step down by the golden ratio (--type-ratio: 1.618): h2 is h1 divided by 1.618, and h3 is h2 divided by 1.618. Sizes stay fluid because each level is calculated from the one above. h4 matches body text and h5 matches subtext. Every page title uses --h1-size, blog posts included.

--h1-size · Page title Book a time

--h2-size · Section title Book a time

--h3-size · Sub-section Book a time

--h4-size · Same size as body Book a time

--h5-size · Subtext size Book a time

Lead-in

The opening paragraph of case studies and captions: a bright first sentence, then muted text. --lead-size grows smoothly from about 19px on phones to 24px on desktop, with no jump at a breakpoint.

Designer, illustrator, and storyteller. I make design systems, apps, comics, and picture books.

Text scale

--text-xs · 12px Book a time

--text-sm · 14px Book a time

--text-base · 16px Book a time

--text-lg · 18px Book a time

--text-xl · 20px Book a time

--text-2xl · 24px Book a time

--text-3xl · 30px Book a time

--text-4xl · 36px Book a time

--text-5xl · 48px Book a time

Space & shape

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

--space-16 · 64px

Radius

Three roles. Controls are tight, surfaces are soft, pills are round. Components use these, not the raw scale. App icons use the iOS corner, a share of the icon's size.

--radius-control · 8px

--radius-surface · 24px

--radius-full · 9999px

--radius-app-icon · 22.37%

Elevation

--shadow-sm

--shadow-md

--shadow-lg

Buttons

One component. Variants set color; sizes only swap component tokens (--btn-py, --btn-px, --btn-font-size, --btn-radius), which map to the base scale.

<button class="btn btn--primary">Send request</button>
<button class="btn btn--soft btn--sm">Edit days</button>

.btn--sm { --btn-py: var(--space-2); --btn-px: var(--space-4); --btn-font-size: var(--text-sm); }

Buttons inside article text keep the button look. They never pick up the yellow link underline, so Previous / Back / Next at the end of a post or comic use btn btn--soft btn--sm.

Forms

Controls inherit the page font. Selection uses the site yellow with dark marks, so the state stays visible in both themes.

Text field Dropdown

Checked Unchecked Selected Not selected

Links

Inline links get a yellow underline in the primary button color (--link-color). On hover the underline turns ink (--link-hover-color) and the text keeps its color. Calls to action use Read more.

Content

Blog posts and case studies are written in Markdown and rendered by the site. These are the article styles they pick up.

Every post opens with a drop cap in the display font. It uses initial-letter, so its top lines up with the capitals of the first line and its base sits on the third; browsers without it get a floated letter. Inline code sits on a soft yellow chip in ink, which passes contrast where yellow text did not.

Every artist was first an amateur.
Ralph Waldo Emerson

> Every artist was first an amateur. -- Ralph Waldo Emerson

<blockquote><p>Every artist was first an amateur.</p><footer>Ralph Waldo Emerson</footer></blockquote>

A quote that ends with “— Name” or “-- Name” gets the name moved into a small footer, so posts don't need any markup for it.

Case study panels

Images sit on pastel panels that fade from the top down. The hue cycles down the page (sky, mint, lemon, peach, rose, lilac) from the prism tile tokens, set once with --panel-bg. A titled section opens with project-section-title and a larger intro.

Whiteboard sketch

Final product

In use

<section class="project-group">
  <p class="project-group-label">Final product</p>
  <div class="project-group-image"><img src="..." alt="..."></div>
  <p class="project-group-caption"><strong>Lead.</strong> The rest of the caption.</p>
</section>

.prose section.project-group:nth-of-type(6n+1) { --panel-bg: var(--tile-prism-sky); }

Tiles

Home tiles follow Apple's card pattern: the whole tile is the link, and a soft button is only the cue. Each variant is one class that sets --tile-bg from tile tokens. Most fade from the top down; prism is a light rainbow at an angle, and ink is the one dark tile.

PrismLight rainbowView project PebbleBluish grayView project MistSoft blueView project DuskDeeper grayView project SunSoft yellowView project InkDarkView project

<a class="feature-tile feature-tile--sun" href="/portfolio/...">
  <span class="feature-tile-text">
    <h2 class="feature-tile-title">Barnes & Noble Yuzu</h2>
    <p class="feature-tile-line">Drawing and note tools for students.</p>
    <span class="btn btn--soft btn--sm feature-tile-cta">View project</span>
  </span>
  <span class="feature-tile-art"><img src="..." alt="..."></span>
</a>

.feature-tile--sun { --tile-bg: linear-gradient(180deg, var(--tile-sun) 0%, var(--tile-sun-end) 75%); }

Work tiles

The "More work" thumbnails at the end of each case study. Images stay clean; the title sits on a soft bluish fade in ink, pebble and mist alternating. Empty images show an image icon and keep their title; work under NDA shows a lock, set by one class.

With image Image coming Under NDA

<a class="work-tile" href="/portfolio/...">
  <div class="work-tile-image is-locked"></div>
  <div class="work-tile-caption"><h3 class="work-tile-title">StoryboardKit</h3></div>
</a>

Apps

App cards light up on hover with a gradient that travels around the edge (--ai-gradient), a nod to the apps being built with AI. It's a large disc spinning behind the card, with the card fill covering its middle, so it works in every browser. Icons use the iOS corner.

Book a TimeHover state

Office BadgerHover me

<div class="card card--app">
  <a class="card-link" href="/apps/book-a-time">...</a>
</div>

.card--app:hover::before { background: var(--ai-gradient); animation: ai-spin 2.5s linear infinite; }

Home screen icons are 180px PNGs. iOS restyles simple, symbol-like icons on its dark home screen, so app icons use distinctive art rather than a generic glyph.

Comics

The comics pages carry their own style, ink panels and halftone, built only from site tokens. Each comic is a panel with a 2px ink border and a yellow caption box with a hard shadow. On hover the caption lifts and a halftone halo spreads out behind the panel, with dots that shrink toward the edge. The halo is one SVG used as a mask, so its color comes from a token.

Not What You Drink

Music Appreciation

Kung Pool

<div class="comic-card">
  <a class="comic-card-link" href="/comics/jiko/kung-pool">
    <div class="comic-card-image"><img src="..." alt=""></div>
    <div class="comic-card-info"><h3 class="comic-card-title">Kung Pool</h3></div>
  </a>
</div>

.comic-card::before { background: var(--text-primary); mask: url('/media/site/benday-halo.svg'); }

Page squares

Side-scrolling comics show one open square per page, like a row of panels. The current page is filled in ink, and screen readers hear "Page 2 of 4".

<button class="comic-page-square" aria-label="Page 2" aria-current="true"></button>

Theming

My apps keep their own personality without forking components. Office Badger points the shared tokens at its own colors, and the same button classes pick them up.

Site

Office Badger theme

.badger-app {
  --primary-400: var(--badger-accent);   /* amber */
  --primary-500: #E5A61F;
  --btn-soft-bg: var(--badger-chip);
  --btn-soft-bg-hover: var(--badger-track);
}

For machines

The same tokens as JSON, generated from tokens.css on every request, so a design tool or an AI agent reads exactly what the site uses.

GET /design-systems/tokens.json

{
    "color": {
        "signal-yellow": "#FFD23F",
        "text-primary": "#1a1a1a",
        "text-muted": "#737373"
    },
    "font": {
        "font-display": "'Bigshot One', Georgia, serif",
        "font-sans": "'Inter', 'Source Sans 3', system-ui, sans-serif"
    },
    "space": {
        "space-2": "0.5rem",
        "space-4": "1rem"
    }
}