Logo K.C. Sun & Stars

Figma Design System & Style Guide

Version 1.0 (Presentation-Ready Spec for Client Review)

01 — Color Palette Styles

PRIMARY TEXT & BRAND CORES Deep Navy #1E293B | rgb(30, 41, 59)
PRIMARY CTA & BRAND ACCENTS Sun Gold #FBBF24 | rgb(251, 191, 36)
CARD BG & BACKDROP FLOATS Sky Blue #E0F2FE | rgb(224, 242, 254)
SUCCESS PILLS & SUCCESS BADGES Sage Green #D1FAE5 | rgb(209, 250, 229)
SECONDARY CTAS & WARINGS Warm Coral #FFEDD5 | rgb(255, 237, 213)
BODY BACKGROUND CANVAS Warm Cream #FFFDF9 | rgb(255, 253, 249)

02 — Typography Scale

Font Pairing Families
Headings & Displays Fredoka
Body Copy & UI text Plus Jakarta Sans
H1 Hero Title - 48px / Bold / LH 1.2

Where Little Stars

Desktop Header
H2 Section Heading - 36px / Bold / LH 1.3

Growing Bright Futures

Section H2
H3 Card Heading - 20px / Bold / LH 1.4

Safe & Nurturing

Card H3
Body text - 16px / Regular / LH 1.6

A safe, nurturing and engaging environment where children can learn and grow.

Regular Body
Small text / Badge - 12px / Bold / LH 1.0 6 wks - 12 mos
Badge Label

03 — Spacing Grid (8pt System)

Layout components utilize an 8pt modular grid system for padding, margins, and heights to enforce clean balance.

4px (0.25rem) — Extra Small spacer
8px (0.5rem) — Standard Gap
16px (1.0rem) — Card Padding
24px (1.5rem) — Inner Section Grid Gap

04 — UI Components

Button Primary — Default / Hover State
Button Secondary — Standard border outline
Input Form Fields
6 wks - 12 mos
Infant Care

A warm, sensory-rich space designed for early movement.