What is Defector's primary brand color?

Defector's only chromatic brand moment is the midnight navy navigation bar, rendered at the hex value captured as #120852 in the design extraction — a very dark, slightly purple-tinted navy. It appears 280 times in the captured page across text (139), border (140), and one background fill. Every other chrome surface runs in near-black, white, or neutral grey. There is no red, despite Defector's reputation for a bold red logo; the logo color does not transfer into the surrounding system's chrome. The navy-only discipline gives the publication a newspaper quality — ink tones only, with the navy functioning as a second ink rather than a brand accent.

What typefaces does Defector use, and what are the substitutes?

Defector's primary typeface is Karla — a free Google Font humanist sans-serif — used across all editorial display, body, button, and navigation tiers. Weight 700 handles all article headings and editorial display moments; weight 500 runs body paragraphs, nav links, and metadata; weight 400 appears in form inputs. Montserrat appears as a secondary voice in section-heading contexts (the category banners like 'Policing', 'NBA') at weight 700, giving those markers a slightly different optical texture from the article headline tier. Since both Karla and Montserrat are freely available on Google Fonts, no substitution is needed — the exact faces can be loaded at zero cost.

Why does Defector use a pill-shaped button next to a square-cornered input?

The ghost-pill login button at 40px radius and the email subscription input at 0px radius sit in close proximity on the page — the nav area places the pill CTA just above the main content where a subscription signup input sits at 0px radius with sharp corners. This is not an error in the radius scale: the pill is the interactive call-to-action surface (login, subscribe) and the square input is the form-entry surface. The contrast signals the distinction between 'tap this to go somewhere' and 'type here to give us information.' The same radius split appears in publications like The Atlantic and BuzzFeed, where pill buttons and square inputs occupy the same subscription module.

How does Defector's layout achieve such high information density?

Defector's layout densely packs content through three structural choices: a narrow 20px gutter between all grid columns (versus the 32–40px that broadsheet-style publications use), a compressed article-card format that shows photo plus headline with almost no whitespace beneath, and a sidebar feed that runs parallel to the main content column rather than below it. Section headings use Montserrat at 24px / 700, a compact size for a category label, letting more section headers appear per scroll. The feed items in the sidebar show timestamp, category tag, and headline within approximately 40px of vertical space per item. The result is a viewport density closer to a sports ticker than to a magazine layout — appropriate for a readership refreshing the site during a game.

Can I use this DESIGN.md to build an editorial publication site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Defector's specific moves: midnight navy as the sole chromatic element in the nav band, Karla 700 for all display and Karla 500 for body, ghost-pill CTAs at 40px radius, square inputs at 0px, and a compressed multi-column grid. All token references resolve without invention. The two caveats: Defector's density is calibrated for a reader base that already knows and trusts the publication — for a launch-phase site, the compressed layout may overwhelm first-time visitors who haven't built reading habits. And the near-monochromatic palette assumes strong photographic content in article cards; without compelling photography, the page reads as underdifferentiated grey text.

Defector Design System

Defector's design system as a DESIGN.md file.

About Defector DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source defector.com

News & Publishing

Defector's homepage packs more content into one viewport than almost any peer publication. A 32px bold article headline sits above a compressed grid of photo-plus-title cards, a sidebar column runs parallel with a timestamped feed of stories, and a dark-navy navigation bar anchors the top with sport-category links in white Karla at weight 500. This is a publication built by and for people who want sports writing in high volume. Where The Atlantic layers editorial restraint into every typographic choice and The New Yorker deploys custom display type, Defector uses a Google Font at bold weight and makes no apologies for it.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 8 color tokens drawn from a near-monochromatic palette — near-black ink, midnight navy for the navigation band, white canvas, light cream for secondary surface states, and a handful of greys — with no accent color appearing in any chrome element. Ten typography tokens run Karla across all display and body tiers, with Montserrat appearing in section-heading contexts; weight 700 is the display standard, weight 500 the body standard, and weight 400 reserved for form inputs. The radius scale has one step for pill CTAs at 40px and zero for all other surfaces. 15 components cover the dense article-card grid, the dark-navy nav band, the ghost-pill login button, and the square email subscription input.

Feed this file to an AI coding tool and it reproduces Defector's specific moves: navy-only chromatic moment in the nav, Karla bold across editorial display, ghost-pill CTA beside a sharp-cornered input, and the compressed multi-column layout built for reading volume rather than premium pause. The one discipline worth borrowing for editorial products: Defector proves that a single navy navigation bar — not a full brand color applied to CTAs and links — is enough chromatic identity for a site that runs on content authority rather than brand marketing.

What makes it distinct

Midnight navy navigation bandthe only chromatic moment in the chrome is the deep navy header bar; every other surface is near-black or white, making the nav the sole brand-color statement
Karla 700 as the editorial workhorseheadlines, section labels, and the primary button all run Karla at bold weight; there is no display-only tier using a separate high-contrast face
Ghost pill at 40px beside a square input at 0pxthe CTA button curves to a full capsule while the email subscription field stays flat-cornered; the radius contrast is stark and intentional
Information-dense grid20px column gutters, compressed article-card layouts, and a sidebar-plus-feed structure that packs more headlines per viewport than any peer publication
Worker-owned publication identityno investor-aligned color restraint or enterprise-safe neutrality; the system is built for readers who want a lot of sports writing, fast

Live at defector.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

defector.com

Explore Defector

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Defector design system FAQ

Common questions about Defector's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Defector — official site

Defector's public site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.