Colophon / design language
A language of parcels.
One geometric idea — the parcel — used for identity, navigation, diagrams, section rhythm and the connection between a real property and its evidence.
01 — The mark
A boundary, a corner and a whole.
The Parcl mark is three parcels sharing edges: one filled, two drawn. Filled means recorded. Drawn means known but not yet committed. The copper full stop is the anchor.
02 — Colour
Midnight, ivory, mineral.
Ink
#080D0B
Primary dark surface, hero plates, footer
Paper
#F6F3EC
Primary light surface
Stone
#E4DFD2
Secondary light surface
Copper
#9A5B33
Accent, active state, commitment
Sage
#7D9D8B
Quiet accent, positive status
Ivory text
#EDEAE2
Text on ink
No gradients beyond a single protective scrim. No neon. Copper is reserved for the moment something is committed, active or verified — never for decoration.
Typography
Oversized, tightly set.
Display · HK Grotesk ExtraBold
Real property.
Heading 2 · with editorial serif
Proof for generations.
Body · HK Grotesk Regular
Real estate is measured in decades and generations. Parcl connects properties, people, transactions and trusted records — building infrastructure on a Bitcoin-first foundation.
Annotation · monospace
PLATE 01 — PROPERTY · AGREEMENT · EVIDENCE
Components
Square corners. Sharp intent.
Buttons
One primary action per view. Uppercase, 11px, tracking 0.17em. Arrow translates 4px on hover.
Status & data
Status is never implied by color alone: every chip carries a label. Copper marks commitment; sage marks a healthy state.
CARD 01
Hairline surfaces
Cards sit in a 1px grid so borders are shared, never doubled. Corner ticks appear on hover and focus-within, not on load.
CARD 02
Measured motion
Reveals translate 20px over 900ms with a single easing curve. Everything is disabled under prefers-reduced-motion.
CARD 03
Honest diagrams
Every plate is labeled conceptual where it describes intended behavior rather than a shipped interface.
The plates
Drawn from the same idea.
Accessibility
Semantic landmarks, skip link, visible focus, keyboard-operable tabs and accordions, 4.5:1 minimum body contrast in both modes, and no information conveyed by color alone.
Performance
One stylesheet, one small script, no framework, no tracking, no web fonts beyond two families. Artwork is inline SVG generated at build time — no image payload at all.
06 — Implementation
A static site you can read.
Six pages, one CSS file, one JS file, no build step required to serve it. Every diagram is generated deterministically from a seed, so plates are reproducible and versionable.