Research
Audience research
Consideration, conversion, retention. Delivered as something your leadership can circulate.
Every default element, in one place, for all three properties. Switch property and the whole page reskins from the same markup. That is the test: if a component only works in one theme, it is not a component.
Read from the actual code, not assumed.
Only confirm-button.tsx and date-picker.tsx are reusable. Everything else is re-implemented inline, which is exactly the patchwork problem.
Six different corner radii are in live use: rounded-md 421 times, rounded-full 325, rounded-lg 192, rounded-xl 52, rounded-2xl 12, rounded-sm 10. Padding is equally scattered across at least twelve combinations.
Nothing on this page will hold until those collapse to a token. That is the single biggest piece of work the showcase implies.
Canonical values, transcribed from the Brand Guide PDF, not from code.
Radius, settled: 8px in the app, 10px on marketing cards, full pill on buttons. One value per context.
The guide's own rule: “Avoid using orange with black/brown (Halloween effect).” That is why there is no darkened orange anywhere on this page.
Accents carry status meaning only. #00CCBB is 2.03:1 on white and must never hold text; #007A72 is the 5.22:1 text variant.
No #0099FF anywhere. Using Social Fresh blue made the personal site read as an agency sub-page.
| Pair | Ratio | Verdict |
|---|---|---|
White on #FF6600 | 2.94 | Fails |
Navy #003A66 on canvas | 10.82 | AAA |
#0099FF on white | 3.00 | Large only |
#00CCBB on white | 2.03 | Fails |
#007A72 on white | 5.22 | AA |
#FF0C0C on #0A0A0A | 5.01 | AA |
White on #FF6600 is 2.94:1. Darkening the orange is banned, so the fix is structural rather than chromatic. Ruled 2026-08-28.
Small body copy set in white directly on orange. This is the 2.94:1 case and it is the one to avoid.
Headline size is fine
Anything smaller sits in a white box on the orange, with navy text inside. Same band, same brand, legible.
Body copy sets in the body face at 17px with a 1.6 line height and a measure around 38rem. Long enough to read, short enough not to lose the line.
Brand guide specifies Avenir Heavy, which is print only. Outfit is the approved web stand-in (Jason, 2026-08-28): getting close is good enough. Body is Lato.Lato throughout. No display face in the app.Archivo Black over Archivo.
Status is carried by a dot plus a word, never by colour alone and never by a tick. Colour-blind readers and greyscale printouts both survive.
Pika 500 by Dutchicon, already licensed and on disk at SOCIAL FRESH/LOGOs - SF/Pika Supreme Pack/. Filled shapes on a 64px grid, single fill, so they recolor with one find-and-replace. 502 available; a sample below.
Gaps found: the set has binoculars but no eyeglasses and no sunglasses. Anything missing has to be drawn to match the 64px filled grid.
Sortable headers, sticky head, hover row, right-aligned tabular numerals. Click a header to sort.
| Event▲▼ | Status▲▼ | Tickets▲▼ | Revenue▲▼ |
|---|---|---|---|
| Social Fresh 2027 | On sale | 17 | $17,452 |
| Social Fresh 2026 | Closed | 228 | $223,598 |
| Workshops 2027 | Draft | 0 | $0 |
| FOFM 2025 | Closed | 62 | $41,300 |
The Airtable pattern: a typeahead at the top, grouped options, a colour swatch per option, the selected state shown by weight and background rather than a tick, and a footer that tells you what happens next. Click to open.
Three rules this pattern encodes: search appears once a list passes about seven items; groups are labelled rather than separated by a bare rule; and a destructive or notifying consequence is stated in the menu, not discovered after.
Toggles use position and fill. No tick, anywhere in the system.
Consideration, conversion, retention. Delivered as something your leadership can circulate.
Where you sit against the brands you are measured against, and the openings they left.
We run the account, not a report about the account.
Selected tab carries the accent underline. Never more than six.
When someone registers they will appear here with their ticket type and order date.
Confirmation is a word, not a tick. Errors say what went wrong and what to do.
Skeletons mirror the shape of what is coming, so the layout does not jump when data lands.
Two shapes only. A modal for a decision, a drawer for a record. Never a modal inside a modal.
This removes Social Fresh 2027 and its 17 registrations. Attendees are not notified automatically.
dana@example.com
Ordered March 2, 2027
The destructive modal asks you to type the name. Confirmation friction scales with how hard the action is to undo.
Showing 1 to 25 of 287. Always say the range and the total; a page number alone tells nobody how much is left.
Fires change on every intermediate value, so stepping the month commits a date nobody picked.
Popover calendar. Browsing never commits.
Darkened or browned orange. Orange beside black or brown. Emoji in product UI and web copy. Em-dashes in Jason's voice. Auto-advancing carousels. Unsourced statistics. toISOString() for a local date.
All seven answered 2026-08-28. Recorded in ~/.claude/CLAUDE.md so they apply to every session.
| Question | Ruling |
|---|---|
| Avenir | Not used on web. Outfit is the approved stand-in; getting close is good enough. |
| Emoji | Never. Icons only on web. This supersedes the Emoji Bank page in the Brand Guide, which is outdated. |
| Fortune 500 | 350 is right. The guide's 300 is stale. |
| Primary light | #FAD4BB confirmed. |
| Orange contrast | Orange stays #FF6600. White on it for headline size only; smaller text goes in a white box on the orange. Never darken toward brown. |
| Radius | 8px app, 10px marketing cards, pill buttons. |
| Seafoam | Renamed Salt here, pending sign-off. It sits beside Poolside, and it reads as near-white, which Seafoam does not. |
#F7F6F4, or pick another.