The design system · a mood board

Paper, ink, one greenthe system

The marks, the colors, the type, the textures, the motion, and the rules. Everything here is the real component, drawn live.

Marks

The M, the name, the family
  • The Measrd MThree angled strokes, two shadow slivers. Ink on paper.
  • On the chapterOff white on Iron Ore. The menu button, the footer notch.
  • Measrd
    The nameArchivo Expanded caps. The wordmark is a design pass still owed; nothing generated stands in.
  • BalancedThe app icon. Sand, charcoal, fig; Fraunces.
  • LightbulbInk and amber. A mark is still owed.
  • Loom LabsThe closed frame with its centred void, in the Loom teal radial. The studio.

Color

The house paint, then one green

Canvas

  • Paper#E8E1D5Accessible Beige, lifted. The page.
  • Beige#D1C7B8SW 7036, the true value. Panels, cards, the ticket.
  • Beige deep#BFB3A2Rules and borders on beige.
  • Off white#F4F1EAType on the dark chapter.

Ink

  • Iron Ore#434341SW 7069. Type on paper, the bar, the mark.
  • Ink deep#2A2A29The dark chapter. Footer, posters, the shelf.
  • Ink soft#55544FSecondary text on paper.
  • Off white soft#B9B4A9Secondary text on the chapter.

Accent

  • Loom emerald#0E7A5EThe one accent. Buttons, the signature, the live dot.
  • Emerald as text#0A5C47The accent when it has to be read on paper.
  • Loom mint#4DD4A8The accent on the dark chapter. Strokes and words.

Balanced

Fraunces
  • Sand#FFF9F3
  • Charcoal#2A2628
  • Fig#755067
  • Gold#E8B45E

A quiet ritual for the two of you.

Lightbulb

Familjen Grotesk
  • Ink#06070B
  • Paper#ECE9E1
  • Amber#E2A35A
  • Indigo#5D6CC1

The day keeps three windows.

Loom Labs

Archivo
  • Obsidian#07090D
  • Emerald#0E7A5E
  • Mint#4DD4A8
  • Deep#043828

AI systems for people who ship.

Type

Every character, every face

Archivo Expanded

Display · 900 · width 125

Everything Measrd

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 &?!.,;:—–·/#@%

Archivo, condensed

The alt line · width 62

Everything Matthew Deal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &?!.,;:—–·/#@%

Familjen Grotesk

Reading · 400 / 600

Useful things, built in the open. A YouTube diary, a 3D-print store, and the apps in between.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!.,;:—–·/#@%

JetBrains Mono

Labels, numbers, the ticket

Season 01 · Day 003 · Building in the open

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!.,;:—–·/#@%

Fraunces

Balanced only · italic for the ritual

A quiet ritual for the two of you.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!.,;:—–·/#@%

Texture

Terrain and the 33.333 mm grid
  • Topo on paper · the hero, the menu
  • Topo on ink · the footer, the posters
  • The grid · one cell per pixel on the Wall
  • Pulse, lit, closePulse · the object’s own texture, from the CAD

Motion

Four moves, used everywhere
  • Words rise in

    Rise · every head and lede, on scroll
  • Hover meRoll · the footer links
  • Wipe · between pages, ink then paper
  • PaperInkLens · the hero reveals its other version

Components

@measrd/ui
Pills and labels
LiveBuilding Release coming soon

The rules

Locked Sep 1 2026, revised as we go
  1. 01

    A light canvas that turns dark

    Paper for the reading, the dark chapter for the moments. Sections fade into each other; nothing ends on a hard edge.

  2. 02

    One display, one grotesk, one mono

    Archivo Expanded carries the name and the big lines. Familjen Grotesk reads. JetBrains Mono labels.

  3. 03

    One accent

    Loom emerald, and its mint on the dark chapter. Everything else is paper and ink.

  4. 04

    Photo and video carry

    The site is built to hold photographs and film first. Terrain and grid fill in until they arrive.

  5. 05

    Layered depth

    Textures run under the bar, parallax on the hero, a lens that reveals the other version of the page.

  6. 06

    A personal now

    The ticket in the corner says what is happening today. The site is a diary before it is a brochure.

  7. 07

    Less prose

    Short lines, real numbers, honest status. The journal is where the writing lives.

  8. 08

    Desktop compositions on the phone

    Two columns stay two columns; type scales to fit. Nothing collapses into a list unless it has to.

  9. 09

    The mark is the switch

    On the Wall, tapping the M turns it on. On the site, the M opens the menu. The mark does a job.

References · landonorris.com for the person-first season · loomlabs.dev for the cards · Paragami for the Wall’s idiom · Sherwin-Williams 7036 and 7069 for the house

Built from this.

On the shelf