Brand & Design
What is a styleguide?
A single source of truth that documents how a brand should be used: logo rules, color palette, typography, voice, and the assets and constraints that bind them together.
Also known as: style guide, brand guidelines, brand book
A styleguide is the rulebook for a brand. It collects the assets and constraints that define the visual and verbal system: logo lockups and clear-space rules, the primary and secondary color palette in hex, RGB, CMYK, and Pantone, the type scale and approved font weights, photography and illustration direction, voice and tone guidance, and the layout grid that governs how compositions come together. The good ones also include explicit "do" and "don't" examples so the rules are unambiguous when a designer in a different timezone, or a marketing partner two layers down the supply chain, reaches for them.
Styleguides used to live as 80-page PDFs handed to agencies and printers. Today they are increasingly published as living digital systems: a Notion page, a Storybook instance, a Figma library, or a dedicated brand.example.com microsite that always reflects the current standard. The shift matters because identity now has to be deployed across many more surfaces (web, iOS, Android, OOH, email, social, partner integrations) and updated more frequently than the visual designers a 2010-era PDF was written for. A modern styleguide is part documentation, part design tokens, and part production-ready asset library, with each section consumed by a different audience.
For brand-data systems, the styleguide is the highest-fidelity source of brand truth. When a company publishes one, Brand.dev's Styleguide API surfaces the canonical logo files, the official color values (including the print-only Pantone and CMYK siblings that never appear in CSS), the approved typeface stack, and any usage rules the brand makes public. When no styleguide exists, the same identity has to be reconstructed from the deployed website: faster but lossier. Deployed CSS does not carry Pantones, marketing pages typically expose one logo variant when the brand may ship five, and the rules that bind the system are nowhere to be found in rendered HTML.
In the wild
- →The Mailchimp Content Style Guide published as a public web microsite covering voice, tone, grammar, and writing rules across every product surface
- →A Figma library publishing logo variants, color tokens, and a type ramp that the marketing site and the React app both consume as source-of-truth design tokens
- →Brand.dev's Styleguide API returning the official logo set, the primary Pantone red with its hex and CMYK siblings, and the approved type stack from a single domain lookup
How Brand.dev uses styleguide
Endpoints in the Brand.dev API where this concept comes up directly.
FAQ
Styleguide vs design system?
A styleguide is the rules; a design system is rules plus the reusable code components that implement them. Most modern teams ship both: a styleguide for designers and brand stewards, and a design system (Storybook plus a published component library) for engineers. They share source-of-truth tokens — colors, typography, spacing — so updates in one flow into the other.
Who owns the styleguide?
Historically the brand or design team. In practice, ownership now spans brand, design, marketing, and engineering, with each owning the piece closest to their work (voice for content, components for engineering, color tokens for design). The cleanest setups still assign a single editor to keep the document coherent across contributions.
How do I extract a brand's styleguide programmatically?
If the brand publishes a public styleguide URL or asset kit, parse it directly. Otherwise reconstruct the major elements from the deployed website: logos from <link rel="icon"> and SVGs in the DOM, colors from CSS variables and computed styles, fonts from font-family declarations and @font-face URLs. Brand.dev's Styleguide API does this end-to-end and returns a structured record.
How often should a styleguide change?
The tokens (colors, type, spacing) should be edited whenever a real change ships, ideally as a versioned token release. The narrative sections (voice, photography direction, usage philosophy) tend to change every couple of years on a deliberate refresh, not continuously.
Related terms
The complete set of visual and verbal elements (logo, colors, typography, voice, imagery) that a company uses to express itself consistently across every touchpoint.
The primary visual mark a company uses to identify itself, typically a wordmark, symbol, or combination, optimized to be recognizable at any size.
The craft of arranging type (choosing typefaces, weights, sizes, and spacing) to give written language its visual personality.
The defined set of colors a brand or design system uses, typically organized into primary, secondary, neutral, and semantic groups.
A logo type that consists of the brand's name set in a custom or distinctive typeface, with no separate symbol (e.g., Google, Coca-Cola, FedEx).