Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Bobolobo
Bobolobo is a warm, story-book brand for early childhood — a Brooklyn nursery rendered in cocoa, cream, and crayon-box pastels. The palette pairs a deep mahogany ink with off-white linen, then sprinkles in mint, lilac, peach, blue, yellow, and clay accents that echo construction-paper collages and finger-painted afternoons. Hand-drawn squiggle illustrations and rounded photo cards live alongside Parkinsans, a soft geometric sans whose generous semi-bold weight feels like the careful printing of a child's first name. The template breathes — sections are tall, radii are large, buttons are pill-shaped, and tags wear blurred glass backgrounds. Imagery centers laughing children at eye-level on textured rugs and floors. Everything is designed to feel safe, slow, and a little playful — never institutional, never busy.
Sections from Bobolobo
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Blog Grid with Tab Navigation
View section
Fixed Navigation Bar with Dropdowns
View section
Video CTA Footer Section
View section
Hero Section with Background Video
View section
Video Testimonials Section
View section
Statistics Grid with Background Video
View section
Animated Text with Inline Images
View section
Gallery with Lightbox Overlay
View section
Team Grid with Hover Effects
View section
Philosophy Section with Visual Elements
View section
Interactive Document Grid
View section
Blog Article Hero Template
View section
Colors
Canvas
Linen Cream
#f6f3f0
Page canvas. Default warm off-white background for sections, cards, and lifted surfaces in light mode.
Ink
Cocoa Ink
#381d0f
Primary text & dark canvas. Headlines, body copy, and the dark mahogany surfaces used in inverted sections.
Deep Cocoa
#27140a
Lifted dark surface. Used behind dark sections that need a slightly deeper layer than cocoa-ink.
Accent
Sky Paper
#d8e3f1
Soft blue surface. Card and tag backgrounds with a calm, watercolor blue feel.
Clay Stone
#e6ded4
Soft clay surface. Neutral warm backgrounds for forms and contact panels.
Lilac Mist
#e3d3f5
Soft lilac surface. Backgrounds for marquee ribbons, callout chips, and scribble illustrations.
Peach Blush
#ffe3c4
Soft peach surface. Warm card backgrounds and decorative panels.
Plum Velvet
#4c3e5e
Brand accent. A muted aubergine reserved for select brand moments and decorative accents.
Playground Mint
#d8f0e0
Soft mint surface. Card backgrounds and label tags conveying calm and growth.
Buttercream Yellow
#fae6b9
Soft yellow surface. Used for the philosophy and footer panels — bright but never neon.
State — utility only
Error Jam
#c94040
Error state. Form validation errors and destructive UI cues only.
Success Clover
#2ad87f
Success state. Form confirmation and positive UI feedback only.
Warning Paprika
#c56a21
Warning state. Used only for cautionary UI moments — never decorative.
Typography
The quick brown fox jumps
Single-family system. Handles headings, body, labels, and buttons with a warm geometric voice.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
tag16pxpill9999pxcards32pxinput20pxsmall8pxnavbar24pxbuttons32pxdefault20pxbutton-circle24pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Linen Cream
Level 2Pure Lift
Level 3Buttercream Panel
Level 4Cocoa Ink
Level 5Deep Cocoa
Do's and don'ts
- Pair Cocoa Ink text with the Linen Cream canvas as the foundation of every layout — this contrast is the brand.
- Round everything generously: 32px on cards and primary buttons, 20px on inputs and tags, fully pill on circular avatars and slider buttons.
- Use the pastel accent surfaces (mint, peach, lilac, blue, buttercream, clay) one-at-a-time per section as a flat color wash — never blend or gradient them.
- Set Parkinsans display headlines tight: -2px to -4px letter-spacing and line-height ≤ 1.1 for the storybook-confident feel.
- Float the navbar as a floating pill 16px from the top edge with backdrop-blur over hero imagery.
- Pair flat photography of children with hand-drawn squiggle SVGs in matching pastel tones to reinforce the playful atmosphere.
- Use ALL CAPS labels at 11–13px with 0.75px tracking for tags, eyebrows, and metadata.
- Don't use sharp 0px or small 4px corners on primary surfaces — every container should feel pebble-rounded.
- Don't introduce a serif or a second display family; Parkinsans is the only voice across headings, body, and UI.
- Don't stack multiple pastel accents inside one card — pick one wash and let it stand alone.
- Don't use the state colors (Warning Paprika, Error Jam, Success Clover) as decorative or brand fills — they are reserved for form feedback only.
- Don't tighten section padding below 80px on desktop; the brand breathes at 120–200px between sections.
- Don't use pure black for text or buttons — Cocoa Ink (#381d0f) is the deepest color in the system.
- Don't add drop shadows heavier than a soft 8% cocoa tint; the aesthetic is matte, not glossy.
Example prompts
Hero section
Values section
Program cards
Footer CTA
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide