Our brandmark is the simplest element of our brand. It works as a standalone symbol that represents SideShift.

The lockup is a structured pairing of our brandmark and our wordmark that should not be altered. It's the primary choice for brand representation in external facing contexts.

The monotone lockup is suitable for dark mode or light mode styled backgrounds. Never place the monotone lockup on colorful backgrounds.

When combining the lockup with an approved color background, make sure that the logo is clear and legible in either white or black.

Here are some pre-approved avatars for social accounts. These also work as icons for the website, the mobile app, shortcuts, etc.

Inside the product the brandmark sits in a black rounded tile — 48px with a 16px radius — at the top of the navigation rail and as the app icon. The tile scales down to 24px; below that use the bare mark. Never show the full lockup inside the app.

To protect the logo from other visual elements, make sure there's adequate clear space surrounding it. Minimum clear space equals the height of the arrow mark on all sides. Avoid scaling the lockup below 120px in digital applications.

Consistency is key. Do not modify, distort, or recolor the logo elements in any of the following ways.

SideShift's primary brand color is Primary Blue. It signals action and focus, backed by Primary Dark for deep branding. Sky Blue is our signature accent; Ocean Blue is the secondary brand tone. Click any swatch to copy its HEX.

Our neutral palette does the heavy lifting for text, grids, borders, fills and card backgrounds. Ink is primary text; Gray is body copy and secondary text; Muted is for labels and metadata.

In the product, surfaces and lines are never new hex values — they are alpha tints of Gray #707070 layered on white. This keeps every border, fill and divider in the same family. Borders on floating elements use a slightly cool tint.

Reserved strictly for status and feedback — positive, alert, and error states. Never use semantic colors decoratively.

Our primary typeface is TWK Lausanne. Used for large bold display headlines, slide titles, and key marketing messaging. Characterized by high legibility and tight geometric proportions.

Five levels, from hero display to interface caption. Weight steps down as size steps down.

1. 1.

   Engineered Confidence

   We speak with data-backed authority. Every claim is grounded in platform metrics and real creator performance.

2. 2.

   Creator-First Language

   We center the creator ecosystem. Our language reflects scale, distribution, and performance — never vanity.

3. 3.

   Clear Over Clever

   Straightforward communication that respects busy marketing professionals. No jargon without purpose.

The app icon is the brandmark on the Sky-to-Primary blue tile. Use the supplied PNG as-is — never rebuild it from the mark, and never place it on a second background.

95 dimensional badges across achievement and certification tiers, plus the greyed-out “blank” state for locked tiers. Tiers escalate silver → blue → green → gold → orange → red → purple. Click to download the full-resolution PNG.

20 gem-tier league badges (with and without laurels), the three leaderboard medals, and the streak flame states.

Rounded-tile illustrations for training modules (35) and the daily plan (14). Flat, saturated, on a soft tinted tile — one focal object per tile.

45 Rive animations — league badge reveals, course and tile illustrations, ratings, money and streak moments. Animations play below; click a card to download the .riv.

15 short effects for answers, XP, achievements, milestones, rank-ups, withdrawals and certifications. Short, bright, and never longer than a beat.

Inside the app, interface text is set in Geist — TWK Lausanne is reserved for brand and marketing display. Geist is open-source (SIL OFL) and ships in nine weights.