Get Off Screen
Meet Real PeopleNeo-brutalist, all-Space-Mono, ink-on-beige with five loud flat accents; thick black borders, hard zero-blur offset shadows, sharp corners.
Ink on Paper,Five Loud Flats
Beige canvas, black ink and borders, white cards — then five flat accents that do the shouting. Accents are always flat fills, never gradients. Click any colour to copy its hex.
Core neutrals
Gray ramp — muted surfaces & the dark admin console
Semantic aliases — reach for these before a raw colour
One Family.Loud Treatment.
The entire system runs on Space Mono — two weights (400 / 700). 700 is the display “black”. Display type is UPPERCASE, italic, tight-tracked (−0.05em), leading 0.85, often skewed a few degrees.
Type scale — 4px-based ramp, meta label to mega hero · click a row to copy its token
Get Off Screen
Meet Real PeopleWeights, tracking, leading
Hard Shadows,Thick Borders.
The signature move: hard offset drop shadows with ZERO blur — Npx Npx 0 0 <color>. The shadow sticks the element to the paper; on hover it lifts, on press it slams flush.
Shadow scale — xs → xl, plus accent “pop” shadows · click to copy
Borders & corners — 2px / 4px black, dashed dividers, sharp 0-radius
thin
thick
divider
(badges only)
Spacing — 4px base grid
- 4 · space-1
- 8 · space-2
- 12 · space-3
- 16 · space-4 · pad-page · gap-stack
- 20 · space-5
- 24 · space-6 · pad-card · gap-grid
- 32 · space-8 · pad-page-lg
- 40 · space-10
- 48 · space-12
- 64 · space-16
- 80 · space-20
- 96 · space-24
Motion — quick, physical, overshoot on entrance
- HoverCards/chips lift −4px, shadow grows. Buttons slam 2px toward the shadow.
- PressTranslate flush (+4px), shadow gone — a real physical push.
- EntranceOvershoot with backOut · cubic-bezier(0.34, 1.56, 0.64, 1).
- MarqueeScrolls linearly forever (~40s). Stickers bob / wiggle on a loop.
- Reduced motionEvery loop stops, every entrance is skipped, scrolling goes native.
Motion tokens
/* effects tokens — copy/paste */
--shadow-xs: 2px 2px 0 0 #000;
--shadow-sm: 4px 4px 0 0 #000;
--shadow-md: 8px 8px 0 0 #000;
--shadow-lg: 12px 12px 0 0 #000;
--shadow-xl: 16px 16px 0 0 #000;
--border-thin: 2px;
--border-thick: 4px;
--radius: 0;
--radius-full: 9999px;
--dot-grid-size: 20px 20px;
/* the interaction, in three lines */
.btn { transition: transform 200ms, box-shadow 200ms; box-shadow: var(--shadow-sm); }
.btn:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-xs); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }Sticker-CulturePrimitives.
Every surface is bordered paper with the press-shadow interaction. Hover and press the buttons and chips below — they behave exactly as they do in the app. “Show code” gives you the usage.
Buttons — tone
Badges
Filter chips — toggle pills
Stickers
Cards
Third Culture Coffee
White paper surface, md shadow, tilted a degree for a sticker feel.
The Manifesto
We put our phones in a basket. No algorithms. Just vibes. Brown fill, yellow ink.
Add A Spot
Dashed border, no shadow — the empty / info state box.
Stat cards — accent-shadow metric blocks
Marquee — scrolling ticker band
Talk Like TheGroup Chat.
Irreverent, warm, self-aware Gen-Z. Communal “we” (the club) + direct “you” (the member). Uppercase for impact, sentence case for the manifesto. Never a SaaS onboarding.
✓ Do — say
“Touch grass, not screens.”
“Phones in the basket (scary, we know).”
“No algorithms. Just vibes.”
✕ Don’t — say
“Leverage our platform to network.”
“Please enable notifications.”
“Users can optimize engagement.”
Never — the hard NOs
- Gradients
- Rounded cards
- Corporate tone
- Blurred shadows
- Decorative emoji in UI chrome
- Invented numbers
Product nouns
- spots
- venues
- vibes
- points
- vibe check
- a check-in
- crews
- groups
- the vibe
- the manifesto
- humans
- verified members
Take TheWhole Kit.
The mark, the tokens and the share card as files — generated from the same source as this page, so what you download is what you just read.
The mark — two constructions, one order of letters
Primary. The letterbox wordmark: six white tiles, 2px border, xs shadow, red BETA. Nav, footer, in-app, print. Hover lifts the tiles and straightens the pill — keep that.
Display. The crayvo.space hero and share-card variant: accent-filled, individually rotated, skewed −5°. Hero moments only — never at small sizes.
Files
Use the tokens
<!-- one line, any surface -->
<link rel="stylesheet" href="https://branding.crayvo.space/brand/tokens.css">
/* or from CSS */
@import url("https://branding.crayvo.space/brand/tokens.css");
.card {
background: var(--surface);
border: var(--stroke-thick);
box-shadow: var(--shadow-md);
font: var(--weight-bold) var(--text-base) / var(--leading-normal) var(--font-mono);
}