---
version: alpha
name: "Mama Shelter"
description: "Playful-maximalist hotel brand built on Philippe Starck irreverence — electric yellow CTAs, candy-pink accents, Dirty Brush script headlines, and a GT Walsheim grotesque backbone that oscillates between loud all-caps and generous open tracking."

colors:
  # Surface / canvas
  background: "#ffffff"          # light canvas that ink (#000000) reads on — was #000000 (1:1 fail); dark canvas is surface-dark
  surface: "#ffffff"
  surface-dark: "#000000"

  # Ink / text
  ink: "#000000"
  ink-on-dark: "#ffffff"
  ink-secondary: "#555555"
  ink-muted: "#6c6c6c"

  on-background: "#ffffff"
  on-surface: "#000000"

  # Brand accent — electric yellow
  primary: "#ffea00"
  on-primary: "#000000"
  primary-hover: "#d9c700"  # was rgb(217,199,0) — hover state from dembrandt palette

  # Playful secondary accent — candy pink
  secondary: "#fec6df"
  on-secondary: "#000000"
  secondary-hover: "#d8a8be"  # was rgb(216,168,190) — hover state from dembrandt palette

  # Borders
  border: "#c5c5c5"
  border-dark: "#e4e4e4"

  # Shadow tints (opaque approximation — Google format requires hex)
  shadow-soft: "#888888"  # was rgb(136,136,136) from dembrandt shadow extraction

  # Semantic
  error: "#ef4444"

typography:
  display-hero:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 70px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  display-brush:
    fontFamily: "DirtyBrush, Dirty Brush, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0px
  heading-brush:
    fontFamily: "DirtyBrush, Dirty Brush, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 0.83
    letterSpacing: 0px
  heading-sub:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.36
    letterSpacing: 0px
  body-large:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  button-ui:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  nav-link:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.15px
  caption:
    fontFamily: "GTWalsheimPro, GT Walsheim Pro, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 8px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 50px
  4xl: 60px

rounded:
  none: 0px
  sm: 3px
  md: 5px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 23px 30px
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 23px 30px
    textTransform: uppercase
  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 23px 30px
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 23px 30px
    textTransform: uppercase
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-dark}"
    border: "2px solid {colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 16px
    textTransform: uppercase
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    border: "2px solid {colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 16px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 20px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    border: "2px solid {colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 6px 0px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 6px 0px
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  nav-item:
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    padding: 5px 15px
  nav-item-hover:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 5px 15px
---

# Mama Shelter Design System

## Overview

Mama Shelter arrives like a hotel lobby designed by someone who never read a brand standards guide. The canvas opens on deep `{colors.background}` — pure black, no warmth, no apology — and from it erupts `{colors.primary}` electric yellow: a color that communicates neither luxury nor restraint, but sheer irreverence. Designed under the creative direction of Philippe Starck, the visual system is a collision between the boutique hotel industry's aspirational restraint and the deliberate chaos of a late-night bar where someone has scrawled a joke on every available surface. The site alternates black backgrounds with white, creating a theatrical flip between acts, and the constant motion vocabulary (0.3s ease across all interactive elements) ensures nothing sits still.

The typographic split at the heart of the system tells the whole story in two fonts. GT Walsheim Pro — a round-cornered modernist grotesque with warm proportions — handles the rational framework: navigation, body text, button labels, structured wayfinding. Then Dirty Brush crashes in, a hand-lettered script face with uneven ink weight and expressive baseline wobble, carrying the brand voice in display moments and decorative callouts. These two fonts are not opposites that harmonize; they are deliberately mismatched, like a suit with paint-splattered sneakers. The combination signals that Mama Shelter knows what hospitality design usually looks like, and has chosen to do something else entirely.

What keeps the system from collapsing into chaos is its color discipline. The palette is actually minimal: `{colors.background}` black, `{colors.surface}` white, `{colors.primary}` yellow, `{colors.secondary}` candy pink, and a single mid-gray. Every loud moment in the design is one of these five. The buttons are oversized (23px × 30px padding), all-caps weight 700, and heavily traced in yellow or black against their respective backgrounds. The CTAs are not subtle. They are the design system's declaration of intent: unapologetically direct, cheerfully abrasive, and impossible to miss.

**Key Characteristics:**
- GT Walsheim Pro (weight 500/700) carries all structural text; Dirty Brush script carries expressive display moments
- Electric yellow `{colors.primary}` is the primary CTA color — high-chroma, no-apology brand expression on black canvas
- Candy pink `{colors.secondary}` provides a second playful accent, softer but still saturated
- Button padding is exaggerated (23px 30px) with weight 700 uppercase and 5px radius — generous, assertive, impossible to miss
- Black/white canvas alternation creates theatrical scene-breaks between major page sections
- `{rounded.md}` (5px) is the dominant corner language — softened but not soft
- All-caps UI text (`text-transform: uppercase`) on CTAs, nav labels, and section markers
- 0.3s ease across all transitions — buttons, links, hero elements — consistent motion vocabulary
- Dirty Brush at low line-height (0.83–1.0) creates dense, inky, hand-painted headline blocks
- Heavy underline borders (`0px 0px 2px solid`) on link hover rather than color changes
- `{colors.border}` is a neutral silver-gray; strong structural borders use `{colors.ink}` directly

## Colors

### Primary
- **Brand Black** (`{colors.background}`): The main canvas for dark sections — navigation background, full-page sections, dark-mode panels. Pure black, no warmth.
- **Clean White** (`{colors.surface}`): The inverted canvas for content sections, hotel room listings, and form backgrounds.
- **Text Black** (`{colors.ink}`): Primary ink on white sections — headings, body text, form labels, border strokes.

### Brand Accent
- **Electric Yellow** (`{colors.primary}`): The signature Mama Shelter CTA color. Applied to primary buttons, active tab underlines, select-state highlights, and key promotional calls to action. On hover, shifts to `{colors.primary-hover}`.
- **Candy Pink** (`{colors.secondary}`): Playful secondary accent — appears in decorative UI contexts, imagery, and brand moments. On hover, darkens to `{colors.secondary-hover}`.

### Text States & Interaction
- **Smoke** (`{colors.ink-secondary}`): Link hover state — both black links and white links converge on this value on hover, providing a unified muted-hover vocabulary.
- **Mid Gray** (`{colors.ink-muted}`): Secondary text, metadata, supporting labels on white surfaces.
- **Inverted Ink** (`{colors.ink-on-dark}`): White text for use on black backgrounds — navigation items, hero text, dark-section body.

### Borders & Structure
- **Silver Border** (`{colors.border}`): Used on form fields, table dividers, and tab components — neutral, recedes into the layout.
- **Divider** (`{colors.border-dark}`): Light hairline used in modal separators and section edges.
- **Shadow Tint** (`{colors.shadow-soft}`): The sole extracted shadow color — a mid-gray used in the hairline box-shadow that defines depth on interactive cards.

## Typography

### Font Family
- **Primary**: `GTWalsheimPro` (self-hosted: `GTWalsheimProMedium.woff2`, `GTWalsheimProBold.woff2`), with fallback `Arial, sans-serif`. Warm, round grotesque with even stroke weight.
- **Display Brush**: `DirtyBrush` (self-hosted: `DirtyBrush.woff2`), with fallback `Arial, sans-serif`. Hand-lettered brush script — uneven, expressive, deliberately imperfect.
- *Google Font alternatives: `Nunito` or `Plus Jakarta Sans` approximate GT Walsheim's warmth; there is no close Google substitute for Dirty Brush — `Dancing Script` or `Caveat` approximate the genre, not the specific character.*

### Hierarchy

The complete type scale is in the `typography:` token block above. Reference tokens directly via `{typography.display-hero}`, `{typography.display-brush}`, etc.

| Token | Use |
|---|---|
| `display-hero` | Full-page hero headlines, large section titles — GT Walsheim 70px/500 |
| `display-brush` | Dirty Brush expressive callouts, decorative sub-heads, brand voice moments |
| `heading-section` | Structural section titles on white or dark canvases — 30px/500 |
| `heading-brush` | Dirty Brush at tight 0.83 line-height for dense, painted headline blocks |
| `heading-sub` | Sub-section labels, card headings — 22px/500 |
| `body-large` | Lead body text, featured paragraphs — 25px uppercase |
| `body` | Standard reading copy — 18px/400 with generous 1.67 line-height |
| `button-ui` | All CTA labels — 26px weight 700 uppercase |
| `nav-link` | Navigation items — 15px weight 700 with 0.15px tracking |
| `caption` | Metadata, fine print, pricing footnotes — 12px/400 |

### Principles
- GT Walsheim carries the architecture; Dirty Brush carries the personality. Never use Dirty Brush for body text or navigation — its role is emotional punctuation.
- Button labels and nav items run uppercase weight 700 at all times — this is not a setting to override.
- Body copy runs at `{typography.body}` with a generous 1.67 line-height, giving content sections breathing room that offsets the visual density of the hero and nav zones.
- Letter-spacing is neutral throughout (0px) except for `{typography.nav-link}` (0.15px) and contextual uppercase labels at 0.75px — the system does not rely on tracking for emphasis.
- Dirty Brush at line-height 0.83 creates a stacked-letters effect reminiscent of hand-painted sign lettering. Use it at sizes where the ink-weight irregularity reads clearly (≥ 23px).

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (the most frequent extracted value at 1,476 instances), with 8px, 20px, and 30px forming the primary structural steps.

The spacing personality is loud-and-close: small gutters between elements within sections, followed by generous (40–60px) vertical breaks between sections. There is no passive whitespace — the layout is dense until it isn't.

### Grid & Container
- Max content width: ~1440px (largest active breakpoint), with 1200–1340px as the typical content-column boundary
- Hero: full-width, full-bleed photography or video with overlay type
- Room/property grids: 2–3 column with moderate gutters, photography-forward cards
- CTA sections: full-width single-column with centered oversized buttons

### Whitespace Philosophy
- **Scene alternation over neutral breathing room**: black and white sections switch roles rather than separating with spacers — the inversion IS the visual break.
- **Dense inside, loose between**: within a section, content sits close; the vertical break between sections does the spacious work.
- **Typography does not float** — text sits anchored to cards, sections, or the grid. Isolated centered text with no visual anchor is rare.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default canvas surface, full-bleed sections, plain text |
| Hairline (Level 1) | `rgb(136,136,136) 0px 0px 1px 0px` | Interactive card hover, form field containers |
| Subtle (Level 2) | `rgba(0,0,0,0.2) 1px 1px 4px 0px` | Modals, date-picker dropdowns |
| Card (Level 3) | `rgba(0,0,0,0.25) 0px 1px 3px 0px` | Elevated content panels, popup containers |
| Dialog (Level 4) | `rgba(0,0,0,0.4) 0px 0px 30px 0px` | Full-screen overlays, booking modals |
| Focus Ring | `1px solid {colors.ink}` on white; `2px solid {colors.surface}` on dark | Input focus, button keyboard focus |

**Shadow Philosophy**: The shadow system is theatrical rather than material. The dominant extracted shadow is a one-pixel gray halo (`{colors.shadow-soft} 0px 0px 1px`) — technically a definition shadow, not an elevation statement. Heavier shadows (0–30px spread) reserve for full-screen booking flows and overlay panels, creating dramatic depth precisely when a guest is committing to a reservation. Day-to-day surfaces are flat; the drama escalates when the stakes escalate.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Input underlines, horizontal dividers, some UI edges |
| `sm` | 3px | Default button corners, small span/badge chips |
| `md` | 5px | Primary interactive elements — buttons, image containers, key panels |
| `lg` | 20px | Pill-adjacent shapes, tab containers, promo badges |
| `pill` | 9999px | Avatar images, circular icon buttons, fully rounded CTA variants |

The shape language is soft-but-not-soft: 5px radius rounds the corners just enough to feel friendly, without the lush roundness of a lifestyle wellness brand. The system does not commit to full pills on primary CTAs (26px buttons keep `{rounded.md}`), preserving a slightly architectural quality.

## Components

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

### Button variants

- **`button-primary`** — Electric yellow fill (`{colors.primary}`), black uppercase label (`{colors.on-primary}`), 5px radius, 23×30px padding. The dominant CTA: "Choose destination," "Book now." Exaggerated padding makes it a graphic object as much as a UI element. On hover, fill shifts to `{colors.primary-hover}`.
- **`button-secondary`** — Black fill (`{colors.surface-dark}`), white label, identical sizing. Used on light sections where yellow would compete with the canvas. Hover darkens to `{colors.ink-muted}`.
- **`button-ghost`** — Transparent background, 2px white border, white uppercase label. Lives on photography overlays and hero sections — appears to float over the image without obscuring it. Hover fades text to `{colors.ink-secondary}`.

### Cards
Cards maintain a `{rounded.md}` corner, white background on dark sections and white background with `{colors.border}` hairline on light sections. Photography fills the card header at aspect ratio; typography sits beneath. No elevation shadow on default state — the grid spacing provides visual separation.

### Inputs
Underline-style form fields (bottom border only, `0px` radius) signal Mama Shelter's willingness to break conventional form affordances. Default state: black bottom border, transparent background. Focus state: full `1px solid` border appears, background shifts to white. The booking widget uses a date-picker with `{rounded.none}` inputs in a multi-column layout.

### Badges / Tags
Candy-pink (`{colors.secondary}`) chip badges with `{rounded.sm}` and light padding. Used for property category labels, amenity chips ("Rooftop," "Pet-friendly"), and promotional callouts. Text at `{typography.caption}` weight 400 — the chips are decorative, not navigational.

### Navigation
A sticky black header (always `{colors.background}`) with the wordmark left-aligned and navigation links in `{typography.nav-link}` uppercase. Link hover: color transitions from `{colors.ink-on-dark}` to `{colors.ink-secondary}` at 0.3s ease. No background blur, no transparency — the black bar is opaque and confident. Language/currency switcher on the right with the same uppercase treatment.

## Do's and Don'ts

### Do
- Use `{colors.primary}` electric yellow exclusively on primary CTAs — it reads as a signal, not decoration, and loses power if spread across secondary elements
- Keep `{typography.button-ui}` uppercase weight 700 on every interactive label — the brand voice requires this and deviations read as bugs
- Alternate `{colors.background}` and `{colors.surface}` sections at the page level to create the theatrical scene-change rhythm that defines the layout system
- Apply `{typography.display-brush}` (Dirty Brush) for brand voice moments — section callouts, decorative sub-heads, playful labels — and use it sparingly so it lands as punctuation, not noise
- Keep button padding at `23px 30px` — the exaggerated press-area is an intentional design statement
- Use `{rounded.md}` (5px) as the default radius for buttons, cards, and images — the softening is calibrated, not casual
- Reserve `{colors.secondary}` candy pink for decorative moments, category badges, and accent graphics — it is a personality color, not a structural color
- Use 0.3s ease as the default transition timing for all interactive state changes — consistency matters more than per-element finesse

### Don't
- Don't use Dirty Brush for body text, navigation, or form labels — its role is expressive display only
- Don't introduce new accent colors outside the five-color palette (`{colors.background}`, `{colors.surface}`, `{colors.primary}`, `{colors.secondary}`, `{colors.ink-muted}`) — the system's playfulness comes from deliberate constraint
- Don't reduce button padding below `{spacing.xl} {spacing.3xl}` — the generous press area is load-bearing for the brand feel
- Don't use `{rounded.lg}` (20px) or `{rounded.pill}` on primary CTA buttons — oversized radius softens the assertive quality; reserve these for decorative or avatar contexts
- Don't introduce gradient fills — the system uses solid-color sections, not color washes or duotone overlays
- Don't replace the full-uppercase button label style with sentence-case, even for secondary or ghost buttons
- Don't use `{colors.ink-secondary}` (`#555555`) as a headline color — it is a hover/muted text color only; headlines use `{colors.ink}` or `{colors.ink-on-dark}`
- Don't stack multiple Dirty Brush elements in close proximity — the font's personality requires air

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, reduced hero size (~42px), stacked CTA buttons |
| Mobile | 375–768px | Single column, full-bleed photography, hamburger nav |
| Tablet | 768–1024px | 2-column property grids, expanded nav, 50px hero |
| Desktop | 1024–1200px | Full navigation visible, 3-column grids, 70px hero |
| Large Desktop | ≥1200px | Max container ~1440px, full booking widget inline |

*Source: dembrandt extracted 25 breakpoints spanning 320px → 1920px.*

### Touch Targets
- Primary CTA buttons have `23px × 30px` padding, resulting in tap targets well above 44px minimum
- Navigation links: full-height sticky bar provides generous tap areas on touch devices
- Date-picker: custom modal with large touch-friendly date cells

### Collapsing Strategy
- **Nav**: Full horizontal bar collapses to hamburger + wordmark on mobile; slide-in dark panel
- **Hero**: 70px headline scales down to ~40px; photography stays full-bleed; stacked CTAs replace horizontal pairs
- **Property grids**: 3-column → 2-column → 1-column with full-width card photography
- **Booking widget**: Inline row on desktop → stacked form fields on mobile, same full-width yellow CTA
- **Section alternation**: Black/white rhythm maintained at all breakpoints — never collapsed to single-tone

### Image Behavior
- Photography is the primary content delivery mechanism — never cropped to aspect ratios that cut faces or key subjects
- Hero imagery maintains full-bleed at all sizes; aspect ratio adjusts but edges remain flush
- Property and room photography maintains a landscape crop at 16:9 on desktop, shifting to 4:3 on mobile
- Mama Shelter's visual identity is heavily dependent on editorial photography quality; generic stock imagery breaks the brand's personality

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark sections): `{colors.background}` → `#000000`
- Background (light sections): `{colors.surface}` → `#ffffff`
- Primary CTA: `{colors.primary}` → `#ffea00`
- CTA text: `{colors.on-primary}` → `#000000`
- Primary CTA hover: `{colors.primary-hover}` → `#d9c700`
- Playful accent: `{colors.secondary}` → `#fec6df`
- Body text (light): `{colors.ink}` → `#000000`
- Body text (dark): `{colors.ink-on-dark}` → `#ffffff`
- Muted / hover: `{colors.ink-secondary}` → `#555555`
- Border: `{colors.border}` → `#c5c5c5`

### Example Component Prompts

- "Create a hero section on a `{colors.background}` black canvas. Full-bleed editorial hotel photography as background. Headline in Dirty Brush 40px/400, line-height 1.0, color `{colors.ink-on-dark}`. Sub-headline in GT Walsheim Pro 70px weight 500, color `{colors.ink-on-dark}`. Below, a primary CTA button: `{colors.primary}` fill, `{colors.on-primary}` uppercase weight 700 label, `{rounded.md}` radius, `23px 30px` padding, transitions to `{colors.primary-hover}` on hover at 0.3s ease."
- "Build a hotel property card on a white section. Full-bleed 16:9 photography with `{rounded.md}` radius. Property name in GT Walsheim Pro 22px weight 500. City in GT Walsheim Pro 15px weight 400 color `{colors.ink-muted}`. A candy-pink `{colors.secondary}` chip badge at the top-left for category label. Shadow: `{colors.shadow-soft} 0px 0px 1px` on hover. No border by default."
- "Design a booking CTA strip on `{colors.background}` black. Full-width band with a GT Walsheim Pro 30px/500 headline in `{colors.ink-on-dark}` and a single large `{colors.primary}` yellow button: uppercase weight 700 label 'Choose destination', `{rounded.md}` corners, `23px 30px` padding. Entire strip transitions sections from dark to light."
- "Create a sticky navigation bar on `{colors.background}` pure black. Wordmark left-aligned in SVG white. Center/right: GT Walsheim Pro uppercase nav links at `{typography.nav-link}` weight 700, color `{colors.ink-on-dark}`, hover transitions to `{colors.ink-secondary}` at 0.3s ease. Language picker right-aligned in same type style. No border, no blur, fully opaque."
- "Render a section header pairing — Dirty Brush 30px line-height 0.83 in `{colors.ink}` as an expressive top line, immediately below GT Walsheim Pro 25px uppercase weight 500 as the structural subtitle. Combined visual: inky hand-painted label over a clean grotesque identifier. Use on white section backgrounds for maximum typographic contrast."
- "Build a full-screen booking modal overlay. `rgba(0,0,0,0.4)` scrim behind a white `{colors.surface}` panel. Panel uses underline-style inputs (`{components.input}`): transparent background, `{colors.ink}` bottom border only, `{rounded.none}`. Date fields in a 2-column row. Final CTA: `{components.button-primary}` full-width, `{colors.primary}` yellow, uppercase weight 700 label, `23px 30px` padding."

### Iteration Guide

1. Start on `{colors.background}` black — Mama Shelter's resting state is dark. Reserve white (`{colors.surface}`) for content-heavy alternating sections.
2. Electric yellow (`{colors.primary}`) belongs to primary CTAs only — never apply it to background fills, headings, or decorative elements outside of branded highlight moments.
3. Dirty Brush is punctuation, not foundation — use it for one to two display moments per page section, then let GT Walsheim carry the structure.
4. Button sizing is non-negotiable: `23px 30px` padding, weight 700 uppercase, `{rounded.md}`. Reducing this to standard button sizing loses the brand's graphic assertiveness.
5. Link hover state is `{colors.ink-secondary}` regardless of surface — both black links and white links fade to `#555555` on hover. No color shifts, no underline additions.
6. Maintain the black/white section alternation. Each major page section should invert from the one before it — this is the primary rhythmic device in the layout system.
7. Candy pink (`{colors.secondary}`) is for decoration and category labels only — never a structural CTA or primary interactive color.
8. Transitions run at 0.3s ease across the entire system — do not introduce spring physics, cubic-bezier complexity, or per-element timing variation.

---

## 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 Mama Shelter. Brand names and trademarks belong to their respective owners.