Design System

Complete CSS variables, colors, typography, components and usage for TKNP / Spoutnik.

Colors

CSS Variables (app/globals.css)

--accent

#2563eb (default)

#3B82F6 (stellar-white theme)

CTAs, links, focus rings, trust line icon

tknp-grey

#E5E7EB

Light backgrounds, dividers, disabled states

tknp-black

#050505

tknp-signal / --signal

#FACC15 (Signal Yellow)

Logo hover, Magic Merch wand, hero blur orbs

tknp-rose

#f43f5e

Trust icon, accents, Sell block icon

tknp-violet / --violet

#7c3aed

Secondary accent (e.g. Venue)

tknp-green

#22c55e

Success states, validation, positive feedback

tknp-orange / --orange

#f97316

Secondary accent (e.g. Event)

--signal Usage (Logo & Magic Merch)

TKNP Logo (components/TknpLogo.tsx)

Default: fill-white. On parent hover: T=blue, K=yellow, N=rose, P=green. Parent must have group class.

Hover the dark box → logo turns yellow

Each letter: fillT, fillK, fillN, fillP with group-hover colors

Magic Merch button wand (components/MagicMerchNavButton.tsx)

Default: text-black. On hover/active or when panel open: text-[var(--signal)].

Hover → wand turns yellow

text-[var(--signal)] for consistency with design tokens.

Hero Block Icons (Create / Order / Sell)

--signal

Create block, icons

blue-500

Order block

tknp-rose

Sell block

How to adjust secondary colors

Edit app/globals.css:

/* In :root */
--signal: #FACC15;
--violet: #7c3aed;
--orange: #f97316;

/* In @theme — use bg-tknp-*, text-tknp-* */
--color-tknp-signal: #FACC15;
--color-tknp-rose: #f43f5e;
--color-tknp-green: #22c55e;
--color-tknp-violet: #7c3aed;
--color-tknp-orange: #f97316;

--signal, --violet, --orange in :root. tknp-signal, tknp-rose, tknp-green, tknp-violet, tknp-orange in @theme.

Neutral Scale

100

200

300

400

500

600

700

800

900

950

Tailwind neutral-50 to neutral-950. Use bg-neutral-{n} or text-neutral-{n}.

Typography

Font stack

System font stack (Tailwind default). Dancing Script for accents.

H1 — 4xl/5xl bold

text-4xl md:text-5xl font-bold leading-tight tracking-tight

Hero headline

H2 — 2xl/3xl semibold

text-2xl md:text-3xl font-semibold

Body — lg/xl, neutral-600

text-lg md:text-xl text-neutral-600

Hero sub, section intros

Small — sm

text-sm text-neutral-600

XS — xs

text-xs text-neutral-500

Uppercase label

text-xs font-semibold uppercase tracking-wide

Spacing

Hero padding (CSS variables)

--hero-padding-y: 6rem (96px) — mobile

--hero-padding-y-md: 9rem (144px) — md and up

Section padding

py-16 md:py-20 (64px / 80px)

Container

max-w-7xl mx-auto px-6

Breakpoints (Tailwind)

sm: 640px · md: 768px · lg: 1024px · xl: 1280px · 2xl: 1536px

Buttons & CTAs

Primary CTA

Launch your store

rounded-xl border border-[var(--accent)] bg-[var(--accent)] px-6 py-3 text-base font-semibold text-white transition-colors hover:bg-[var(--accent)]/90

Secondary CTA

Explore SuperProducts™

rounded-lg border border-neutral-300 bg-transparent px-5 py-2.5

Text link

Magic Merch →

text-sm font-medium text-[var(--accent)] underline-offset-2 hover:underline

Interactive test buttons

Theme switcher

Current: default

Button states (interactive)

Color pill buttons (suggestions)

Trust line variants

Accent (default)

Rose

Green

Hero block icons (Create / Order / Sell)

Create

Order

Sell

Pills

Premium productsNo minimum order3–5 days deliveryAccent pill

rounded-full bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-600

Trust Line

Built exclusively for verified organizations

Check icon + text-sm text-neutral-600. Icon: text-tknp-green strokeWidth=2.5

Background Patterns

.pixel-grid

20px grid, rgba(0,0,0,0.02). Hero, Magic Merch bar.

.pixel-grid-fade

Same grid + fade to white at bottom.

.order-price-grid

16px grid, rgba(0,0,0,0.04). Lighter on mobile.

.printer-filter-grid

16px grid, rgba(0,0,0,0.03).

Animations

fadeInDown

opacity 0→1, translateY(-10px)→0

@keyframes fadeInDown. Hero elements.

menuColumnIn

opacity 0→1, translateY(8px)→0. Dropdown menus.

Icons (Lucide)

strokeWidth: 1.75 (default), 2.5 (emphasis).

Sizes: h-4 w-4 (16px), h-5 w-5 (20px), h-8 w-8 (32px).

Always add aria-hidden for decorative icons.

Global Cursor Rules

All links, buttons and interactive elements use cursor: pointer. Disabled elements use cursor: not-allowed. Defined in globals.css.

Key Files

app/globals.css — CSS variables, keyframes, patterns
components/TknpLogo.tsx — Logo, T/K/N/P colors on hover
components/MagicMerchNavButton.tsx — Magic Merch button
components/Footer.tsx — Footer layout