# Kwik — Website Build Rules Companion to brand.kwik.com and https://brand.kwik.com/software-rules.md. This governs **kwik.com** (marketing, B2B — brands are the audience). Visual spec with live blocks: https://brand.kwik.com/website. ## 0. The rule above all rules **Show it, don't say it.** Every section = overline + headline (≤ 8 words, Title Case, ends with a period) + one line (≤ 14 words) + a visual that moves. If a point needs a paragraph, it needs an animation instead. Nobody reads. ## 1. Inherit, then depart in three places Inherits from the brand: Kwik/Poppins type, Ink `#0B0B0F`, yellow `#FFD836`, neutral zinc greys, line icons, voice. Departs from the app in exactly three ways: 1. **Buttons are pills** (r999), h52 primary / h44 nav. 2. **Cards are r16** (app is r12), padding 28. 3. **No pastels.** The app's card-bar pastels do not appear on the site. Data and glyphs use Ink · `#3F3F46` · `#71717A` · `#D4D4D8` + one yellow highlight. ## 2. Bands Sections alternate: `#FFFFFF` → `#0B0B0F` → `#FAFAFA` → `#0B0B0F`… Never two Ink bands in a row; never more than two light bands in a row. - Light band cards: white, r16, `0 1px 2px rgba(11,11,15,.04), 0 2px 8px rgba(11,11,15,.03)`. On `#FAFAFA` the same; on `#FFFFFF` a hero/dashboard card may use the deep shadow `0 20px 60px rgba(11,11,15,.08)`. - Explainer tiles: `#FAFAFA` + 1px `#E8E8EA`, r16, p28 — the tile is neutral; the layered white fragments inside carry the colour (there isn't any beyond yellow). - Ink band cards: `#1C1C21` fill, 1px `#2E2E35`, r16. Text `#FFFFFF` / `#A1A1AA` / `#71717A`. One card per band may be solid yellow. - CTA band: r24, `linear-gradient(135deg,#FFF8E1,#FFFFFF 70%)` — the only gradient on the site. ## 3. Type (web scale) | Style | Spec | Use | |---|---|---| | display | 60–64 / 700 / 1.02 / −.035em | Hero, ≤ 3 lines | | h2 | 44 / 700 / 1.1 / −.025em | Section headline | | h3 | 24 / 600 / 1.25 | Card title, hero list items | | statement | 30 / 500 italic / 1.3 | Numbered statement rows | | lead | 18 / 400 / 1.5 `#52525B` | The one line under a headline | | card-title / body | 16 / 600 · 14 / 400 / 1.5 | Inside cards; one line each | | overline | 12 / 500 / .16em caps `#71717A` | Above every h2 | | mono label | 12 / 400 / .08em `ui-monospace` | STEP 01, // DIAGRAM LABELS, tiny data | Headlines are Title Case With A Period. Tabular numerals on every number. ## 4. Layout Content column 1120 (gutter 40; 24 on mobile). Nav h80. Section padding 120 (80 tablet, 64 mobile). Overline → h2 gap 16, h2 → lead gap 16–20, copy → visual gap 56. Grids: 2-up 1:1 (hero, device, statement — visual gets 1.3fr), 3-up features, 4-up stats, 5-up programs/flow. Cards gap 16. ## 5. Buttons - **Primary** yellow pill, Ink 15/600, h52, pad 0 26. Hover `#FCC543`. **One per view.** - **Ink** pill — nav CTA (h44) and any CTA on a light band that isn't the primary. - **Outline** white + 1px `#E8E8EA` (on Ink: transparent + 1px `#3F3F46`, white label). - **Text link** 14/500 underline, offset 4. No shadows, no gradients, no icons except a trailing →. ## 6. Motion Two kinds only. - **Reveal** (scroll): opacity 0→1 + rise 16px, 600ms `cubic-bezier(.2,.8,.2,1)`, siblings stagger 80ms, fires once at 20% visible. Bars grow (`scaleY`) and counters tick (1.4s ease-out, tabular) on reveal. - **Loop** (idle): 4–8s cycle, action ≤ 25% of the cycle, the rest is hold. One moving thing per card. Loops: toast slide-in, toggle flip, code copy flash, progress fill, ring draw, travelling dot on a path, layered cards drifting 8px (6s, staggered 1.5s), ripple rings (Ink or yellow, 1–1.5px). - Hover: cards lift 4px + `0 4px 16px rgba(11,11,15,.06)` in 200ms. - Never: parallax, layout animation, autoplay video with sound, more than one loop inside a card. Respect `prefers-reduced-motion` (freeze on the resolved frame). ## 7. Section library (in band order) A Hero (light) · B Stat band (Ink) · C Feature grid (soft) · D Flow strip (light) · E Programs (Ink) · F Device (light) · G Dashboard peek (soft) · K Explainer tiles (light) · L Numbered steps (Ink) · M Statement row (light) · H Logo marquee · I CTA band · J Footer. Compose a page from these; don't invent a new block when one of these fits. Every block's exact geometry is annotated under it in the spec page. ### Explainer tile recipe (K) `#FAFAFA` tile, r16, p28, min-height 420. Row: 28px yellow circle with Ink check (pops in on reveal) + one 17/600 line. Below: 2–3 white UI cards (r12, p16, e2) overlapping at offsets, each drifting on `k-float 6s` with 1.5s stagger — or one live fragment. Yellow-50 note strip allowed at the bottom for a one-line rule. ### Numbered steps recipe (L) Ink band. Overline centred between two `#3F3F46` hairlines with a yellow dot. Cards `#1C1C21` + 1px `#2E2E35`: white "Step n" pill (13/600, pad 6 16), one grey line, then a white screen fragment that bleeds off the bottom edge (r12 top only, translateY 8). ### Statement row recipe (M) Italic "01" + 30/500 italic statement, up to 3 bullets with 18px yellow-check dots, one yellow pill. Visual on the right (1.3fr): a single product moment on a `#FAFAFA` stage, live. ## 7b. Low-fi UI language — how to draw the software on the site The site explains **concepts**, not screens. Never paste a screenshot; abstract the app using this vocabulary, built from the software system's geometry so it still reads as Kwik: - Text → bars (h6–8, r4; Ink for the primary line, `#E8E8EA` for secondary). Person → circle (24–36; Ink = the customer, `#D4D4D8` = a friend, yellow = the one being rewarded). Product → `#F4F4F5` tile r8. Money → the one real number, 14–18/700 tabular. Action → Ink pill with one word. Link/flow → 1px Ink line (dashed grey when not yet tracked) with →. Reward → 28px yellow circle with `$`, `★` or `#`. - Frame: `#FAFAFA` stage r16 p24, 140px visual area; cards inside are white r12 with e1 and a `#F0F0F1` hairline; controls r8 h40; rows h56. - **Max two real words per frame** (a label and a number). No sidebars, headers or nav unless the chrome is the point. - Ink · greys · one yellow. Green/red only as a delta. - One motion = the concept (a link passes, yellow appears, a bar fills, rings ripple). 4–6s loop. - Fidelity ladder: concept sections → low-fi. "What you see" sections (dashboard peek, device) → mid-fi with real labels from the software system. Screenshots → never. Reference frames in the spec page: Referrals, Waves, Giveaways, Lifetime attribution. ## 8. Imagery No photography, no stock, no people. Product fragments, diagrams, phone/browser frames, big numbers. Illustration only as a small Ink line spot (≤ 160px) and only in the CTA band or empty states — never as a hero. ## 9. Copy Voice from brand.kwik.com: human, casual not jokey, honest. Headlines are outcomes ("Track Actions. Reward Customers. Grow Sales."). The one line states the mechanism plainly ("Kwik tracks what customers do and pays them for it."). No exclamation marks, no superlatives, none of the words-we-skip. Buttons are verbs: See How It Works · Create Free Account · Book a Demo · Partner with us. ## 10. Prohibited Pastel fills · blue of any kind · white cards on Ink · two yellow CTAs in one view · body paragraphs over one line outside the footer · radius other than 16 / 999 (12 inside fragments) · gradients other than the CTA band · emoji · testimonial walls (one quote max, if any).