AmericaByDesign.gov

---
version: "alpha"
name: "AmericaByDesign.gov"
description: "Design system da iniciativa federal americana AmericaByDesign.gov, o National Design Studio. Site editorial com estética dark storytelling."
colors:
  brand:
    backgroundDark: "#0a0a0a"
    backgroundMuted: "#1a1a1a"
    textPrimary: "#ffffff"
    textSecondary: "#a0a0a0"
    flagRed: "#bf0a30"
    flagBlue: "#002868"
    accentGold: "#ffd700"

typography:
  headline:
    fontFamily: "Instrument Serif, Georgia, serif"
    fontWeight: 400
    fontStyle: "italic"
    letterSpacing: "-0.02em"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontWeight: 400
rounded:
  none: 0
  small: 4
  medium: 8
spacing:
  section: 120px
  xl: 64px
  lg: 40px
---

## Overview

**AmericaByDesign.gov** é a plataforma digital da iniciativa federal americana **National Design Studio**, anunciada via Executive Order para revitalizar o papel do design no governo dos Estados Unidos. O site funciona como manifesto editorial e ponto de entrada para a iniciativa.

### Contexto Histórico

O projeto referencia marcos do design governamental americano:
- **NASA Logo** (1959) — "Meatball" por James Modarelli
- **National Parks Service** — Identidade visual de conservação
- **Highway Signage System** — Padrão de sinalização federal
- **Nixon Beautification Project** (1960s) — Iniciativa de embelezamento
- **Federal Design Improvement Program** (1972) — Sob Nixon/Ford

### Princípios de Design

1. **Editorial-first** — Narrativa long-form com tipografia serifada
2. **Dark storytelling** — Background escuro (#0a0a0a) para imersão
3. **Scroll-based progression** — Revelação progressiva de conteúdo
4. **Historical reverence** — Referências visuais ao legado americano
5. **Minimal chrome** — Interface quase invisível

---

## Colors

### Core Palette

| Token | Hex | Uso |
|-------|-----|-----|
| `background-dark` | `#0a0a0a` | Background principal |
| `background-muted` | `#1a1a1a` | Superfícies elevadas |
| `text-primary` | `#ffffff` | Texto principal, headings |
| `text-secondary` | `#a0a0a0` | Texto secundário, metadados |

### Flag Colors (Accent)

| Token | Hex | Uso |
|-------|-----|-----|
| `flag-red` | `#bf0a30` | "Old Glory Red" — acentos patrióticos |
| `flag-blue` | `#002868` | "Old Glory Blue" — links, badges |
| `accent-gold` | `#ffd700` | Destaques especiais |

---

## Typography

### Sistema Tipográfico

#### Instrument Serif — Headlines
- Estilo: Italic como padrão para headings
- Tracking: Negativo (-0.02em)
- Uso: Títulos, citações destacadas

#### Inter — Body
- Estilo: Regular, neutro, legível
- Uso: Corpo de texto, UI, navegação

### Escala Editorial

| Token | Tamanho | Line Height |
|-------|---------|-------------|
| `display` | 72px | 1.1 |
| `heading-1` | 56px | 1.15 |
| `body` | 18px | 1.7–1.8 |
| `caption` | 14px | 1.5 |

---

## Layout

### Single-Column Editorial

- Body text max-width: 680px (centrado)
- Full-width elements: 100vw
- Section vertical gaps: clamp(4rem, 10vw, 8rem)

### Anatomia da Página

1. **Hero** — Bandeira americana central, título serif italic
2. **Lead** — Parágrafo introdutório em tamanho maior
3. **Narrative sections** — Blocos de texto com headings serifados
4. **Historical references** — Menções a NASA, Parks, highways
5. **Email signup** — Formulário minimalista

---

## Do's and Don'ts

### ✅ Do's

- Use Instrument Serif italic para headings
- Mantenha dark background consistente (#0a0a0a)
- Priorize legibilidade (line-height 1.7+, corpo 18px+)
- Use scroll-based reveals com moderação
- Respeite o single-column layout
- Use cores da bandeira apenas como accent

### ❌ Don'ts

- Não use sombras pesadas
- Não adicione elementos UI complexos
- Não misture fontes além do sistema definido
- Não use cores vibrantes além da paleta
- Não reduza o tamanho do corpo para menos de 16px

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [americabydesign.gov](https://americabydesign.gov) |
| Initiative | National Design Studio |
| Context | Executive Order announcement |
| Historical References | NASA logo, National Parks, Highway Signage |
| Method | Public site visual analysis |
| Date | 2026-09-30 |