DESIGN SYSTEM · 7A / 8A

Carmine

The visual system for marbirdigital.com.

Hairlines and whitespace. No shadows. Red only where it earns its place.

01 · Colors

Paper, ink, and one accent

Three foundations do most of the work. Neutrals carry secondary meaning. Surfaces stay quiet.

Paper
--paper
#FFFFFF
Page background
Ink
--ink
#111318
Primary text, dark surfaces
Carmine
--carmine
#D42B2B
Accent
Gray 600
--gray-600
#6B7078
Secondary text
Gray 400
--gray-400
#A6ABB5
Labels, metadata
Subtle
--surface-subtle
#F4F4F2
Quiet fills, image wells
Raised
--surface-raised
#FAFAFA
Alt strips, ledger hover

marbirdigital

The red rule

Carmine appears once per screen as the wordmark period, and on every action — buttons, links, index numbers. Never decorative fills. Never backgrounds. Never adjacent to large red fields.

On dark

Primary · #F4F4F1

Secondary · #9AA0AB

02 · Type

Three voices, one register

Archivo for display. Figtree for running copy. IBM Plex Mono for labels that stay out of the way.

Wordmark
marbirdigital
Archivo 800 / 500 · −0.05em · clamp(52–142px)
Display H1
Experiences, done beautifully.
Archivo 700 · −0.025em · clamp(24–32px)
Display H2
Product Design
Archivo 700 · −0.02em · clamp(19–22px)
Body
Every product is designed, engineered, and cared for by the same hands — which is why the small things work.
Figtree · 14.5–16.5px / 1.7 · max 46ch
Eyebrow
INDEPENDENT PRODUCT STUDIO
IBM Plex Mono · 12px · 0.28em
Index
01 02 03 04
IBM Plex Mono · carmine · action only

03 · Marks

The period, compressed

Live type and CSS shapes — no SVG cut required. The squircle period is the brand mark; md. and the app icon compress it.

The PeriodSquircle · radius 34% · carmine primary

md.Archivo 800 · tracking −0.07em

mdmd

App iconTile radius 25% · carmine / ink

04 · Dash

Cursor, not period

Product identity for dash — locked from concept 1c “Prompt”. The parent ends in a squircle period; dash ends in a carmine cursor. Icons stay ink. Carmine is reserved for the cursor and for actions.

Wordmark

dash

IBM Plex Mono 500 · −0.02em · cursor 0.46 × 0.14em

App icon · 88 / 44 / 26

ddd

Paper tile · hairline-strong · radius ~27% · never a color field

Icon set · 24px · 2px stroke · square caps

run
data
grid
notes
log
chart
new
go

currentColor · never carmine · sprite dash-icons.svg

App bar in situ

Cursor wordmark + mono nav + carmine action

05 · Components

Actions and structure

A short inventory. Primary is the only filled surface on a page. Everything else is outline, underline, or type.

Buttons

hello@marbirdigital.com Secondary

Text link

Return home

Ledger row

01
Product Design
Interfaces considered end-to-end, down to the details people feel but rarely name.
02
Software
Consumer apps built to do one thing well and get better over time.

06 · Structure

Rhythm without boxes

Structure comes from hairlines and whitespace. Pills for buttons. Squircles for the mark. Everything else is square.

Gutter

clamp(24px, 5vw, 64px)

Pill

99px · buttons only

Squircle

34% · The Period

Well

10px · image wells

Hairline

rgba(17,19,24,.1)

none

Shadow

Never

07 · Tone

Lowercase confidence

Short declaratives. No emoji. No exclamation points. The product speaks quietly and clearly.

Experiences, done beautifully.
Every product is designed, engineered, and cared for by the same hands — which is why the small things work.