A complete brand system
for a bonus-first
digital product.
Repositioning a generic affiliate property into a reward-driven, editorially confident brand, with a complete dark-first design system, token architecture, component library, and Arcade product UI direction.
Strategic context
Bonus.com is Catena Media's flagship US casino and sweepstakes affiliate destination. The brand had grown without a coherent visual identity, it shared the same dark template aesthetic as hundreds of competitor sites. There was no design system, no token architecture, and no visual language that differentiated it from any other affiliate platform in the market.
The design brief was to rebuild from the ground up: a new brand identity, a complete token-based design system, and a visual direction that would extend across two product surfaces, the editorial site and Bonus Arcade, a free-to-play gamification product.
"Bold where it needs to be. Clean everywhere else. This single design principle governed every decision in the system."
Visual system
The foundation is dark-first: midnight navy (#080B1A) as the primary surface, with a five-accent neon palette used sparingly at 5-10% of any composition. Violet signals authority, Lime signals value and CTA urgency, Cyan creates atmosphere, Pink adds energy, Orange communicates warmth and promotional urgency. The ratio discipline is as important as the colour selection, the system only works because neon is rare.
Inter is the sole typeface, running from 400 to 900 weight. Display text at 900 for hero values and bonus amounts. Body at 400-500. ALL-CAPS with 0.1-0.14em tracking for metadata labels. A parallel light mode token set was built for email, print, and embedded contexts, not as an afterthought, but as a full token-swapping system where only surface and text values change.
Token architecture
A full CSS token system, colours, typography, spacing, effects, shadows, motion keyframes, built for Figma variables and CSS custom properties simultaneously. Updates to the token layer propagate across all product surfaces automatically. The regional colour strategy for Bonus Harvester Cards (always secondary-900 as base background) is enforced at the token level, not by documentation.
Favicon system
Three favicon variants were designed, a clean "B" mark, "B." with signature dot, and full "B.com" wordmark. Each was evaluated at actual 16px tab scale. The recommendation was Option B (B. with dot): maximally legible at favicon size while carrying enough brand character to distinguish it from the bare letterform across multiple open tabs.
Balancing editorial and gamified product identities
As Bonus Arcade was introduced as a parallel product surface, a design exploration was conducted to determine how to evolve Bonus.com's visual identity while integrating Arcade without creating two disconnected products. The challenge was that the two surfaces have opposing product identities: Bonus.com is trust-first, compliance-heavy, editorial. Arcade is gamified, progression-driven, reward-focused.
The exploration defined a design spectrum, from the existing editorial trust-first benchmark at one end to a fully gamified treatment at the other, and identified a shared design language in the middle that allows both to coexist within the same token system. The goal was not to make Bonus.com look like Arcade, or Arcade look like Bonus.com, but to ensure users never feel they have left the same product ecosystem when moving between them.
Bonus Arcade, Daily Streak mechanics
The Daily Streak feature was designed to drive daily retention within Bonus Arcade. A seven-segment ring around the user's profile picture provides always-visible streak progress without requiring additional panels or modals. The ring is the entry point into the full streak experience, users can see their progress, continue their streak, and claim coin rewards without leaving the main product surface.
The flow was designed for two states: logged-in users with full access to streak tracking, progress viewing, and reward claiming; and logged-out users who see the feature but cannot participate. This distinction was important for conversion, logged-out users seeing an engaged streak ring creates a clear motivation to register.
Outcome
Qualitative assessment of the work.
The Bonus.com rebrand delivered more than visual differentiation. It delivered a token architecture that made future design decisions faster, more consistent, and less dependent on individual designer judgment. Any team member working within the system produces outputs that are on-brand by default, not because they have perfect taste, but because the system enforces it.
The dual-surface challenge, maintaining coherent brand identity across a compliance-heavy editorial site and a gamified Arcade product, was resolved through the shared design language rather than through two separate design systems. This reduced long-term maintenance overhead and ensured users never experienced a brand discontinuity when moving between surfaces.
The Daily Streak mechanic introduced a retention driver that the product previously lacked. The seven-segment ring creates a visual commitment device that generates daily return visits without requiring new content or promotional spend, compounding return value from a one-time implementation.