Defector Design System

Overview

Defector is an employee-owned sports and culture publication founded by former Deadspin staff. Density over drama. Where The Atlantic composes each section with editorial breathing room and The New Yorker deploys custom display type to signal literary authority, Defector packs the viewport with headlines, timestamps, and article photos — and runs it all in Karla, a free humanist sans from Google Fonts, at bold weight. This is not an aesthetic compromise; it is a deliberate signal that the publication's value is in the writing, not the brand chrome.

The single chromatic move in the entire system is the midnight navy navigation band — a deep, slightly purple-tinted dark blue that runs across the full-width header bar. Below it, the entire page runs in near-black, white, and neutral grey. There is no red despite the publication's bold red wordmark logo; the logo color does not transfer into the surrounding chrome. The navy nav functions as a second ink tone — closer to the newspaper convention of black-and-ink than to a brand accent system. BuzzFeed and Vice both apply brand colors to link states, hover fills, and category tags throughout their editorial grids; Defector applies its only chromatic element once, at the top, and lets the headlines carry the rest.

Key Characteristics:

• Midnight navy ({colors.primary}) fills only the top navigation band and the footer — every other chrome element runs in near-black or white, making the nav color the site's sole chromatic statement.
• Karla 700 for all editorial display and Montserrat 700 for section category labels — both free Google Fonts, no licensing barrier.
• Ghost-pill button at 40px radius for the login CTA, flat-cornered square input at 0px for email subscription — the radius contrast divides interactive-action surfaces from data-entry surfaces.
• 20px base column gutter — tighter than any comparable news publication, enabling more content per viewport width.
• Uppercase category tags at 12px / weight 500 / 0.32px tracking — small-caps labels above article cards identifying section (NBA, Policing, Culture).
• Near-monochromatic palette: 8 tokens, all grey-to-black plus the single navy, zero warm or cool accent colors in the chrome.
• Dense sidebar-plus-feed layout: parallel columns running sport-category feed and main editorial grid simultaneously.

Colors

Text

• Ink ({colors.ink} — #191919): frequency 808. Used as text (416), border (392). The dominant ink tone — a near-black charcoal that covers every article headline, body paragraph, border rule, and interactive link in the below-nav content area.
• Ink Secondary ({colors.ink-secondary} — #333333): frequency 12. Used as text (6), border (6). A slightly lighter charcoal for secondary content contexts — bylines, sub-labels, reduced-emphasis text.
• Ink Muted ({colors.ink-muted} — #4d4d4d): frequency 6. Used as text (2), border (4). Tertiary labels and the email input border in its resting state.

Brand

• Primary ({colors.primary} — #120852): frequency 280. Used as text (139), border (140), bg (1). The midnight navy — the site's only chromatic token. Fills the navigation band and footer, used for link-border underlines throughout the editorial grid.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 99. Used as text (39), border (54), bg (6). The page floor for all editorial content below the nav band. Pure white.
• Surface-1 ({colors.surface-1} — #f3ece2): frequency 6. Used as bg (4), text (1), border (1). A warm parchment cream — used for the login button fill and secondary surface states in the cookie consent overlay.
• Surface Dark ({colors.surface-dark} — #000000): frequency 14. Used as text (5), bg (3), border (5), shadow (1). Pure black, used for the subscription call-to-action band and the darkest surface contexts.

Hairline

• Hairline ({colors.hairline} — #c2bdb5): frequency 4. Used as border (2), shadow (2). A warm grey — the login button border tone and subtle shadow ink in the cookie consent layer.

Typography

Font Families

The system runs two voices from Google Fonts: Karla (primary) for editorial display, body, buttons, and navigation; Montserrat (secondary) for section-category headers and section-specific emphasis moments. Both are freely available. Fallbacks for both declare sans-serif.

The Karla / Montserrat pairing is not a high-contrast serif/sans split — it is a subtle texture change within the sans genre. Karla's open humanist forms feel approachable at body sizes; Montserrat's more geometric construction gives section headings a slightly more structured authority. The difference is small enough that most readers won't notice it consciously, but it provides typographic variety across a page dense with text.

Hierarchy

Principles

Weight 700 runs across all display sizes — 32px, 24px, 20px — with no lighter alternative. This uniformity is the system's characteristic editorial voice: every headline, regardless of hierarchy level, arrives at the same bold-weight confidence. The Atlantic and The New Yorker use weight 600 or lighter on secondary heading tiers; Defector doesn't differentiate. Weight 500 handles body copy and navigation — a medium weight that reads clearly in dense grid layouts without appearing gray. There is no weight 400 presence beyond form inputs.

Note on Font Substitutes

Both Karla and Montserrat are free Google Fonts — no substitution is needed. Load via @import url('https://fonts.googleapis.com/css2?family=Karla:wght@500;700&family=Montserrat:wght@700;900&display=swap'). If you prefer a self-hosted humanist sans alternative, Nunito at weights 500 and 700 approximates Karla's open letterform style; Outfit is a closer optical match for Montserrat's section-heading usage.

Layout

Spacing System

• Base unit: 12px — the dominant padding token, appearing 47 times; 8px appears 38 times as a close second.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 80px.
• Card internal padding: {spacing.sm} (12px) — the compressed default that produces the high-density grid.
• Section vertical spacing: {spacing.lg} (32px) between major content sections.
• Subscribe band padding: {spacing.md} (20px) horizontal, {spacing.lg} (32px) vertical.

Grid & Container

• Navigation: full-width midnight navy band, no max-width constraint, category links at 20px horizontal margins.
• Main content: two-column layout — primary editorial feed on the left, sidebar with additional links and categories on the right. Column gap approximately 20px.
• Article card grid: compressed 3-column grid for secondary article cards — photo at top, headline below, category tag and timestamp at bottom. 12px internal card padding.
• Sidebar feed: single-column list of story titles, timestamps, and category labels — 8px vertical spacing between items.

Rhythm

The page has almost no empty space between sections. The nav band terminates directly into the hero article area; the hero terminates into the article grid without a dividing whitespace band; the sidebar runs the full height of the content in parallel. Section category banners (NBA, Policing, Culture) use the Montserrat heading at 24px with a 1px ink border above and below — dividers rather than whitespace create the sectioning rhythm. This is a reading-volume layout, not a pause-and-consider layout.

Elevation

The system has a minimal shadow tier. Fourteen occurrences of pure black appear as shadow ink at low opacity, primarily in the cookie consent overlay and the subscribe band boundary. Content cards use no shadow; separation between editorial areas comes from 1px ink-colored border rules rather than elevation.

• Flat (no shadow): all article cards, navigation, and editorial content — 98% of surfaces.
• Overlay shadow: the cookie consent drawer uses a faint shadow to lift it above the page content; the subscribe band has one shadow occurrence marking its boundary.

Shapes

The radius scale is functional-binary:

• {rounded.none} 0px — all article cards, section panels, text inputs, category tags, and content borders. The default for every non-interactive container is sharp-cornered.
• {rounded.pill} 20px — secondary button variant, moderate pill CTA shapes.
• {rounded.full} 40px — the primary login ghost-pill button. Applied to the 43px-height login CTA in the top-right corner of the nav.
• {rounded.circle} 50% — author avatars and icon buttons in circular format.

The jump from 0px on content to 40px on the primary CTA is the system's most distinctive shape decision. There is no 4 / 8 / 12px middle tier for cards or panels — either a surface is sharp-cornered content or it is a fully-rounded interactive pill.

Components

button-primary — The ghost-pill login button. Warm parchment {colors.surface-1} fill, near-black text in {typography.button-md} (16px / 500), {rounded.full} 40px radius, 8×20px padding, 43px height, 1px {colors.hairline} border. Sits in the top-right of the navigation band — the only light-fill element against the dark navy nav.

button-secondary — Transparent background, white text, 1px white border, {rounded.pill} 20px radius. Used for secondary actions within dark-background contexts such as the subscribe band.

top-nav — Midnight navy {colors.primary} fill, white text, 48px height, 20px horizontal padding. Sports-category navigation links (NBA, NFL, MLB, NHL, Soccer, More) plus Defector wordmark left, login button right.

nav-link — Transparent, white text in {typography.nav-link} (16px / 500). Navigation category labels with no padding beyond their container — inline horizontal arrangement.

hero-heading — Near-black text, {typography.display-lg} (32px / 700). The feature article headline — the largest editorial typography moment on the page, without background color.

body-paragraph — White text on dark contexts (subscribe band, footer), {typography.body-sm} (14px / 500). Captions and secondary body copy.

card — White {colors.canvas} surface, near-black text, 0px radius, 12px padding, 1px ink border on bottom edge. Holds article photo, headline in {typography.heading-md}, category tag, and timestamp.

section-heading — Near-black text, {typography.heading-lg} Montserrat (24px / 700). Section category banners with 1px ink rules above and below.

article-label — Transparent background, near-black text, {typography.label-sm} (12px / 500 / uppercase / 0.32px tracking), 3×8px padding. Category identifier above article cards — appears in uppercase: "NBA", "POLICING", "CULTURE".

text-input — White {colors.canvas} fill, near-black text in 14px body, 0px radius, 16px padding, 56px height, 1px {colors.ink-muted} border. The email subscription input — deliberately sharp-cornered against the pill button.

feed-item — White surface, near-black text in {typography.heading-md} (20px / 700), 0px radius, 12px vertical padding, 1px ink border beneath. Sidebar and secondary-feed story titles.

subscribe-band — Pure-black {colors.surface-dark} surface, white body text, 32×20px padding. The full-width subscription call-to-action module below the main editorial content.

footer — Midnight navy {colors.primary} fill, white text, 32×20px padding. Repeats the nav band color, bookending the page's chromatic identity.

sidebar-nav — Transparent, near-black text, {typography.body-sm}, 8px vertical padding. Navigation links and article titles in the right sidebar feed.

category-tag — Transparent, near-black text, {typography.label-sm} uppercase, 3×8px padding, 1px ink border, 0px radius. In-content article category identifiers — the sharp-cornered border tag is the secondary UI identity marker.

Do's and Don'ts

Do treat the midnight navy as a framing color, not an accent. The navy belongs on the navigation band and footer — the structural brackets of the page — and not on inline links, hover states, or body-content highlights. Using it inside the editorial content area would transform it from an architectural framing device into a brand accent, which the system explicitly avoids.

Do use Karla at weight 700 for all article headlines, regardless of size. The uniform bold weight across 32px, 24px, and 20px headline tiers is the system's editorial voice. Lightening secondary headlines to weight 500 introduces a differentiation the system doesn't use and makes the page feel less confident.

Do keep the 0px-to-40px radius contrast between content and action surfaces. The sharp card edge and the fully-rounded pill CTA divide information from interaction at a glance. Rounding content cards even slightly — to 4px — erodes the distinction.

Do maintain 12px internal card padding. The compressed spacing is load-bearing for the density the layout achieves; expanding to 16–20px reduces the articles-per-viewport count and changes the editorial character of the page.

Don't introduce any accent color. No hover fills in navy, no link underlines in a warm tan, no category tags in a sports-specific color (red for NBA, green for soccer). The near-monochromatic discipline is the system's most deliberate editorial choice — it keeps the focus on the text rather than on the chrome.

Don't use weight 400 in headlines or navigation. The system's minimum weight for non-input surfaces is 500. Using 400 in a headline or label context makes the typography feel underweight relative to the compressed, dense layout that surrounds it.

Don't use box shadows on article cards. Separation comes from 1px ink border rules, not elevation. Adding shadows makes cards feel like UI components lifted from a dashboard system rather than sections of a printed publication.

Don't pad the category-tag borders with significant horizontal space. The {typography.label-sm} tag at 3×8px padding is calibrated to sit tightly above article cards — expanding to 6×12px makes the tags feel more prominent than the headlines they introduce.

Known Gaps

• Hover and focus states: no hover states were captured from the static surface; link hover colors, nav link underline or fill treatments, and button focus rings are not documented.
• Subscriber-only article states: articles behind the paywall likely carry a distinct card treatment (blurred preview, overlay CTA) that is not exposed on the public marketing surface.
• Dark mode: the site appears to be light-mode only on the main editorial surface; a reader-mode or dark-mode variant is not captured.
• Mobile navigation: the mobile hamburger menu, drawer behavior, and collapsed sport-category layout at mobile widths are not represented in the captured desktop tokens.
• Article page typography: the article reading page likely carries a distinct body-text treatment (larger line height, possibly a different weight or a serif sub-tier for long-form reading) not exposed on the homepage.
• Video and podcast components: Defector produces audio and video content; the embedded player components are not captured from the homepage surface.
• Authentication states: the logged-in header state (subscriber avatar, account menu, subscriber-specific navigation items) is not captured.