Dad, Still Here — Design SystemLegacy format

### 1.1 Mission & Values

• Mission: Give parents experiencing estrangement, silence, separation or reduced contact a safe place to watch, read, write and preserve words they may not be able to say directly.

• Core Promise: A warm place someone would trust at 1:00 a.m. when they cannot sleep because they miss their child.

• What We're Not: Not a courtroom advocacy org, not a political campaign, not a generic self-help channel.

### 1.2 Visual Principles

• Presence through absence: Use negative space, objects, and environments to convey emotion—not identifiable faces.

• Cinematic restraint: Natural light, back/side silhouettes, hands, quiet moments.

• Dignified anonymity: Every design choice protects privacy and honors vulnerability.

• No anger: Never show courtroom imagery, red rage palettes, broken hearts, war silhouettes.

---

### 2.1 Primary Palette

| Role | Color | Hex | RGB | Usage |

|------|-------|-----|-----|-------|

| Warm Cream | Cream | #F5F1EB | 245, 241, 235 | Backgrounds, hero, light surfaces |

| Deep Navy | Navy | #1A2A3A | 26, 42, 58 | Text, navigation, depth |

| Muted Teal | Teal | #4A7C7E | 74, 124, 126 | Accent, tags, CTAs |

| Soft Stone | Stone | #C4BDB8 | 196, 189, 184 | Borders, dividers, subtle elements |

| Restrained Gold | Gold | #D4A574 | 212, 165, 116 | Highlights, hover states, premium |

### 2.2 Semantic Colors

| Intent | Color | Hex | RGB | Notes |

|--------|-------|-----|-----|-------|

| Success | Muted Green | #6B9B7F | 107, 155, 127 | Positive feedback, confirmations |

| Error | Warm Red | #C97A7A | 201, 122, 122 | Errors, but warm—not rage |

| Warning | Muted Amber | #C9A876 | 201, 168, 118 | Cautions, safety prompts |

| Info | Muted Blue | #7A9AC9 | 122, 154, 201 | Informational messages |

### 2.3 Neutral Gradient

```

White: #FFFFFF (255, 255, 255)

Off-White: #FAF8F6 (250, 248, 246)

Light: #F5F1EB (245, 241, 235)

Pale: #E8E3DB (232, 227, 219)

Medium: #D4CEBC (212, 206, 188)

Stone: #C4BDB8 (196, 189, 184)

Gray: #9D9790 (157, 151, 144)

Dark Gray: #6B6661 (107, 102, 97)

Charcoal: #2D2420 (45, 36, 32)

Deep Navy: #1A2A3A (26, 42, 58)

Black: #000000 (0, 0, 0)

```

### 2.4 Accessibility

• All text/background combos must meet WCAG AA (4.5:1 contrast for body, 3:1 for large text).

• Test color combinations: Navy text on Cream, Navy on Light, Teal on Cream, Stone text on White.

• Avoid color-only conveyance; always pair with icon/pattern/text.

---

### 9.1 Quote/Emotional Reflection Card

```

Background: Cream

Large serif text (24px–32px), navy, center-aligned, italic

Quote: Center, generous padding (48px)

Attribution: 12px, stone color, bottom

Dimensions: 1200x630 (web), 1080x1080 (Instagram), 1600x900 (Twitter)

```

### 9.2 Letter of the Week Card

```

Background: Navy

Header: "Letter of the Week" — 16px gold accent

Excerpt: Serif text, 20px, cream, italic, max 3 lines

CTA: "Read full letter" — teal button

Footer: "Anonymous" + date

Dimensions: 1200x630, 1080x1350 (portrait)

```

### 9.3 Video Announcement Template

```

Background: Dark (navy 80% opacity over video still)

Play button: Large teal circle, center

Title: 32px, white, bold, positioned top or center

Safe zone: Center 80% of frame for text overlays

Dimensions: 1280x720, 1080x1920 (vertical)

```

### 9.4 Community Question Card

```

Background: Stone (light)

Question: Serif, 24px, navy, centered, max 2 lines

Engagement icons: ❤️ 📝 ↗️ (placeholder)

Category tag: Top-right corner

Dimensions: 1080x1350, 1200x630

```

### 9.5 Research Insight Card

```

Icon: 48px, teal, top-left

Stat: Large number, navy, 32px–48px

Description: 14px body, navy, 2–3 lines

Source: 12px, gray, bottom

CTA: "Learn more" link

Dimensions: 1080x1080, 1200x630

```

### 9.6 Newsletter Header

```

"The Sunday Letter" — 48px serif, navy

Tagline: "One thoughtful note every week" — 18px sans

Featured content teaser: 3 thumbnail cards

Date: "Week of [DATE]" — 14px meta

Dimensions: 1200x600

```

### 9.7 Faceless Video Visual Package

• Title card: "Dad, Still Here" + episode title (serif, navy)

• Lower third: Show topic/series name (teal accent bar)

• Quote card: Large serif text overlay (safe zone center 60%)

• Chapter divider: Teal bar + chapter number

• Subscribe end card: CTA + channel info (teal background)

• Letter-reading frame: Cream background, serif text (max 40ch width)

• Research/source card: Icon + citation + stat

• Content warning card: Warning icon + text (amber background)

• Community rules card: Icon + rule statement (navy background)

All elements: Safe zones marked for captions (bottom 1/3 of frame clear for text).

---

### 10.1 Composition Rules

• Subjects: Generic composites, back/side silhouettes, hands, objects, quiet spaces

• Lighting: Natural, soft, warm

• Framing: Offset subject to allow text overlay on negative space

• No faces: Never show identifiable faces, parents, or creators

• Emotional contexts: Empty chair, handwritten notes, family table, quiet room, open door, light through window

### 10.2 AI Prompt Framework

```

Style: Cinematic, natural light, soft film grain (optional)

Subject: [Generic adult hand / empty room / quiet moment]

Lighting: Warm, golden hour if outdoors

Composition: Subject offset right/left, 60% negative space left

Colors: Warm cream, soft navy, muted teal visible (if needed)

Exclude: Faces, children, real family evidence, identifiable people, rage, conflict

```

### 10.3 Video Sequences

• Maintain consistent wardrobe, lighting, and lens feel across a series

• Use transitions: fade, dissolve (no hard cuts)

• Text overlays: Safe zone bottom 1/3, white or cream text with navy shadow

### 10.4 What NOT to Do

• Never fabricate "real" family documents or evidence

• Never identify minors or show children's faces

• Never depict courtroom, war, or angry silhouettes

• Never use red rage palettes or broken-heart imagery

• Never show real people being coached/manipulated (no staged "proof")

---

### 11.1 Contrast

• Body text: 4.5:1 minimum (Navy on Cream: ✓)

• Large text (18px+): 3:1 minimum

• UI components: 3:1 minimum

### 11.2 Keyboard Navigation

• All interactive elements: Tab-focusable

• Focus indicator: 3px Navy border or outline

• Skip-to-content link: Top of page, visible on focus

• Modals: Trap focus inside modal, release on close

### 11.3 Semantic HTML

• Proper heading hierarchy (H1 → H6, no skips)

• Form labels: `` associated with inputs

• Buttons: ` or , never or `

• Images: Alt text describes content/purpose

### 11.4 Color Independence

• Never convey meaning by color alone (red = error + icon + text)

• Test designs with colorblindness simulators

### 11.5 Motion & Animation

• All motion: fade/slide only, 300ms–500ms duration

• Respect prefers-reduced-motion: Disable animations for users who prefer no motion

• Autoplay with sound: Disabled (user must initiate)

### 11.6 Media

• Video: Always captioned (burned-in or player captions)

• Audio: Transcript provided

• Text size: 14px minimum for body

---

```css

/ Colors /

--color-cream: #F5F1EB;

--color-navy: #1A2A3A;

--color-teal: #4A7C7E;

--color-stone: #C4BDB8;

--color-gold: #D4A574;

--color-white: #FFFFFF;

--color-black: #000000;

/ Semantic /

--color-success: #6B9B7F;

--color-error: #C97A7A;

--color-warning: #C9A876;

--color-info: #7A9AC9;

/ Typography /

--font-serif: "Lora", "Crimson Text", "Cormorant", serif;

--font-sans: "Inter", "Poppins", "Nunito", sans-serif;

--font-size-hero: 48px;

--font-size-h1: 42px;

--font-size-h2: 36px;

--font-size-h3: 28px;

--font-size-h4: 24px;

--font-size-body: 16px;

--font-size-small: 14px;

--line-height-tight: 1.2;

--line-height-normal: 1.5;

--line-height-loose: 1.6;

/ Spacing /

--spacing-xs: 8px;

--spacing-sm: 16px;

--spacing-md: 24px;

--spacing-lg: 32px;

--spacing-xl: 48px;

--spacing-2xl: 64px;

/ Shadows /

--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);

--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);

--shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.16);

/ Radius /

--radius-sm: 6px;

--radius-md: 8px;

--radius-lg: 12px;

--radius-pill: 24px;

/ Breakpoints /

--breakpoint-mobile: 768px;

--breakpoint-tablet: 1024px;

--breakpoint-desktop: 1920px;

```

---

### 13.1 Wordmark Style

• Text: "Dad, Still Here"

• Font: Serif display (Lora or Crimson Text), 400–500 weight

• Style: Horizontal layout (primary), stacked optional

• Variants: Light-background (navy text), dark-background (cream text)

• Monochrome: Black and white versions provided

• Minimum size: 120px width (horizontal), 160px (stacked)

• Clear space: 20px margin all sides

### 13.2 Logo Arrangements

• Horizontal (primary): Logo sits left or center, comfortable for hero sections

• Stacked: Text stacked 2–3 lines for narrow sidebars

• Icon-only: DSH monogram optional for app, favicon (if subtle mark created)

---

• [ ] All pages responsive (375px mobile, 768px tablet, 1024px+ desktop)

• [ ] All text meets WCAG AA contrast (4.5:1 body, 3:1 large)

• [ ] All components use 8px grid spacing

• [ ] All social templates have safe-zone markings

• [ ] All fonts are web-safe or licensed for web use

• [ ] All icons consistent in stroke, cap, join

• [ ] Logo clear-space and minimum-size rules documented

• [ ] Photography direction guide is AI-prompt-ready

• [ ] Video templates have caption safe zones (bottom 1/3 clear)

• [ ] No courtroom, war, or angry imagery present

• [ ] Every asset shares consistent visual language

• [ ] Design works equally in light and dark modes (where applicable)

• [ ] Animation respects prefers-reduced-motion

• [ ] Focus states visible and accessible (3px Navy border)

• [ ] All components tested at 14px minimum zoom

• [ ] Color blindness accessibility verified

---

### 16.1 Next Steps

1. Web framework: Next.js with CSS modules or Tailwind (using design tokens)

2. Component library: Build React components matching this spec

3. Database: PostgreSQL tables for users, letters, stories, consent, audit

4. API: REST or GraphQL endpoints for letter submission, search, moderation

5. Analytics: GA4 with event tracking (page_view, letter_submitted, etc.)

6. Testing: Playwright E2E + Jest unit tests

### 16.2 Figma / Design Tool Setup

• Import this spec into Figma or your design platform

• Create master components for buttons, cards, forms, navigation

• Set up shared color styles, text styles, components library

• Document component variants (default, hover, active, disabled, error)

• Export icon set as SVG or icon font

### 16.3 Developer Handoff

• Provide exported component library as Storybook or similar

• Export logos: SVG (editable), PNG (transparent), JPG (preview)

• Export color palette: JSON for CSS-in-JS, CSS variables file, Figma tokens

• Export typography: Web font links, font-weight/size/line-height specs

• Document spacing grid: Provide spacing utilities or Tailwind config

• Provide motion guidelines: CSS animation specs, transition durations

---

| Version | Date | Changes |

|---------|------|---------|

| 1.0 | 2026-08-20 | Initial design system created for Dad, Still Here |

---

License: MIT

Created for: Dad, Still Here — Estrangement Support Platform

Brand Tone: Warm, Family-Centered, Trustworthy, Anonymous-Community-First

Final Test: Does this feel like a warm place someone would trust at 1:00 a.m.? ✓