# Arlington Flip — Design System
> Modern, locally-rooted publication brand for a monthly newsletter and digital presence covering the Arlington, VA gymnastics community. Editorial credibility (Skimm/Morning Brew/Axios Local) with community warmth (parents, kids, coaches, local gyms).
The brand's job is to telegraph three things instantly: **(1) this is for me**, **(2) this person knows what they're talking about**, **(3) this won't waste my time.**
Arlington Flip is **deliberately not visually gymnastics-themed** — no chalk dust, no balance beams, no leotards. The verbal half ("Flip") carries the gymnastics signal; the visual identity stays clean, editorial, platform-agnostic, and gym-neutral (Capital, Cartwheel, Arlington Aerials, Barcroft).
## Demo
Open `index.html` for a tour of the system. Or visit the two reference UIs directly:
- **`ui_kits/newsletter/`** — sample issue (masthead, five-things list, featured story, pull quote, rotation rundown, on-deck calendar, subscribe block).
- **`ui_kits/web/`** — landing-page treatment (nav, hero, issue cards, subscribe inversion).
If hosted on GitHub Pages, root URL serves `index.html` automatically.
---
## Sources
- **Logo asset**: `uploads/arlington-flip-logo-v02.svg` (provided by user, April 2026) — recolored into `assets/logo/arlington-flip-wordmark.svg` (primary, ink-on-paper) and `arlington-flip-wordmark-inverse.svg` (paper-on-ink). v02 is the unframed wordmark; original boxed-frame v01 superseded.
- **Codebase**: `arlington-flip/` (mounted local folder). Empty at time of authoring — only contains `.claude/settings.local.json` and an empty `deploy/` folder. No source code yet exists; the design system was authored from the brand brief + logo.
- **Brand brief**: provided inline in the kickoff prompt.
If those sources update, re-read them and reconcile against this system before producing artifacts.
---
## At a glance
- **Primary color**: Ink (`#2A2F3A`) — cool, slightly blue stone. Does the heavy lifting. Brand is monochromatic-first.
- **Paper color**: Cool stone (`#EFEEEA`) — never pure white. Anchors the editorial feel.
- **Pop accent**: Bright teal (`#22D3C5`) — primary accent. Used sparingly for CTAs, highlights, "FLIP" emphasis.
- **Flag accent**: Hot pink (`#E5388A`) — secondary editorial accent for "featured" / look-here moments. Never combined with Pop.
- **Display type**: Archivo Black — masthead-coded, heavy, uppercase.
- **Body type**: Inter — clean, highly readable at 16–18px.
- **Editorial flourish**: Source Serif 4 — pull quotes, breaks. Used selectively.
---
## Index / manifest
```
.
├── README.md ← you are here
├── SKILL.md ← Claude Code-compatible skill entry
├── colors_and_type.css ← all foundations: tokens, type, base elements, utilities
├── assets/
│ └── logo/
│ ├── arlington-flip-wordmark.svg (PRIMARY — wordmark, ink on paper)
│ ├── arlington-flip-wordmark-inverse.svg (INVERSE — wordmark, paper on ink)
│ ├── arlington-flip-wordmark-trimmed.png (rasterized + trimmed, for tight headers)
│ └── _source-arlington-flip-logo-v02.svg (untouched user-supplied source)
├── preview/ ← cards rendered in the Design System tab
│ ├── logo-primary.html
│ ├── logo-inverse.html
│ ├── logo-monogram.html
│ ├── color-ink-paper.html
│ ├── color-flip.html
│ ├── color-semantic.html
│ ├── type-display.html
│ ├── type-body.html
│ ├── type-serif.html
│ ├── type-eyebrow.html
│ ├── spacing-scale.html
│ ├── radii-shadows.html
│ ├── component-buttons.html
│ ├── component-tab.html
│ ├── component-card.html
│ ├── component-rule.html
│ └── component-pullquote.html
└── ui_kits/
└── newsletter/ ← the email/web newsletter (the core surface)
├── README.md
├── index.html ← clickable demo: the masthead newsletter view
└── *.jsx ← Masthead, IssueHeader, Story, PullQuote, etc.
└── web/ ← the marketing/landing site
├── README.md
├── index.html ← clickable demo: landing → archive → subscribe
└── *.jsx ← Nav, Hero, IssueGrid, SubscribeCTA, Footer
```
---
## Content fundamentals
The voice is **the smart friend who already knows everything happening in the local gymnastics scene** — confident but not corporate, warm but not saccharine, organized but not stuffy. If a sentence sounds like a PTA bulletin or a SaaS landing page, rewrite it.
### Tone
- **Modern, friendly, in-the-know.** Like Morning Brew or The Skimm — direct, mildly playful, never breathless.
- **Pronouns**: "we" for the publication's POV; "you" for the reader. Never "users" or "subscribers" in body copy.
- **Sentence length**: short. Vary rhythm. Sentence fragments OK for emphasis. Like this.
- **Wordplay**: gymnastics-adjacent verbs land well in *headlines* (flipping, rotating, sticking the landing, the rundown) — but use sparingly. Twice per issue, max. Never in body.
### Casing
- **Headlines & section labels**: Title Case for body headlines (newsletter stories), ALL CAPS for masthead/eyebrow/section flags ("THIS MONTH", "MAT TALK", "ISSUE 14").
- **Body copy**: sentence case.
- **CTAs**: Title Case, two words preferred ("Read More", "Subscribe Free", "See the Calendar").
### What to avoid
- ❌ Corporate filler ("dive deep", "leverage", "in today's fast-paced world")
- ❌ Cute baby-talk ("our little gymnasts", "tumble buddies")
- ❌ Salesy hype ("you won't believe", "the only newsletter you need")
- ❌ Hedge words ("just", "kind of", "perhaps") — be confident
- ❌ Emoji in body or headlines. (Reserve emoji for tiny inline UI affordances if absolutely necessary, e.g. a single `→` or `★`. Default: don't use them.)
### Examples
| ✅ On-voice | ❌ Off-voice |
|---|---|
| What's flipping this month. | Welcome to our monthly newsletter! |
| Three meets, one open gym night, and a coach who's leaving Capital. | Here are some events you might be interested in. |
| The rotation rundown: where Arlington kids are placing this fall. | Roundup of recent gymnastics achievements in our community. |
| Stick the landing on tryout season. | Tips for tryouts! 🤸 |
| New here? You'll fit right in. | Welcome new subscribers! We're so excited to have you. |
### Recurring section names (use these verbatim)
- **THIS MONTH** — top-of-issue summary, 3–5 bullets.
- **MAT TALK** — community gossip / coach moves / gym news.
- **THE ROTATION RUNDOWN** — meet results, placings.
- **ON DECK** — upcoming events / calendar.
- **THE TLDR** — final 30-second summary.
Tagline used selectively (footer, posters, IG bio): **"Local Mat Talk."**
---
## Visual foundations
The brand is **editorial-first**. Imagine a masthead pinned above a single-column newsletter that's been laid out by someone who reads The New York Times every morning.
### Color
- **Monochromatic-first.** Most of the brand lives in ink-on-paper. A typical issue uses ink (`#2A2F3A`) + paper (`#EFEEEA`) + ONE of the two accents (teal Pop OR pink Flag) and *nothing else*.
- **Paper, not white.** The page background is `#EFEEEA` — cool stone. Pure white is forbidden for canvas — it reads cold and generic. Pure white is fine for tiny inset cards (rare).
- **Ink, not black.** `#2A2F3A` reads as a stone-cool publication ink, not pitch black. Use `--af-ink` for everything you'd reflexively make black.
- **Pop is a guest, not a tenant.** Teal `--af-flip` appears in: CTAs, the marker-style highlight wash, the issue number, hover underlines, the small triangular indicator we use as a list bullet. It does NOT appear as full-section backgrounds.
- **Flag is reserved.** Pink `--af-flag` is for editorial "featured" pulls and look-here flags. One per layout, max. Never alongside Pop in the same component — pick one accent role per UI moment.
- **Tokens**: `--af-ink`, `--af-ink-70`, `--af-ink-50`, `--af-paper`, `--af-paper-soft`, `--af-paper-warm`, `--af-flip`, `--af-flip-deep`, `--af-flip-soft`, `--af-flag`, `--af-flag-deep`, `--af-flag-soft`. See `colors_and_type.css`.
### Typography
- **Display**: Archivo Black. Always uppercase, tight tracking (`-0.01em`), tight leading (`0.95`–`1.15`). Never reverse to a thinner weight inside display blocks.
- **Body**: Inter at 16–18px (newsletter body is 18px). 1.55 line-height for body, 1.7 for long-form reading.
- **Serif**: Source Serif 4. Italic. Used for pull quotes and rare editorial touches. Never headlines, never UI.
- **No mixed weights inside a single masthead.** The wordmark is a single mass; mimic that elsewhere.
- **Tracked-out eyebrow**: 12px, uppercase, `0.14em` tracking — the canonical newsletter section label.
### Backgrounds
- **Solid paper.** No gradients (forbidden). No image overlays, no patterns, no chalk-dust textures.
- **Sectioning** is achieved via slight paper-tone shifts (`paper` → `paper-warm` → `paper-deep`) and 2-px or 4-px ink horizontal rules.
- **Photography**: when used, full-bleed, slightly warm, never aggressively saturated. B&W is welcome and on-brand. Subjects should be candid, never posed.
### Animation
- **Snappy, restrained.** Brand is "knowing", not exuberant.
- Standard durations: `120ms` (fast), `180ms` (default), `320ms` (slow).
- Easing: `cubic-bezier(.2, .7, .2, 1)` — tight ease-out, no bounce.
- **No** spring animations, no rotate-flip cute tricks, no auto-playing carousels.
- Acceptable: fade-in on scroll, underline expand on hover, color shift on press.
### States
- **Hover (links)**: underline thickens slightly + color shifts from ink → flip-deep. Underline color → flip.
- **Hover (buttons)**: ink button → background lifts to `--af-ink-90`; paper button → border + bg shifts to `paper-warm`; flip button → `flip-deep`.
- **Press**: 1-px translate-down (`transform: translateY(1px)`). No scale-shrink.
- **Focus**: 2-px solid `--af-flip` outline with 2-px offset. Always visible.
- **Disabled**: 40% opacity. No color desaturation tricks.
### Borders & rules
- **Hairline** = 1px `--af-border` (`--af-ink-15`).
- **Rule** = 2px solid ink. The canonical newsletter divider.
- **Bold rule** = 4px solid ink. Lives under display titles and at issue boundaries.
- Borders are always squared off — no soft-blend or shadow-as-border tricks.
### Shadows
- **Stamp** (`3px 3px 0 ink`) — a flat, hard, offset "press impression". This is the brand's signature card shadow. It looks like a printed-stamp impression, not a Material Design lift.
- **Soft** — used sparingly for elevated UI overlays (modals, menus). Restrained, low-blur.
- **Pop** — only for floating overlays.
- No glow effects. No colored shadows. No ambient blur.
### Capsules vs gradients
- **Capsules (pills) are the protection mechanism.** When a label needs to stand out from text, it goes in a black ink pill (the `.af-tab`) at 12px uppercase tracked-out — not a gradient or glow.
- **Gradients**: forbidden. Period.
- **Transparency**: 8–12% ink overlays are acceptable for image scrim only (when text sits on photography).
### Corner radii
- **0–4px on most surfaces.** Cards = `--af-radius-md` (8px) max.
- **The single big-radius exception**: the masthead/`af-tab` pill (`999px`). This is intentional — it echoes the rounded ARLINGTON tab in the logo and makes it the most distinctive UI primitive.
### Cards
- White-ish (paper-soft) fill, 1-px ink border, optional 3-px ink stamp shadow offset right-and-down. No floating ambient shadow. No gradient inner-light. No rounded-corner-with-colored-left-border tropes.
### Layout rules
- Single-column, generous whitespace. The newsletter feels like a *page*, not a dashboard.
- Max content width 680px for reading; 1200px for marketing/landing.
- Vertical rhythm based on the 4-px scale; section-to-section padding is typically `--af-space-12` (48px) or `--af-space-16` (64px).
- The masthead bar can be full-bleed with the wordmark inset against the left margin or centered.
- Numbers and dates are often given oversized typographic weight (issue number, dateline) and treated as visual elements.
### Imagery vibe
- Warm, daylight, slightly de-saturated. NOT moody, NOT high-contrast sport-ad style.
- Candid > posed. Wide environment shots over tight close-ups of a single athlete.
- B&W photography is welcome on covers and section openers.
- Never AI-generated illustration. No flat-design vector kids tumbling.
---
## Iconography
Arlington Flip uses **almost no icons by design**. The brand is type-led; icons would clutter the editorial feel. Where icons *are* used (UI affordances in the web app, share buttons, in-line bullets), follow these rules:
- **Bullets in lists**: a small filled triangle `▸` (Unicode U+25B8) in `--af-flip-deep` for first-level, or a square `▪` for plain. Never disc bullets.
- **Inline arrows**: `→` (U+2192) for "read more", `↗` for external links. Both inherit color from surrounding text.
- **Rare UI icons**: when a real icon is needed (e.g. menu, close, search, mail, chevron, calendar), pull from **Lucide** via CDN at 1.5px stroke. Lucide's restrained, line-only style is the closest match to the brand's editorial weight.
```html
```
- **Icon size**: 16px (inline UI), 20px (buttons), 24px (nav), 32px (feature blocks).
- **Icon color**: always `currentColor`. Never goldenrod-filled icons.
- **Emoji**: do not use in any brand-controlled surface. (One narrow exception: a tiny `→` or `★` if absolutely necessary in a constrained space like an Instagram caption — but prefer the typographic Unicode equivalent.)
If an icon is needed for a concept Lucide doesn't cover, omit it and use a typographic label in `.af-tab` instead — that's more on-brand than a custom illustration.
---
## SKILL.md
`SKILL.md` exposes this design system as a Claude Code-compatible skill so it can be downloaded and used as a portable folder. See that file for invocation instructions.