Get Off Screen

Meet Real People

Neo-brutalist, all-Space-Mono, ink-on-beige with five loud flat accents; thick black borders, hard zero-blur offset shadows, sharp corners.

✦ Main Character Energy Error 404: Anxiety Real Life > Reels ⚡ No WiFi Needed
01 / Colour

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.

Yellow#FFDE59Hero · highlight--genz-yellow
Red#FF5757Hot · live · CTA--genz-red
Green#4ADE80Go · success--genz-green
Purple#9333EACult · links · stats--genz-purple
Brown#632A26Coffee · heritage--genz-brown
Core neutrals
Beige#F2E8DCThe app canvas · warm paper--crayvo-beige
Black#000000Ink · every border · type--black
White#FFFFFFThe default card surface--white
Gray ramp — muted surfaces & the dark admin console
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
02 / Typography

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.

Aa
Space Mono
Regular 400 — the meta weight
Bold 700 — the display "black"
Italic — reserved for big headlines
ABCDEFGHIJKLM · 0123456789 · &@#✦
Type scale — 4px-based ramp, meta label to mega hero
Mega · 160px · --text-mega
Touch Grass
9xl · 128px · --text-9xl
Off Screen
8xl · 96px · --text-8xl
The Spots
6xl · 60px · --text-6xl
The Manifesto
5xl · 48px · --text-5xl
Vibe Check
4xl · 36px · --text-4xl
Happening Now
2xl · 24px · --text-2xl
Third Culture Coffee
xl · 20px · --text-xl
Chapter Is Live
base · 16px · --text-base
We meet people without swiping right.
sm · 14px · --text-sm
500+ Humans Connected
xs · 12px · --text-xs
Next Drop · This Sunday
2xs · 10px · --text-2xs
Off Screen Club · Live Right Now
Display treatment

Get Off Screen

Meet Real People
700 · italic · tracking −0.05em · leading 0.85 · skew −6°
Text treatments
WE ARE CRAYVO. Tired of doomscrolling.
Best Islamabad spot & the vibe right now.
Spend vibes to see where the vibes are — live.
03 / Effects

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 — --shadow-xs → --shadow-xl, plus accent "pop" shadows
xs·2
sm·4
md·8
lg·12
xl·16
pop·purple
pop·red
pop·green
pop·yellow
Borders & corners — 2px / 4px black, dashed dividers, sharp 0-radius
2px
thin
4px
thick
dashed
divider
pill
(badges only)
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.
/* effects tokens — copy/paste */
--shadow-xs: 2px 2px 0 0 #000;   --border-thin:  2px;
--shadow-sm: 4px 4px 0 0 #000;   --border-thick: 4px;
--shadow-md: 8px 8px 0 0 #000;   --radius:       0;
--shadow-lg: 12px 12px 0 0 #000;  --radius-full:  9999px;
--shadow-xl: 16px 16px 0 0 #000;  --dot-grid-size: 20px 20px;
04 / Components

Sticker-Culture
Primitives.

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.

Buttons — tone
Buttons — size
Badges
Upcoming Next Drop 4 Here ★ Chill Gulberg III Verified ✓ Live
Filter chips — toggle pills
Stickers
✦ Main Character Energy Error 404: Anxiety Real Life > Reels ⚡ No WiFi Needed No Networking
Cards
Open Now
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
⚡ Vibes Today
1,204
+18% vs yesterday
✓ Check-ins
312
Live right now
🔥 Hot Spots
27
Across 3 cities
★ Humans
500+
Verified members
Marquee — scrolling ticker band
05 / Voice

Talk Like The
Group 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
Casing: UPPERCASE for headlines, buttons, labels, badges, nav — sentence case for body & manifesto. Tone devices: parenthetical asides, playful rules, internet-native lines ("Real Life > Reels", "Main Character Energy Only"). Glyphs stay sparse and purposeful — ✦ as the marquee separator, 🔥/⚡ for live & energy. Nothing else.