Kwik Website Design System

Principles

The site inherits the brand — Kwik type, Ink, one yellow — and adds one rule the app doesn't have: the visual carries the message.

Headline + one line.

Max 8 words in the headline, one sentence under it. Then stop.

Every section moves.

A looping product moment or a scroll reveal. No static blocks of cards.

The product is the picture.

Real UI fragments, real numbers. No stock photos, no people in headsets.

Alternate light and Ink.

White → Ink → #FAFAFA → Ink. Rhythm replaces decoration.

One yellow per view.

The CTA or the highlight — never both. Everything else is Ink, white, grey.

Web type scale

Bigger and tighter than the app. Headlines in Title Case With Periods. Section labels are tracked-out overlines; step labels are monospace.

display

64 / 700 / 1.02 / −.035em

Track Actions.

Hero only. 3 lines max.

44 / 700 / 1.1 / −.025em

Whatever A Customer Does, Kwik Rewards It.

Section headline. Title Case, period.

24 / 600 / 1.25 / −.01em

Customers Buy. Customers Share. Customers Refer.

Card title, hero list

lead

18 / 400 / 1.5

Kwik tracks customer actions and gives rewards based on those actions.

The one line under a headline

card-title / body

16 / 600 · 14 / 400 / 1.5

Cashback — Direct payouts via Stripe, PayPal, or ACH.

Inside cards only. One line each.

overline

12 / 500 / .16em / caps

How it works · Real use case · Rewards

Above every h2

mono label

12 / 400 / .08em

STEP 01   // THE KWIK LOOP   01 · INPUT   ~24h avg

Steps, diagram labels, tiny data

Color & bands

Same palette as the app; no pastels on the site. Sections alternate between light and Ink bands. Cards on Ink are #1C1C21 with a #2E2E35 hairline.

Light band

#FFFFFF · cards #FFF + e1

Ink band

#0B0B0F · text #fff / #A1A1AA

Soft band

#FAFAFA · cards #FFF, no shadow

Tint (CTA band only)

#FFF8E1 → #FFFFFF fade

Accents on the site:#FFD836 yellow#22C55E live / up#EF4444 down— that's all. Data bars are Ink, #3F3F46, #71717A, #D4D4D8 with one yellow highlight.

Layout, nav & buttons

Content column 1120. Sections breathe at 120px. Web buttons are pills — the one place the site departs from the app's radius 8.

Kwik.

Programs The PlatformAbout UsResources

Brand LoginPartner with us

Primaryyellow pill · h52

See How It WorksCreate Free Account

Inknav CTA, on light

Partner with usBook a demo →

Outlinesecondary, both bands

View ProgramOn InkText link

Nav — h80 · wordmark 28 · links 14/500 gap 28 · Ink pill h44

Column — max 1120 · gutter 40 (24 mobile)

Section — pad 120 top/bottom (80 tablet, 64 mobile) · overline → h2 → lead gap 16 / 20 · visual gap 56

Cards — r16 on the site (r12 in app) · p28 · light e1 / Ink #141416

Motion

Two kinds only. Reveals bring a section in as you scroll; loops keep the product moment alive once it's there. Calm, not flashy — one easing, short durations, long pauses.

Reveal

Opacity 0→1, rise 16px. 600ms, cubic-bezier(.2,.8,.2,1). Stagger siblings 80ms. Fires once at 20% visible.

Loop

4–8s cycle. Action ≤ 25% of the loop, rest is hold. Never more than one loop moving inside a card. Pauses off-screen.

Influencer mode

Counters

Tick up over 1.4s ease-out on reveal, tabular numerals so width never jumps. Currency keeps its symbol and commas throughout.

Hover & rules

Cards lift 4px + e2 in 200ms. Buttons darken/deepen only. Never animate layout, never parallax, never autoplay video with sound. Respect prefers-reduced-motion: loops freeze on their resolved frame.

05b

Low-fi UI language

The site explains concepts, not screens. Abstract the software into a small vocabulary — text becomes bars, people become circles, money becomes one real number — and animate the idea. Built from the software system's geometry (r8 controls, r12 cards, hairlines) so it reads as Kwik without being a screenshot.

Primitives

Text → bar

Person → circle

Product → tile

Money → number+$12.50

Action → pillShare

Link / flow

→

Reward → yellow$

Card

Rules

One real word, max two. Everything else is a bar. The number and the action label are the only text inside a low-fi frame.

Ink · grey · one yellow. Yellow marks the reward or the thing that just happened. Green/red only for a delta.

Software geometry. r8 controls, r12 cards, 1px #E8E8EA hairlines, 40px controls, 56px rows — so it feels like our app from ten feet away.

No chrome unless it's the point. Drop sidebars, headers, nav. Show the fragment that carries the idea.

One motion = the concept. The animation is the explanation: a circle passes a link, the yellow appears, a bar grows.

Fidelity ladder. Concept sections use low-fi. "What you see" sections (dashboard, device) may go mid-fi with real labels. Full screenshots never.

Concept frames — the same four ideas, low-fi

kwik.to/… $ $

Referrals

Share a link. Friend buys. Both get paid.

Waves

Rewards ripple through every referral of a referral.

10×

Entries 8,970

Giveaways

Every dollar is entries. Multipliers stack.

Order 1$

Order 2$

All future orders$

Lifetime attribution

Order 1, order 2, forever — the referrer still earns.

Low-fi frames — #FAFAFA stage r16 p24 · 140px visual · Ink / grey / one yellow · one loop each · title 15/600 + one 12px line. Use these instead of screenshots in Explainer tiles (K), Feature grid (C) and Statement rows (M).

Section library

Reusable animated blocks, shown at page width in their band order. Each one is a headline, one line, and a visual that does the work. Scroll — they reveal as they arrive.

Real Money. Real Actions. Every Day.

REWARDS PAID

▲ 18.4% this month

ACTIONS TRACKED

▲ 9.1% this month

COST PER SALE

$0.00

▼ 4.3% lower is better

AUTO-TRACKED

No spreadsheets. No chasing.

B · Stat band (Ink) — 4-up #1C1C21 cards, one yellow · 48/700 counters tick up over 1.4s on reveal · one-line captions only.

Do & don't

You Set The Rules.

Kwik does the work.

You Set The Rules.

Kwik lets you configure reward logic across every customer touchpoint, from purchase events to social sharing, referrals, and content posting, with attribution that follows the customer for life and dashboards that…

Do one line and a visual. Don't write the paragraph. If it needs explaining, animate it.

Do #1C1C21 cards with a #2E2E35 hairline on Ink. Don't drop white cards onto black.

StartDemo

Do one yellow per view. Don't stack yellow CTAs or add a yellow highlight next to one.

Do Ink, greys, one yellow in site data. Don't bring the app's pastels onto the marketing site.

Make waves.

Kwik brand kit · Website · pair with the Software section for anything inside the product.

AGENT-RULES.md Software system

Website design system.
Show it. Don't say it.

Principles

Web type scale

Color & bands

Layout, nav & buttons

Motion

Low-fi UI language

Section library

Track Actions.
Reward Customers.
Grow Sales.

Real Money. Real Actions. Every Day.

You Choose What To Give.

One Customer. Multiple Actions. Compounding Rewards.

Run Any Program. Or All Of Them.

Become An Influencer Even If You're Not One.

Every Sale. Who Drove It. What It Cost.

Built In. Switched On.

Three Steps. Then It Runs Itself.

Start Making Waves.

Do & don't

Website design system.Show it. Don't say it.

Principles

Web type scale

Color & bands

Layout, nav & buttons

Motion

Low-fi UI language

Section library

Track Actions.Reward Customers.Grow Sales.

Real Money. Real Actions. Every Day.

You Choose What To Give.

One Customer. Multiple Actions. Compounding Rewards.

Run Any Program. Or All Of Them.

Become An Influencer Even If You're Not One.

Every Sale. Who Drove It. What It Cost.

Built In. Switched On.

Three Steps. Then It Runs Itself.

Start Making Waves.

Do & don't

Website design system.
Show it. Don't say it.

Track Actions.
Reward Customers.
Grow Sales.