DEMO DESIGN SYSTEM: WHAT IT IS

Purpose And Value

Single Source Of Truth: A Demo Design System is meant to consolidate your visual identity—colors, typography, icons, UI patterns, component code, usage rules—into one central reference.

Consistency Across Pages And Features: Ensures that every page on your cannabis‑and‑vape site uses the same buttons, fonts, spacing, etc., giving a cohesive brand presence.

Faster Delivery: Designers and developers can reuse pre‑built components rather than reinventing layouts or controls.

Core Elements Included

1. Foundations: color palette, type scale, spacing scale, iconography, brand voice.

2. Components: buttons, form fields, cards, navigation menus, modals, product listings.

3. Patterns: grouped components—e.g., product grid, checkout flow, newsletter section.

4. Documentation: how to implement each component, when to use it, accessibility notes.

5. Tokens: variables for color, spacing, font size that drive both design and code.

 

—

WHY YOUR WEBSITE NEEDS A DEMO DESIGN SYSTEM

Enhancing Visual Cohesion

A consistent design system avoids “drifting” styles—such as inconsistent button colors or headline sizing—across your store pages, blog posts, checkout screens, etc.

Supporting Scale And Teamwork

If you add new pages (e.g. blog articles, static pages about cannabis regulations), or onboard other team members, you avoid reinventing styles or creating visual bugs.

Improving Accessibility And UX

With accessibility baked into design tokens and component guidelines, your site will better serve users with disabilities (contrast, keyboard‑nav, ARIA labels).

Streamlining Developer Handoff

A documented style guide plus coded UI library helps developers directly pick up and integrate components (e.g. using Storybook or Figma + code).

—

FOUNDATIONS

Color Palette

Define primary, secondary, accent, background, warning, error colors.

Include usage rules: e.g. “primary button background”, “brand green used for logo”, “link hover color”.

Typography

Define heading hierarchy (H1, H2, H3…), body copy size and line‑height, caption text.

Choose one or two brand‑approved typefaces and weight usage (e.g. heading bold, body normal).

Spacing & Grid

Declare spacing units (e.g. 4px base, then 8px, 16px, 32px scales).

Define layout grid (maybe 12‑column for responsive pages) and container widths.

Iconography

Standard set of icons (e.g. cart, vape pen, cannabis leaf, info).

Include size, line style, usage and padding.

Brand Voice & Tone

Style guide for writing: friendly, informative, compliance‑sensitive.

Guidelines (e.g. do not claim health benefits, use disclaimers, reference age‑restrictions).

 

—

COMPONENTS

For each component, your system should include:

Buttons

Variants: primary, secondary, link style.

States: hover, focus, disabled.

Style: padding, font size, border radius.

Accessibility: focus outline, sufficient contrast.

Form Fields

Inputs (text, email, password), select dropdowns, checkboxes, radio.

Validation styles (error, success).

Labels and help text placement.

Cards & Product Tiles

Thumbnail image, title, price, “add to cart” button.

Hover effect, responsive behavior on mobile vs desktop.

Navigation & Menu

Top nav bar style, mobile hamburger menu, footer layout.

Active state, dropdown behaviour.

Modal Dialogs

Product quick‑view, cookie notice, age confirmation modals.

Overlay, close button, accessibility traps.

Alerts & Badges

Success, warning, error messages.

Visual styles and tone for policies, legal notices.

Utility Components

Breadcrumbs, tooltips, pagination controls.

Grid and list patterns for blog posts.

 

—

PATTERNS

Product Listing Page

Grid of product cards, filters sidebar, pagination.

Responsive stacking on mobile.

Product Detail Page

Hero product image, description, variants, add to cart, related items.

Tabbed sections for description, FAQs, legal disclaimers.

Checkout Flow

Step‑by‑step pattern: cart review → shipping info → payment method → confirmation.

Progress indicators, error handling.

Footer Layout

Columns: links to policy, about, FAQs, contact.

Social icons, brand statement, newsletter subscribe form.

Age‑Verification Gate

Full‑screen dialog asking user to confirm age.

Button states, legal compliance messaging.

 

—

DOCUMENTATION & USAGE GUIDELINES

Overview Of System

Purpose, mission, audience (designers, developers, content editors).

Explanation of how to use tokens and components.

Component Specific Docs

For each component, include:

Code snippet (HTML/CSS, or React/Vue example if you have a component library).

When to use it (usage rules and do’s/don’ts).

Accessibility notes (keyboard focus, ARIA labels, contrast checks).

 

Contribution & Governance

Who maintains the system, how updates are proposed.

Versioning rules and release process.

Tools & Resources

Links to Figma UI kit or Sketch files.

Links to Storybook or style‑guide website with live component previews.

Design token files (e.g. JSON or style‑dictionary tokens) for syncing code.

 

—

DESIGN TOKENS

What Are Tokens

Design tokens define values like colors, spacing, font‑sizes, etc. in one place so changes propagate across design and code.

Typical Token Types

Color tokens: –color-primary, –color-secondary, etc.

Typography tokens: –font-size-body, –line-height-heading, etc.

Spacing tokens: –spacing-4, –spacing-8, etc.

How To Use Tokens

In CSS/Sass: var(–color-primary) or design system SaaS variables.

In design tools: Figma shared styles linked to tokens.
This ensures changes in the system update everywhere.

 

—

ACCESSIBILITY & INCLUSIVE DESIGN

Contrast And Color Checks

Ensure all text meets WCAG 2.1 AA contrast ratios; tokens should enforce compliant combinations.

Keyboard Navigation

All components must support tab focus, logical tab order, visible focus indicators.

Modal dialogs trap focus; menus can be opened/closed via keyboard.

Semantic HTML & ARIA

Use proper markup (buttons, <form>, <fieldset>, <label>).

Use ARIA roles (e.g. role=”alert” for error messages) where needed.

Readability And Language

Use easy‑to‑understand language; include alt text for images, aria labels for icons, and disclaimers as per legal requirements.

 

—

IMPLEMENTATION & TOOLING

Design Tools Integration

Provide Figma or Sketch libraries with reusable components and tokens for designers.

Code Implementation

If you build coded components (React, Vue, vanilla HTML/CSS), host them in a component library (e.g. Storybook).

Provide prop documentation, code examples, variants.

Version Control & Updates

Version the system (e.g. v1.0, v1.1).

Maintain changelog and update process for new components or modifications.

Developer Handoff

Export assets and token files for frontend developers.

Use automated tools to sync design tokens into CSS/JS.

 

—

EXAMPLES OF BEST PRACTICES

IBM CARBON DESIGN SYSTEM

Open‑source, token‑first, deeply documented and accessibility‑focused. Offers code and design assets; designed to scale across many IBM products.

GOOGLE MATERIAL DESIGN

Massive design language with theming, motion, accessibility guidance. Provides extensive documentation and component libraries (e.g. MUI).

SHOPIFY POLARIS

Designed for commerce, with tokens, theming, and business‑specific components like product pricing fields and carts.

ATLASSIAN DESIGN SYSTEM

Strong writing and content guidelines, brand‑aligned UI library, used across many team‑built products.

—

ROADMAP FOR BUILDING YOUR DEMO DESIGN SYSTEM

Phase 1: Audit Existing Site

Inventory current colors, fonts, spacing, components.

Identify inconsistencies.

Phase 2: Define Foundations

Lock down your brand color palette, typography scale, spacing tokens.

Create a style‑guide document (static Figma and documentation pages).

Phase 3: Build Core Components

Develop button, input, card, nav, modal, badge.

Publish both design files and code snippets.

Phase 4: Document Guidelines

Write usage rules, accessibility guidelines, do’s/don’ts for each component.

Create example use cases and patterns (e.g. checkout flow, product tile grid).

Phase 5: Publish And Distribute

Host your design system site (e.g. using Storybook, Gatsby, or a custom guide site).

Share design kit links with team.

Phase 6: Feedback And Maintenance

Gather team feedback, fix gaps or inconsistent components.

Update versions and keep changelog; communicate changes to users.

 

—

SUMMARY & NEXT STEPS

A Demo Design System for thcandvapes.co.uk will combine Foundations, Components, Patterns, Tokens, Accessible Guidelines, and Documentation into one maintainable library.