Components & Tokens Gallery

Design tokens, atomic UI primitives, bento geometry, and animated widgets. Built with strict 2 Google Fonts: Fugaz One (Headlines) and Work Sans (Body & UI), paired with Flaticon UIcons.

Color Tokens

Semantic tokens and accents calibrated for high readability and subtle visual contrast.

primary

#ff3366

ink

#18181a

link (blue)

#1586cf

secondary

#7b57d6

accent

#169d4d

bento-yellow

#f59e0b

bento-cyan

#0ea5e9

bento-olive

#84cc16

bento-orange

#ff6b35

surface

#f8fafc

css/tokens.css

Typography System (2 Google Fonts)

Strict 2-font system: Fugaz One for large headers and display titles, and Work Sans for sub-headers, body paragraphs, and UI labels.

display
Fugaz One / 56px

Reminded, listed & noted.

heading-1
Fugaz One / 40px

Spatial notes across your workspace.

heading-2
Fugaz One / 32px

High-speed metadata engine

heading-3 (subhead)
Work Sans / 24px SemiBold

Zero-latency synchronized state between devices

heading-4 (card title)
Work Sans / 20px SemiBold

Hardware-accelerated reactive components

body-lg
Work Sans / 18px Regular

Notes, lists and reminders unified across all your devices. Calibrated for maximum scannability and reading comfort.

body-md
Work Sans / 16px Regular

Clean line measures constrained between 50 to 65 characters prevent visual fatigue and ensure rapid scanning cadence.

button / nav-link
Work Sans / 16px SemiBold

NAV LINK / TAB LABEL

Google Fonts Setup

Radii & Spacing Scales

Tactile border-radius geometry and 8px-based spacing progression.

xs / sm (4px)

md (8px)

lg (16px)

xl (24px)

pill (36px)

full (9999px)

Border Radii Scale

Buttons & Actions

Primary pill CTAs, secondary outline buttons, and tactile actions paired with Flaticon UIcons.

Buttons & Action Controls

Badges & Status Tags

Strict No-Slop standard: plain text tracking, subtle backgrounds, and semantic indicators without faux code (// 01) or decorative bullets (●/•).

Architecture Overview Live Production Ready Verified Status Stemma System

No-Slop Clean Badges

Bento Primitives (from sc.png)

Standalone geometric components extracted from the hero collage, powered by Flaticon vector glyphs.

Pink U-Arch

Purple Circle

Green Arch

Yellow Circle

Blue Capsule

Cyan Bell Arch

Lightbulb Arch

Orange Circle

Geometric Bento Primitives

Animated & Interactive Components

Interactive UI widgets incorporating Emil Kowalski motion principles (springs, tactile feedback, GPU transforms).

FLOATING PROFILE CARD