Logo System
WhitelistVideo uses a dual-logo system. The teal parent-facing logo appears on the website, marketing, and parent apps. The blue child-facing logo is reserved for the browser extension and child apps.
Parent Logo — Primary
Use for the website, social media, marketing materials, parent apps, and all external communications.
Child Logo — Secondary
Exclusively for child-facing products. Never use on the marketing website or parent materials.
1 ×1 ×1 ×1 ×Clear space = height of the play-button triangle on all sides. No text, images, or elements may intrude.
120 px / 32 mm
24 px / 6 mmFull logo: min 120 px on screen, 32 mm in print. Icon mark: min 24 px / 6 mm.
✓Do
- Use provided files without modification
- Parent (teal) logo for all marketing & website
- Child (blue) logo only in child-facing products
- Place on solid or simple gradient backgrounds
- Maintain clear-space requirements
- Use the icon mark when space is limited
✕Don’t
- Rotate, stretch, or distort the logo
- Change logo colors or apply filters
- Add drop shadows, outlines, or effects
- Place on busy or low-contrast backgrounds
- Mix parent and child logos in the same context
- Recreate the logo with other fonts or icons
- Crop or partially obscure the logo
- Animate the logo without approval
| File | Variant | Background | Use for |
|---|---|---|---|
| parent/logo-black-text-transparent.png | Parent full | Light / transparent | Website, print, social |
| parent/logo-white-text-transparent.png | Parent full | Dark / transparent | Dark backgrounds, overlays |
| parent/logo-black-text-white-bg.png | Parent full | White | Documents, slides |
| parent/logo-white-text-black-bg.png | Parent full | Black | Dark slides, overlays |
| parent/icon-transparent.png | Parent icon | Transparent | App icons, favicons |
| parent/icon-offwhite-bg.jpeg | Parent icon | Off-white | App store listing |
| child/icon.png | Child icon | Transparent | Child app icon |
| child/logo-black-text-white-bg.png | Child full | White | Child app splash |
| child/logo-white-text-dark-bg.png | Child full | Dark | Child app dark mode |
All files in /public/images/brand/
Color Palette
Built around warm teal for trust, cream backgrounds for warmth, coral for action, and charcoal for typographic hierarchy.
Core Brand Colors
These are the primary colors you'll use in 90% of design work.
Extended Palette
Additional shades for hover states, backgrounds, and UI elements.
Semantic Tokens
Semantic aliases for foreground and background colors. Use these instead of raw hex in components.
--wl-fg-1Headlines--wl-fg-2Body strong--wl-fg-3Body / subtle--wl-fg-4Captions, muted--wl-fg-inverseText on dark--wl-bg-1Page background--wl-bg-2Featured sections--wl-bg-3Card alt--wl-bg-darkDark sectionsSemantic Colors
Typography
A two-font system: Fraunces for display and headings, Inter for body and UI. JetBrains Mono for code.
Role: Headings, hero text, section titles, pull quotes
Weights: 100–900 · Variable optical size
font-family: 'Fraunces', Georgia, serifCSS: var(--wl-font-display)Role: Display copy, friendlier headlines, italic emphasis
Weights: 400, 600, 700, 900 · Softer serifs
font-family: 'Fraunces Soft', Georgia, serifUsed for hero italic text (<em>) and friendlier display contexts. Same metrics as Fraunces.
Role: Body copy, UI elements, buttons, navigation, labels
Weights: 300–700
font-family: 'Inter', system-ui, sans-serifCSS: var(--wl-font-body)Fluid Type Scale
All sizes use clamp() for fluid responsive scaling.
Display XLThe quick brown fox jumps over the lazy dog40 → 64 pxHero headlinesDisplay LGThe quick brown fox jumps over the lazy dog32 → 56 pxSection heroesH1The quick brown fox jumps over the lazy dog24 → 32 pxPage headingsH2The quick brown fox jumps over the lazy dog20 → 28 pxSection headingsH3The quick brown fox jumps over the lazy dog18 → 24 pxSubsectionsBaseThe quick brown fox jumps over the lazy dog14 → 16 pxBody textSmallThe quick brown fox jumps over the lazy dog12 → 14 pxCaptions, labelsXSThe quick brown fox jumps over the lazy dog10 → 12 pxFine print- Line height: Body =
1.6. Headlines =1.1 – 1.3 - Heading weight: 600 default. 700 for hero headlines only
- Heading color: Charcoal 900
#0d0d17 - Body color: Charcoal 800
#1a1a2e, secondary Charcoal 700 - Letter spacing: Default for body;
tracking-tightfor display - Never: All-caps body text. Uppercase only for small labels with wide tracking
Spacing System
A consistent spacing scale creates visual rhythm. All values available as CSS custom properties.
--space-xs--space-sm--space-md--space-lg--space-xl--space-2xl--space-3xl--space-4xl--space-5xl--space-6xl--section-padding-y--hero-padding-y--section-padding-xBreakpoints
xs0 pxMobile portraitsm640 pxMobile landscapemd768 pxTablet portraitlg1024 pxTablet / small desktopxl1280 pxDesktop2xl1440 pxLarge desktop3xl1920 pxUltra-wideShadows & Border Radii
All shadows use teal-tinted rgba for brand cohesion: rgba(13, 115, 119, …)
--shadow-subtle-sm--shadow-subtle-md--shadow-subtle-lg--shadow-medium-sm--shadow-medium-md--shadow-medium-lg--shadow-strong-sm--shadow-strong-md--shadow-strong-lgBorder Radius
smmdlgxl2xlfullIcons
Lucide React is the sole icon library. Do not mix with other icon sets.
| Token | Size | Tailwind | Use case |
|---|---|---|---|
--icon-xs | 16 px | size-4 | Inline text icons |
--icon-sm | 20 px | size-5 | Small UI elements |
--icon-md | 24 px | size-6 | Standard UI icons |
--icon-lg | 32 px | size-8 | Featured icons |
--icon-xl | 40 px | size-10 | Hero, device selector |
--icon-2xl | 48 px | size-12 | Step headers, decorative |
- Stroke: Default 2 px. Do not adjust
- Color: Inherit via
currentColor - Gap: Min 4 px between icon and text
- Import:
import { X } from "lucide-react"
Motion
CSS-first, purposeful, always respecting prefers-reduced-motion.
--ease-out-expo--ease-out-back--ease-spring--duration-micro150 ms--duration-fast250 ms--duration-normal500 ms--duration-slow800 ms- Default:
all 0.3s var(--ease-out-expo) - Reduced motion: Always wrap in
@media (prefers-reduced-motion: reduce) - Entrance: Fade + translateY (8–40 px)
- Loading: Skeleton loaders, never spinners
- Limit: One animation per viewport at a time
Voice & Language
Empowering, not fearful. Collaborative with technology, never adversarial.
Empowering
Parents are in control. We give them tools, not lectures.
Collaborative
We work WITH YouTube and technology, not against it.
Warm & Clear
Parent-to-parent tone. Confident but never preachy.
✓Words to Use
✕Words to Avoid
Our content-filtering feature is branded "Auto-pilot". Follow strictly:
| Always hyphenated, capital A | "Auto-pilot" — never "Autopilot" or "auto pilot" |
| Never translated | Keep "Auto-pilot" in all 7 languages |
| Two-mode framing | "Manual" (whitelist) vs "Auto-pilot" (category filtering) |
| Parent-first messaging | "You set the rules, we enforce them" |
| Never say "AI-powered" | Say "Auto-pilot" instead of "AI Guardian" etc. |
| Legal exception | "artificial intelligence" in technical/legal text only |
Whitelist | Parent-approved YouTube channel list |
Auto-pilot | Category-based content filtering (branded feature) |
Manual mode | Whitelist-only mode |
Lock-in | Desktop feature preventing browser bypass |
PAC code | Parent Activation Code for child device pairing |
Channel approval | Adding a YouTube channel to the whitelist |
Backgrounds
Live previews of every background pattern used across the product. Blob animations are CSS-only and respect prefers-reduced-motion.
Desktop Backgrounds
Homepage hero. Three animated blobs (teal, warm, subtle) on cream. 15–20s animation cycles.
CTA section. Charcoal 900 () with teal + coral radial blurs.
App auth / signup. Teal gradient with grain texture overlay and soft orbs.
Alt sections. Cream secondary () with subtle blob accent.
Mobile Layouts
On mobile, blobs scale down and reduce in number. Keep backgrounds simple — one or two decorative elements max.
Background Tokens
| Token | Value | Use |
|---|---|---|
--blob-teal | #E8F5F5 | Static teal background areas |
--blob-warm | #FFF3E0 | Static warm accent areas |
--blob-teal-gradient | linear-gradient(135deg, #E8F5F5, rgba(13,115,119,0.15)) | Animated teal blobs |
--blob-warm-gradient | linear-gradient(145deg, #FFF3E0, rgba(255,107,53,0.12)) | Animated warm blobs |
--blob-subtle-gradient | linear-gradient(160deg, rgba(13,115,119,0.1), rgba(20,145,155,0.15)) | Subtle accent blobs |
--teal-glow | rgba(13,115,119,0.15) | Background glow effect |
Blob Animation Specs
blob1Flow15sTeal blob — 5 keyframes, translate + scale + border-radius morph
ease-in-out infinite
blob2Flow18sWarm blob — 4 keyframes, translate + scale + rotate + morph
ease-in-out infinite
blob3Flow20sSubtle blob — 6 keyframes, translate + scale + morph
ease-in-out infinite
- Desktop: Max 3 blobs per section. Hidden on screens < 1024px (
hidden lg:block) - Mobile: Reduce to 1–2 smaller blobs or use static gradients only
- Blur: All blobs use
filter: blur(2px)for soft edges - Opacity: Range 0.5–0.7 for blobs; 0.15–0.20 for radial CTA blurs
- Pointer events: Always
pointer-events: noneon decorative elements - Reduced motion: Wrap in
@media (prefers-reduced-motion: reduce)to disable - Grain overlay: SVG noise texture at
opacity: 0.035–0.04withmix-blend-mode: overlay
Imagery
- Warm & natural: Real family moments, not posed
- Diverse: Families of all backgrounds
- Tech-positive: Kids engaged with devices (not scared)
- Bright: Warm lighting — never dark / moody
- Context: Living rooms, kitchens, classrooms
- Style: Line + shadow + shape — clean, minimal, conceptual
- Palette: Teal · Coral · Charcoal · Cream only
- Backgrounds: Colored cards (cream, teal-tint, peach, or charcoal)
- Shadows: Soft drop shadows beneath illustrations for depth
- 3D characters: Used for archetypes (survey) only
- No pixel art: Legacy style — do not replicate
Brand Illustrations
Consistent icon-illustrations used across the product. Line + shadow + shape style with brand colors on tinted backgrounds.
Design Tokens
Complete CSS custom property reference. All tokens are defined in globals.css as :root variables prefixed with --wl-.
Decorative Blob Tokens
Component Patterns
Key UI patterns from the website design system. These are the building blocks for marketing pages and product UI.
Promo Ribbon
Eyebrow Labels
Hero Section
Approve the channels your kid actually loves.
You set the rules. We enforce them.
Step Cards — How It Works
Benefit Card Carousel
Whitelist what you trust
Approve the channels your kid actually loves. Block everything else.
Floating Pills
White pill, border-radius: 999px, teal-tinted shadow. Float with animation: floatPill 4s ease-in-out infinite. Used in hero near phone mockups.
Phone Frame
#1a1a1a background, border-radius: 42px, 10px padding#000, 90 × 28 px, border-radius: 16px, centered topaspect-ratio: 9/19.5, border-radius: 32px, object-fit: cover0 30px 50px -10px rgba(13,115,119,0.25)scale(1.06))perspective(1200px) rotateY(±12deg)
Social Media
Platform dimensions, safe zones, and brand treatment for social assets.
1200 x 6301200 x 6751500 x 5001080 x 10801080 x 19201080 x 13501200 x 6271128 x 1911200 x 630820 x 3121280 x 7201000 x 1500#FFFDF7or teal gradienticon-offwhite-bg.jpeg