Design system
field guide

A tactile reference for tokens, type, components, and motion - shaped to match the home page's soft editorial system.

Explore tokens Open playground

Visual grammar

Tokens to motion

qwarki fitness

semantic colors

mesh palettes

type voices

Section navigation

Jump between the pieces that make the product surface feel coherent.

Color, atmosphere, and surface rules

The palette stays soft and editorial, with petrol accents and warm gradients for important visual moments.

Core palette

Semantic tokens in practical swatches.

Background

Main page canvas

Foreground

Primary text

Card

Elevated surface

Primary

Primary action

Muted

Quiet structure

Accent

Petrol highlight

Destructive

Risk and errors

Border

Fine dividers

Ring

Focus language

Mesh palette

Every gradient surface is rendered by the WebGL MeshGradient component — organic, domain-warped, and never purely decorative.

Sunlit

mesh · 4 stops

Tide

mesh · 4 stops

Lagoon

mesh · 4 stops

Aurora

mesh · 4 stops

Editorial hierarchy, product clarity

Serif headings give the system character; sans and mono keep the interface practical.

Sans / UI

Figtree Variable

Aa Bb

Quiet interface copy with confident spacing.

Body copy, labels, cards, and controls.

Serif / Display

Source Serif 4

Aa Bb

Editorial hierarchy with a little warmth.

H1, H2, and signature accent phrases.

Mono / System

Source Code Pro

Aa Bb

AUTH_FLOW_READY: true

Tokens, identifiers, routes, and specs.

Scale specimens

The same rules used on the landing page.

text-6xl to text-7xl

Design system field guide

text-4xl to text-5xl

Section with atmosphere

text-xl to text-2xl

Component group

Body

text-base

Reference copy stays readable, restrained, and direct.

Action design with live controls

Buttons keep rounded product warmth while still reading as compact, reliable tools.

Live preview

Controls

Tune content, style, size, and behavior flags.

Label

Variant

Size

States

Forms that sit inside product cards

Fields remain calm, rounded, and clearly labeled across auth and settings surfaces.

Account fields

Common identity inputs.

Email Address

Username

Invalid State

Please enter a valid username.

Document upload

Drop your document here

or Choose a file

PDF, Word, or plain text up to 10 MB

Composition panel

Search, text areas, and helper copy.

Biography

0 characters

Contained surfaces with visual memory

Cards carry the app: simple containers, accent panels, and gradient-led feature moments.

Standard Card

Basic container for dense product content.

Use this when content is functional and should not compete with the page hierarchy.

Accent Card

Highlighted but still quiet.

Use accent surfaces for selected states, onboarding hints, or local emphasis.

Gradient Card

Use mesh gradients when the content should become a page landmark.

Heads up

Alerts should be concise, contextual, and close to the action they affect.

Error Occurred

Your session has expired. Please log in again to continue.

Brand, avatar, and theme controls

Small components still participate in the same rounded, polished visual system.

full logo

qwarki fitness

compact logo

qwarki

text logo

qwarki fitness

icon logo

Avatar system

Profile identity variants.

status

Theme control

ModeWatcher integration

The same reveal system, reused intentionally

The page uses hero reveal, subtitle reveal, CTA pop, scroll reveal, and staggered sections from the home route.

Icon rotate

.icon-hover-rotate

Icon scale

.icon-hover-scale

Float effect

.animate-float-subtle