Internal · Design System
v0 · Phase 1.1
← back to landing
01 · Color

Warm-cream + ink scale

B/W/G only. No chromatic accents in illustration; product UI mockups may break the rule with real Mesh brand colors.

cream

#F5F4F2

cream-elev

#FAFAF8

cream-deep

#ECEAE5

ink-faint

#B8B6B0

ink-muted

#6B6B6B

ink-soft

#2C2C2C

ink

#0A0A0A
02 · Radii

Never sharp

xs

var(--radius-xs)

sm

var(--radius-sm)

md

var(--radius-md)

lg

var(--radius-lg)

xl

var(--radius-xl)

pill

var(--radius-pill)
03 · Shadow

Neutral, no blue tint

sm

--shadow-sm

md

--shadow-md

lg

--shadow-lg
04 · Type · Heading

Display-XL down to sm

Aptos Display Bold for display-xl/lg (where the typeface's wider aperture pays off). Aptos body 600 for display-md down — Aptos Display has only 400/700 and looks rough at mid sizes.

size="display-xl"
The quick brown fox jumps over the lazy dog
size="display-lg"
The quick brown fox jumps over the lazy dog
size="display-md"
The quick brown fox jumps over the lazy dog
size="lg"
The quick brown fox jumps over the lazy dog
size="md"
The quick brown fox jumps over the lazy dog
size="sm"
The quick brown fox jumps over the lazy dog
05 · Type · Body

Three sizes, four tones

size="lede"

ink · The platform abstracts every credential, every reader, every system into a single signal.

soft · The platform abstracts every credential, every reader, every system into a single signal.

muted · The platform abstracts every credential, every reader, every system into a single signal.

faint · The platform abstracts every credential, every reader, every system into a single signal.

size="default"

ink · The platform abstracts every credential, every reader, every system into a single signal.

soft · The platform abstracts every credential, every reader, every system into a single signal.

muted · The platform abstracts every credential, every reader, every system into a single signal.

faint · The platform abstracts every credential, every reader, every system into a single signal.

size="small"

ink · The platform abstracts every credential, every reader, every system into a single signal.

soft · The platform abstracts every credential, every reader, every system into a single signal.

muted · The platform abstracts every credential, every reader, every system into a single signal.

faint · The platform abstracts every credential, every reader, every system into a single signal.

06 · Button

Two variants, three sizes

variant="primary"
variant="ghost"
As anchor
07 · Surface · Tile

Hairline cards, three densities

Phase 3 will extend Tile with a hover-stroke draw-on signature pattern. For now: clean surfaces with proper hairline borders and a subtle hover lift.

Compact

Use for dense lists, sidebars, and tag clouds. Padding 20px.

Spacious · prominent

For hero tiles. Stronger hairline. Padding 32px.

08 · Misc

MonoTag · Hairline · Eyebrow

MonoTag

Inline: landing.guardianmesh.dev and as a chip: --font-display and as a span tag: v0.1.0

Hairline

left

center

right

Eyebrow
With dot · muted
With dot · ink
No dot · muted
09 · Link

Three variants

For inline body links and quiet utility nav. Calls-to-action use Button instead.

variant="default"

With underlined decoration on hairline-strong, sharpens to ink on hover. Try one: go home · design system .

variant="quiet"

Muted at rest, ink + underline on hover. Used in footer/utility positions. Example: privacy · terms .

variant="subtle"

No underline at rest. For embedded links inside long paragraphs where you don't want decoration noise — like this internal reference blending into body copy.

10 · Icon

Sized SVG wrapper

Pass any inline SVG via the default slot. SVG should use currentColor so it inherits the surrounding text color. Decorative by default; pass label when the icon stands alone.

size sm · md · lg

sm

md

lg

size=32

inline with text (size="1em" default)

Inherits text size and color: opens externally. Or paired with a button:

decorative=false + label

Standalone meaningful icon — wrapper exposes role="img" + aria-label .

Phase 1.1 — ten primitives. Source: landing/src/components/ and tokens in landing/src/styles/global.css .