marbirdigital

Design System · Tunis Palette

Tunis

The visual system for marbirdigital.com, on the Tunis palette.

Hairlines and whitespace. No shadows. One blue, and only where it earns its place.

  1. 01Colors
  2. 02Type
  3. 03Marks
  4. 04Components
  5. 05Structure
  6. 06Tone

01 · Colors

Paper, ink, and one blue

The Tunis ramp is four blues cut from one hue family. Classic is the action color; the other three are depth. Denim gray is the only neutral ladder, nothing outside it.

The ramp

  • Deep door

    --tn-deep-door

    #00539B

    Pressed, ink-blue, chase

  • Classic

    --tn-classic

    #006CB4

    Buttons, links, index

  • Bright

    --tn-bright

    #2D86CA

    Lift, action on dark

  • Sun-faded

    --tn-sun-faded

    #6AA5D6

    Low emphasis, quiet edge

Paper & denim gray

  • Paper

    --paper

    #FFFFFF

    Page background

  • Ink

    --ink

    #16212E

    Primary text

  • Gray 600

    --gray-600

    #6B7885

    Secondary text

  • Gray 400

    --gray-400

    #9FB2C4

    Labels, metadata

  • Subtle

    --surface-subtle

    #EFF3F7

    Quiet fills, wells

  • Raised

    --surface-raised

    #F7F9FB

    Alt strips, ledger hover

On dark

Primary · #E9EFF5

Secondary · #8DA0B4

Action · #2D86CA (Bright)

Ground is #0B1420. Classic sits too close to the ground on dark, so Bright takes the action role.

Off-ramp pair

The blue ramp is structure, never direction. The only two non-blue hues in the system mean movement, and never carry meaning alone.

#2E8B96

Copper wash · up

#B25C4D

Copper red · down

02 · Type

Three voices, one register

Archivo for display. Figtree for running copy. IBM Plex Mono for labels that stay out of the way. The palette moved to Tunis; the voice stayed put.

  • marbirdigital

    Wordmark

    Archivo 800 / 500 · −0.05em · clamp(52–142px)

  • Experiences, done beautifully.

    Display H1

    Archivo 700 · −0.025em · clamp(24–32px)

  • Product Design

    Display H2

    Archivo 700 · −0.02em · clamp(19–22px)

  • Every product is designed, engineered, and cared for by the same hands, which is why the small things work.

    Body

    Figtree · 14.5–16.5px / 1.7 · max 46ch

  • Independent product studio

    Eyebrow

    IBM Plex Mono · 12px · 0.28em

  • 01 02 03 04

    Index

    IBM Plex Mono · Classic · 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. On Tunis it runs Classic. Marks are mono.

The PeriodSquircle · radius 34% · Classic primary
md
md.Archivo 800 · tracking −0.07em · mono Classic
mdmd
App iconTile radius 25% · Classic / ink

04 · 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.comSecondary

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.

05 · 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

#DDE5EC

none

Shadow

Never

06 · 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.