Design System
Gallery

Core primitives, restyled to the Loke brand — square corners, 2px control / 3px container borders, hard-offset shadows, Archivo Expanded display type, ink-on-bright fills. Toggle the theme (top-right) to check both. Hover / focus / press the live controls to see interaction states.

Type

Archivo Expanded (display) · Roboto (UI/body) · Roboto Mono (all numerics, tabular).

Send It

Level Up

Roboto body copy — the workhorse for UI and reading text. Clean, neutral, legible at every size across the app.

Secondary text — captions and supporting copy.

1,234,567 · 00:42.19 · +128 XP · #06

Buttons

Square, uppercase, Roboto Black (type-button role). Emphasis tiers: primary (solid red) → secondary (filled neutral) → ghost (text) → link. Solid buttons are borderless; the hard shadow is on the hero only.

primary / secondary
hero (shadow)
more variants
sizes
with icon
disabled

Badges / Chips

Full-pill (tags are one of the only pill shapes) · 2px border.

Default
Secondary
Outline
Success
Warning
Info
boltBoost

Inputs

Filled recessed field, 2px strong border, blue focus ring, square.

text input
disabled
select
textarea

Selection controls

checkbox
switch

Tabs

Segmented (boxed, 2px stroke) or underline (the map / Global-National-Local pattern).

segmented
Latest clips from people you follow.
underline
Every spot, worldwide.

Avatar & Card

avatar
TNKVL6
flat — no shadow (default; most cards)
Surface
Grey surface fill.
The default flat card.
Accent fill
Any token colour.
Brand / level colours directly.
elevated — hard shadow (big / clickable cards); border optional
Shadow, no border
Cards can drop the stroke.
Large tappable feed / challenge tile.
Shadow + border
3px container stroke.
Same card, with the heavier container stroke.

Progress & Skeleton

64%

Overlays & feedback

Dialog, bottom Sheet, Dropdown, Tooltip, Toast — all with hard shadows and ink borders.

Colour

4 locked brand accents · 12-hue spectrum ramps (wash→deep) · 12-step level scale · neutrals · status. All AA-verified. Every swatch resolves from a token var — nothing hardcoded.

Brand accents (locked)

red
green
blue
gold

12 ramps × 5 steps

red
orange
gold
lime
green
teal
cyan
sky
blue
violet
purple
pink

Level scale (1–12)

1
2
3
4
5
6
7
8
9
10
11
12

Neutral (cool)

Status

success
warning
danger
info

Semantic surfaces

bg
surface
surface-raised
surface-sunken

Phase 2 — Loke components

The brand-defining pieces the screens compose from — level system, feed & spot cards, bottom nav, leaderboard. Built on the Phase 1 primitives.

Level system

12-step ladder — colour from the level tokens. LevelBadge (numeral) · RankChip (named pill) · XPBar.

level badge — sizes
666
level badge — the 12 levels
123456789101112
rank chip
Lime LevelBlue LevelRed LevelGold Level
xp bar
LVL 1038,720 / 50,000 XP

Stats & avatars

Mono numerics. StatTile · AvatarStack (session cluster).

stat tiles
38,720
pts
$4.32
$LOKE
128
clips
avatar stack
TN
KV
JR
AM
DC
+2
11 skaters

Feed & spot cards

HeroCard (Archivo + hard shadow) · SpotCard · EngagementBar · CommentRow · MediaControl. (ClipCard retired — superseded by ClipReel, zero real-screen callers.)

Challenge · ends Sun

Judge's seats at the Glory Challenge

location_on
/BLACK HUBBA0.4 mi
TN
KV
JR
AM
+1
5 skaters
checkroom
Loke Red Level Rugby Shirt
Presented by Loke
30,500 pts
settings
Rock Star Metal Bearings
Rock Star
4,395 pts
Engagement bar — capability-driven; see the Engagement layer section
🤘54🔥48💀25
6D
Comment rows
JT

Justin Tallant Had a blast at this one

KM

Krista Molke @J.T. so rad.

Media controls — overlay
play_arrow

Leaderboard

1THtony_h1298,420
2KVkv_skates1087,310
3TNyou638,720
4DCdime_mtl531,200

Bottom nav

Dark bar, Sharp-Fill icons, centre red “+” FAB, red active tab. Tap to switch.

active: Map

Engagement layer

ONE EngagementBar, driven by the §5.2 capability matrix — the controls come from the objectType, not the caller. Counts are seed + your local events, shared across every surface.

Spot
like · comment · save · share · view
😱41💀38🤘33
visibility19,202
Shop
like · comment · save · share · view
🤘49💯39💀22
visibility19,202
Product
like · comment · save · share · view
🔥25💯19💀18
visibility19,202
Challenge
like · comment · save · share · view
🤘46💀37💯36
visibility19,202
Session
like · comment · save · share
🤘59💀48💯29
Event
like · comment · save · share · view
🔥15😱15💀12
visibility19,202
News
like · comment · share · view
no save — it's someone else's article
🔥40🤘26😱12
visibility19,202
Clip / video
like · comment · save · share · view · rewatch
the only type with view + rewatch · shares this clip with the player below
😱59💯29💀24
visibility14,208
Skater
share · follow
follow + share only — never like or save
CommentsSection — page-hosted (detail pages), preview + “see all”
😱35💀32🤘27
6D

Comments

5
KM

Krista Molke so rad, that pop 🔥

AU

Andrei Ucop old local looking good

JT

Justin Tallant been trying this one for weeks

TN
CommentsSheet — over the immersive player; playback continues behind
play_arrow
visibility14.2K
Event log — the uniform shape ranking + points consume (0)

Tap anything above — every surface writes the same event shape.

Clip reel

The edits-style clip experience: a muted, viewport-gated preview that cycles an object's real clips and taps in to watch. Lead with this on any clip surface instead of a static cover. Two variants share one engine — sizing/borders are the caller's via className; the hero takes an overlay slot.

hero — full-bleed, scrim + overlay + play (e.g. a challenge / edit / session hero)
play_circleTRICK · 15 CLIPSBoardslides WorldwideRails & ledges, every cityplay_arrow
thumb — compact tile (list rows, card leads). showPlay opts the corner glyph in.
play_circle
play_circleplay_arrow
play_circleplay_arrow
empty — no clips yet → the fallback glyph, still tappable
videocam