---
version: alpha
name: Lolafel
description: Warm-cream playful — a candy-bright personality-quiz brand on a toasted ivory canvas (#FFF3E1) with near-black coffee ink (#1c0f00), hot-pink and orange primaries, big squishy radii (22–40px), and rounded display type (CreatoDisplay + ZTChintzy) that feels like a sticker book.

colors:
  # Canvas + ink
  background: "#fff3e1"
  surface: "#ffffff"
  surface-cream: "#fff3e1"
  ink: "#1c0f00"
  ink-secondary: "#555555"
  ink-muted: "#9ca3af"

  # Playful brand accents
  primary: "#ff2f85"      # hot pink — primary CTA fill
  orange: "#ffa41c"       # warm orange
  yellow: "#ffe900"       # highlight yellow
  pink-soft: "#ffbac2"    # soft blush pink
  blue: "#0141ff"         # electric blue accent
  blue-sky: "#bfd4d6"     # dusty sky blue
  green: "#00b261"        # success green

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fff3e1"
  on-orange: "#1c0f00"

  # Neutral / borders
  border: "#e4e4e7"
  border-soft: "#e5e7eb"
  danger: "#dc2626"

typography:
  display-hero:
    fontFamily: "ZTChintzy, var(--font-zt), ui-sans-serif, system-ui, sans-serif"
    fontSize: 140px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -2px
  display-large:
    fontFamily: "ZTChintzy, var(--font-zt), ui-sans-serif, system-ui, sans-serif"
    fontSize: 100px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1px
  heading-1:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 50px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -1px
  heading-2:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-3:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  title:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "CreatoDisplay, var(--font-creato), ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  md: 10px
  lg: 22px
  xl: 26px
  2xl: 30px
  3xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.orange}"
    textColor: "{colors.on-orange}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  badge:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.3xl}"
    padding: 32px
    borderColor: "{colors.border}"

  card-cream:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
    borderColor: "{colors.border}"

  card-quiz:
    backgroundColor: "{colors.pink-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 14px 18px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: 16px 24px
---

# Lolafel Design System

## Overview

Lolafel is the visual equivalent of a giggle. It's a personality-quiz brand built to be shared, and every design decision pushes toward warmth, play, and approachability over polish. The canvas is a toasted-ivory cream (`{colors.background}`) — not a sterile white but a soft, dessert-adjacent backdrop that immediately feels friendlier than the typical SaaS page. Against that cream sits a near-black coffee ink (`{colors.ink}`, `#1c0f00`), a deep warm brown that reads as text without the harshness of pure black. The whole palette is candy-store: hot pink, warm orange, electric yellow, blush pink, and a single jolt of electric blue.

Typography carries the personality. The brand pairs a rounded display face — `ZTChintzy` for the giant hero numerals and wordmarks (running up to 140px), and `CreatoDisplay` for headings and body. CreatoDisplay is a friendly geometric sans with generous curves; at weight 900 it makes headlines feel chunky and huggable rather than corporate. There's no thin, austere, negative-tracked type here — letterforms are soft, weights run heavy (700–900 for anything that matters), and the mood is "sticker book," not "spec sheet."

The shape language is squishy. Radii are large and confident — quiz cards round at 26–40px, and every button is a full pill (`{rounded.pill}`). Nothing has a sharp corner. Buttons are bold flat fills of hot pink (`{colors.primary}`) or orange (`{colors.orange}`) with white or coffee-ink text, and they flip to dark-ink on hover for a punchy, tactile press feel. Decorative SVG clouds, flowers, and stars float around the content, reinforcing the whimsical, illustrated-storybook personality.

**Key Characteristics:**
- Toasted-cream canvas (`{colors.background}`, `#FFF3E1`) instead of white — warm by default
- Coffee-ink text (`{colors.ink}`, `#1c0f00`) — a deep warm brown, never pure black
- Candy palette: hot pink (`{colors.primary}`), orange (`{colors.orange}`), yellow (`{colors.yellow}`), blush (`{colors.pink-soft}`), electric blue (`{colors.blue}`)
- Rounded display type: ZTChintzy for giant hero numerals (up to 140px), CreatoDisplay for headings/body
- Heavy weights — 700 to 900 for headings and buttons, nothing timid
- Big squishy radii (22–40px on cards) and full-pill buttons everywhere
- Flat bold-fill buttons that flip to dark ink on hover
- Decorative SVG clouds, flowers, and stars as ambient storybook accents

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): The signature toasted-ivory page background. Warm, soft, dessert-like.
- **White** (`{colors.surface}`): Elevated cards and inputs that need to pop off the cream.
- **Coffee Ink** (`{colors.ink}`): Primary text and headings — a deep warm brown, not black.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted body and helper text.
- **Ink Muted** (`{colors.ink-muted}`): Placeholders, disabled labels.

### Brand Accents
- **Hot Pink** (`{colors.primary}`): The primary CTA fill and headline highlight color.
- **Orange** (`{colors.orange}`): Secondary action color, warm energy.
- **Yellow** (`{colors.yellow}`): Highlights, badges, sticker accents.
- **Blush Pink** (`{colors.pink-soft}`): Soft quiz-card backgrounds, gentle fills.
- **Electric Blue** (`{colors.blue}`): A single contrasting jolt for links and accents.
- **Sky Blue** (`{colors.blue-sky}`): Dusty atmospheric tint, cloud illustrations.
- **Green** (`{colors.green}`): Success / correct-answer states.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on hot-pink fills.
- **On Ink** (`{colors.on-ink}`): Cream text on dark-ink fills (hover state).
- **On Orange** (`{colors.on-orange}`): Coffee ink on orange — keeps contrast warm.

### Neutral
- **Border** (`{colors.border}`): Soft card and input outlines.
- **Danger** (`{colors.danger}`): Error and destructive states.

## Typography

### Font Family
- **Display**: `ZTChintzy` — rounded display face for giant hero numerals and wordmarks.
- **Primary**: `CreatoDisplay` — friendly geometric sans for headings and body (fallback `var(--font-creato), ui-sans-serif, system-ui, sans-serif`).
- **System fallback**: Inter is loaded as the Next.js system fallback stack.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 140px ZTChintzy — giant hero numerals / wordmark |
| `display-large` | 100px ZTChintzy — secondary big display |
| `heading-1` | 50px CreatoDisplay weight 900 — page headlines |
| `heading-2` | 40px section headings |
| `heading-3` | 34px sub-section headings |
| `title` | 26px card / question titles |
| `body-large` | 21px lead paragraphs |
| `body` | 18px standard reading text |
| `body-small` | 16px secondary UI text |
| `button` | 18px weight 700 — button labels |
| `caption` | 12px metadata, badges |

### Principles
- **Soft and chunky, never austere**: Rounded letterforms and heavy weights (700–900). The opposite of thin, negative-tracked minimalism.
- **Display face for personality**: ZTChintzy at giant sizes carries the brand's playful, hand-feel voice on hero numerals and wordmarks.
- **CreatoDisplay does the work**: Headings, copy, and buttons all live in CreatoDisplay — one friendly geometric sans across the interface.
- **Weight, not size, signals importance**: Headlines jump to weight 900 to feel huggable rather than relying on extreme scale alone.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening up to `{spacing.3xl}`–`{spacing.4xl}` for the generous, breathable padding around playful illustrated sections.

### Grid & Container
- Centered single-column hero with floating decorative SVGs (clouds, flowers, stars)
- Quiz flow uses centered, full-width stacked cards
- Generous whitespace lets the cream canvas and illustrations breathe

### Whitespace Philosophy
- **Friendly breathing room**: Big padding and rounded cards keep the experience light and uncrowded.
- **Illustration as atmosphere**: Decorative SVGs float in the margins to fill space with charm, not clutter.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `md` | 10px | Small inline elements |
| `lg` | 22px | Inputs, small cards |
| `xl` | 26px | Quiz cards, panels |
| `2xl` | 30px | Cream cards |
| `3xl` | 40px | Large feature cards |
| `pill` | 9999px | All buttons, badges, chips |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Hot-pink fill, white text, full pill, weight 700. Flips to dark coffee-ink (`{components.button-primary-hover}`) on hover.
- **`button-secondary`** — White fill, coffee-ink text and outline, full pill.
- **`button-accent`** — Orange fill with coffee-ink text for a warm alternate CTA.

### Cards
- **`card`** — White surface, 40px radius, soft border. The default content panel.
- **`card-cream`** — Cream-on-cream panel for sections that blend into the canvas.
- **`card-quiz`** — Blush-pink quiz panel, 26px radius — the playful answer container.

### Inputs
- **`input`** — White surface, 22px radius, soft border. Coffee-ink text.

### Badges
- **`badge`** — Yellow sticker pill with coffee-ink text, full pill, 12px caption type.

### Navigation
- **`nav-bar`** — Cream header that blends with the canvas, weight-700 CreatoDisplay links.

## Do's and Don'ts

### Do
- Use the cream canvas (`{colors.background}`) as the default page background — warm, not white
- Use coffee ink (`{colors.ink}`) for text, never pure black
- Make buttons full pills with bold flat fills (hot pink or orange)
- Use heavy weights (700–900) for headings and buttons
- Keep radii large and squishy (22–40px on cards)
- Let decorative clouds/flowers/stars float as ambient charm
- Flip primary buttons to dark ink on hover for a tactile press feel

### Don't
- Don't use thin, negatively-tracked, austere type — this brand is chunky and friendly
- Don't introduce sharp corners — everything rounds generously
- Don't put hot pink or orange as the page background; they are accents/CTAs only
- Don't use pure white as the canvas — the cream warmth is core to the identity
- Don't mute the palette — the candy brightness is the point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | Single column, smaller hero type, mobile cloud SVGs |
| Tablet | 768–1024px | Wider cards, mid-size illustrations |
| Desktop | 1024–1440px | Full layout, large floating decorations |
| Large Desktop | >1440px | 1920px illustration variants, centered with generous margins |

### Collapsing Strategy
- Hero numerals scale down from 140px proportionally on mobile
- Decorative SVGs swap to responsive variants (1920 / 1440 / 768 / mobile)
- Buttons stay full-pill and tappable at all sizes
- Cards stack single-column on mobile with maintained large radii

## Agent Prompt Guide

### Quick Color Reference
- Page background: Cream `{colors.background}`
- Heading / body text: Coffee Ink `{colors.ink}`
- Primary CTA: Hot Pink `{colors.primary}` with white text
- Secondary CTA: Orange `{colors.orange}` with coffee-ink text
- Highlight / badge: Yellow `{colors.yellow}`
- Quiz card fill: Blush Pink `{colors.pink-soft}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}`. Giant numeral in ZTChintzy 140px coffee-ink `{colors.ink}`. Headline in CreatoDisplay 50px weight 900. Hot-pink full-pill CTA (`{colors.primary}`, white text, 16px 32px padding) that flips to dark ink on hover."
- "Design a quiz card: blush-pink `{colors.pink-soft}` fill, 26px radius, CreatoDisplay 26px weight 700 question title in coffee ink, full-pill answer buttons."
- "Build a badge: yellow `{colors.yellow}` background, coffee-ink text, full pill, 12px CreatoDisplay weight 500."

### Iteration Guide
1. Start from the cream canvas — warmth is the foundation, never white
2. Buttons are always full pills with bold flat fills, flipping to dark ink on hover
3. Weights run heavy (700–900) — chunky and friendly, never thin
4. Radii stay large (22–40px) — no sharp corners anywhere
5. Brand colors are accents and CTAs; the canvas stays cream and ink stays coffee-brown

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lolafel. Brand names and trademarks belong to their respective owners.