Build a complete brand system without starting from a wall of settings

What Brand Kits is for

A palette tells you which colors belong together. A Brand Kit defines how identity, color, typography, interface foundations, voice, accessibility, ownership, and production handoff work as one system.

Use Brand Kits when a project needs more than swatches:

• A primary identity and approved visual assets.
• Semantic color roles for Light and Dark interfaces.
• A coherent typography scale and interface character.
• Realistic website, product, social, and component previews.
• Accessibility checks tied to named roles.
• Versioned exports that design and development can share.

Stage 1: Identity

Identity establishes what the system represents and who is responsible for it.

The readiness summary shows which major parts of the kit still need attention. It is a progress aid, not an approval certificate.

Stage 2: Design

Design begins with direction, not individual controls. Choose one of three starting points:

Selecting a direction immediately applies its typography scale, density, spacing, radius, button, shadow, and focus defaults. These remain editable, but they start as a coherent system rather than unrelated choices.

Generate the complete system from one color

The generator uses the active color shown in the HexCheck header as the seed. Choose the direction, then select Generate complete system.

HexCheck generates:

• All 17 semantic roles in both Light and Dark modes.
• Primary, hover, secondary, and accent values.
• Background, surface, alternate-surface, and border values.
• Primary, muted, and inverse text values.
• Success, warning, danger, information, focus, and disabled states.
• The typography and interface foundations associated with the selected direction.

The generator protects basic text, action, focus, and boundary relationships while preserving the hue identity of the seed. Existing logos, identity text, ownership, and release history are not replaced.

Core and extended roles

The eight core roles stay visible: Primary, Secondary, Accent, Background, Surface, Text, Success, and Danger. Hover, alternate surfaces, border, muted and inverse text, warning, information, focus, and disabled values remain under Extended semantic roles.

Every role supports separate Light and Dark values. Editing one mode does not overwrite the other.

Stage 3: Preview

Preview shows the same system applied to representative work instead of isolated swatches.

• Website tests navigation, hero hierarchy, calls to action, cards, and editorial rhythm.
• Product UI tests dense navigation, metrics, tables, states, and common controls.
• Social tests brand recognition, large typography, marks, and color distribution.
• Component test bench tests buttons, fields, focus, cards, statuses, and foundations together.

Switch between Light and Dark modes. Look for hierarchy, recognizability, action clarity, density, and places where a role feels technically valid but visually wrong.

Stage 4: Handoff

Handoff combines the decisions required before the system leaves HexCheck.

Accessibility review

The review covers likely text, action, boundary, focus, state, and role-distinction combinations in both modes. Every ratio-based card can open its exact foreground and background in Contrast Lab.

The contrast matrix lets you compare text roles against common surfaces. A passing matrix still does not test semantics, keyboard behavior, reflow, motion, content alternatives, or every state in the production interface.

Approval and release

Open this section when the kit is ready for governance details. Record the owner, status, version, release notes, and saved history. These controls stay out of the creative path until the work is ready for review.

Production exports

Brand Kits supports six exports:

• CSS variables with Light and Dark themes.
• Design tokens JSON as a structured source of truth.
• Tailwind theme for framework integration.
• Figma variables with color modes and text styles.
• Markdown brand guide for human-readable documentation.
• HexCheck kit file for backup, import, or transfer.

Drafts, saved kits, and versions

Your current Brand Kit draft is account-scoped and restores when you return. Saving creates or updates a Pro workspace item that appears in the Brand Kit library and Dashboard.

• Save kit stores the current system in the account workspace.
• Duplicate creates an independent draft for a new direction or product.
• Delete removes a saved kit after confirmation.
• Each meaningful cloud save can add a version-history entry using the current version and release notes.

Use separate kits for genuinely different systems. Use versions when the identity is the same and the system is evolving.

Opening older Brand Kits

Older saved kits are migrated automatically. Existing names, primary colors, typography, and assets are preserved where possible, then mapped into the current semantic model.

After migration:

• Review both Light and Dark role values.
• Open Design and confirm the direction still matches the original intent.
• Review the Preview stage rather than trusting the old flat palette.
• Run the Handoff accessibility review.
• Save a new version only after confirming the migrated result.

Brand Kit review checklist

• The identity name, purpose, and ownership are clear.
• Uploaded assets are authorized and production masters exist elsewhere.
• The selected direction matches the product or campaign.
• Every core color has a real semantic purpose.
• Light and Dark modes both feel intentional.
• Primary and secondary actions are distinguishable.
• Text, controls, boundaries, and focus indicators meet the required targets.
• Status states use text or icons in addition to color.
• Typography families and weights are licensed and available in production.
• Website, product, social, and component previews have been reviewed.
• Version, release notes, and owner are current.
• The chosen export has been validated in the destination environment.