stiction.
OFFICIAL BRAND SYSTEM · v1.2

Cross the threshold from stuck to in motion.

Stiction is named after static friction—the peak resistance keeping a resting object still. Our visual identity pairs calm, warm mineral surfaces with a golden Burnished Amber release at the exact moment of action.

Test Breakaway UI → Click any color swatch below to copy HEX
FIG 01. THE STICK-SLIP THRESHOLD (F_s → F_k)
μs Breakaway Spark μk Effortless Glide
STATIC RAMP BREAKAWAY KINETIC FLOW
01 / Official Marks & Lockups

Primary & Alternative Logo System

A cohesive two-mark system: our open-silhouette Primary Wedge Ramp (`S1`) for main brand lockups & app icons, paired with our contained Stick-Slip Step Badge (`W3`) for compact stamps, favicons, and technical touchpoints.

Official Alternative / Badge Mark (W3)

Stick-Slip Step Tile

A self-contained 96×96 squircle carved in two by the oscilloscope stick-slip wave: 45° static ramp, vertical 90° breakaway drop, and 0° flat kinetic glide.

Primary Light Lockup
Primary Lockup · Light Surface

Warm Alabaster (`#FAF8F5`) + Basalt Ink (`#1C1917`) + Burnished Amber (`#D97724`).

Primary Dark Lockup
Primary Lockup · Dark Surface

Deep Basalt (`#121110`) + Warm Parchment (`#F5F2ED`) + Luminous Amber (`#F29A4B`).

App Icons, Badges & 16px Favicon Scale
Both S1 and W3 retain crisp negative space down to a 16×16px browser tab.
Dark App Icon 60px Dark Icon
Light App Icon 60px Light Icon
48px Alt Tile 48px W3 Badge
24px S1 24px S1
16px W3 Favicon 16px W3 Tab
02 / Color Architecture

Warm Mineral Neutrals & Burnished Amber

75% calm limestone/basalt surfaces, 18% high-contrast ink, and 7% intentional kinetic accents. Click any card to copy its HEX value.

Kinetic Accents (Burnished Amber · Flow Jade · Focus Cobalt) WCAG AA/AAA Tuned
Light Mode Neutrals — "Warm Paper & Espresso Ink"
Dark Mode Neutrals — "Obsidian Basalt & Warm Parchment"
03 / Typography

Humanist Clarity Meets Precision

Plus Jakarta Sans gives headlines approachable warmth; Inter keeps dense task views razor-sharp; Newsreader adds editorial soul.

Display · Plus Jakarta Sans
700 · -0.035em
Momentum begins at the smallest step.
Editorial · Newsreader Italic
400 · Daily Prompts
“What is the 2-minute version of what you’re avoiding today?”
UI & Body · Inter
400 / 500 · 15px / 1.55
Static friction always exceeds kinetic friction. Once a task is in motion—even writing a single rough sentence—your brain requires dramatically less energy to keep going.
Metrics · JetBrains Mono
500 · Tabular Nums
⌘K Quick Spark  ·  04:59 Threshold Timer  ·  12d Flow Streak
04 / Live Product Feel

Interactive "Breakaway" UI Preview

Click tasks below to feel how Stiction transitions from grounded static stone into Kinetic Flow Jade (`--ease-breakaway`).

Today · Threshold Queue
⌘ K
Good afternoon — pick one spark to get moving.

Today’s Breakaway Steps

✓ Lock S1 (Primary Wedge Ramp) & W3 (Stick-Slip Badge) in Burnished Amber
In Flow
Draft 3 bullet points for product onboarding screen
2m Spark
Import tokens.css into core application repo
5m Focus
Ship landing page teaser with Stiction lockup
Queued
Copied!