Thinkific Brand Design System Deep Dive

1. Brand Overview

Thinkific’s visual language screams “professional creator economy.” This is a SaaS tool for course creators, coaches, and membership site owners who want their digital products to look premium without hiring a designer. The brand positions itself as a trustworthy platform—clean, structured, and deliberate—with a strong emphasis on clarity over decoration.

The first impression: dark, confident base tones (#271526) paired with generous whitespace (#ffffff). There’s no overload of gradients or complex patterns. Instead, they rely on typography and precise spacing to do the heavy lifting. It’s the kind of design system that says, “We’re confident in our product. We don’t need visual gimmicks.”

The color palette is muted, with one high-energy accent (#fccc18) designed for CTAs. This works because it draws the eye exactly where they want it—signup buttons, key actions—without competing with headlines or imagery. The typography choice is interesting: a mix of PP Writer (custom, editorial-feel) and Instrument Sans (clean, utilitarian). This duality nails the balance between personality and usability.

Spacing follows an 8px grid, which is industry standard for web apps, but they sprinkle in some odd fractional values like 9.24px and 10.24px—this tells me they’re fine-tuning paddings, not just snapping to whole units. Border radii are conservative except for pill buttons (9999px). Thinkific is clearly avoiding overly rounded cards or playful shapes—they want functional, minimal UI but keep interactivity visually distinct.

Overall: This design system is built for conversion and focus. It’s not trying to be “fun”; it’s trying to be “clear and premium.” Every choice—color, type, spacing—reinforces that.

2. Color System

2.1 Primary Colors

Main brand color: #271526 (deep, muted purple-brown). This is unusual—most SaaS products lean into blues or grayscale neutrals. Thinkific’s choice signals authority but with warmth. It’s less corporate than navy, more grounded than pure black.

They pair it with #ffffff as the primary background color, which keeps things clean and accessible. Accent yellow #fccc18 is the “flare” moment—used sparingly for primary CTAs. That yellow is high-contrast against both dark and light backgrounds, and it feels energetic without being neon.

Competitor comparison: Teachable uses lighter blues; Kajabi leans into bright purples; Thinkific’s palette is more muted, which makes their yellow pop harder.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. #fccc18 on #271526 easily clears WCAG AA for large text and UI elements. White backgrounds with #271526 text are high contrast. The muted grays (#938a92, #696969) are used for secondary text—these are borderline for small text contrast, so they’re wisely kept for non-critical info.

Dark mode isn’t explicitly implemented here—palette is optimized for light backgrounds.

2.4 Usage Guide

• Primary buttons: Use #fccc18 background with #271526 text.
• Text links: Default #271526, hover shifts to #3860be (blue).
• Avoid: Using #fccc18 for text—it’s too bright for readability.
• Pairing: #f3f1ec backgrounds work well with deep base text for softer contrast sections.
• Borders: Stick to #271526 or subtle grays for structure—no random color borders.

3. Typography

3.1 Font Families

• PP Writer — Custom, serif-like but modern. Used for headings to bring editorial character.
• Instrument Sans — Clean sans-serif. Used across headings, body, buttons, links, captions.
• No Google/Adobe font source indicated in the data—these are likely custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

Large headings (72px, 60px) create strong landing page impact. Smaller headings at 24px and 18px work for section titles and UI contexts. Body text and captions hover around 14–16px—comfortable for reading. Weight shifts between 400, 500, 700 to signal hierarchy without relying solely on size. This is a tight, consistent type system—no rogue fonts or mismatched weights.

4. Spacing & Layout

4.1 Spacing Scale

Thinkific uses an 8px scale with some fractional tweaks.

4.2 Layout

Breakpoints are numerous: from 98px (!) up to 1280px. This suggests micro-optimizations for specific device widths. Core breakpoints: 768px (tablet), 1024px (desktop), 1280px (wide desktop). Layout is mobile-first—content scales up with generous spacing at larger sizes.

5. Visual Elements

• Border Radius: Minimal—1px, 2px, 3px, 5px for most UI. 9999px for pill buttons. No heavy rounding on cards—keeps things sharp.
• Shadows: Rare. Three subtle shadows exist but confidence is low—this is mostly a flat design system.
• Borders: 1px solid #271526 is common. Also #252C5D and grays for functional separation.

6. Components

6.1 Buttons

Primary CTA (Yellow):

• Default: bg #fccc18, text #271526, padding 10.24px x 19.662px, radius 9999px, no shadow.
• Hover: bg #ffffff, border 1px solid beacon, text #2285f7.
• Active: no bg, no border, text #ffffff.
• Focus: outline 1px solid #000000, bg #1eaedb, text #ffffff.

Secondary CTA (Transparent):

• Default: bg transparent, text #271526, radius 9999px.
• Hover: same as primary hover.
• Active/Focus: same as primary.

Dark CTA:

• Default: bg #271526, border 1px solid #271526, text #271526 (!).
• Hover: white bg, beacon border, blue text.

Nav Toggle:

• Default: bg #efefef, text #000000, radius 0px, border 2px outset #000000.

6.2 Links

• Default: underline, #271526 text.
• Hover: #3860be, no underline.
• Variants for light text (#f3f1ec, #ffffff) with hover shift to blue.

6.3 Forms

Checkbox:

• Default: transparent bg, no border.
• Focus: outline 1px solid #000000, bg #1eaedb, text #ffffff.

6.4 Cards

No explicit card component extracted—likely built with white bg, subtle borders, 30px padding.

7. Design Tokens

:root {
  /* Colors */
  --color-brand-base: #271526;
  --color-white: #ffffff;
  --color-light-neutral: #f3f1ec;
  --color-black: #000000;
  --color-warm-gray: #938a92;
  --color-dark-gray: #696969;
  --color-cool-neutral: #c0beb9;
  --color-medium-gray: #555555;
  --color-accent-yellow: #fccc18;
  --color-sage: #716a5c;

  /* Typography */
  --font-pp-writer: "PP Writer", serif;
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-9-24: 9.24px;
  --space-10: 10px;
  --space-10-24: 10.24px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-45: 45px;
  --space-48: 48px;
  --space-68: 68px;
  --space-80: 80px;
  --space-118: 118px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-lg: 5px;
  --radius-xl: 17px;
  --radius-xxl: 20px;
  --radius-round: 50px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: rgb(153, 153, 153) 0px 2px 10px -3px;
  --shadow-2: rgb(199, 197, 199) -3px -3px 5px -2px;
  --shadow-3: rgb(199, 197, 199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Thinkific Design System Specification

You are a Thinkific design expert. Build UIs matching their visual language exactly.

## Brand Context
Thinkific’s design system is clean, professional, and conversion-focused. It uses muted dark bases with high-contrast accents, editorial headlines, and precise spacing. The goal: clarity and premium feel for digital product creators.

## Color Palette
- Brand Base: #271526 — logo, headings, body text, borders
- White: #ffffff — backgrounds, card surfaces
- Light Neutral: #f3f1ec — section backgrounds
- Pure Black: #000000 — text, icons, outlines
- Warm Gray: #938a92 — secondary text
- Dark Gray: #696969 — category headings
- Cool Neutral: #c0beb9 — background accents
- Medium Gray: #555555 — icons, secondary buttons
- Accent Yellow: #fccc18 — primary buttons, CTAs
- Sage: #716a5c — subtle accents

## Typography
Fonts:
- Headings: "PP Writer", serif
- Body/UI: "Instrument Sans", sans-serif
- System fallback: Arial, sans-serif

Type Scale:
| Level | Font | Size | Weight | Line Height | Use |
| H1 | PP Writer | 72px | 500 | 1.10 | Hero titles |
| H1 | Instrument Sans | 72px | 700 | 1.40 | Hero titles alt |
| H2 | PP Writer | 60px | 500 | 1.10 | Landing sections |
| H3 | PP Writer | 48px | 500 | 1.10 | Section headings |
| ... (include all from extracted data) |

## Spacing & Grid
Base: 8px grid.
Scale includes: 1px, 5px, 9.24px, 10px, 10.24px, 11.2px, 12px, 13px, 15px, 16px, 19px, 20px, 24px, 25px, 30px, 45px, 48px, 68px, 80px, 118px.
Use multiples of these for padding, margin, and gaps.

## Border Radius
- none: 0px — structural elements
- sm: 1px — spans
- md: 2px — buttons
- 2.5px — rare UI
- 3px — images, videos
- lg: 5px — divs
- xl: 17px — filters
- xxl: 20px — switches
- round: 50px — inputs
- full: 9999px — pill buttons, avatars

## Shadows & Depth
Minimal shadows:
- rgb(153, 153, 153) 0px 2px 10px -3px
- rgb(199, 197, 199) -3px -3px 5px -2px
- rgb(199, 197, 199) 0px 0px 12px 2px

## Component Specifications

### Primary Button
Default:
- background: #fccc18
- color: #271526
- padding: 10.24px 19.662px
- radius: 9999px
- border: none
Hover:
- background: #ffffff
- border: 1px solid var(--wp--preset--color--beacon)
- color: #2285f7
Active:
- background: initial
- border: none
- color: #ffffff
Focus:
- outline: 1px solid #000000
- background: #1eaedb
- color: #ffffff

### Secondary Button
Default: transparent bg, #271526 text, 9999px radius.
Hover/Focus: same as primary hover/focus.

### Navigation Link
Default: #271526, underline.
Hover: #3860be, no underline.

### Input Field (Checkbox)
Default: transparent bg, no border.
Focus: outline 1px solid #000000, bg #1eaedb, color #ffffff.

## Layout & Responsive Rules
Breakpoints:
- 0px, 98px, 400px, 425px, 426px, 476px, 530px, 550px, 600px, 767px, 768px, 769px, 781px, 782px, 783px, 890px, 896px, 897px, 1023px, 1024px, 1280px.

## Interaction Rules
- Transition timing: 150ms ease for hover/focus state changes.
- Focus indicators: solid outlines.
- Hover often changes color and removes underline.

## DO List
- Use only palette colors.
- Maintain 8px grid and fractional spacing as defined.
- Keep border radii consistent with component type.
- Use PP Writer for headings, Instrument Sans for body/UI.
- Reserve #fccc18 for CTAs.

## DON'T List
- No custom colors outside palette.
- Don’t mix sharp and overly rounded corners.
- Avoid heavy shadows—use borders for separation.
- Don’t use accent yellow for body text.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #fccc18;
  color: #271526;
  padding: 10.24px 19.662px;
  border-radius: 9999px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--beacon);
  color: #2285f7;
}
.btn-primary:focus {
  outline: 1px solid #000000;
  background: #1eaedb;
  color: #ffffff;
}
```

### Card
```css
.card {
  background: #ffffff;
  padding: 30px;
  border: 1px solid #271526;
  border-radius: 2px;
}
```

### Checkbox Input
```css
.checkbox {
  background: transparent;
  border: none;
}
.checkbox:focus {
  outline: 1px solid #000000;
  background: #1eaedb;
  color: #ffffff;
}
```

9. Summary

TL;DR — Thinkific’s design system is sharp, muted, and conversion-focused. Deep base tones, bright yellow CTAs, editorial headings, and an 8px grid keep everything consistent and professional.

Brand Keywords:

• creator-premium
• muted-confidence
• editorial-clean
• conversion-driven
• minimal-depth