Branding glossary for developers

A brand system is a structured collection of visual design decisions — colors, typography, logos, spacing, and tokens — that define a consistent visual identity across every surface of a product.

Design tokens are platform-agnostic, named values that represent visual design decisions. They store colors, typography, spacing, and other design attributes as structured data (usually JSON) that can be transformed into any format.

A color palette is a structured set of colors chosen to represent a brand and ensure visual consistency across a product. It typically includes primary, accent, neutral, and semantic (success, warning, error) colors, each with a range of shades.

Font pairing is the practice of selecting two or more typefaces that work together harmoniously — typically a display/heading font for visual impact and a body font optimized for readability.

A favicon (favorite icon) is a small icon associated with a website, displayed in browser tabs, bookmarks, history, and when added to device home screens. Modern favicons require multiple sizes and formats for cross-platform compatibility.

A Tailwind config file (`tailwind.config.ts`) is the configuration file for Tailwind CSS that defines your custom design tokens — colors, fonts, spacing, breakpoints, and any other theme values used by utility classes.

CSS custom properties (commonly called CSS variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They follow the `--property-name: value` syntax and are accessed via `var(--property-name)`.

Dark mode is an alternative color scheme that uses dark backgrounds with light-colored text and UI elements, as opposed to the traditional light backgrounds with dark text.

A visual identity is the sum of all visual elements that represent a brand — logo, color palette, typography, imagery style, iconography, and layout patterns. It's how a brand looks and feels across every touchpoint.

A brand kit is a deliverable package containing all the assets and guidelines needed to implement a brand consistently. It typically includes logo files (multiple formats), color values, font files or references, and basic usage rules.

CLAUDE.md is a markdown file placed in a project's root directory that provides brand context to AI coding assistants like Cursor, Claude, and GitHub Copilot. It contains design rules, color values, component patterns, and style guidelines.

A typography scale is a set of harmonious font sizes derived from a mathematical ratio (such as 1.25 or 1.333). It creates consistent visual hierarchy from the smallest label to the largest display heading.

Color theory is the body of knowledge about how colors interact, how they're organized on the color wheel, and how they affect human perception and emotion. It provides frameworks for creating effective color combinations.

Color contrast accessibility refers to ensuring sufficient luminance difference between text (or UI elements) and their background, as measured by the WCAG (Web Content Accessibility Guidelines) contrast ratio.

A logo is a graphic mark, symbol, or stylized text used to identify a brand, product, or company. It's the most condensed expression of a visual identity — recognizable at any size, from favicon to billboard.

A design system is a comprehensive collection of reusable UI components, design tokens, patterns, and documentation that enables teams to build consistent user interfaces at scale. It sits above a brand system, adding interactive components and usage guidelines.

Brand voice is the distinct personality, tone, and style expressed through a brand's written and verbal communication. It defines how the brand 'sounds' across all touchpoints — marketing copy, documentation, error messages, and social media.

SVG (Scalable Vector Graphics) is an XML-based vector image format that describes two-dimensional graphics using mathematical expressions rather than pixels. SVGs scale to any size without quality loss.

A responsive logo is a set of logo variants designed to adapt across different display sizes and contexts — from a full horizontal mark with tagline at large sizes, to a simplified icon at small sizes like favicons and mobile headers.

A hex color code is a six-character (or three-character shorthand) hexadecimal representation of a color, prefixed with `#`. It encodes RGB values where each pair of characters represents red, green, and blue intensity from 00 (none) to FF (maximum).