T
The Tycoda design system

One signal color. Zero clutter.

A system built to feel as sharp as the product — dark by default, a single lime that means money, verified, go, and motion that earns its place. This is the whole kit, live.

Signal lime · #c8f24eDark / premium fintech≥16px legibility floor

01 The mark

A lime tile and a single letter.

The wordmark lockup pairs the .mark tile — a lime square rendering “T” in JetBrains Mono 800 — with the Tycoda wordmark. It reads on dark and on lime.

On --surfaceT
On --accT
T64 · lockup
T44 · card
T30 · nav
T22 · inline
Favicon set /public · referenced ?v=2
Ticon.svg
T512×512
Tapple-touch · 180
T192×192
T48
T32
T16

02 Color

One signal. Everything else gets out of the way.

Lime is the only accent — it means money, verified, go. The rest is a disciplined dark stack and a four-stop ink ramp. Click any swatch to copy its hex.

Signal lime the one accent
Surfaces the dark stack
Ink text ramp
Lines & support hairlines + danger
The single-signal philosophy

Most products drown in color. Tycoda uses exactly one — lime — so when it appears, it means something: this is the action, this is verified, this is your money. Everything else is the dark stack and the ink ramp, quietly doing their job.


03 Typography

Two faces. A clear hierarchy.

Schibsted Grotesk carries everything you read; JetBrains Mono carries everything you scan — labels, numbers, status.

--sans
Schibsted Grotesk
Display, headings, body · weights 400–900
Aa Bb Cc
RegularMediumSemiboldBoldExtraBlack
--mono
JetBrains Mono
Eyebrows, labels, figures, pills · 400–700
Aa 0123
$750,000 · 50% · #c8f24e · VERIFIED
Verified at the door
.h-display · clamp(30–79px) · 800 · -.032em
One signal color
.h-section · clamp(32–53px) · 700 · -.026em
Built to feel sharp
.h-sub · clamp(23–31px) · 600 · -.018em
A system as precise as the product it serves.
.lede · clamp(20–24px) · lh 1.6
Body text sits at sixteen pixels and up, line-height 1.5 — comfortable to read on any screen.
body · 16px · lh 1.5
Kicker label
.kicker · 15.5px mono · .16em
Eyebrow label
.eyebrow · 15px mono · .18em
≥16pxThe legibility floor is a hard rule. Reading text never drops below 16px — our audience is working agents and lenders, often on a phone at a property. Mono micro-labels sit at 13–15px by convention.

04 Components

The real parts. Hover them.

Every piece below is the genuine treatment from the system — buttons, the lit-on-valid pattern, pills with the live dot, cards that lift, inputs that glow. Poke at them.

Primary button
--acc · --on-acc · 999px · hover #d4ff5e
Ghost button
--surface · 1px --line-2
Disabled
opacity .4 · not-allowed
Lit-on-valid button · the canonical pattern
I’m a real estate agent hosting open houses
muted → solid lime when valid · check the box
Input · focus glow
focus → --acc-line + 3px --acc-dim ring
Pills & chips
AvailableSingle-family
.pill / .pill-acc · live dot pulses
Callout
Verified

SMS-confirmed at the door — real, reachable.

--acc-line + --acc-dim wash
Eyebrow / label
How it works
mono · uppercase · --acc dot
Cards · hover-lift + selectable
click to select · hover to lift

The fun part · motion

The animations that make it feel alive.

These are the real motions from across the product — captured here, live and replayable. Hit replay on any of them.

Reduced motion is on — demos show their calm end state.
Live-dot pulse
ohsping · availability, “live”
Button hover-lift + press
#d4ff5e brighten · translateY
Card hover-lift
78704 · Austin
1 slot · available
lift + accent-border bloom
Input focus-glow
--acc-dim ring on focus
Lit-on-valid “lights up”
muted → solid lime
Reveal-on-scroll
Rises in
as sections enter
translateY + fade, eased
⭐ The visitor experience · check-in → verify → confirmed
1Scan the QR & enter your number
2We text a 6-digit code
3Enter it — verified visitor, confirmed
The thing that makes Tycoda special — recreated faithfully from the live check-in flow.

05 Radii & spacing

Five corners. One rhythm.

--r-sm8px · inputs
--r14px · callouts
--r-lg20px · cards
--r-xl28px · hero / modals
999pxbuttons · pills
1140px
Max content width
--maxw
24px
Page padding (→ 18px ≤560px)
--pad
On shadows

Shadows aren’t tokenized — they’re applied inline where used (card lift 0 30px 60px -38px rgba(0,0,0,.7), hero 0 40px 80px -40px rgba(0,0,0,.7)). We document that honestly: ad-hoc, not a scale.


06 Principles

How we keep it sharp.

01

One signal color

Lime, and only lime. When it shows up, it means action, verified, or money — never decoration.

02

Dark by default

A calm dark stack keeps the signal loud and the long sessions easy on the eyes.

03

≥16px, always

Reading text never goes tiny. Built for working agents and lenders, often on a phone.

04

Mono for labels & numbers

JetBrains Mono signals “this is data” — figures, statuses, and labels you scan, not read.

05

Motion with intent

Every animation earns its place — it confirms, guides, or rewards. Reduced-motion always respected.

06

Honest & compliance-forward

“Verified visitors,” never “leads.” The system is built to tell the truth, clearly.