Brand Reference

What the brand is for

Chinwag is a pass-the-phone question game for one iPhone and a group in the same room. There are no accounts, no sign-up, no room codes and nothing to install for anyone except the person holding the phone. The positioning line in use on the homepage is not more screen time, a reason to look up, and the design exists to keep that promise: the phone is a prop that starts the conversation, then gets passed on.

So the visual job is not to hold attention. It is to be readable at arm's length across a lit room, to make the current card the loudest thing on the screen, and to let a stranger pick the deck that matches the night without reading any instructions. That is why the type is enormous and tight, the surfaces are nearly black, and the decks are colour-coded before they are named.

The wordmark

One word, two colours, no space.

"Chinwag" is always set as a single word in the heaviest available weight, with the second half taking the brand pink. The site renders it as Chin<span>wag</span> with .brand span { color: var(--pink) }. The app renders the same split in HomeScreen, with wag in COLORS.brand. Both resolve to #ff2d78.

Correct

Chinwag

Weight 950 on the site, '900' in the app. Letter-spacing is tight and negative: -0.05em in the header, and fontSize × -0.045 in the app so it stays proportional as the wordmark scales with the screen. Line height 1.1.

Incorrect

Chin Wag Chinwag Chinwag

Do not split it into two words, do not tint the second half anything other than #ff2d78, do not letter-space it open or set it in uppercase, and do not set the whole word in one colour where the brand colour is available.

The mark is a single card standing on a near-black tile: a #08070d square with a 112 corner radius on a 512 grid, a card inset with a 44 radius, and a question mark in white at weight 800. The card is the only place a second brand colour appears: a diagonal gradient from #ff2d78 to #7b2dff. That violet exists in public/icon.svg and nowhere else in either build.

Colour

The core palette.

Eleven custom properties are declared in :root in public/marketing.css. Two of them, --surface-strong and --blue, are declared and never referenced through var(), so treat them as dead rather than as available tokens.

Background --bg #08070d The page. Also the text colour on a pink button, and the app's backgroundColor in app.json. Used 5 times.
Surface --surface #121019 Raised panels. Used once, on the home hero. Most cards use rgba(255, 255, 255, 0.045) instead, which composites to a near-identical #131218.
Declared, unused --surface-strong #1a1723 Never referenced. Available if a third elevation is ever needed, but nothing on the site depends on it today.
Ink --ink #fdfcff Headings, card questions, the first half of the wordmark. Used 25 times. Contrast 19.6:1 on the background.
Dim --dim #bdb8c8 Body copy, ledes, nav links, card descriptions. Used 19 times. Contrast 10.4:1.
Muted --muted #8f899b Small print: footers, captions, hints, the fact strip labels. Used 15 times. Contrast 5.9:1, so never below 12px and never for anything load-bearing.
Brand --pink #ff2d78 The only true brand colour. Primary buttons, the "break" in the wordmark, the sample-list rule, the ambient hero glow. Used 9 times.
Brand, lifted --pink-soft #ff76a9 Eyebrows, step numbers, inline links, button hover. Used 20 times, more often than the brand pink itself, because it reads at 8.0:1 where the pink reads at 5.6:1.
Focus and caution --yellow #ffc857 The focus ring (3px outline, 4px offset) and the house-rule panel. Used twice, both times deliberately.
Declared, unused as a token --blue #59d8ff Never referenced through var(), yet the same hex is hard-coded 9 times for the cool end of the temperature gradient. Use the literal to match what ships, or fix the token.
Hairline --line rgba(255,255,255,.13) Every border and divider. Used 35 times, the most-used token on the site. Composites to #28272c on the background.
Untokenised #a78bfa The violet midpoint of the temperature gradient, hard-coded 9 times with no custom property at all. Real part of the palette, missing from :root.

The temperature gradient

Three colours carry the one idea the product is built on: a round warms up. The rail on the New Friends page runs linear-gradient(180deg, #59d8ff 0%, #a78bfa 50%, #ff2d78 100%), and the same three appear as stage tints on the hero prompt card: cool #78e2ff, warm #b9a4ff, hot #ff72a5, each on a matching 16 to 17 per cent tinted pill. Cool, violet, hot, in that order, always. Do not reverse it and do not add a fourth stop.

A fourth colour, mint #34d399 with text at #6ee7b7 or #79ebbd, is reserved for safety and reassurance: the free tier, the trust panel, the "no accounts" points. It is not part of the temperature scale.

Deck accents

Twenty-six decks, twenty-four colours.

The most recognisable thing about the app. Every deck in src/packs/ carries an accent hex and an emoji, and the app tints the selected card border and badge with it via withAlpha(pack.accent, 0.18), since React Native has no color-mix(). These are the source of truth. Two colours do double duty: Throwback and Animals & Nature both take #22c55e, Date Night and Hen’s & Bucks both take #d946ef. Neither pair appears in the same room, so nothing is broken, but neither collision was chosen either.

🎉Party#ff2d78
👋New Friends#34d399
🏡Family#60a5fa
🌏Travel & Hostel#00d4ff
🌶Spicy#ff9500
💼The 9–5#9b83ff
📼Throwback#22c55e
📱Extremely Online#ffd60a
🔥Hot Takes#ff453a
💕Date Night#d946ef
⚖️Would You Rather#2dd4bf
🚗Road Trip#f59e0b
🦊Animals & Nature#22c55e
🔀Family Would You Rather#38bdf8
🌊Deep#6366f1
🆕Firsts#f97316
🍼New Parents#14b8a6
🍜Food#eab308
✈️Long Distance#ec4899
🎓Uni#a855f7
🧹Housemates#f43f5e
🎬Music & Movies#0ea5e9
🙄The Ick#84cc16
🎄Christmas#dc2626
🥂Hen’s & Bucks#d946ef
🏆Sport#22d3ee

Where the site does not use these

Each deck page sets its own --deck-accent inline, and twenty-five of the twenty-six decks have a page. Seventeen now match the app: every deck published since the catalogue expanded was built from the accent rather than beside it. The eight that disagree are all from the original set, and two of them borrow a colour that belongs to a different deck: /decks/extremely-online/ uses Travel's #00d4ff, and /decks/would-you-rather/ uses New Friends' #34d399. That is a real divergence, not a stylistic choice, and those eight are the single most useful thing to fix on this page.

Deck accent, app catalogue against the published deck page.
Deck	src/packs/	/decks/ page	Agrees
Party	#ff2d78	#ff2d78	Yes
New Friends	#34d399	No deck page	Not applicable
Family	#60a5fa	#60a5fa	Yes
Travel & Hostel	#00d4ff	#59d8ff	No
Spicy	#ff9500	#ff4d4d	No
The 9–5	#9b83ff	#8b7cff	No
Throwback	#22c55e	#a78bfa	No
Extremely Online	#ffd60a	#00d4ff	No
Hot Takes	#ff453a	#ffc857	No
Date Night	#d946ef	#ff6b9d	No
Would You Rather	#2dd4bf	#34d399	No
Road Trip	#f59e0b	#f59e0b	Yes
Animals & Nature	#22c55e	#22c55e	Yes
Family Would You Rather	#38bdf8	#38bdf8	Yes
Deep	#6366f1	#6366f1	Yes
Firsts	#f97316	#f97316	Yes
New Parents	#14b8a6	#14b8a6	Yes
Food	#eab308	#eab308	Yes
Long Distance	#ec4899	#ec4899	Yes
Uni	#a855f7	#a855f7	Yes
Housemates	#f43f5e	#f43f5e	Yes
Music & Movies	#0ea5e9	#0ea5e9	Yes
The Ick	#84cc16	#84cc16	Yes
Christmas	#dc2626	#dc2626	Yes
Hen’s & Bucks	#d946ef	#d946ef	Yes
Sport	#22d3ee	#22d3ee	Yes

Until that is reconciled, use the src/packs/ column. It is what a player sees when they choose a deck, and it is the one list both platforms could read.

Site against app

Where the two builds differ.

app/src/theme.ts opens with a comment saying the web palette is "carried over so both builds look like one product". Three of its seven values match exactly. The other four express the same role a different way, and the results are close but not identical. Composite values below are the colour you actually see, blended over #08070d.

Role	Site, marketing.css	App, theme.ts	Difference
Background	`--bg` #08070d	`bg` #08070d	None
Ink	`--ink` #fdfcff	`ink` #fdfcff	None
Brand	`--pink` #ff2d78	`brand` #ff2d78	None
Body text	`--dim` #bdb8c8	`dim` rgba(253,252,255,.72), composites to #b8b7bb	The site's is violet-tinted, the app's is neutral. Visible side by side.
Small print	`--muted` #8f899b	`faint` rgba(253,252,255,.62), composites to #a09fa3	The app's is noticeably lighter: 7.6:1 against 5.9:1.
Hairline	`--line` rgba(255,255,255,.13)	`hairline` rgba(255,255,255,.12)	One percentage point. Harmless, but there is no reason for it.
Card surface	`--surface` #121019, cards use rgba(255,255,255,.045)	`surface` rgba(255,255,255,.06)	The app's card is a step lighter: #17161c against #131218.

Two more things the palette does not tell you

theme.ts is not the whole app palette. Ten hexes are hard-coded in screens and components without passing through COLORS, led by #60a5fa at thirteen uses. Any of them can drift without a token changing.

Neither build loads a webfont. The site asks for Inter first and falls back to ui-sans-serif, system-ui, -apple-system, but nothing serves Inter, so almost everyone sees the system font. The app sets no fontFamily at all, so it is always SF Pro. In practice both are the system font, and the Inter in the stack is a preference, not a promise. Do not design a comp in Inter and expect it to ship that way.

Type

Heavy, tight and very large.

Headings are set at weight 900 to 950 with negative tracking that grows with the size, from -0.025em at 21px to -0.065em at 92px. Every heading size is a clamp(), so the scale is fluid rather than stepped.

A better question changes the room

h1 · clamp(48px, 8vw, 92px) · line-height .94 · tracking -.065em · max-width 760px. Home overrides to clamp(58px, 6.6vw, 84px) at -.07em.

From new faces to inside jokes.

h2 · clamp(34px, 5vw, 58px) · line-height 1 · tracking -.05em · text-wrap balance

Match the pack to the room

h3 · 21px · tracking -.025em

One minute to learn

.eyebrow · 13px · weight 900 · tracking +.14em · uppercase · --pink-soft. The only place letter-spacing goes positive.

Chinwag is designed for one iPhone and a group in the same room.

.lede · clamp(18px, 2.1vw, 22px) · line-height 1.55 · --dim · max-width 680px

Body copy runs at 17px with generous leading, and guides run one step larger at 18px with line-height 1.75. Article measure is capped at 820px, body copy at 760px, so line length stays readable on a large monitor even as the shell grows.

.body-copy p · 17px / 1.7 · --dim | .article-body · 18px / 1.75

Prices are shown in US dollars and can vary by region.

.pricing-note · 12px / 1.6 · --muted. The smallest type on the site. Footers and captions sit at 13px.

In the app

The app scales its two hero sizes off the viewport rather than a breakpoint. The wordmark is min(max(width × 0.15, 44), 76) with line-height × 1.1 and tracking × -0.045. The card question is min(max(width × 0.084, 30), 52), dropping to min(max(width × 0.072, 28), 40) for a long prompt, with line-height × 1.12 and tracking × -0.035. Everything else sits between 10px and 32px, and weight '900' is used more than every other weight combined.

Layout

One shell, three widths.

--page is the shell width and it steps up twice. Sections are width: min(calc(100% - 40px), var(--page)), so the gutter is fixed and the content stops growing at the cap. Articles ignore --page and cap at 820px so line length stays readable.

--page1120px by default. 1240px from 1440px up. 1320px from 1800px up.
Gutters40px total below 560px viewport width becomes 32px. The nav uses 32px, tightening to 24px.
Breakpoints1800, 1440, 1180, 900, 820 and 560. Plus two shape queries: min-width: 821px and max-width: 1180px for narrow desktop, and min-width: 821px and max-aspect-ratio: 6/5 for tall split-screen windows.
Section rhythm92px of vertical padding, 60px when compact, 80px on the home page, 68px below 560px.
Card radius24px for features, packs, steps and trust cards, dropping to 20px below 560px. Larger panels go 26 to 34px, the home hero 34 to 38px, the app's play card 30px.
Card treatment1px solid var(--line) border, rgba(255, 255, 255, 0.045) fill, 28px padding, 24px below 560px. A linked card lifts translateY(-3px) on hover and brightens its border to rgba(255, 255, 255, 0.3).
Accent glowColoured cards use a blurred circle bled off the bottom-right corner: a 220px circle, filter: blur(65px), opacity: 0.28, tinted with the card accent. This is how a deck's colour reads without flooding the surface.
Buttons48px minimum height, 16px radius, weight 900, pink fill with --bg text. The small variant is 44px at a 14px radius. Secondary is a --line border on a 5 per cent white fill.
Touch targetsmin-height: 44px on links, small buttons and icon buttons, on both site and app. One exception exists: .article-read drops to 40px below 560px, which is a bug rather than a rule.
Focus3px solid var(--yellow) with a 4px offset. Yellow, not pink, so focus never reads as a brand flourish.
Motion120 to 150ms ease on hover and colour, 280ms on image scale. Everything collapses to 0.01ms under prefers-reduced-motion: reduce, and the app honours useReducedMotion() for card transitions.

Voice

Plain, specific, and never overclaiming.

The rules below are not aspirations. Each one is already true across the site and the catalogue, and docs/product-guardrails.md treats several of them as release blockers. A change that breaks one needs a product decision, not a quiet exception.

The rules

Australian English. Behaviour, recognise, apologise, favourite, realise, organise, humour, licence. Every one of those appears in its Australian form across the site, and the only US spellings anywhere in the repository are CSS property names such as scroll-behavior, where the spelling is fixed by the language.
No em dashes. Not one appears in the homepage, in any published page or in any of the 3,069 prompts. Use a comma, a full stop or a rewrite. An en dash is fine where it is genuinely a range, which is why the deck is called The 9–5.
No invented numbers. Every figure is countable in the repository: 3,069 prompts, twenty-six decks, 20 cards a round. There are no testimonials, download counts, "time to first laugh" claims or generated faces presented as players.
Never claim availability we do not have. While the listing was in review the homepage said "Submitted to Apple. Landing shortly." and the button was visibly inert. This one is guardrail 19.
Sentence case with a full stop for section headings. "From new faces to inside jokes." and "The room stays in control." are the pattern. The h1 is the exception and takes no full stop.
Prompts are one unpunctuated breath. Of 3,069 prompts, none end in a full stop, question mark or exclamation mark, and only eleven contain a comma. A prompt is read aloud, so it is written the way it is said.
Say what happens in the room. Point, pass, argue, read aloud, put a finger down. Not engage, connect, unlock or discover.
The pass rule is never negotiable in copy. Anyone can pass on any card, with no explanation, and no page ever frames passing as a failure or a forfeit.

Before and after

The "after" in each pair is copy that is live on the site today. The "before" is the version we did not ship.

Not this

Chinwag: the #1 party game trusted by thousands of groups worldwide!

Invented social proof, an unearned superlative and an exclamation mark. Guardrail 8.

This, from the homepage

The iPhone party game that turns awkward introductions into stories. 3,069 questions, twenty-six decks and one phone passed around the room.

Three numbers, all of them countable in src/packs/.

Not this

Download now on the App Store.

Untrue while the listing was in review, and the kind of claim a store reviewer checks.

This, from the homepage

Submitted to Apple. Landing shortly.

Two short sentences that are literally true on the day they are read.

Not this

Who is most likely to talk their way out of getting arrested?

A question mark and a "who is" wrapper the reader has to say out loud before the fun part.

This, from the Party deck

Most likely to talk their way out of getting arrested

The four prompt formats are fixed openers: Most likely to (371 prompts), Never have I ever (186), Hot take (173) and Would you rather (130).

Not this

Unlock deeper connection and meaningful engagement with your group.

Nothing in it describes anything that happens in a room.

This, from the how-to-play page

Point, vote, put a finger down or defend a hot take. Let the conversation run when a good story starts.

Four verbs a player performs, then permission to stop playing.

Not this

Turn on Spicy for the ultimate adults-only night!

Sells the adult deck as a dare, which is exactly how consent gets skipped.

This, from the how-to-play page

Do not switch on Spicy just because it exists. Use it only when the group wants dating and flirting questions. It is never a licence to pressure somebody into sharing.

Also note "do not" rather than "don't". Contractions are rare in the site's instructional copy.

The cruelty test

Carried over from the Hot Takes guide, and it is the sharpest editorial filter in the product: if a line becomes funnier when it is aimed at a specific person in the room, it does not belong. That applies to prompts, to marketing copy and to anything written in the brand's voice.

Where these values live

public/marketing.css for site tokens, the type scale, the shell widths and every breakpoint.
app/src/theme.ts for COLORS and withAlpha, and the screens under app/src/ for the sizes that are computed rather than tokenised.
src/packs/ for deck names, emoji, blurbs and accents.
public/icon.svg and app/app.json for the mark and the platform colours.
docs/product-guardrails.md for the rules that outrank any brand preference, and docs/brand.md for this page as plain text.

If a value here and a value in the code disagree, the code is right and this page is stale. Fix the page.