Design system v0.1

Fortress + page.

Protection, governance, content. One tower, one red, one pixel layer. Everything on this page is live and uses the same CSS as the site.

01 · Logo

Tower tile, curled page.

A solid tower tile with the fortress outline and page-curl fold cut out of it. One flat color. Wordmark is bold sans plus pixel .dev.

White on red
primary

White on black
dark UI

Black on white
light UI

Frosted glass
over imagery only

Lockup

murumb.dev by Samata

Rules

Clear space: 2× one merlon on all sides.
Symbol min 16px. Wordmark min 80px.
One flat color. Never a gradient, shadow or outline.
Never red on blue. Never the whole wordmark in one face.

02 · Color

Red is the brand. Blue is the machine.

Roughly 60 black and paper, 25 red, 10 blue, 5 gray. Red and blue never compete in the same element.

Red#F52E45--color-redBrand, CTAs, key surfaces

Red hover#E0283E--color-red-hoverPrimary hover, 8% darker

Blue#1F4FFF--color-bluePixels, links, data, focus ring

Black#000000--color-blackBase, text

White#FFFFFF--color-whiteSymbol, text on color

Paper#FAFAFA--color-paperLight background

Gray 200#E6E6E6--color-gray-200Hairlines, card borders

Gray 500#A6A6A6--color-gray-500Muted text on dark, dither

Gray 700#6B6B6B--color-gray-700Muted text on light

Red dark#1A0306--color-red-darkGradient end only

60 black / paper 25 red 10 blue 5

Contrast rules

Aa White on red3.9:1 · large text, bold labels only

Aa Black on red5.4:1 · body text OK

Aa White on blue5.8:1 · body text OK

Aa Red on black5.4:1 · body text OK

Aa Blue on black3.6:1 · large text, graphics only

Aa Gray 700 on paper5.1:1 · captions OK

Approved gradient

Red → near-black, vertical. Hero and background panels only.

03 · Typography

Three voices.

Display carries headlines. Text carries everything you read. Pixel is an accent for verbs, labels, numbers and eyebrows, never paragraphs.

Aa

DisplayInter Tight 600/700Stand-in for Satoshi / Inter Display. Tight tracking, sentence case.

Aa

Text / UIInter 400/500/600Body, buttons, labels.

Aa

PixelPixelify Sans 500/600Stand-in for Departure Mono. Eyebrows, numbers, verbs.

display-xl · 88→48 / 1.0 / 700

Governed, measured.

display-l · 64→40 / 1.05 / 700

Find the first flow.

heading-1 · 44→32 / 1.1 / 700

Start small. Prove it. Then scale.

heading-2 · 32→26 / 1.15 / 600

Agentic marketing flows

heading-3 · 22→20 / 1.3 / 600

Pilots that never ship.

body-l · 20→18 / 1.5 / 400

We start where volume is high, rules are clear and delays are expensive.

body · 16 / 1.55 / 400

Proofs of concept impress in the demo, then stall in IT, legal or brand review.

label · 12 / uppercase / +12% / 500

Deployed in your cloud

pixel-l · 72→40

Build Run Teach

pixel-s · 16 / 1.4

3–6 weeks

Headlines in sentence case. US English everywhere. Name is always lowercase murumb.dev.

04 · Pixel & dither

Real things dissolving into pixels.

Base unit is a 4px cell, scaled in whole multiples. One pixel layer per composition. Never rotated, never skewed. Keep 40% of the frame calm.

Solid100% fill. Edges and anchors, sparingly.

Dither50% checkerboard, 4px cells.

SparseDots for noise and particles.

CloudSolid core, dither edge, sparse dots. Move your cursor.

Colors by surface

Red on black White on red Blue on white Gray on paper

Section edge

The previous section dissolves into the next: one solid row, then a checkerboard.

Build

Run

Teach

05 · Layout

Grid, spacing, radius.

12 columns desktop, 4 mobile. 24px gutters, 1280px max. Every spacing value is a multiple of the 4px pixel cell.

Spacing

space-1 · 4

space-2 · 8

space-3 · 12

space-4 · 16

space-6 · 24

space-8 · 32

space-12 · 48

space-16 · 64

space-24 · 96

space-32 · 128

Radius

12 · UI, buttons

20 · cards

squircle · icons

0 · pixel elements

06 · Components

What the site is made of.

Buttons

Primary Secondary Light (on red) Small

48px high, 12px radius, 16px / 600 label. Hover: 8% darker red plus a stepped dither sweep. Focus: 2px blue ring, 2px offset.

Eyebrow

Red on dark

Blue on light

Card · pixel trail on hover

01

Pilots that never ship.

Paper or white, 20px radius, 1px #E6E6E6 border, no shadow. Move over it.

Dark cell

Black surface, red pixels. Squares appear where the cursor moves, then dissolve in steps.

Keycap · press on hover

120ms down, 200ms up. Also presses when the hero primary button is hovered.

Dock icon

Squircle on a hairline-bordered glass dock. Used on red → black launches.

Stat / trust row

Deployed in your cloud EU data residency Human approval on every output

Callout: paper card with a red left rule and the tower mark.

07 · Motion

Stepped for pixels, smooth for UI.

Everything respects prefers-reduced-motion: dissolves become fades, loops stop.

Hover each word

Pixel swapWords flip to the pixel face. 240ms, steps(1). Width is locked so layout never jumps.

Teach

Cell-by-cell typePixel words appear letter by letter, 70ms per letter, with a red flicker.

UI transitions200ms, cubic-bezier(0.2, 0, 0, 1). Reveals use 600ms with a 70ms stagger.

Token	Value
`--ease-ui`	cubic-bezier(0.2, 0, 0, 1)
`--dur-ui`	200ms
Pixel dissolve	600–900ms, `steps(8)`
Hero cloud	~11fps, drifts and swells around the cursor
Keycap	120ms down, 200ms up