Intelligent
Brand System

A modular source of truth for brand, UI, tokens, components, and AI-guided production

System purpose

Every designer, developer, and AI agent should build from the same brand truth: positioning, voice, identity, tokens, components, accessibility rules, and approved layout recipes.

Brand safe UI safe

Token first

Use semantic tokens before raw colours. Components should reference intent like button.primary.bg, surface.page, or color.brand.primary.

One component

Document one live button, field, or choice control per variant. Hover, focus, press, selected, and disabled are states inside one component.

Figma is source

The approved Figma frames define dimensions, states, and geometry. The guide explains how to use them without inventing new UI.

Two-rule operating model

[Copy pending: overview-two-rule-operating-model-1]

Template locked Brand supplied

Rule layer	Owner	What it controls	Health gate
template.rule	Master template	Page order, module types, card/table/code patterns, source-of-truth fields, accessibility checks, responsive behavior, and AI build sequence.	Locked
brand.rule	Client brand	Strategy, voice, logo assets, colour ramps, typography, tokens, components, layout recipes, source files, and usage restrictions.	Supplied
output.rule	Designer, engineer, or AI	New work must select from approved tokens, components, assets, states, grids, and layout recipes. Invention is blocked unless a new rule is added first.	Block drift

Page source-of-truth contract

[Copy pending: overview-page-source-of-truth-contract-1]

Page	Template rule	Brand rule to supply	Required representation
Brand foundation	Strategy before visuals.	Positioning, audience, promise, voice, principles.	Cards for decisions, table for claims, quick tip for usage.
Logos	Assets are used, never redrawn.	Logo variants, clear space, minimum size, background rules.	Asset preview, source path, size, usage table.
Typography	Text styles map to tokens.	Typeface roles, scale, weights, line heights, usage limits.	Role cards, grouped token table, accessibility note.
Colours	Primitive ramps feed semantic tokens.	Palette, feedback states, semantic roles, usage restrictions.	Palette bars, token table, colour behavior rules.
Shapes	Geometry is semantic.	Radius, elevation, overlays, surface hierarchy.	Scale samples, surface examples, modal or overlay rules.
Image library	Images need an approved role.	Source assets, crop rules, compression, layout mapping.	Asset grid, dimensions, performance table.
Icons	Icon meaning needs text or labels.	Icon set, sizes, stroke rules, categories, status use.	Searchable board or asset table, accessibility code.
Source files	Canonical files are visible.	Figma links, Illustrator files, exports, fonts, token packages.	File register with status, owner, and use.
Buttons	One component owns all states.	Variants, anatomy, dimensions, icons, state behavior.	Live example, spec table, token table, copyable code.
Fields	Inputs use labeled anatomy.	Input types, helper text, validation, menus, error behavior.	Preview, code, accessibility and validation notes.
Controls	Stateful controls stay as one component.	Choices, switches, steps, accordions, selected states.	Interactive example, state table, ARIA behavior.
States	Feedback is not decoration.	Success, warning, error, info, empty, loading, disabled.	System message examples, token table, health rules.
Navigation	Navigation is measured from source frames.	Desktop, mobile, side nav, active, hover, focus, routing.	Frame preview, size table, behavior table.
Layouts	Layouts start from archetypes.	Grid, containers, margins, card spans, fold heights, breakpoints.	Grid demo, archetype table, layout prompt.
Templates	Templates define structure before content.	Page types, content budgets, section order, responsive rules.	Recipe cards, table of reusable page patterns.
Tokens	Component, semantic, primitive order.	Primitive JSON, semantic JSON, component tokens, code export.	Copyable code plus compact token reference.
AI usage	AI selects and assembles.	Allowed components, layout recipes, token rules, QA gates.	Composition contract, build prompt, QA prompt, report.
Handoff	Package must be usable without explanation.	Folders, links, owners, install notes, export rules.	Checklist, file map, final QA status.

New component rule

When a client brand adds a new component, layout, grid, or asset group, it must be documented with the full source-of-truth pattern before it can be used by AI or engineering.

Source

Name the Figma frame, asset folder, token file, or code component that owns the decision. If the source is missing, the component is not approved.

Behavior

Document anatomy, variants, states, dimensions, responsive rules, accessibility, and how the component behaves under real content.

Gate

Add brand health and UI health checks. If the component invents tokens, breaks anatomy, or lacks states, it is blocked until the rule is complete.

Atomic template layers

Use this section to show how brand foundations move into practical frontend output. The layer model should work for any client, from a token-only system to a full atomic design system.

Foundations

Positioning, audience, personality, voice, logo assets, colour system, typography roles, spacing scale, and page grid rules.

Atoms to templates

Buttons, fields, controls, feedback, navigation, content blocks, product flows, and page templates assembled from approved parts.

Health gates

Brand health, UI health, token use, Figma geometry, accessibility, and responsive behavior decide whether output can move forward.

Health check pattern

Every implementation rule should declare how it is judged. Use light-touch chips so risk is visible without turning the page into a dashboard.

Layer	Rule type	Template decision	Health
Brand	source.truth	Brand strategy, audience, and promise must appear before visual or UI choices.	Pass
UI	layout.rule	Layouts must use approved recipes, measured Figma geometry, and content budgets.	Warn
AI	output.gate	Any invented token, component anatomy, layout recipe, or off-voice claim is blocked.	Red flag

Copyable code module

Use this for token exports, composition contracts, AI prompts, QA prompts, and handoff notes. Keep code examples neutral and replaceable by client tier.

Template snippet

{
  "page": "Overview",
  "status": "Required",
  "client": "Client Name",
  "templateRule": "locked_master_template",
  "brandRule": "client_page_rule",
  "sourceOfTruth": ["figma", "tokens", "components", "assets"],
  "brandHealth": "Pass",
  "uiHealth": "Pass"
}

Brand inputs

Brand foundation inputs, parameters, and sources of truth for white-label re-skinning. Every client style guide begins by populating these canonical slots.

Logo assets

Slots L1 through L4 define the identity marks instantiated across the template shell, cover, and badges.

Client logo slot (L1)

150px by 46px navbar slot. Embedded in the global navigation bar and drawer header.

nav.logo-slot

Client Logo Container (150x46)

Primary logo (L2)

219px by 22px horizontal wordmark. Scaled for document headers and formal covers.

asset.logo.primary

Primary Wordmark (219x22)

Logo mark (L3)

24px by 24px standalone brand emblem. Powers icon badges and favicon representations.

asset.logo.mark

Symbol Mark (24x24)

Cover graphic (L4)

543px by 422px signature visual element. Anchored to the cover layout right frame.

asset.logo.cover

Cover Graphic Hero (543x422)

Colour sources

Slots C1 through C6 map the client brand palette into primitive token ramps.

C1: Accent Source

C2: Neutral Ramp

C3: Surface Primitives

C4: Status Signals

Type specimens

Slots T1 through T5 bind font family, weight ramps, and scale hierarchies.

Slot	Role	Family & Weight	Token Reference	Preview
T1	Display	Inter 700 / 64px	font.display	Aa
T2	Heading	Inter 600 / 24px	font.heading.large	Aa
T3	Body	Inter 400 / 14px	font.body	Aa
T4	Label	Inter 500 / 14px	font.label	Aa
T5	Code	Inter 400 / 14px	font.code	Aa

Media and references

Slots G1 (Imagery) and R1 (Canonical references) anchoring the brand assets.

Imagery grid (G1)

Canonical image ratios: 16:9 hero aspect, 4:3 feature aspect, and 1:1 avatar aspect. Standard fills use neutral placeholder tokens.

ratio.hero (16:9) ratio.feature (4:3) ratio.square (1:1)

References list (R1)

Canonical links for brand assets and design repositories:

Brand Guidelines Source of Truth
Figma Master Asset Libraries
Token Engine Configuration

Tone and component styles

Slots W1 (Tone words) and S1 through S3 (Geometry and elevation choices).

Bold Intelligent Architectural Systematic

Radius style (S1)

Selected: Subtle (4px on controls, 6px on cards). Configurable to Pill or Square in brand profile.

Elevation style (S2)

Selected: Flat border (1px stroke with minimal elevation). Configurable to Raised shadow.

Border weight (S3)

Selected: 1px standard (thin outline hierarchy). All controls enforce uniform 1px borders.

Primitive token map (M1)

Mapping from input slots to compiled tokens in tokens/brand/brand.sm-studio.json.

Slot	Input Name	Mapped Token Path	Default Value	Re-skin Action
L1	Client logo	nav.logo-slot	150px x 46px	Replace asset SVG
L2	Primary logo	asset.logo.primary	219px x 22px	Replace asset SVG
L3	Logo mark	asset.logo.mark	24px x 24px	Replace asset SVG
L4	Cover graphic	asset.logo.cover	543px x 422px	Replace asset SVG
C1	Accent colour	primitive.color.status.info	#2684FF	Set client hex
C2	Neutral ramp	primitive.color.ink.*	5-step ramp	Set neutral values
C3	Surfaces	primitive.color.surface.*	4 surfaces	Set page/card fills
C4	Status signals	primitive.color.status.*	Pass, Warn, Red	Adjust signal hex
T1-T5	Typeface	primitive.font.*	Inter Variable	Configure font woff2

Brand inputs configuration

{
  "$schema": "https://character.style/schema/brand-inputs.json",
  "brand": {
    "name": "SM Studio",
    "version": "1.0.0",
    "inputs": {
      "logos": {
        "clientLogo": "assets/sm-studio-logo.svg",
        "primaryLogo": "assets/sm-studio-logo-primary.svg",
        "mark": "assets/character-mark-16-orange.svg",
        "coverGraphic": "assets/character-cover-graphic.svg"
      },
      "colours": {
        "accent": "#2684FF",
        "neutralBase": "#1E1F21",
        "surfacePage": "#F4F5F7"
      },
      "typography": {
        "primaryFamily": "Inter",
        "displayWeight": 700,
        "headingWeight": 600,
        "bodyWeight": 400
      },
      "style": {
        "radius": "subtle",
        "elevation": "flat",
        "borderWidth": "1px"
      }
    }
  }
}

How this template works

The template rule stays fixed. The brand rule changes per client and per page. Every decision must connect to an approved source before it becomes a component, token, layout, or AI-ready instruction.

Brand rules

Start with positioning, audience, voice, logo behavior, colour, typography, imagery, and claim rules. Then map them to source files and tokens.

Open brand foundation

UI components

Document one approved component with anatomy, variants, states, tokens, accessibility, source, and copyable implementation.

Open components

AI usage

AI selects from the approved system. It should never invent tokens, grids, layouts, components, states, or off-brand claims.

Open AI usage

Build order

Follow this order when turning a new brand into a working guide. Do not start by styling components before the brand and token layers are defined.

Step	Go to	What to define	Output
1	Brand	Positioning, audience, voice, promise, principles, claims.	Brand rule.
2	Assets	Logos, imagery, icons, source files, exports, usage limits.	Source library.
3	Foundations	Colours, typography, shapes, spacing, surfaces, feedback.	Foundation tokens.
4	Components	Anatomy, variants, states, tokens, accessibility.	Component rules.
5	Patterns	Navigation, layouts, templates, budgets, responsive rules.	Page recipes.
6	Systems	Tokens, AI contract, QA prompts, health gates, handoff notes.	Build-ready system.

Role journeys

How each discipline navigates and applies the master style guide system.

Design journey

Start with Brand foundation, Typography, and Colours. Document master components in Figma with exact token bindings, states, and responsive variants before handoff.

Explore brand foundation

Engineering journey

Export tokens via the build engine, consume CSS custom properties, implement semantic components, and verify WCAG AA accessibility across viewports.

View token architecture

Content journey

Review brand voice principles, tone spectrums, and content guidance. Apply approved labels, sentence case capitalization, and clear action verbiage.

Read voice and tone rules

AI production journey

Load the AI usage contract and prompt templates. Assemble pages strictly from approved components, tokens, and layouts without inventing rogue tokens.

Open AI usage framework

Brand positioning

The core purpose, target audience, and strategic market position.

Positioning statement

SM Studio delivers intelligent, systemic brand architectures for digital products. We bridge high-craft brand design with engineering-grade token engines.

Target audience

Product leaders, design systems engineers, and technical founders building scalable multi-platform applications requiring rigid brand consistency.

Core promise

Deterministic design implementation: every aesthetic decision maps directly to an immutable, accessible code token with zero drift.

Voice and tone

Principles for written communication, microcopy, and documentation.

Architectural Direct Precise Systematic

Voice principles

Be concise: State the rule immediately. Avoid rhetorical flourishes or conversational filler.
Be definitive: Write instructions that can be implemented deterministically by engineers and AI agents.
Be grounded: Cite the source node, token, or package for every technical claim.

Tone spectrum

Our tone adapts to context while maintaining authority:

Interface copy: Functional, unambiguous, neutral.
Error messaging: Constructive, actionable, calm.
Technical guidance: Rigorous, exhaustive, developer-ready.

Brand principles

Foundational rules governing all brand expression and user interfaces.

1. Token before value

Never write literal hex values, pixels, or inline styles. Bind every visual property to a semantic token that supports dynamic theming and multi-brand re-skinning.

2. Single component source

Document one component per pattern that encapsulates all interaction states. Avoid fragmenting components into separate detached elements.

3. Uncompromising accessibility

Accessibility is not an afterthought. Every color pairing must achieve WCAG AA contrast (4.5:1), every control must be keyboard operable, and all states announced cleanly.

Messaging and claims

Approved patterns for value propositions and technical representations.

Topic	Do (Approved expression)	Don't (Prohibited drift)
Brand system scope	"Enterprise token engine built to Atlassian depth with full responsive support."	"Just another UI kit or Figma component library."
Accessibility claims	"Meets WCAG 2.1 AA with zero automated violations across all viewports."	"Fully accessible without running verification audits."
AI integration	"Deterministic AI production bound by explicit token contracts."	"AI generates freeform styles and unconstrained interfaces."

Typeface roles

The type system separates functional UI from expressive brand moments. AI and engineers should preserve this split before choosing size, weight, or hierarchy.

Inter / UI

Primary product typeface for UI, forms, buttons, navigation, body copy, and component labels.

Inter / Display

Display typeface for selective brand headlines, campaign moments, and premium editorial emphasis.

Typeface roles

  --sm-primitive-font-sans: "Inter", sans-serif;
  --sm-primitive-font-mono: "Inter", sans-serif;
  --sm-primitive-font-display: "Inter", sans-serif;
  --sm-primitive-font-body: "Inter", sans-serif;

Download

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Download

SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
Inter is licensed under the SIL Open Font License (OFL).

Text style tokens

Each Figma text style maps to a code token and a clear usage rule.

UI safe

Figma text style	Token	Usage
Display
Display / Page title	font.display	Inter 64 / 98% / 700. Cover titles and page openers.
Heading
Heading / XXL	font.heading.xxlarge	Inter 32 / 36 / 600. Page titles inside the documentation.
Heading / XL	font.heading.xlarge	Inter 28 / 32 / 600. Major section titles.
Heading / L	font.heading.large	Inter 24 / 28 / 600. Section titles and module headers.
Heading / M	font.heading.medium	Inter 20 / 24 / 600. Panel and card titles.
Heading / S	font.heading.small	Inter 16 / 20 / 600. Subsection and dialog titles.
Heading / XS	font.heading.xsmall	Inter 14 / 20 / 600. Card headings and field group titles.
Heading / XXS	font.heading.xxsmall	Inter 12 / 16 / 600. Eyebrows, overlines and small group labels.
Body
Body / L	font.body.large	Inter 16 / 24 / 400. Lead paragraphs and introductions.
Body / M	font.body	Inter 14 / 20 / 400. Default body text for documentation and interfaces.
Body / S	font.body.small	Inter 12 / 16 / 400. Captions, helper text and metadata.
Label and code
Label	font.label	Inter 14 / 20 / 500. Buttons, form labels, tabs and navigation items.
Code	font.code	Inter 14 / 20 / 400. Token names, code snippets and values.

Text style tokens

  --sm-font-display: 700 64px/0.98 "Inter", sans-serif;
  --sm-font-display-cover: 400 64px/0.98 "Inter", sans-serif;
  --sm-font-heading-xxlarge: 600 32px/36px "Inter", sans-serif;
  --sm-font-heading-xlarge: 600 28px/32px "Inter", sans-serif;
  --sm-font-heading-large: 600 24px/28px "Inter", sans-serif;
  --sm-font-heading-medium: 600 20px/24px "Inter", sans-serif;
  --sm-font-heading-small: 600 16px/20px "Inter", sans-serif;
  --sm-font-heading-xsmall: 600 14px/20px "Inter", sans-serif;
  --sm-font-heading-xxsmall: 600 12px/16px "Inter", sans-serif;
  --sm-font-body: 400 14px/20px "Inter", sans-serif;
  --sm-font-body-large: 400 16px/24px "Inter", sans-serif;
  --sm-font-body-small: 400 12px/16px "Inter", sans-serif;
  --sm-font-label: 500 14px/20px "Inter", sans-serif;
  --sm-font-code: 400 14px/20px "Inter", sans-serif;

Typography hierarchy and accessibility

System rules for pairing font weights, managing reading line lengths, and guaranteeing WCAG compliance.

Hierarchy and pairing

Maintain consistent typographic proportion across documentation surfaces:

Display (64px): Editorial hero titles and cover elements only. Never use within content modules.
Headings (32px to 14px): Use sequential semantic heading tags (h1 to h6) with strict line-height proportional ratios.
Body & Labels (14px): Standardize interactive UI controls on 14px over 20px line-height (500 weight for labels, 400 for copy).

Accessibility & readability

Typography rules to satisfy WCAG 2.1 Level AA:

Contrast: Body and label text must maintain a minimum 4.5:1 contrast ratio against page and container surfaces.
No uppercase body copy: Reserve uppercase strictly for small category kickers (12px) using CSS text-transform.
Line length: Constrain content prose to 60-75 characters per line for sustained reading comfort.

Primitive ramps

Raw palette families, named by colour family and step. Components never call these directly; they reach them through semantic tokens.

Neutral

Ink

Surface

Accent

Pass

Warn

Red

Info

Primitive ramps

  --sm-primitive-color-neutral-0: #FFFFFF;
  --sm-primitive-color-neutral-100: #F8F8F8;
  --sm-primitive-color-neutral-200: #F0F1F2;
  --sm-primitive-color-neutral-300: #DDDEE1;
  --sm-primitive-color-neutral-400: #B7B9BE;
  --sm-primitive-color-neutral-500: #8C8F97;
  --sm-primitive-color-neutral-600: #7D818A;
  --sm-primitive-color-neutral-700: #6B6E76;
  --sm-primitive-color-neutral-800: #505258;
  --sm-primitive-color-neutral-900: #3B3D42;
  --sm-primitive-color-neutral-1000: #292A2E;
  --sm-primitive-color-neutral-1100: #1E1F21;
  --sm-primitive-color-neutral-1200: #000000;
  --sm-primitive-color-ink-400: #96999E;
  --sm-primitive-color-ink-600: #505258;
  --sm-primitive-color-ink-800: #3B3D42;
  --sm-primitive-color-ink-900: #292A2E;
  --sm-primitive-color-ink-1000: #1E1F21;
  --sm-primitive-color-surface-page: #FFFFFF;
  --sm-primitive-color-surface-line: rgba(11, 18, 14, 0.14);
  --sm-primitive-color-surface-code: #F8F8F8;
  --sm-primitive-color-accent-base: #1F5EFF;
  --sm-primitive-color-accent-surface: #F2F5FF;
  --sm-primitive-color-accent-focus-ring: rgba(31, 94, 255, 0.34);
  --sm-primitive-color-status-pass: #34C759;
  --sm-primitive-color-status-pass-text: #008932;
  --sm-primitive-color-status-warn: #FF8D28;
  --sm-primitive-color-status-warn-text: #C55300;
  --sm-primitive-color-status-caution: #FFCC00;
  --sm-primitive-color-status-caution-text: #A16A00;
  --sm-primitive-color-status-red: #FF383C;
  --sm-primitive-color-status-red-text: #E9152D;
  --sm-primitive-color-status-info: #0088FF;
  --sm-primitive-color-status-info-text: #1E6EF4;

Feedback states

System feedback colours sit outside the brand families and stay consistent across every surface.

Success #2F7D4A

Error #B42318

Warning #B7791F

Info #1F5EFF

Feedback states

  --sm-color-feedback-pass: var(--sm-primitive-color-status-pass);
  --sm-color-feedback-pass-surface: #F3FCF5;
  --sm-color-feedback-pass-text: var(--sm-primitive-color-status-pass-text);
  --sm-color-feedback-warn: var(--sm-primitive-color-status-warn);
  --sm-color-feedback-warn-surface: #FFF8F2;
  --sm-color-feedback-warn-text: var(--sm-primitive-color-status-warn-text);
  --sm-color-feedback-caution: var(--sm-primitive-color-status-caution);
  --sm-color-feedback-caution-surface: #FFFCF0;
  --sm-color-feedback-caution-text: var(--sm-primitive-color-status-caution-text);
  --sm-color-feedback-red: var(--sm-primitive-color-status-red);
  --sm-color-feedback-red-surface: #FFF3F3;
  --sm-color-feedback-red-text: var(--sm-primitive-color-status-red-text);
  --sm-color-feedback-info: var(--sm-primitive-color-status-info);
  --sm-color-feedback-info-surface: #F0F8FF;
  --sm-color-feedback-info-text: var(--sm-primitive-color-status-info-text);

Semantic tokens

Intent-named tokens mapped to the primitive families. This is the layer components, developers, and AI build against.

Brand safe

Token	Value	Role
color.accent	#1F5EFF	Primary actions, links, selected states and the focus ring.
color.surface.sidebar	#303030	Navigation sidebar, cover and other dark framing surfaces.
color.surface.page	#FFFFFF	Default page background.
color.text.primary	#292A2E	Primary text and high-contrast foreground.
color.text.secondary	#505258	Supporting text, captions, metadata and table labels.
color.border.default	rgba(11, 18, 14, 0.14)	Dividers, field outlines, table rules and card edges.
color.surface.fill	rgba(16, 16, 16, 0.04)	Quiet fills behind inputs, chips and hovered rows.
color.feedback.red	#B42318	Errors, blocked actions, and red flag output.

Semantic tokens

  --sm-color-surface-page: var(--sm-primitive-color-surface-page);
  --sm-color-surface-card: var(--sm-primitive-color-alpha-white78);
  --sm-color-surface-card-strong: var(--sm-primitive-color-alpha-white94);
  --sm-color-surface-control: var(--sm-primitive-color-alpha-white72);
  --sm-color-surface-fill: var(--sm-primitive-color-alpha-ink04);
  --sm-color-surface-code: var(--sm-primitive-color-surface-code);
  --sm-color-surface-raised: var(--sm-primitive-color-white);
  --sm-color-surface-sidebar: var(--sm-primitive-color-shell-surface);
  --sm-color-surface-sidebar-active: var(--sm-primitive-color-shell-active);
  --sm-color-surface-sidebar-highlight: var(--sm-primitive-color-shell-subactive);
  --sm-color-surface-gradient: var(--sm-primitive-color-alpha-white70);
  --sm-color-text-primary: var(--sm-primitive-color-neutral-1000);
  --sm-color-text-secondary: var(--sm-primitive-color-neutral-800);
  --sm-color-text-muted: var(--sm-primitive-color-ink-400);
  --sm-color-text-inverse: var(--sm-primitive-color-white);
  --sm-color-text-inverse-muted: var(--sm-primitive-color-alpha-white54);
  --sm-color-text-inverse-soft: var(--sm-primitive-color-alpha-white60);
  --sm-color-text-contrast-light: var(--sm-primitive-color-contrast-light);
  --sm-color-text-contrast-dark: var(--sm-primitive-color-contrast-dark);
  --sm-color-accent: var(--sm-primitive-color-accent-base);
  --sm-color-accent-surface: var(--sm-primitive-color-accent-surface);
  --sm-color-border-default: var(--sm-primitive-color-surface-line);
  --sm-color-border-separator: var(--sm-primitive-color-alpha-ink10);
  --sm-color-border-hover: var(--sm-primitive-color-alpha-ink16);
  --sm-color-border-inverse: var(--sm-primitive-color-alpha-white18);
  --sm-color-border-faint: var(--sm-primitive-color-alpha-black04);
  --sm-color-focus-ring: var(--sm-primitive-color-accent-focus-ring);
  --sm-color-focus-ring-inverse: var(--sm-primitive-color-alpha-white24);

Usage rules

Cards used only where the content earns one. The wide card carries the longer rule; the standard card holds a single guardrail.

Use roles, not values

Apply the semantic role to every fill and text colour and keep each screen ready for a new brand by never placing a raw hex value.

Hold contrast

Text and icons meet WCAG AA against their surface: 4.5:1 for body text, 3:1 for large text and interface elements.

Colour accessibility and contrast architecture

Multi-mode contrast guarantees across Light and Dark themes evaluated by the token engine.

Contrast gate evaluation

Every semantic pairing is evaluated at build time by the automated AA gate in build/build.mjs:

Light theme: 34 pairings evaluated, 32 pass with AA compliance, 2 advisory flags on soft borders.
Dark theme: 34 pairings evaluated, 33 pass with AA compliance, 1 advisory flag on faint borders.
Zero failures: No text or essential interface pairing falls below 4.5:1.

Multi-mode semantic token roles

Design token architecture for seamless Light and Dark reflow:

Bold fills: Controls on solid fills use color.text.on-bold (#FFFFFF in light, #1F1F21 in dark) to achieve 5.9:1 against primary blue.
Sidebar constancy: Shell primitives retain #303030 across both themes to preserve brand identity and eliminate jarring shifts.

Radius Scale

Use radius as a semantic shape decision. Controls use tighter geometry; cards and overlays use softer corners.

radius.none 0px / sharp marks, badges

radius.sm 4px / chips, compact controls

radius.soft 6px / quick tip callout

radius.md 8px / panels, inputs, cards

radius.pill 9999px / pill buttons, badges

Elevation Scale

Use elevation only to clarify hierarchy. Flat surfaces are default, raised surfaces sit above page content, and overlay surfaces interrupt the flow.

shadow.panel Panel elevation / documentation block

shadow.card Card shadow / selectable panels

shadow.card-hover Hover shadow / elevated interactive card

shadow.swatch-hover Swatch hover / color tile elevation

shadow.swatch-focus Swatch focus / focused swatch ring

Modal Surface

Use modal surfaces for focused confirmation or profile edits. The surface should feel elevated, not decorative.

Modal Surface

<div class="surface-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <div class="surface-modal-header">
    <h4 class="surface-modal-title" id="modal-title">Save Master Configuration?</h4>
    <button class="surface-modal-close" type="button" aria-label="Close modal">&times;</button>
  </div>
  <div class="surface-modal-body">
    <p>This will commit token adjustments across all component templates.</p>
  </div>
  <div class="surface-modal-footer">
    <button class="button subtle" type="button">Cancel</button>
    <button class="button primary" type="button">Save configuration</button>
  </div>
</div>

Token architecture tiers

The design system organizes 398 tokens into four strictly governed architectural layers.

Active token categories

Representative sample of tokens and their role mapping in the master build.

Token	Resolved Value	Category	Use
`--sm-color-accent`	#1F5EFF	Semantic	Brand accent, primary actions
`--sm-color-text-primary`	#292A2E	Semantic	Main body and heading text
`--sm-color-feedback-red`	#D32F2F	Semantic	Error emphasis and danger buttons
`--sm-radius-sm`	4px	Primitive	Inputs, buttons, lozenges
`--sm-radius-md`	8px	Primitive	Cards, dialogs, popovers
`--sm-space-4`	16px	Primitive	Base padding and gap step
`--sm-space-6`	24px	Primitive	Container and section padding
`--sm-motion-duration-standard`	160ms	Primitive	Standard interaction transition
`--sm-motion-duration-quick`	140ms	Primitive	Rapid hover and focus transitions

Accessibility utility

Screen reader text utility hiding content visually while keeping it accessible to assistive devices.

The .visually-hidden utility applies clip rect properties to hide decorative or redundant visuals without removing context from the accessibility tree.

Tokens in code

:root {
  --sm-color-accent: var(--sm-primitive-color-accent-base);
  --sm-color-text-primary: var(--sm-primitive-color-neutral-1000);
  --sm-space-4: 16px;
  --sm-radius-md: 8px;
}

.card {
  padding: var(--sm-space-4);
  border-radius: var(--sm-radius-md);
  color: var(--sm-color-text-primary);
  background: var(--sm-color-surface-raised);
}

Logo variants

Approved brand mark configurations for product headers, editorial layouts, and icon representations.

Download

<img src="assets/sm-studio-logo.svg" alt="SM Studio Logo (Light)" />

Download

<img src="assets/sm-studio-logo.svg" alt="SM Studio Logo (Dark)" />

Download

<img src="assets/sm-studio-circle-mark.svg" alt="SM Studio Circle Mark (Light)" />

Download

<img src="assets/sm-studio-circle-mark.svg" alt="SM Studio Circle Mark (Dark)" />

Download

<img src="assets/character-mark-16-orange.svg" alt="Character Mark (Light)" />

Download

<img src="assets/character-mark-16-orange.svg" alt="Character Mark (Dark)" />

Clear space and exclusion zone

Minimum protective boundary surrounding brand marks to preserve legibility and prominence.

The exclusion rule

The exclusion zone is proportional to the height of the symbol mark (X). Maintain at least 0.5X clear space on all sides of the wordmark free of competing text, UI edges, or busy photography.

Minimum digital sizes

Primary wordmark: Minimum 96px width in digital interfaces; minimum 25mm in print.
Brand symbol: Minimum 16px by 16px digital rendering.
Circle mark: Minimum 20px by 20px digital rendering.

Usage rules and restrictions

Strict constraints to prevent visual distortion or brand dilution.

Violation	Constraint	Required Correction
Aspect distortion	Never stretch, compress, or scale the logo non-proportionally.	Lock aspect ratio 1:1 during scaling operations.
Unauthorized rotation	Never rotate the wordmark or symbol at an angle.	Always display marks horizontally on a 0 degree baseline.
Color drift	Never recolor the mark with non-system palette values.	Use official orange mark or pure monochrome inverted versions.
Low contrast ground	Never place dark marks on dark backgrounds without sufficient contrast.	Ensure 4.5:1 contrast against surrounding background surface.

Approved image library

Twelve curated imagery assets with fixed 3:2 aspect ratios and production export downloads.

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Editorial Hero 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Editorial Hero 02" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Feature Spread 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Feature Spread 02" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Product Context 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Product Context 02" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Lifestyle Sequence 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Lifestyle Sequence 02" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Texture Detail 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Texture Detail 02" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Brand Vignette 01" />

Download

<!-- assets/images/placeholder-3x2.svg -->
<img src="assets/images/placeholder-3x2.svg" alt="Brand Vignette 02" />

Aspect ratio standards

Canonical image container ratios supporting responsive layout reflow across wide, desktop, tablet, and mobile viewports.

16:9 Hero aspect

Primary widescreen ratio for full-bleed page headers, cover showcases, and wide editorial banners.

ratio.hero 1920x1080

4:3 Feature aspect

Balanced container ratio for card thumbnails, case studies, product feature previews, and modular grids.

ratio.feature 800x600

1:1 Square aspect

Uniform square container for user avatars, author portraits, compact grid tiles, and media emblems.

ratio.square 400x400

Technical specifications

Performance budgets, format selection, and responsive image markup standards.

Parameter	Standard	Implementation Rule
File formats	AVIF (primary), WebP (fallback)	Serve modern next-gen compressed formats via HTML `picture` element.
File size budget	< 250 KB (hero), < 80 KB (cards)	Strict performance budget to ensure Largest Contentful Paint under 1.2s.
Responsive sizing	1x, 2x retina srcset	Supply `srcset` and `sizes` attributes for adaptive device pixel ratio matching.
Lazy loading	`loading="lazy"`	Apply native lazy loading to all below-the-fold imagery. Hero imagery uses eager priority.

Art direction and tone

Visual principles governing photographic selection and treatment.

Lighting and composition

Natural lighting: Prefer directional, natural lighting with authentic highlights. Avoid synthetic studio flash.
Architectural lines: Seek structural geometry, clean horizontals, and thoughtful negative space.
Genuine human focus: Depict candid, focused collaborative work rather than staged stock poses.

Color grading and treatment

Neutral palette harmony: Photography must harmonize with our Neutral 100 to 1000 ramps.
No harsh saturation: Avoid exaggerated vibrancy or artificial filter overlays.
Dark mode adaptation: In Dark mode, slightly reduce image exposure (brightness 90%) to prevent glaring contrast.

Iconography principles

Visual rules ensuring clarity, recognizable metaphors, and harmonious interface scaling.

Simplicity & metaphor

Icons reduce visual clutter by communicating universal conceptual actions. Avoid overly intricate illustrations that blur at small sizes.

Consistent stroke weight

Standardize on 1.5px to 2px geometric strokes with rounded end caps and optical center weighting aligned to an active pixel grid.

Semantic colour binding

Always bind icon strokes and fills to semantic tokens (such as color.icon.subtle or status tokens) rather than raw hardcoded fills.

Approved icon library

Canonical vector marks and component symbols exported for application surfaces.

Feather

287 icons

No icons match this search.

Feather 4.29.2, MIT

Selected icon

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>

Icon size ladder

Standardized dimensions ensuring optical proportion across all touchpoints.

Token	Dimension	Recommended Context
size.icon.100	16px	Compact inline text indicators, buttons, and chips.
size.icon.200	18px	Table action triggers and compact toolbars.
size.icon.300	20px	Standard form controls and input accessory slots.
size.icon.400	24px	Navigation list items and section headers.
size.icon.500	32px	Featured card badges and tile icon emblems.

Accessibility and labeling

Rules governing screen reader announcement for iconographic content.

Decorative icons

Icons accompanied by visible text labels must carry aria-hidden="true" to prevent redundant screen reader announcements (for example, Menu button or button with label).

Standalone action icons

Icons that function as interactive triggers without visible text must supply an accessible name via aria-label or an embedded <span class="visually-hidden"> element.

Icon size tokens

  --sm-size-icon-100: 16px;
  --sm-size-icon-200: 18px;
  --sm-size-icon-300: 20px;
  --sm-size-icon-400: 24px;
  --sm-size-icon-500: 32px;

Canonical file register

Authoritative repository of design libraries, vector exports, typeface packages, and code repositories.

Canonical Export ready

Asset Type	Canonical Location	Primary Purpose	Status
Figma design system	`LJSVTEshawoFxr65088EY8`	Master components, responsive page archetypes, and token bindings.	Locked
Vector assets	`src/assets/*.svg`	Exported logos, circle marks, cover graphics, and favicon vectors.	Verified
Typeface package	`src/assets/fonts/InterVariable.woff2`	Inter Variable webfont and accompanying Open Font license.	Download
Token source engine	`tokens/*/.json`	Deterministic brand, semantic, component, and layout tokens.	Built
Client exports	`dist/sm-studio/`	Compiled CSS custom properties, tokens JSON, and component catalogs.	Exported

Source governance rules

Maintenance and change control policies for design system assets.

Single source of truth

Code is the ultimate production source of truth. Design explorations in Figma must merge back through token assemblies and automated verification before deployment.

Deterministic versioning

Every token build generates an SHA256 build hash banner. Downstream consumers lock to specific immutable build hashes to eliminate unintended visual regressions.

Anatomy

A button holds a label, an optional icon before or after the label, and a container that carries the fill, border and focus ring.

Parts

1 Button container
2 Icon, optional
3 Label

Anatomy

<button class="button primary" type="button">
  <span class="btn-icon" aria-hidden="true">...</span>
  <span class="btn-label">Button</span>
</button>

Appearance

Appearance sets the weight of an action. Use primary for the single most important action, default for secondary actions and subtle for low emphasis; reserve warning, danger and discovery for actions that carry that meaning.

Appearance	Background	Text	Border
Default	color.background.neutral.subtle	color.text.subtle	color.border
Primary	color.accent	color.text.inverse	None
Subtle	color.background.neutral.subtle	color.text.subtle	None
Warning	color.background.warning.bold	color.text.warning.inverse	None
Danger	color.background.danger.bold	color.text.inverse	None
Discovery	color.background.discovery.bold	color.text.inverse	None

Appearance

<button class="button default" type="button">Default</button>
<button class="button primary" type="button">Primary</button>
<button class="button subtle" type="button">Subtle</button>
<button class="button warning" type="button">Warning</button>
<button class="button danger" type="button">Danger</button>
<button class="button discovery" type="button">Discovery</button>

States

Every appearance carries the same seven states, from rest through hovered, pressed, focus, selected and disabled to loading, so behaviour stays predictable across the system.

Appearance	rest	hovered	pressed	focus-visible	disabled	selected	loading
Default
Primary
Subtle
Warning
Danger
Discovery

States

<!-- Rest -->
<button class="button primary" type="button">Rest</button>
<!-- Hovered -->
<button class="button primary is-hovered" type="button">Hovered</button>
<!-- Pressed -->
<button class="button primary is-pressed" type="button">Pressed</button>
<!-- Focus -->
<button class="button primary is-focused" type="button">Focus</button>
<!-- Disabled -->
<button class="button primary" type="button" disabled>Disabled</button>
<!-- Selected -->
<button class="button primary is-selected" type="button">Selected</button>
<!-- Loading -->
<button class="button primary is-loading" type="button">Loading</button>

Size

Use the 32px default in most layouts and the 24px compact size in dense areas such as tables, toolbars and inline actions.

Default spacing

Height: 32px
Padding: 6px by 12px
Radius: 6px
Gap: 4px, 6px beside an icon
Font: 14px over 20px, weight 500
Border: 1px

Compact spacing

Height: 24px
Padding: 2px by 12px
Radius: 4px
Gap: 4px, 6px beside an icon
Font: 14px over 20px, weight 500
Border: 1px

Size

<!-- Default (32px) -->
<button class="button primary" type="button">Button</button>
<!-- Compact (24px) -->
<button class="button primary compact" type="button">Button</button>

Width

Buttons hug their label by default. Use full width only in narrow layouts or single-column forms where the button is the only action in its row.

Auto width

Full width

Width

<!-- Auto width -->
<button class="button primary" type="button">Button</button>
<!-- Full width -->
<button class="button primary full-width" type="button">Button</button>

Icons

Add an icon only when it makes the action faster to recognise. Place it before the label for the action itself and after the label for direction, and give every icon-only button an accessible name.

Icon before

Icon after

Icon only, 32px and 24px

Icons

<!-- Icon before -->
<button class="button primary" type="button"><span class="btn-icon" aria-hidden="true">★</span>Button</button>
<!-- Icon after -->
<button class="button primary" type="button">Button<span class="btn-icon" aria-hidden="true">→</span></button>
<!-- Icon only -->
<button class="button primary icon-only" type="button" aria-label="Action"><span class="btn-icon" aria-hidden="true">★</span></button>

Truncation

Write labels that fit. When space runs out, truncate with an ellipsis and show the full label in a tooltip rather than wrapping onto a second line.

Long label, auto width

Long label, clipped in a 160px container

Truncation

<button class="button default truncate" type="button" title="A long label that keeps its full width">A long label that keeps its full width</button>

Groups

Group buttons that belong to one decision, ordered from least to most important, with the primary action last.

Button group

Split button

Groups

<div class="button-group">
  <button class="button subtle" type="button">Help</button>
  <button class="button default" type="button">Cancel</button>
  <button class="button primary" type="button">Save</button>
</div>

Do and don't

These rules keep every action clear and every label consistent across the product.

Rule	Do	Don't
One primary action per area Use one primary button per view or panel, so the main action stays obvious.
Button for actions, link for navigation Buttons change data or state. Links move people to another page.	Back to list
Sentence case Capitalise only the first word and proper nouns.
Short labels Keep labels to one to three words.
Specific verbs Name the outcome, such as Delete project, never a generic OK.

Accessibility

Every button works by keyboard and screen reader, with a visible 2px focus ring, label contrast of at least 4.5:1 and an accessible name on every icon-only button.

Prefer on-screen guidance to disabled buttons

A disabled button hides why an action is unavailable. Keep the button active and explain what is missing beside the field or in a message.

No tooltips on disabled buttons

Disabled buttons cannot take keyboard focus, so their tooltips never reach keyboard and screen reader users. Put the explanation in visible text.

Specification

Every value below is a component token, so a new brand changes the button by changing the token, never the component.

Part	Token	Value	Rule
Container	button/height button/height-compact	32px default, 24px compact	Compact only in dense layouts.
Padding	button/pad-block button/pad-block-compact button/pad-inline	6px by 12px default, 2px by 12px compact	Fixed padding; the label sets the width.
Radius	button/radius button/radius-compact	6px default, 4px compact	Set per brand through the component token.
Gap	button/gap button/gap-icon	4px, 6px beside an icon	Read from the token, never adjusted by hand.
Label	type/label/size type/label/line-height type/label/weight	Inter 14px over 20px, weight 500	One label style for every appearance and size.
Border	button/border-width	1px	Default appearance only; the others carry no border.
Icon	icon/size icon/box-compact	16px; icon only 32px square, 24px compact	Icon-only buttons stay square at both sizes.
Focus ring	size/border/emphasis size/focus/offset	2px ring, 3px offset	Visible on keyboard focus for every appearance.
Motion	button/transition-duration	150ms	Colour transitions only, with no movement or scaling.

Specification

  --sm-button-height: 32px;
  --sm-button-height-compact: 24px;
  --sm-button-pad-block: 6px;
  --sm-button-pad-block-compact: 2px;
  --sm-button-pad-inline: 12px;
  --sm-button-radius: 6px;
  --sm-button-radius-compact: 4px;
  --sm-button-gap: 4px;
  --sm-button-gap-icon: 6px;
  --sm-button-border-width: 1px;
  --sm-button-transition-duration: 150ms;

Field anatomy

Standard structure for form field controls across all input types.

Field label

Descriptive helper text positioned beneath input container.

Parts

1 Label with optional required marker
2 Input container with 1px border and 6px radius
3 Helper text or validation feedback message

Text field

Single-line input for alphanumeric data, names, identifiers, and concise responses.

Standard text field

Default appearance with 1px border and neutral background surface.

Display name Public profile identifier seen by other workspace members.

Subtle text field

Border-less transparent appearance that reveals borders on hover and active focus.

Inline edit field Clicks to edit in place without persistent border chrome.

Field state matrix

Verified states from resting to validation and disabled states.

Rest state

Invalid state Enter a valid email address.

Disabled state

Text field

<div class="field">
  <label for="demo-text-standard" class="field-label">Display name</label>
  <input class="input" id="demo-text-standard" type="text" placeholder="Enter full name" />
  <span class="helper">Public profile identifier seen by other workspace members.</span>
</div>

Text area

Multi-line input for descriptions, extended notes, feedback, and long-form content.

Standard multi-line input

Vertical resize allowed with minimum height 104px and comfortable padding.

Project description Maximum 500 characters.

Resize guidelines

Vertical resize: Permitted for expansive input; horizontal expansion is locked to maintain container boundaries.
Character count: Helper text updates dynamically as character boundaries are approached.
Minimum height: Never collapse below 80px to ensure multi-line affordance is obvious.

Select and choice menus

Dropdown pickers for single-choice and multi-choice selections from defined lists.

Creatable select

Permits users to pick existing options or create custom tags. Full WAI-ARIA combobox keyboard navigation.

Asset classification Enter, Space, or ArrowDown opens; Arrow keys navigate; Enter selects.

Creatable select

<div class="field select-combobox-wrap">
  <label for="breed-select-trigger" class="field-label">Asset classification</label>
  <button class="select-control" id="breed-select-trigger" type="button" role="combobox" aria-expanded="false" aria-controls="breed-select-menu" aria-haspopup="listbox">
    <span class="select-value"><span class="select-input-text">Brand Guidelines</span></span>
    <span class="select-chevron" aria-hidden="true">▾</span>
  </button>
  <div class="select-menu" id="breed-select-menu" role="listbox">
    <div class="select-option" id="opt-breed-guidelines" role="option">Brand Guidelines</div>
  </div>
</div>

Checkbox select (multi-choice)

Multiple options selected simultaneously with comma-separated values in the trigger container.

Target platforms Select all deployment targets that apply.

Checkbox select

<div class="field select-combobox-wrap">
  <label for="health-select-trigger" class="field-label">Target platforms</label>
  <button class="select-control" id="health-select-trigger" type="button" role="combobox" aria-expanded="false" aria-controls="health-select-menu" aria-haspopup="listbox">
    <span class="select-value"><span class="select-input-text">Desktop, Mobile Web</span></span>
    <span class="select-chevron" aria-hidden="true">▾</span>
  </button>
  <div class="select-menu" id="health-select-menu" role="listbox" aria-multiselectable="true">
    <div class="select-option is-selected" id="opt-platform-desktop" role="option" aria-selected="true">Desktop</div>
    <div class="select-option is-selected" id="opt-platform-mobile-web" role="option" aria-selected="true">Mobile Web</div>
    <div class="select-option" id="opt-platform-native-mobile" role="option" aria-selected="false">Native Mobile</div>
  </div>
</div>

Validation and content rules

Standards for form guidance, accessible error handling, and placeholder usage.

Rule	Do	Don't
Persistent visible labels	Keep the label permanently visible above the input field.	Never rely on disappearing placeholder text as the only label.
Explicit error messages	Explain exactly what value is needed and how to correct the error.	Never use generic error strings like Invalid input or Error.
Required field markers	Mark required inputs clearly with an asterisk and aria-required attribute.	Never leave users guessing which fields are mandatory.

Token specification

Component tokens governing field geometry, paddings, borders, and interaction states.

Field tokens

  --sm-field-border-radius: var(--sm-radius-md); /* 6px */
  --sm-field-border-width: var(--sm-size-border-thin); /* 1px */
  --sm-field-pad-block: var(--sm-space-2); /* 8px standard, 4px compact */
  --sm-field-pad-inline: var(--sm-space-3); /* 12px inline */
  --sm-field-font-family: var(--sm-type-family-sans);
  --sm-field-font-size: var(--sm-type-scale-400); /* 14px */
  --sm-field-line-height: var(--sm-type-leading-300); /* 20px */
  --sm-field-focus-outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);

Checkbox

Multi-choice selection indicators supporting checked, indeterminate, disabled, and invalid states.

Live checkbox specimens

Default unchecked Checked state Indeterminate state Disabled state Invalid state Required choice *

Checkbox specimen

<label class="control-label checkbox-label">
  <input type="checkbox" class="control-checkbox" />
  <span>Option label</span>
</label>

Radio

Mutually exclusive options presented in a grouped list with keyboard arrow navigation.

Live radio group specimens

Single option 1 Selected option 2 Alternative option 3 Disabled option

Radio Group Semantics

Arrow Up/Down/Left/Right moves focus and selects the option. Space checks the focused radio item.

Radio specimen

<div role="radiogroup" aria-label="Subscription plan">
  <label class="control-label radio-label">
    <input type="radio" name="plan" class="control-radio" value="standard" checked />
    <span>Standard tier</span>
  </label>
</div>

Toggle

Instantaneous binary switches in regular (32x16px) and large (40x20px) sizes.

Regular toggle (32x16px)

Theme persistence

Automated build hooks

Locked setting (disabled)

Large toggle (40x20px)

High contrast mode

Reduced motion animation

Toggle switch specimen

<button type="button" class="control-toggle" role="switch" aria-checked="false" aria-label="Setting label"></button>
<button type="button" class="control-toggle large" role="switch" aria-checked="true" aria-label="Large setting"></button>

Range slider and progress bar

Continuous value selection slider paired with live linear progress indication.

Live connected slider and progress bar

Drag the slider or use Arrow keys to adjust the value; the progress bar below updates dynamically.

Range input: 65%

Follower progress bar (height 6px, radius pill)

Range and progress bar

<input type="range" class="range-slider" min="0" max="100" value="65" />
<div class="progress-bar-track" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar-fill" style="width: 65%;"></div>
</div>

Progress tracker and indicator

Multi-stage workflow progression and sequential dot indicators.

Four-stage workflow tracker

Click "Back" or "Next" to move the active stage and update the dot indicator synchronously.

1 Inputs

2 Tokens

3 Components

4 Review

Progress tracker specimen

<div class="progress-tracker" aria-label="Step progress">
  <div class="tracker-stage is-complete"><span class="tracker-marker">1</span><span class="tracker-label">Step 1</span></div>
  <div class="tracker-stage is-current"><span class="tracker-marker">2</span><span class="tracker-label">Step 2</span></div>
</div>

Accordion

Vertically collapsible disclosure sections responding to pointer and keyboard triggers (Enter / Space).

How are brand tokens integrated into components?

Component CSS references CSS custom properties generated by the build engine. Modifying brand inputs immediately updates all dependent components across light and dark modes.

What accessibility standards are enforced across controls?

How do live controls respond to pointer and keyboard events?

Accordion specimen

<div class="accordion-item">
  <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="panel-id">
    <span>Section title</span>
    <span class="accordion-chevron" aria-hidden="true">▾</span>
  </button>
  <div class="accordion-panel" id="panel-id" role="region">
    <p>Collapsible disclosure content.</p>
  </div>
</div>

Token specification

Tokens governing toggle switches, range sliders, progress bars, and accordion components.

Control tokens

  --sm-toggle-width-regular: 32px;
  --sm-toggle-height-regular: 16px;
  --sm-toggle-width-large: 40px;
  --sm-toggle-height-large: 20px;
  --sm-progress-height: 6px;
  --sm-progress-radius: var(--sm-radius-pill);
  --sm-range-track-height: 4px;
  --sm-range-thumb-size: 16px;
  --sm-accordion-radius: var(--sm-radius-md);

Card variations

Seven foundational card patterns adhering to radius radius.md, inner padding space.10, and feature ratio layout.ratio.feature (1.55).

1. Image card (ratio 1.55)

Full-bleed feature media container locked to layout.ratio.feature (1.55 aspect ratio).

Image card markup

<figure class="card-feature-media" style="aspect-ratio: var(--sm-layout-ratio-feature); border-radius: var(--sm-radius-md); overflow: hidden;">
  <img src="assets/images/placeholder-3x2.svg" alt="Feature media" loading="lazy" />
</figure>

2. Colour text card

Tinted background card communicating high-emphasis principles with heading and body copy.

The Beauty of Structure

Tokens establish mathematical rhythm across every viewport, avoiding arbitrary spatial divergence.

Colour text card markup

<article class="card card-tinted" style="padding: var(--sm-space-10); border-radius: var(--sm-radius-md); background-color: var(--sm-color-accent-surface);">
  <h3>The Beauty of Structure</h3>
  <p>Tokens establish mathematical rhythm across every viewport.</p>
</article>

3. Image and text stacked card

Vertical compound card combining feature aspect ratio media with title and body narrative.

Precision Formulation

Systematic components composed with absolute geometry and zero CSS hardcoded literals.

Stacked card markup

<article class="card" style="border-radius: var(--sm-radius-md); overflow: hidden; background: var(--sm-color-surface-card);">
  <figure style="aspect-ratio: var(--sm-layout-ratio-feature);">
    <img src="assets/images/placeholder-3x2.svg" alt="Card visual" loading="lazy" />
  </figure>
  <div style="padding: var(--sm-space-10);">
    <h3>Precision Formulation</h3>
    <p>Systematic components composed with absolute geometry.</p>
  </div>
</article>

4. Icon card

Structured card adhering to item 6 with icon badge strictly stacked above the headline.

Deterministic Tokens

Tokens are parsed from structured JSON trees and compiled into immutable CSS properties.

Icon card markup

<article class="card" style="padding: var(--sm-space-10); border-radius: var(--sm-radius-md);">
  <div class="panel-head">
    <span class="icon-badge"><img src="assets/icons/feather/cpu.svg" alt="" /></span>
    <h3>Deterministic Tokens</h3>
  </div>
  <p>Tokens are parsed from structured JSON trees.</p>
</article>

5. Numbered step card

Process step container with 48px circle badge beside bordered container.

01

Audit Brand Inputs

Review primitive color values, typography weights, and geometry rules before compiling.

Numbered step card markup

<div class="step-card-row" style="display: grid; grid-template-columns: var(--sm-space-12) 1fr; gap: var(--sm-space-5);">
  <span class="step-num-circle" style="width: var(--sm-space-12); height: var(--sm-space-12); border-radius: var(--sm-radius-pill);">01</span>
  <article class="card" style="padding: var(--sm-space-10); border-radius: var(--sm-radius-md);">
    <h4>Audit Brand Inputs</h4>
    <p>Review primitive color values before compiling.</p>
  </article>
</div>

6. Card with action

Container with integrated primary or subtle button action for workflow triggers.

Export Design Package

Generate full distribution zip file containing HTML templates, compiled CSS, and vector marks.

Card with action markup

<article class="card" style="padding: var(--sm-space-10); border-radius: var(--sm-radius-md);">
  <h4>Export Design Package</h4>
  <p>Generate full distribution zip file.</p>
  <div style="margin-top: var(--sm-space-6);">
    <button type="button" class="button primary">Open</button>
  </div>
</article>

7. Horizontal image card

Side-by-side feature layout balancing 1.55 aspect ratio imagery with padded narrative content.

Responsive Layout Harmony

Horizontal containers adapt to viewport width, stacking vertically on mobile viewports while preserving inner padding and corner curvature.

Horizontal card markup

<article class="card card-horizontal" style="display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--sm-radius-md); overflow: hidden;">
  <figure style="aspect-ratio: var(--sm-layout-ratio-feature); margin: 0;">
    <img src="assets/images/placeholder-3x2.svg" alt="Feature" loading="lazy" />
  </figure>
  <div style="padding: var(--sm-space-10);">
    <h3>Responsive Layout Harmony</h3>
    <p>Horizontal containers adapt to viewport width.</p>
  </div>
</article>

Token specification

Design tokens governing card geometry, elevation, aspect ratio, and internal padding.

Property	Applied Token	Computed Value	Rule
Corner radius	radius.md	8px	Card container corners.
Internal padding	space.10	40px	Inner body and text padding.
Feature media ratio	layout.ratio.feature	1.55	Media figure aspect ratio.
Card shadow	shadow.card	0 1px 2px ..., 0 12px 32px ...	Resting elevation shadow.
Hover shadow	shadow.card-hover	0 2px 6px ..., 0 18px 44px ...	Pointer hover elevation.
Border stroke	color.border.default	1px solid default	Crisp perimeter containment.

Card token mappings

  --sm-card-radius: var(--sm-radius-md); /* 8px */
  --sm-card-pad: var(--sm-space-10); /* 40px */
  --sm-card-media-ratio: var(--sm-layout-ratio-feature); /* 1.55 */
  --sm-card-shadow: var(--sm-shadow-card);
  --sm-card-shadow-hover: var(--sm-shadow-card-hover);

Usage rules and accessibility

Implementation requirements for semantic container hierarchy and assistive navigation.

Usage principles

Always set card image aspect ratios via layout.ratio.feature to preserve visual consistency.
When pairing an icon with a card title, place the icon directly above the headline per layout standards (Item 6).
Maintain space.10 padding inside text containers to ensure legibility across breakpoints.

Accessibility standards

Cards containing actionable elements must preserve keyboard tab order and focus-visible outlines.
Images inside cards require descriptive font.code alternative text or an empty string if decorative.
Maintain minimum 4.5:1 text contrast on colored cards against the background surface.

Interaction state ladder

Consistent visual states from resting to disabled across interactive surfaces.

State	Affordance	Applied Token	Rule
Rest	Baseline surface and text	color.surface.fill	Initial untouched appearance.
Hover	Subtle border shift	color.border.hover	Pointer hover visual feedback.
Active / Pressed	Depressed surface contrast	color.accent.active	Mouse press or key down feedback.
Focus-visible	2px outline with 2px offset	color.focus.ring	Keyboard navigation indicator.
Selected	Accent surface with bold indicator	color.accent.surface	Current active selection.
Disabled	Reduced opacity (0.4) and blocked cursor	opacity.disabled	Unavailable action; avoid if explanation needed.

Prominent full-width alert communicating high-severity conditions at the top of the interface.

Warning banner

Warning banner code

<div class="banner banner-warning" role="alert">
  <span class="status-icon icon-alert-triangle role-warn" aria-hidden="true"></span>
  <span>System maintenance scheduled in 15 minutes.</span>
</div>

Error banner

Error banner code

<div class="banner banner-error" role="alert">
  <span class="status-icon icon-alert-octagon role-error" aria-hidden="true"></span>
  <span>Connection failure: Token compiler service is unreachable.</span>
</div>

Announcement banner

Announcement banner code

<div class="banner banner-announcement" role="region" aria-label="Announcement">
  <span class="status-icon icon-info role-info" aria-hidden="true"></span>
  <span>SM Studio Brand System revision 3 is now available.</span>
</div>

Flag

Floating notification toasts communicating status with minimal interruption.

Warning flag

Contrast advisory Custom accent approaches minimum ratio threshold on light surfaces.

Warning flag code

<div class="flag flag-warning" role="status">
  <span class="status-icon size-20 icon-alert-triangle role-warn" aria-hidden="true"></span>
  <strong>Contrast advisory</strong>
</div>

Error flag

Validation failure Missing mandatory brand metadata. Review input page before generating.

Error flag code

<div class="flag flag-error" role="alert">
  <span class="status-icon size-20 icon-alert-octagon role-error" aria-hidden="true"></span>
  <strong>Validation failure</strong>
</div>

Normal flag

Draft auto-saved Local draft state cached in browser storage.

Normal flag code

<div class="flag flag-normal" role="status">
  <strong>Draft auto-saved</strong>
</div>

Info flag

System updated Token engine deployed with automatic multi-viewport verification.

Info flag code

<div class="flag flag-info" role="status">
  <span class="status-icon size-20 icon-info role-info" aria-hidden="true"></span>
  <strong>System updated</strong>
</div>

Success flag

Build verified All 24 routes passed route checks, axe accessibility audits, and scroll tests.

Success flag code

<div class="flag flag-success" role="status">
  <span class="status-icon size-20 icon-check-circle role-pass" aria-hidden="true"></span>
  <strong>Build verified</strong>
</div>

Section message

Embedded contextual alerts positioned within a specific view region.

Warning section message

Cannot connect to database

The remote token registry has timed out. Local cache is currently serving assets.

Warning section message code

<section class="section-message warning">
  <strong>Cannot connect to database</strong>
</section>

Error section message

Action prohibited

This profile has been permanently locked against automated changes.

Error section message code

<section class="section-message error">
  <strong>Action prohibited</strong>
</section>

Success section message

Tokens compiled successfully

All CSS variables and schema files generated with 0 contrast warnings.

Success section message code

<section class="section-message success">
  <strong>Tokens compiled successfully</strong>
</section>

Discovery section message

New pattern available

Slide deck 16:9 layout templates added under Patterns / Layouts.

Discovery section message code

<section class="section-message discovery">
  <strong>New pattern available</strong>
</section>

Information section message

Editing restricted

Direct modification of core tokens is locked in production view. Use branch configurations.

Information section message code

<section class="section-message information">
  <strong>Editing restricted</strong>
</section>

Inline message

Compact inline indicators alerting users when input context requires attention.

Warning inline message

Slow response detected on CDN endpoint

Warning inline message code

<div class="inline-message warning">
  <span class="status-icon icon-alert-triangle role-warn" aria-hidden="true"></span>
  <span>Slow response detected</span>
</div>

Error inline message

Invalid token syntax: missing closing brace

Error inline message code

<div class="inline-message error">
  <span class="status-icon icon-alert-octagon role-error" aria-hidden="true"></span>
  <span>Invalid token syntax</span>
</div>

Info inline message

Asset will be cached for 24 hours

Info inline message code

<div class="inline-message info">
  <span class="status-icon icon-info role-info" aria-hidden="true"></span>
  <span>Asset will be cached for 24 hours</span>
</div>

Connectivity inline message

Offline mode active. Syncing changes locally.

Connectivity inline message code

<div class="inline-message connectivity">
  <span class="status-icon icon-wifi-off role-warn" aria-hidden="true"></span>
  <span>Offline mode active</span>
</div>

Confirmation inline message

Component export verified successfully

Confirmation inline message code

<div class="inline-message confirmation">
  <span class="status-icon icon-check-circle role-pass" aria-hidden="true"></span>
  <span>Component export verified successfully</span>
</div>

Loading and placeholder states

Graceful feedback during async operations and empty collection states.

Skeleton loading

Presents low-contrast layout blocks while async data or assets load into view.

Skeleton loading markup

<div class="skeleton-demo-box">
  <div class="skeleton-bar" style="width: 60%;"></div>
</div>

Empty state

Clear guidance when a dataset, search filter, or asset list contains zero items.

No assets found

Try adjusting your search query or upload new vector marks.

Empty state markup

<div class="empty-state-box">
  <p>No assets found</p>
</div>

Token specification

Tokens governing feedback colors, focus indicators, and disabled opacities.

Role	Token	Surface Color	Rule
Pass / Success	color.feedback.pass	Apple Green	Affirmative completion states.
Warn / Warning	color.feedback.warn	Apple Orange	Cautionary advisory notices.
Red / Error	color.feedback.red	Apple Red	Validation and process failures.
Info	color.feedback.info	Apple Blue	System informational updates.

Feedback tokens

  --sm-color-feedback-pass: var(--sm-color-feedback-pass);
  --sm-color-feedback-warn: var(--sm-color-feedback-warn);
  --sm-color-feedback-red: var(--sm-color-feedback-red);
  --sm-color-feedback-info: var(--sm-color-feedback-info);
  --sm-opacity-disabled: 0.4;

Lozenges and count badges

Status lozenges (subtle and bold, no icon) and numeric count badges with capped values.

Subtle lozenges

Low-emphasis status tags for table rows and list items without iconography.

Default Success Danger Warning Info Discovery

Subtle lozenge markup

<span class="lozenge default">Default</span>
<span class="lozenge success">Success</span>
<span class="lozenge danger">Danger</span>
<span class="lozenge warning">Warning</span>
<span class="lozenge info">Info</span>
<span class="lozenge discovery">Discovery</span>

Bold lozenges

High-emphasis status tags for prominent headers and urgent state indicators.

Default Success Danger Warning Info Discovery

Bold lozenge markup

<span class="lozenge default bold">Default</span>
<span class="lozenge success bold">Success</span>
<span class="lozenge danger bold">Danger</span>
<span class="lozenge warning bold">Warning</span>
<span class="lozenge info bold">Info</span>
<span class="lozenge discovery bold">Discovery</span>

Numeric count badges (capped values)

Compact numeric indicators attached to labels with max-value capping (e.g. value 120 with max 99 displays 99+).

Unread notifications 14

Resolved warnings 8

Critical alerts (capped at 99) 99+

Pending reviews 42

Attention required 5

Archived records 128

Numeric badge markup (including capped 99+)

<span class="badge primary">14</span>
<span class="badge success">8</span>
<span class="badge danger" data-value="120" data-max="99">99+</span>
<span class="badge warning">42</span>
<span class="badge caution">5</span>
<span class="badge">128</span>

Data table

Dense tabular presentation for structured records, status indicators, and entity lists.

Package / Asset	Category	Status	Token Count
`@atlaskit/button`	Forms & input	Verified	163
`@atlaskit/textfield`	Forms & input	Verified	27
`@atlaskit/toggle`	Controls	Active	43
`@atlaskit/drawer`	Overlays	Caution	12
`segmented-control`	Controls	Excluded	0

Data table markup

<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th scope="col">Package</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Button</td>
        <td><span class="lozenge success">Verified</span></td>
      </tr>
    </tbody>
  </table>
</div>

Tags and filter chips

Removable metadata pills used for filtering, categorization, and item selection.

Tags markup

<div class="tag-group">
  <span class="tag">Design tokens</span>
  <span class="tag">Accessibility AA</span>
</div>

Stat widgets and key-value panels

High-impact summary metrics and paired attribute lists for dashboards and summaries.

System build metadata

Architecture engine SM Studio Token Engine v2

Accessibility gate WCAG 2.1 AA (0 failures)

Active theme modes Light mode, Dark mode

Tested viewports 1920px, 1440px, 1024px, 810px, 390px

Stat widget & key-value markup

<article class="stat-widget">
  <span class="stat-value">398</span>
  <span class="stat-label">Total design tokens</span>
</article>

Token specification

Tokens governing tabular layouts, lozenges, count badges, and stat widgets.

Property	Applied Token	Computed Value	Rule
Lozenge radius	radius.sm	4px	Status tag corners.
Badge radius	radius.pill	9999px	Numeric counter pill.
Table border	color.border.separator	1px solid separator	Row dividers.
Card surface	color.surface.card	Raised fill	Stat widget container.

Data display tokens

  --sm-lozenge-radius: var(--sm-radius-sm); /* 4px */
  --sm-badge-radius: var(--sm-radius-pill); /* 9999px */
  --sm-table-border: var(--sm-size-border-thin) solid var(--sm-color-border-separator);
  --sm-stat-font-size: var(--sm-type-scale-800); /* 32px */

Focus-trapped dialog windows requiring user confirmation or focused task completion.

Tier	Max Width	Usage Guidelines
Small	400px	Confirmations, single-step alerts, and quick actions.
Medium	600px	Default forms, multi-field workflows, and detailed settings.
Large	800px	Complex multi-column forms, data comparisons, and rich media previews.

Modal dialog

<div class="modal-dialog-preview" role="dialog" aria-modal="true" aria-labelledby="dialog-sample-heading">
  <div class="modal-specimen-header">
    <h4 id="dialog-sample-heading">Discard unpublished changes?</h4>
    <button class="modal-specimen-close" type="button" aria-label="Close dialog">✕</button>
  </div>
  <div class="modal-specimen-body">
    <p>You have unsaved token alterations in this session.</p>
  </div>
  <div class="modal-footer">
    <button class="button subtle" type="button">Keep editing</button>
    <button class="button danger" type="button">Discard changes</button>
  </div>
</div>

Blanket scrim and focus containment

Fullscreen dimming layer that directs attention to overlaid components and traps keyboard focus.

Stacking and dismissal

Z-index tier: Overlays render above page headers and navigation elements.
Backdrop click: Clicking outside non-destructive modals triggers prompt dismissal.
Scroll lock: Underlying body document scroll is locked during open modal states.

Keyboard accessibility

Focus trap: Tab key cycles strictly within dialog focusable controls.
Escape key: Pressing Esc immediately closes the active overlay.
Focus restoration: Closing the modal returns focus to the initiating trigger button.

Tooltips and contextual popovers

Floating descriptions and non-modal contextual menus anchored to UI elements.

Brief text explaining interactive controls on pointer hover or keyboard focus.

Rich interactive card positioned adjacent to an originating control.

Token specification

Tokens governing modal dialogs, blanket scrims, and floating tooltip surfaces.

Overlay tokens

  --sm-modal-radius: var(--sm-radius-soft); /* 8px */
  --sm-modal-padding: var(--sm-space-6); /* 24px */
  --sm-modal-shadow: var(--sm-shadow-card);
  --sm-scrim-bg: var(--sm-primitive-color-shell-scrim);
  --sm-tooltip-radius: var(--sm-radius-sm); /* 4px */
  --sm-tooltip-pad-block: var(--sm-space-1); /* 4px */
  --sm-tooltip-pad-inline: var(--sm-space-2); /* 8px */

Landing top bar

The desktop navbar is 88px tall with an inner container, three left links, brand mark, and actions. The mobile bar collapses navigation into a Menu trigger.

Desktop top bar

Character

Mobile top bar

Character

Area	Token / Property	Value	Usage
Desktop height	`var(--sm-space-22)`	88px	Landing desktop header
Desktop content	`var(--sm-layout-content-max)`	1180px / responsive margins	Inner container band
Nav links	`var(--sm-font-label)`	Inter 14 / 20 / 500, 20px gap	Primary category navigation
Mobile height	`var(--sm-space-22)`	88px	Collapsible header

Landing top bar

<header class="top-nav-preview-desktop">
  <div class="top-nav-brand">
    <img src="assets/character-mark-16-orange.svg" alt="Brand mark" />
    <span>Character</span>
  </div>
  <ul class="top-nav-links-list">
    <li><a href="#overview">Overview</a></li>
    <li><a href="#buttons">Components</a></li>
    <li><a href="#templates">Templates</a></li>
  </ul>
  <div class="top-nav-actions-group">
    <button type="button" class="button appearance-subtle">Log in</button>
    <button type="button" class="button appearance-primary">Get started</button>
  </div>
</header>

Docs side navigation

Fixed 288px sidebar hierarchy with grouped categories, 2px divider, and per-route navigation.

Side navigation anatomy

Foundation

Brand foundation Typography Colours

Components

Buttons Fields Controls

Shell parameters

Side nav width 288px

Content max 1000px

Header item height 32px

Sub-item height 28px

Tabs, breadcrumbs, and pagination

Secondary and local navigation components for tabbed views, path hierarchy, and multi-page lists.

Tabs

Breadcrumbs

Pagination

Anchor links

Default link Subtle link Visited link

Tabs, breadcrumbs, and pagination

<div role="tablist" class="tab-list">
  <button type="button" role="tab" aria-selected="true" class="tab-button is-active">Overview</button>
  <button type="button" role="tab" aria-selected="false" class="tab-button">Tokens</button>
</div>
<nav aria-label="Breadcrumbs" class="breadcrumbs-preview">
  <a href="#overview" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator" aria-hidden="true">/</span>
  <span class="breadcrumb-item is-current" aria-current="page">Navigation</span>
</nav>
<nav aria-label="Pagination" class="pagination-preview">
  <button type="button" class="pagination-btn">Prev</button>
  <button type="button" class="pagination-btn is-active" aria-current="page">1</button>
  <button type="button" class="pagination-btn">Next</button>
</nav>

Navigation tokens and markup

<!-- Navigation Patterns -->
<nav class="top-nav-preview-desktop">
  <div class="top-nav-brand">
    <img src="assets/character-mark-16-orange.svg" alt="Brand mark" />
    <span>Character</span>
  </div>
  <ul class="top-nav-links-list">
    <li><a href="#overview">Overview</a></li>
    <li><a href="#buttons">Components</a></li>
    <li><a href="#templates">Templates</a></li>
  </ul>
  <div class="top-nav-actions-group">
    <button type="button" class="button appearance-subtle">Log in</button>
    <button type="button" class="button appearance-primary">Get started</button>
  </div>
</nav>

Page grid rules

Page layouts anchor to the approved design canvas with a constrained content container and governed margin insets.

1440px canvas

Approved desktop canvas width governing page composition.

1180px content

Inner content ceiling for text columns and grid sections.

Governed margins

Responsive inline margin insets scaling from 48px to 112px.

Landing fold inventory

Standardized fold archetypes for repeatable structural composition.

Fold	Container	Height	Structure
Hero / Intro	layout.content.max	Auto	Split hero, headline, lead text, action buttons
Features / Overview	layout.content.max	Auto	Multi-column cards, icon badges, supporting copy
Content / Detail	layout.content.drawn-width	Auto	Alternating media and explanatory passages
Metrics / Proof	layout.content.max	Auto	Metric statistics, proof points, and callout banner
Process / Steps	layout.content.drawn-width	Auto	Sequential numbered steps and guided walkthrough
Reference / FAQ	layout.content.drawn-width	Auto	Accordion disclosure list and reference cards
Summary / Actions	layout.content.max	Auto	Summary card with primary and secondary controls

Bento and card spans

Fixed dimensions and pitch rules preventing arbitrary spacing divergence.

Card Type	Span / Width	Min Height	Gap / Spacing
Stat card	1 of 3 columns	layout.bento.stat-min-height	space.6 gap
Feature card	1 of 2 columns	layout.bento.feature-min-height	space.6 gap
Step row	Full width	layout.bento.step-min-height	space.4 gap
Summary card	Full width	layout.bento.summary-min-height	space.4 gap

AI layout archetypes

Classify new folds into approved structural formulas prior to generating markup.

Archetype	Use When	Grid Layout	Fixed Rule
A · Split hero	Primary landing cover	2 columns (1fr 1fr)	Lead title with media or preview
B · Three-column grid	Feature or metric sets	3 columns (repeat 3, 1fr)	Balanced card height and icon badge
C · Media and copy	Explanatory sections	2 columns (1.2fr 0.8fr)	Aligned baseline with body font
D · Centered flow	Forms and focused steps	Single centered column (632px)	Constrained reading line length
E · Detail with aside	Workspace or summary	2 columns with sticky sidebar	Fixed sidebar with responsive collapse

Detail with aside archetype

Structured layout utilizing the main content column with a companion sidebar aside.

Main column

Fluid grid, responsive card rows, governed gaps.

Sticky aside

Summary card, metadata, and primary action controls.

State colors

Selected accent surface, status indicators.

AI Fold Prompt

Build this fold using an approved landing-page pattern.
Classify the request first: Archetype A, B, C, D, E, or plain text.
Anchor the layout to the design canvas, content width, and inline margins.
For detail screens, use the main content column with sidebar aside.
Keep the recorded card dimensions, card gaps, image/text split, and visual hierarchy.
Place decorative imagery in a dedicated background layer behind content.
Use named design tokens only.
Do not invent new bento geometry, one-off gaps, or new card spans.
Only replace copy, imagery, and data when the brief requires it.

Deck formats

Canvas dimensions, aspect ratios, and export geometry based on standard LinkedIn specifications.

Format	Ratio	Canvas	Grid and margins
LinkedIn post	4 : 5	1080 x 1350 px	Margins space.12 / space.16, single column feed card
LinkedIn banner	4 : 1	1584 x 396 px	Full-width brand header canvas
Slide	16 : 9	1920 x 1080 px	Margins space.16, 4 columns, 6 rows (layout.deck.canvas-width)

16:9 Slide grid geometry

Mathematical grid drawn strictly from tokens: canvas 1920×1080 (layout.deck.canvas-width × layout.deck.canvas-height), margins 64px (layout.deck.margin), 4 columns of width 424px, gutters 32px (layout.deck.gutter), and 6 rows of height 132px.

Nine slide wireframes

Approved 16:9 slide presentation templates, each with wireframe preview and markup copy panel.

1. Cover

Title, speaker and occasion over the primary cover layout.

Cover wireframe code

<div class="slide slide-cover">
  <h1 class="slide-title">Brand Architecture</h1>
  <p class="slide-speaker">Speaker & Occasion</p>
</div>

2. Two images

Headline over two wide images side by side.

Two images code

<div class="slide slide-two-images">
  <h2>Visual Dualism</h2>
  <div class="two-image-grid">
    <img src="image1.svg" alt="" />
    <img src="image2.svg" alt="" />
  </div>
</div>

3. Three columns

Three columns, each an image with title and passage.

Three columns code

<div class="slide slide-three-columns">
  <div class="col"><img src="img1.svg" /><h3>A</h3></div>
  <div class="col"><img src="img2.svg" /><h3>B</h3></div>
  <div class="col"><img src="img3.svg" /><h3>C</h3></div>
</div>

4. Bullets and image

Two bulleted lists beside a tall vertical image.

Bullets & image code

<div class="slide slide-bullets-image">
  <div class="bullets"><ul><li>Key principle</li></ul></div>
  <div class="image"><img src="tall.svg" /></div>
</div>

5. Image and two passages

An image positioned over two distinct text passages.

Image & passages code

<div class="slide slide-image-passages">
  <img src="top-media.svg" />
  <div class="passages"><div>Passage 1</div><div>Passage 2</div></div>
</div>

6. Section divider

High-contrast section break with number, title, and lead.

02 / Foundation

Section divider code

<div class="slide slide-divider">
  <span class="section-number">02</span>
  <h2>Design Tokens Foundation</h2>
</div>

7. Four images

Four images in a row under a prominent headline.

Four images code

<div class="slide slide-four-images">
  <div class="img-row"><img src="1.svg"/><img src="2.svg"/><img src="3.svg"/><img src="4.svg"/></div>
</div>

8. Full image

One full-bleed showcase image across the slide width.

Full-bleed 16:9 media

Full image code

<div class="slide slide-full-image">
  <img class="full-media" src="hero-full.svg" alt="Showcase" />
</div>

9. Image grid

Headline beside four modular images in two columns.

Image grid code

<div class="slide slide-image-grid">
  <div class="lead"><h2>Portfolio Showcase</h2></div>
  <div class="grid-2x2"><img src="1.svg"/><img src="2.svg"/><img src="3.svg"/><img src="4.svg"/></div>
</div>

Landing fold inventory

Future generated folds should start from these measured patterns and reuse the same geometry before content changes.

Fold	Container	Height	Structure
Top / Hero	layout.content.max	Auto	Split hero, headline, lead text, action buttons
Features / Overview	layout.content.max	Auto	Multi-column cards, icon badges, supporting copy
Content / Detail	layout.content.drawn-width	Auto	Alternating media and explanatory passages
Metrics / Proof	layout.content.max	Auto	Metric statistics, proof points, and callout banner
Process / Steps	layout.content.drawn-width	Auto	Sequential numbered steps and guided walkthrough
Reference / FAQ	layout.content.drawn-width	Auto	Accordion disclosure list and reference cards
Summary / Actions	layout.content.max	Auto	Summary card with primary and secondary controls

AI layout archetypes

When generating a new fold, classify it into one known archetype. If it does not fit, pause and ask instead of creating a new pattern.

Archetype A: Media + steps

Visual plus step list with 3 sequential rows.

Split: 468 / 564 | 96px gap

Archetype B: Media + text

Story or explainer with alternating rows.

Split: 672 / 424 | Mirror rows

Archetype C: Equal cards

Stats or feature showcase cards.

Split: 3 x 355 | 32px gap, 4/4/4 spans

Archetype D: Centered flow

Wizard step or focused conversion form.

Split: 928 panel / 608 col | 88 header

Archetype E: Selection + checkout

Two-column ingredient grid with sticky checkout aside.

Split: 616 / 400 | Inset 1048 container

Page category systems

Approved page patterns organized by customer journey stage and functional purpose.

Marketing pages

Hero, proof, feature, comparison, testimonial, FAQ, and CTA structures with content budgets.

Product flows

Guided flows, checkout, onboarding, account, settings, and form-heavy structures.

Content systems

Article, case study, report, presentation, social, and editorial layout structures.

AI Fold Prompt

Build this fold using an approved character landing-page pattern.
Classify the request first: Archetype A, B, C, D, E, or plain text.
Anchor the layout to a 1440px canvas, 1180px content width, and responsive inline margins.
Keep the recorded fold structure, card dimensions, card gaps, image/text split, and visual hierarchy.
Place decorative imagery in a dedicated background layer behind content.
Use named character tokens only.
Do not invent new bento geometry, one-off gaps, or new card spans.
Only replace copy, imagery, and data when the brief requires it.

How to use this package

This is the source of truth for building and testing any client frontend. Give the LLM the master template rule, the client brand rule for the active page, the approved source files, and the component or layout request.

Token safe Figma safe

The LLM selects and assembles

Fill the composition contract, run the build prompt, generate using the approved tokens, components, assets, and layout recipes in the brand package, then validate with the health gate and QA prompt before shipping. The template rule is fixed. The client brand rule supplies the brand decisions. The LLM selects and assembles; it never invents.

Health gate model

The QA gate is intentionally strict. Red flags block output. Warnings ask the client or developer to review before implementation. Passing output can move into frontend build.

Red flag

Breaks brand DNA, Figma geometry, token usage, or component anatomy. Output is blocked.

Warning

Content, asset, or responsive behavior needs review. Output pauses for client approval.

Pass

Matches the guide, uses approved patterns, and preserves visual health.

Red flag rules

These are non-negotiable. If any rule fails, the output must show a red flag and tell the client what must be fixed before continuing.

Status	Check	Red flag when	Client warning
Block	Grid	Leaves approved grid.	Breaks the brand grid.
Block	Pattern	No approved archetype.	Needs design approval.
Block	Tokens	Uses raw or random values.	Not token-safe.
Block	Typography	Uses the wrong role, font, weight, or hierarchy.	Breaks type system.
Block	Components	Changes anatomy, state behavior, or dimensions without a rule.	Wrong component system.
Block	Colours	Invents brand or state colour.	Creates brand drift.

Warning rules

Warnings do not always block output, but they must be shown clearly before the client approves the screen.

Status	Check	Warn when	Client warning
Warn	Copy length	Copy exceeds budget.	Text may overflow.
Warn	Assets	Image is missing or low quality.	Asset needs review.
Warn	Responsiveness	Mobile hierarchy differs.	Mobile needs QA.
Warn	States	State is missing.	Behavior incomplete.
Warn	Accessibility	Accessibility is unclear.	Needs accessibility review.
Warn	Content	Claim meaning changes.	Copy needs review.

Build sequence

Use this sequence to build any page, component, layout, or asset section from the guide. Each step produces a QA output before the work moves forward.

Step	Action	Use from guide	QA output
1	Select page or component type.	Template rule.	Path selected.
2	Load the client brand rule.	Brand rule.	Brand source locked.
3	Bind source geometry or anatomy.	Figma, assets, code.	Source matched.
4	Choose approved atoms, molecules, organisms, or templates.	Atomic layer.	No invention.
5	Apply primitive, semantic, then component tokens.	Tokens.	Token-safe.
6	Place content, assets, states, and accessibility behavior.	Brand package.	No overflow.
7	Run health gate.	Health gates.	Pass / Warn / Block.

Landing and bento recipe

Landing folds are assembled from fixed archetypes. Bento cards must keep the same spans, gaps, and hierarchy used in the Figma design.

Part	Required structure	Use when	Health check
Hero	1440 canvas, split hero.	Opening fold.	No centered rewrite.
Media + steps	468 media, 564 steps.	How it works.	Steps aligned.
Media + text	672 media, 424 copy.	Explainer and story sections.	Same split.
Bento cards	3 x 355 cards.	Stats, benefits, proof points.	No generic thirds.
FAQ	986 list, 56 row.	Common questions.	Match controls.
CTA band	Yellow or primary CTA.	Conversion moments.	No new CTA style.

Questionnaire recipe

Questionnaire screens are not landing folds. They use the wizard frame, progress header, centered panel, and one live component per answer type.

Part	Required structure	Use from guide	Health check
Header	88px header.	Navigation.	Match Figma header.
Progress	112 desktop, 80 mobile.	Controls / Steps.	Current step visible.
Panel	928 panel, 608 column.	Layouts.	No full-width forms.
Choices	48px pill choices.	Controls.	One component states.
Fields	Approved field controls.	Fields.	No browser defaults.
Actions	Secondary then primary.	Buttons.	Hierarchy preserved.

Checkout recipe

Checkout and ingredient-selection flows use the approved wizard checkout archetype. The two-column relationship is fixed and should not be redesigned as a generic cart.

Part	Required structure	Use from guide	Health check
Container	1048 inset.	Layouts.	Inset preserved.
Selection	616 left column.	Layout building.	Cards remain 302 x 339px.
Aside	400 sticky aside.	Layout building.	Summary separated.
Selected row	368 x 128 row.	States / image library.	Mustard badge.
State	Selected and badge tokens.	Colours / States.	No new state colour.
Actions	Primary plus secondary.	Buttons.	48px pill passes.

Composition contract

This contract gives AI the minimum information needed to assemble any client page from approved parts. It separates the locked template rule from the page-specific brand rule.

Composition contract

project: <client_brand_name>
product_type: <category_or_market>
template_rule: locked_master_template
brand_rule_page: <brand_foundation | logos | typography | colours | shapes | image_library | icons | source_files | buttons | fields | controls | states | navigation | layouts | templates | tokens | ai_usage | handoff>
surface: landing | website | product | checkout | dashboard | documentation | custom
screen_name: <string>
user_goal: <string>
primary_action: <string>
content_source: supplied_copy | placeholder_copy
source_files:
  figma: <url_or_node>
  assets: <folder_or_file_list>
  tokens: <primitive | semantic | component>
layout_archetype: <approved_recipe_name> | plain_text
components_allowed:
  atoms: [<approved_atoms>]
  molecules: [<approved_molecules>]
  organisms: [<approved_organisms>]
  templates: [<approved_templates>]
grid: { canvas: <number>, content: <number>, margin: <number>, columns: <number> }
responsive_targets: [375, 768, 1440]
tokens_only: true
typography: { ui: <font>, display: <font_or_none> }
accessibility_level: WCAG_2_1_AA
output_format: html_tailwind | react_tailwind

Prompt library

Five modular prompts for brand rules, post generation, presentation slide decks, UI component assembly, and quality assurance audits.

Brand rules prompt

System prompt for enforcing brand foundation rules, tone, and visual guidelines.

You are a brand design assistant for SM Studio. Always follow the brand guidelines: adhere to the defined color palette, typography hierarchy, and spacing tokens. Do not invent unauthorized colors, fonts, or layout geometries. Ensure all visual elements align with the approved brand voice and principles.

Post prompt

Prompt for generating standard LinkedIn and social media posts conforming to layout sizes.

Create a social media post layout using the standard LinkedIn post format (4:5 aspect ratio, 1080px by 1350px). Ensure the headline uses Display or Heading tokens, the body copy is concise, and all brand marks and margins conform to the standard grid rules.

Slide deck prompt

Prompt for producing presentation slides aligned with the 16:9 slide canvas and 4 by 6 grid.

Generate a slide layout on a 1920px by 1080px canvas (16:9 ratio). Use the 4-column by 6-row slide grid with margin space.16 and gutter space.8. Choose one of the nine approved wireframe templates (e.g., cover, two images, three columns, bullets and image) and bind typography to system tokens.

UI build prompt

Prompt for implementing interface components and pages from approved tokens and states.

Build UI components strictly using design system tokens. Map all interactive states (default, hover, active, focus, disabled) to semantic color and border tokens. Enforce 100dvh viewport locking and keyboard accessibility compliance without custom CSS values.

QA prompt

Prompt for auditing accessibility, contrast ratios, and design system fidelity.

Audit the implementation against WCAG 2.1 AA contrast requirements. Check all interactive elements for focus visibility, ARIA attributes, and keyboard navigability across Chromium, WebKit, and Firefox. Ensure no token names appear outside approved chips or code panels.

Folder structure (Character Lite)

Directory hierarchy of the Character Lite system. Governed layout for assets, governance, and output files.

Directory layout

Character Lite/
├─ CLAUDE.md             standing role and routing
├─ MASTER-PROMPT.md      one-time setup prompt
├─ .claude/              seats, skills and guards (read-only)
│  ├─ agents/            marketing and design seats
│  ├─ hooks/             write guard
│  └─ skills/            post, plan, quote, deck, component, learn
├─ governance/           the seven brand health rules
├─ knowledge/            your knowledge base: inbox, library, index, facts, quotes, voice
├─ plans/                posting plans and measurement
├─ outputs/              posts, decks and components
├─ design-system/        your compiled design system (read-only)
└─ system/               the commands (read-only)

Folder	Purpose
`Character Lite/`	Root client workspace directory
`CLAUDE.md`	Standing role and routing
`MASTER-PROMPT.md`	One-time setup prompt
`.claude/`	Seats, skills and guards (read-only)
`governance/`	The seven brand health rules
`knowledge/`	Your knowledge base: inbox, library, index, facts, quotes, voice
`plans/`	Posting plans and measurement
`outputs/`	Posts, decks and components
`design-system/`	Your compiled design system (read-only)
`system/`	The commands (read-only)

QA report template

Use this report after every AI output. It keeps brand, UI, Figma geometry, token usage, and responsive behavior visible before implementation.

QA report

Client brand and UI health report

Request:
UI type:
Template rule:
Brand rule page:
Matched source:
Matched recipe:

Brand health: Pass / Warning / Red flag
UI health: Pass / Warning / Red flag
Template rule: Pass / Warning / Red flag
Brand rule: Pass / Warning / Red flag
Source geometry: Pass / Warning / Red flag
Token usage: Pass / Warning / Red flag
Responsive behavior: Pass / Warning / Red flag
Accessibility: Pass / Warning / Red flag

Red flags:
Warnings:
Required fixes:

Client decision:
Pass: safe to implement.
Warning: client/developer review required.
Red flag: blocked until fixed.

Component lifecycle statuses

Status vocabulary governing component maturity and production readiness.

Status	Definition	Engineering Rule
Stable	Fully tested and production ready.	Safe for immediate frontend deployment.
Beta	Active development and review.	Usable in internal builds; API subject to tweaks.
Caution	Requires design or engineering sign-off.	Do not ship without prior review.
Deprecated	Superseded by modern patterns.	Avoid new adoption; migrate to current component.

Delivered package manifest

Artifacts compiled by the master token engine for frontend integration.

File	Format	Purpose
`tokens.css`	CSS Custom Properties	Full token definitions for Light and Dark modes.
`tokens.json`	JSON Graph	Structured token hierarchy for design tool sync.
`components.json`	JSON Schema	Component specs, appearances, and variant matrices.
`prompts.md`	Markdown Prompt Deck	Build, QA, and composition contract templates.
`contrast-report.md`	Markdown Report	Automated WCAG 2.1 AA contrast matrix.

Brand profile re-skinning

How client brands customize the system without touching core styles.

1. Define brand file

Create tokens/brand/brand.<slug>.json overriding only primitive color ramps and brand assets.

2. Configure profile

Register the profile slug and file mappings in build.config.json.

3. Run token compiler

Execute node build/build.mjs to generate fresh CSS, JSON, and contrast reports.

Engineering integration snippet

<!-- Import character master tokens -->
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="css/main.css" />

<!-- Token usage in client components -->
<style>
  .client-custom-header {
    background-color: var(--sm-color-surface-raised);
    border-bottom: var(--sm-size-border-thin) solid var(--sm-color-border-separator);
    padding: var(--sm-space-4) var(--sm-space-6);
  }
</style>

IntelligentBrand System

System purpose

Token first

One component

Figma is source

Two-rule operating model

Page source-of-truth contract

New component rule

Source

Behavior

Gate

Atomic template layers

Foundations

Atoms to templates

Health gates

Health check pattern

Copyable code module

Brand inputs

Logo assets

Client logo slot (L1)

Primary logo (L2)

Logo mark (L3)

Cover graphic (L4)

Colour sources

C1: Accent Source

C2: Neutral Ramp

C3: Surface Primitives

C4: Status Signals

Type specimens

Media and references

Imagery grid (G1)

References list (R1)

Tone and component styles

Radius style (S1)

Elevation style (S2)

Border weight (S3)

Primitive token map (M1)

How this template works

Brand rules

UI components

AI usage

Build order

Role journeys

Design journey

Engineering journey

Content journey

AI production journey

Brand positioning

Positioning statement

Target audience

Core promise

Voice and tone

Voice principles

Tone spectrum

Brand principles

1. Token before value

2. Single component source

3. Uncompromising accessibility

Messaging and claims

Typeface roles

Inter / UI

Inter / Display

Text style tokens

Typography hierarchy and accessibility

Hierarchy and pairing

Accessibility & readability

Primitive ramps

Neutral

Ink

Surface

Accent

Pass

Warn

Red

Info

Feedback states

Semantic tokens

Usage rules

Use roles, not values

Hold contrast

Intelligent
Brand System