Design System · v1

The single source for every build

Monmac Labs Design System

Dope websites. Any industry. No AI slop. Every surface we ship, from a client redesign to our own site, pulls from these foundations. Grounded in the live tokens behind the /v2 build. Move your cursor around, then hover a button.

Foundations

Brand & voice

Industry-agnostic premium studio. We do not pitch, we show. Copy is plain, confident, and specific. No em dashes, no hype stacks, no filler.

Positioning

We just build dope websites. Different, premium, no AI slop. One partner, real craft.

Proof, not promises

The work is the testimonial. Portfolio sphere and before/after redesigns replace the quote wall.

Register

Plain business English. Short declaratives. Numbers where they are real. Never breathless.

Logo

The bar-V-bar mark

Reads as M. White on ink, ink on light. Wordmark: MONMAC (bold) + LABS (light). Keep clear space of one bar-width on all sides. Never recolor the mark outside ink, paper, or Plasma Cyan.

Monmac Labs
Monmac Labs

Color

Plasma Cyan on ink

Neutral-heavy. Ink and paper carry the weight; Plasma Cyan is the one loud accent used with restraint. The section palette below tags each area of the product (the mosaic tiles).

Ink
#0B0F0E · page ground
Ink 2
#16191F · text / logo
Paper
#F5F7F6 · light ground
Plasma Cyan
#00C8FF · accent
Cyan Deep
#0077A3 · cyan text on light
Cyan Tint
#CDEFFB · wash
Glow
rgba(0,200,255,.15)
Muted
#9AA6B2 · secondary text

Section palette

Work
#00C8FF
Web Design
#16191F
App Design
#1E7F6B
Business Dev
#2E5FAE
About
#C2556A
Contact
#FFFFFF

Typography

Geometric display, mono labels

Display is a geometric grotesk (Avenir Next system stack) at 700 with tight tracking. Labels, nav, and buttons are monospace, uppercase, ~0.12em tracking. Body is a clean system sans.

Step inside the work.
Display · Avenir Next · 700 · -0.02em
Display / XLAaclamp(38-74px) · 700 · -0.02em
TitleAaclamp(24-34px) · 700
Label / monoBook the audit14px · uppercase · 0.12em
BodyPlain, confident sentences that get out of the way.16px · 1.6

Space, radius & motion

Rhythm

8-point spacing rhythm. Radius runs from soft cards to the full 999px pill CTA. Motion is quick and purposeful; every animation clarifies something.

4
8
16
24
32
48
64
8 · controls
12 · inputs
14 · cards
999 · pill CTA

120–180ms

Micro-interactions (hover, tap).

250–350ms

Panels, tile swaps, flood-zoom.

cubic-bezier(0.16,1,0.3,1)

Standard ease-out for reveals and card splits.

Components

Buttons & nav

One primary per zone: the cyan pill. Secondary is a ghost pill. Nav and labels are mono, uppercase. Hover the primary button to feel the living cursor take it over.

View the work

Signature pattern

The tile mosaic

The homepage is a mosaic of tiles, one per area, each with its own color. Hover swaps foreground and background (Dropbox pattern); click floods the tile color to full screen and opens the panel. Hover the tiles.

Work
Web Design
App Design
Business Dev
About
Contact

Signature interactions

How it feels

Motion is the brand. These are the moves that make a Monmac build unmistakable.

Living organism cursor

A blue gooey cursor. On a button it takes the button over (fills blue from the contact point), then drains back out as slime when pulled off. Active on this page.

Laptop-zoom intro

A MacBook sits at a distance; scroll pulls the camera through the screen into the work. The /v2 opener.

Flood-zoom panels

Click a tile and its color floods edge to edge, then the panel opens. Escape reverses the zoom.

Monmac Labs · Design System v1 · grounded in the live /v2 tokens · /v2 preview