{{ bannerTitle }}
{{ ch }}
{{ bannerEdit }}
{{ bannerDefaultNote }}
{{ heroKicker }}

{{ heroTitleA }}{{ heroTitleEm }}

{{ heroDesc }}

{{ c }}
01

{{ sec_colors_t }}

{{ sec_colors_d }}

Neutral foundation

layer 1

Dashboards are ~90% neutral. Four surface levels, two borders, three text weights — borders never pure black, text never pure white.

{{ s.label }}
{{ s.token }}
{{ s.note }}

Accent ramp

layer 2 · {{ accentName }}

A single hue across ten steps. 600 is the default brand fill, 700 the hover. Icons stay neutral unless they mark an active state.

{{ s.label }}
{{ s.value }}

Semantic

layer 3

Fixed meanings, enforced everywhere. Destructive is always red — even when the brand is indigo. Each ships a solid plus a soft tint for chips.

{{ s.label }}
{{ s.solid }}
{{ s.sample }}
02

{{ sec_type_t }}

{{ sec_type_d }}
Type scale Geist · 1.25 ratio
Display38 / 600 / -2.6%
Title page28 / 600
Section heading21 / 600
Card title16 / 600
Body — the workhorse size for dense interfaces.14 / 400
Small — secondary metadata.12.5 / 400
Overline label10.5 / mono
Text levels
Heading — text‑1
Body copy uses text‑2 for comfortable reading.
Captions and hints sit on text‑3.
Weights
Ag Ag Ag Ag Ag
300 · 400 · 500 · 600 · 700
Tabular figuresright-aligned
Revenue€ 1,284,902
Refunds−€ 9,640
MRR€ 87,015
03

{{ sec_space_t }}

{{ sec_space_d }}
Spacing · 4px base
{{ sp.name }} {{ sp.px }}px
Radiusscales with tweak
sm
base
lg
pill
Elevation
sm · rest
md · popover
lg · modal
In dark mode, raised surfaces get lighter, not just shadowed — light comes from above.
04

{{ sec_motion_t }}

{{ sec_motion_d }}
{{ e.name }}
{{ e.use }}
{{ e.css }}
Duration scaleHover a card to feel its speed · short for small UI, long for large surfaces
{{ d.ms }}ms
{{ d.name }}
{{ d.use }}
05

{{ sec_buttons_t }}

{{ sec_buttons_d }}
Variants
Sizes
With icons
States
Click Save — disabled while pending, then resolves.
06

{{ sec_inputs_t }}

{{ sec_inputs_d }}
Enter a complete email address.
Switch · spring
Two-factor auth
Require a code at sign-in
Checkbox & radio
Segmented control
07

{{ sec_avatars_t }}

{{ sec_avatars_d }}
Sizes
MK
MK
MK
MK
Fallbacks & presence
JD
AR
OnlineAwayOffline
Stacked group
MK
JD
AR
TS
+8
12 collaborators on this workspace
08

{{ sec_cards_t }}

{{ sec_cards_d }}
{{ k.label }}
{{ k.value }}
{{ k.arrow }} {{ k.delta }} vs last week
Scan volume
Last 14 days · all campaigns
7d 14d 30d
Jun 16Jun 23Jun 29
09

{{ sec_charts_t }}

{{ sec_charts_d }}
Categorical paletteL 0.68 · C 0.15 · varied H
{{ p.h }}°
Traffic by device
{{ donutBig }} {{ donutSub }}
{{ l.label }}{{ l.pct }}
Scans · this vs last period
ThisLast
{{ chartLabel }}
This{{ chartThisVal }}
Last{{ chartLastVal }}
Top sources
{{ b.label }}
{{ b.label2 }}
10

{{ sec_tables_t }}

{{ sec_tables_d }}
{{ tableCount }}
Short link Source Status
{{ r.slug }}
{{ r.source }} {{ r.scans }}
{{ r.statusLabel }}
{{ r.created }}
No links match “{{ tableSearch }}”.
Try a different search term.
11

{{ sec_timeline_t }}

{{ sec_timeline_d }}
Activity · today
{{ e.time }}
{{ e.title }}{{ e.tag }}
{{ e.desc }}
12

{{ sec_tabs_t }}

{{ sec_tabs_d }}
Total scans
48,209
Unique
31,884
Avg / day
3,443
/summer-sale1,284
/launch-q3982
/newsletter540
Public analytics
Anyone with the link can view stats
14

{{ sec_overlays_t }}

{{ sec_overlays_d }}
Popover · non-blocking

Lightweight context menus. Open it, click anywhere outside, and it just disappears — no decision forced.
Modal · blocking

For focused, multi-field input. The backdrop dims context and holds the user until they commit or cancel.

Create short link
Point a branded slug at any destination.
fox.fy/
15

{{ sec_toasts_t }}

{{ sec_toasts_d }}
Trigger a toast
Each dismisses after ~4s, or close it early. Up to four stack at once.
{{ t.title }}
{{ t.msg }}
16

{{ sec_invisible_t }}

{{ sec_invisible_d }}
Tooltip

Hover an icon — a label appears after a beat, then fades out.

{{ ic.label }}
No links yet

Create your first short link to start tracking scans, sources and locations in real time.

17

{{ sec_loading_t }}

{{ sec_loading_d }}
Skeleton loader
Spinners
Progress · fast then slow{{ progressPct }}
Rushes to ~65%, then decelerates — perceived speed.
18

{{ sec_onboarding_t }}

{{ sec_onboarding_d }}
Product tour
{{ t.label }}
{{ onbStepLabel }}
{{ onbTitle }}

{{ onbDesc }}

19

{{ sec_profile_t }}

{{ sec_profile_d }}
MK
Mara Köhler
Workspace admin · Dubai
Online
48
Links
12.4k
Scans
3
Teams
Juni 2026
{{ w }}
{{ calSelLabel }}
{{ a.time }} {{ a.title }} {{ a.dur }}
20

{{ sec_week_t }}

{{ sec_week_d }}
22.–28. Juni 2026
Tag Woche Monat
{{ d.key }} {{ d.date }}
{{ h.label }}
{{ ev.timeLabel }}
{{ ev.title }}
{{ ev.catLabel }} {{ ev.timeLabel }}
{{ ev.title }}
{{ ev.dayTimeLabel }}
{{ ev.loc }}
{{ w.i }}
{{ ev.whoLabel }}

{{ ev.desc }}
Foundrydesign system · v1.0
{{ footerNote }}