These four colors form the BBlingue logo and define the brand personality. All four are calibrated to the same saturation band (S 65β70%) for visual harmony. Sky is the brand anchor β it must always be present.
All 14 tints are re-derived from the calibrated base colors using consistent ratios: 65% white for Medium Tints (cards, chips, selected states) and 82% white for Light Tints (page backgrounds, hover states, section fills).
| Family | Base Color | Medium Tint Β· 65% white | Light Tint Β· 82% white | Primary Use |
|---|---|---|---|---|
| Primary Tints | ||||
| Sky | #8DC4EE |
#D7EAF9 |
#EAF4FC |
Nav hover, selected tabs, info cards |
| Coral | #FFAAA7 |
#FFE1E0 |
#FFF0EF |
Playful chips, activity banners |
| Mint | #8EDCD2 |
#D7F3EF |
#EBF9F7 |
Success states, completed lessons |
| Sun | #FFD97D |
#FFF2D2 |
#FFF8E8 |
Tips, parent info banners, notices |
| Secondary Tints | ||||
| Tangerine | #EDA07D |
#F9DED2 |
#FCEEE8 |
CTA hover, onboarding sections |
| Violet | #9690F3 |
#DAD8FB |
#ECECFD |
Premium badges, special content bg |
| Lilac | #E896EB |
#F7DAF8 |
#FBECFB |
Decorative chips, story sections |
Six steps from near-black to white. The backbone that grounds the palette and prevents color overload. Structure and readability live here.
Poppins brings personality and confidence to headings. Roboto provides clean, neutral readability for body text. Together they balance playfulness with professionalism β exactly what BBlingue needs for both parents and digital products.
| Level | Font | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| Display | Poppins | 64β96px | 800 | 1.0 | Hero sections, landing page titles |
| H1 | Poppins | 48px | 800 | 1.1 | Page titles, section heroes |
| H2 | Poppins | 35px | 700 | 1.15 | Section headings |
| H3 | Poppins | 24px | 600 | 1.2 | Card titles, subsections |
| H4 | Poppins | 18px | 600 | 1.3 | Component headers, list titles |
| Body L | Roboto | 18px | 400 | 1.75 | Lead paragraphs, intro text |
| Body | Roboto | 16px | 400 | 1.70 | Default body text, descriptions |
| Body S | Roboto | 14px | 400 | 1.60 | Captions, secondary info, metadata |
| Label | Poppins | 11.5px | 700 | 1.4 | Uppercase UI labels, tags, badges |
| Button | Poppins | 14β16px | 700 | 1.0 | All button text |
π οΈ How to set fonts in Kajabi
<link> tag, and paste it in Kajabi β Settings β Site Details β Header Page Scripts.h1,h2,h3,h4 { font-family: 'Your Font', sans-serif; } and p, body { font-family: 'Your Font', sans-serif; }<style> and </style> tags.Tested pairings for UI components, marketing materials, and lessons. Never deviate from these for text-on-color combinations.
Parents read on mobile in all lighting conditions. All text combinations must pass AA minimum (4.5:1 for body, 3:1 for large text). AAA (7:1) is preferred for critical text.
β οΈ Tangerine (#EDA07D) fails AA with white text. Always use Ink on Tangerine, or use Tangerine decoratively only.
β οΈ Violet (#9690F3) passes AA only for large text (18px+ bold or 24px+ regular). Use white text on Violet only at those sizes.
These rules ensure consistency across every team member, agency, and touchpoint β from Kajabi pages to print materials to social media.
Children's Content
Use all four primary colors freely in illustrations, characters, and animations. High saturation and playfulness is encouraged in content β keep restraint in UI chrome and navigation.
Parent-Facing UI
Lead with Sky and neutrals. Parents want to trust the product. Use warm colors as accents β not dominant β in subscriptions, billing, progress reports, and account settings.
Digital Products
Page backgrounds: Cloud (#F7F7F7). Cards: White. Use tints for section differentiation. Sky for primary actions. Violet for premium upsells. Never hardcode hex values β use tokens.
Lesson Materials
Each lesson category can own a color pair (Animals = Mint, Greetings = Sky, Songs = Violet, Stories = Lilac). Tint as background, full color as accent. Always Ink for text.
Typography on Color
On Sky, Coral, Mint, Sun: use Ink. On Violet with large text only: White is acceptable. On Tangerine: always Ink. On dark (Ink background): White for headings, rgba(255,255,255,0.7) for body.
Print & Physical
Always test CMYK conversions β screen colors shift significantly. Avoid Sun and Coral on light paper at low opacity. Poppins requires licensed print rights β verify before commercial print.
Single source of truth for all color and type values. Use tokens β never hardcode hex values in components. In Figma: name as BBlingue/Primary/Sky. In CSS: prefix with --bb-.
| Token Name | Value | Role |
|---|---|---|
| Primary Colors | ||
color-sky | #8DC4EE | Brand anchor Β· CTAs Β· nav Β· active states |
color-coral | #FFAAA7 | Playful highlights Β· celebrations Β· warmth |
color-mint | #8EDCD2 | Success Β· progress Β· completion |
color-sun | #FFD97D | Joy Β· tips Β· warmth accents |
| Secondary Colors | ||
color-tangerine | #EDA07D | CTA alternative Β· urgency Β· onboarding |
color-violet | #9690F3 | Premium Β· creative Β· magic |
color-lilac | #E896EB | Gentle accents Β· decorative |
| Neutrals | ||
color-ink | #050505 | All text Β· headlines Β· icons |
color-charcoal | #3F3F3F | Secondary text Β· subheadings |
color-slate | #AAAAAA | Placeholders Β· disabled Β· captions |
color-mist | #F0F0F0 | Borders Β· dividers Β· skeleton UI |
color-cloud | #F7F7F7 | Page backgrounds |
color-white | #FFFFFF | Cards Β· modals Β· input fields |
| Primary Tints | ||
color-sky-tint | #D7EAF9 | Sky cards Β· chips Β· selected |
color-sky-light | #EAF4FC | Sky page backgrounds Β· hover |
color-coral-tint | #FFE1E0 | Coral cards Β· chips |
color-coral-light | #FFF0EF | Coral backgrounds Β· hover |
color-mint-tint | #D7F3EF | Mint cards Β· success states |
color-mint-light | #EBF9F7 | Mint backgrounds Β· completion |
color-sun-tint | #FFF2D2 | Sun cards Β· tip banners |
color-sun-light | #FFF8E8 | Sun page backgrounds |
| Secondary Tints | ||
color-tangerine-tint | #F9DED2 | Tangerine chips Β· CTA hover |
color-tangerine-light | #FCEEE8 | Tangerine backgrounds |
color-violet-tint | #DAD8FB | Violet chips Β· premium states |
color-violet-light | #ECECFD | Violet page backgrounds |
color-lilac-tint | #F7DAF8 | Lilac chips Β· decorative |
color-lilac-light | #FBECFB | Lilac backgrounds |
| Typography Tokens | ||
font-heading | 'Poppins', sans-serif | All headings H1βH4 Β· buttons Β· UI labels |
font-body | 'Roboto', sans-serif | Body copy Β· descriptions Β· captions |
font-size-display | 64β96px | Hero sections |
font-size-h1 | 48px | Page titles |
font-size-h2 | 35px | Section headings |
font-size-h3 | 24px | Card titles |
font-size-h4 | 18px | Component headers |
font-size-body | 16px | Default paragraph text |
font-size-small | 14px | Captions Β· metadata |
font-size-label | 11.5px | Uppercase UI labels Β· tags |
line-height-heading | 1.1β1.3 | Tight for display, looser for small heads |
line-height-body | 1.65β1.75 | Generous for readability |
π‘ Figma: Create a "BBlingue" library. Name convention: BBlingue/Primary/Sky, BBlingue/Tints/Sky-Tint, BBlingue/Neutral/Ink.
π‘ CSS: Declare all as :root custom properties prefixed --bb- (e.g. --bb-color-sky: #8DC4EE).
π‘ Kajabi: Use hex values directly in the Style Guide color fields. Save them to your Kajabi brand colors panel for quick access across all pages.
