togetherhood Palette Explorer
Primary
Secondary
Accent
Design System v0.1 -- Draft

Togetherhood
Design System

Pick your primary, secondary, and accent colors above to see the entire system update live.

Color System

The active palette below updates when you change selections in the configurator. Each base color generates a full shade ramp.

Primary

Secondary

Accent

Neutrals

Aa
neutral-0#FFFFFF
Aa
neutral-50#FAFAFA
Aa
neutral-100#F5F5F5
Aa
neutral-200#EEEEEE
Aa
neutral-300#DDDDDD
Aa
neutral-400#BDBDBD
Aa
neutral-500#9E9E9E
Aa
neutral-600#757575
Aa
neutral-700#616161
Aa
neutral-800#424242
Aa
neutral-900#212121

Semantic

Success
success-50#E8F5E9
Success
success-500#2E7D5A
Warning
warning-50#FFF8E1
Warning
warning-500#E68A00
Error
error-50#FFEBEE
Error
error-500#D32F2F
Info
info-50#E3F2FD
Info
info-500#1976D2

Typography

Futura for display and headings. Inter for everything else. A 1.25-ratio scale from 12px to 48px.

text-5xl
3rem / 48px
Every neighborhood is an education
text-4xl
2.25rem / 36px
Enrichment your community trusts
text-3xl
1.875rem / 30px
How It Works
text-2xl
1.5rem / 24px
Featured Programs
text-xl
1.25rem / 20px
Spanish Immersion Soccer
text-base
1rem / 16px
Our platform makes it easy for schools to discover, book, and manage enrichment programs from vetted local specialists.
text-sm
0.875rem / 14px
Thursdays, 2:30 - 5:00 PM · Ages 7-9 · $297/month
overline
0.75rem, caps
Program Details

Spacing & Layout

A 4px base unit. Consistent spacing creates rhythm and reduces visual noise.

Spacing Scale

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px

Border Radius

radius-sm4px
radius-md8px
radius-lg12px
radius-xl16px
radius-fullpill

Elevation & Shadow

Four levels of depth. Elevation implies interactivity or focus.

shadow-sm
0 1px 2px
shadow-md
0 4px 6px
shadow-lg
0 10px 15px
shadow-xl
0 20px 25px

Components

Buttons, inputs, and cards. Colors update live from the configurator above.

Buttons

Default

Disabled

Sizes

Form Inputs

The name of the partner organization
Please enter a valid school name

Cards

Featured Program
Exploring the NYC Art World
A 10-week immersive journey through galleries, studios, and street art with a local artist guide.
Ages 7-9 Thursdays 12 spots left
For Schools
Enrichment your district can trust
Background-checked instructors, automated billing, real-time attendance.
Program Stats
Active
847
Students enrolled
42
Active programs
98%
Satisfaction rate
23
Partner schools

Doodle Usage

Don't kill them. Contain them. Doodles are seasoning, not the main course.

Correct: Subtle Hero Background (Bubbles)

You chose this city for a reason.

Show your kids why. Togetherhood connects your community with exceptional local enrichment.

Usage Guidelines

Do
  • Use as subtle background texture at low opacity (5-10%)
  • Use a single doodle per section, large scale
  • Use as section dividers between content blocks
  • Use on 404 / empty state pages
  • Stick to single-color doodles from the primary or accent palette
Don't
  • Don't overlay doodles on cards, forms, or interactive UI
  • Don't use doodles at full opacity competing with text
  • Don't use in the admin dashboard or partner portal
  • Don't use multiple doodle types on one section
  • Don't use Bubblegum/Apricot doodles on institutional pages

Doodle Library (SVG)

Squiggle Wave
Spiral
Double Wave
Burst
Rainbow Arc
Lazy S
Bubbles
Zigzag
Dot Wave

Usage Patterns

Section Divider (Zigzag)
Content above
Content below
Section Divider (Dot Wave)
Content above
Content below
Card Accent (doodle in bottom-right)
Pottery Workshop
Ages 6-10 · Tuesdays
Hip Hop Dance
Ages 8-12 · Thursdays
Coding Club
Ages 10-14 · Fridays
Empty State / 404 (Spiral)
No programs yet
Check back soon -- new activities are added every week.
Empty State / 404 (Burst)
Nothing here yet
We're working on adding programs in your area.
Inline Accent (Underline / Tag)
Featured New This Week Popular Trending
Footer / CTA Band (Rainbow Arc)
Ready to bring enrichment to your school?
It takes 5 minutes to get started.

What Not to Do

Common anti-patterns. Each example below shows a doodle misuse -- hover to see what's wrong.

Find the perfect enrichment program for your child this fall semester.
Full opacity over text
Burst at 50% dominates the layout. Keep below 10%.
Explore programs near you today.
Mixing doodle types
Squiggle + burst + zigzag in one section = visual noise. Pick one.
Doodles on forms
Background doodles on interactive elements confuse focus and reduce usability.
Course Status Enrolled
PotteryActive12/15
DanceDraft0/20
CodingActive18/20
Doodles in admin/data views
Data tables and dashboards need clarity. Doodles are consumer-facing only.
Enrichment programs for every family.
Multi-color doodles
Doodles should be single-color (white or from the same ramp). Mixing palette roles creates visual clutter.
4 locations near you
12 programs this week
98% parent satisfaction
Doodles as icons
Doodles are decorative, not informational. Use proper icons for UI affordances.

Three Registers

One token system, three contexts. The same palette produces different feels depending on density, decoration, and hierarchy.

School / Partner
Fall 2026 Overview
On Track
312
Students
18
Programs
Parent-Facing
Photo
Arts & Culture
Imagination & Creation in Color
Thursdays, 2:30 - 5pm · Ages 7-9
$297/mo
Admin / Internal
ProgramStatusEnrolled
NYC Art WorldActive24/30
Immersion SoccerPending18/25
STEM RoboticsDraft0/20

Accessibility

Contrast ratios update live as you change the palette. These are the key pairings to check.

Key Pairings (Live)