Design systems

Build and maintain scalable design systems in Acme.

What is a Design System?

A design system is a collection of reusable components, styles, and guidelines that ensure consistency across products.

Benefits

Consistency: Unified look and feel across all products and platforms.

Efficiency: Design and build faster with reusable components.

Scalability: Maintain quality as your team and products grow.

Collaboration: Shared language between designers and developers.

Foundation Elements

Start with the foundational elements of your system.

Color Palette

Define your color system:

Brand Colors:

• Primary: #3B82F6
• Secondary: #8B5CF6
• Accent: #10B981

Neutral Colors:

• Gray 50: #F9FAFB
• Gray 100: #F3F4F6
• Gray 200: #E5E7EB
• Gray 300: #D1D5DB
• Gray 500: #6B7280
• Gray 700: #374151
• Gray 900: #111827

Semantic Colors:

• Success: #10B981
• Warning: #F59E0B
• Error: #EF4444
• Info: #3B82F6

Create color styles for each in Acme:

1. Click + in Styles panel
2. Name systematically: color/primary, color/gray/500
3. Add all palette colors

Typography Scale

Define your type system:

Display:

• Display 1: 72px / 90px (size / line height)
• Display 2: 60px / 72px

Headings:

• H1: 48px / 60px
• H2: 36px / 45px
• H3: 30px / 38px
• H4: 24px / 32px
• H5: 20px / 28px
• H6: 18px / 26px

Body:

• Large: 18px / 28px
• Regular: 16px / 24px
• Small: 14px / 20px
• Tiny: 12px / 18px

Create text styles in Acme with consistent naming: text/heading/h1, text/body/regular, etc.

Spacing System

Use a consistent spacing scale:

Space 1: 4px
Space 2: 8px
Space 3: 12px
Space 4: 16px
Space 5: 20px
Space 6: 24px
Space 8: 32px
Space 10: 40px
Space 12: 48px
Space 16: 64px
Space 20: 80px

Base scale: 4px Ratio: Linear (4, 8, 12, 16…) or 1.5x (4, 6, 9, 14…)

Grid System

Standard grid for layouts:

Desktop:

• Columns: 12
• Gutter: 24px
• Margin: 80px

Tablet:

• Columns: 8
• Gutter: 20px
• Margin: 40px

Mobile:

• Columns: 4
• Gutter: 16px
• Margin: 20px

Component Library

Build reusable components for common UI patterns.

Buttons

Create button component with variants:

States:

• Default
• Hover
• Pressed
• Disabled
• Loading

Sizes:

• Small: 32px height
• Medium: 40px height
• Large: 48px height

Variants:

• Primary
• Secondary
• Tertiary
• Ghost
• Danger

Setup in Acme:

1. Design base button
2. Create component (Cmd+K)
3. Add variants for each state and size
4. Use Auto Layout for responsive padding

Form Inputs

Standard form components:

Text Input:

• Default state
• Focus state
• Filled state
• Error state
• Disabled state

Properties:

• Label
• Placeholder
• Helper text
• Error message

Checkbox & Radio:

• Unchecked
• Checked
• Indeterminate (checkbox only)
• Disabled

Select Dropdown:

• Closed state
• Open state
• Selected option
• Hover state

Cards

Flexible card component:

Base Structure:

Card Frame
  ├── Image (optional)
  ├── Content Frame
  │   ├── Title (text)
  │   ├── Description (text)
  │   └── Metadata (text)
  └── Actions Frame (optional)
      └── Buttons

Variants:

• With image / Without image
• Horizontal / Vertical layout
• With actions / Without actions

Properties:

• Elevation (shadow depth)
• Border radius
• Padding

Navigation

Navigation components:

Header:

• Logo
• Navigation links
• Search bar
• User menu
• Mobile menu toggle

Sidebar:

• Collapsed / Expanded states
• Active / Inactive links
• Nested navigation
• Icons with labels

Breadcrumbs:

• Home > Category > Subcategory > Page
• Chevron or slash separators
• Interactive links

Tabs:

• Horizontal / Vertical
• Active / Inactive states
• Disabled state
• Icons with labels (optional)

Modal & Dialog

Dialog components:

Modal:

Modal Container
  └── Dialog
      ├── Header
      │   ├── Title
      │   └── Close button
      ├── Content
      │   └── [Content area]
      └── Footer
          └── Action buttons

Variants:

• Small (400px)
• Medium (600px)
• Large (800px)
• Fullscreen

Overlay:

• Semi-transparent background
• Blur effect (optional)

Lists & Tables

Data display components:

List Item:

• Icon or avatar
• Primary text
• Secondary text
• Action buttons
• Checkbox (optional)

Table:

• Header row
• Data rows
• Hover state
• Selected state
• Sortable columns
• Pagination

Naming Conventions

Consistent naming is crucial for scalability.

Component Names

Use clear, descriptive names:

Pattern: Category/Component/Variant/State

Examples:

• Button/Primary/Medium/Default
• Input/Text/Large/Focus
• Card/Product/Vertical/Image
• Navigation/Sidebar/Expanded

Layer Names

Name layers semantically:

Good:

• icon/chevron-right
• text/heading
• container/content

Avoid:

• Rectangle 7
• Group 3
• Frame 42

Color Names

Use semantic or scale-based naming:

Semantic:

• color/primary
• color/success
• color/background

Scale-Based:

• color/blue/500
• color/gray/200

Both are valid - choose one approach and stay consistent.

Documentation

Document your design system for your team.

Component Specs

For each component, document:

Usage: When and how to use this component.

Anatomy: Parts that make up the component.

Variants: Available options and states.

Properties: Customizable properties (text, icons, colors).

Behavior: How it responds to interaction.

Accessibility: ARIA labels, keyboard navigation, color contrast.

Do’s and Don’ts: Best practices and common mistakes.

Guidelines

Create guidelines for:

Layout:

• Grid usage
• Spacing rules
• Breakpoints
• Responsive behavior

Typography:

• Font hierarchy
• Line length (45-75 characters)
• Alignment rules

Color:

• When to use each color
• Accessibility requirements (WCAG AA: 4.5:1 for text)
• Color combinations

Iconography:

• Icon style (outline, filled, two-tone)
• Icon sizes
• Usage guidelines

Voice & Tone:

• Writing style
• Button labels
• Error messages
• Microcopy

Publishing Libraries

Share your design system as a library.

Creating a Library

1. Organize components in dedicated file
2. Clean up unused styles and components
3. File → Publish Library
4. Name: “Acme Design System”
5. Click Publish

Library Structure

Organize your library file:

📄 Acme Design System
  📁 Foundation
    📄 Colors (color styles on page)
    📄 Typography (text styles on page)
    📄 Icons
  📁 Components
    📄 Buttons
    📄 Forms
    📄 Cards
    📄 Navigation
    📄 Modals
  📁 Templates
    📄 Dashboard
    📄 Landing Page
    📄 Blog
  📁 Documentation
    📄 Getting Started
    📄 Guidelines

Using the Library

In other projects:

1. Assets → Libraries → +
2. Select “Acme Design System”
3. Components appear in Assets panel
4. Drag into your designs

Updating the Library

When you make changes:

1. File → Publish Changes
2. Write changelog
3. Click Publish

Team members see update notification:

• Review Changes to see what changed
• Update to pull latest version

Version Control

Manage design system versions.

Semantic Versioning

Use semantic versioning for major updates:

Version Format: Major.Minor.Patch

Examples:

• 1.0.0 - Initial release
• 1.1.0 - New components added
• 1.1.1 - Bug fixes
• 2.0.0 - Breaking changes

Branching Strategy

Main Branch: Stable, production-ready components.

Development Branch: Work-in-progress components and updates.

Feature Branches: Individual component development.

Workflow:

1. Create feature branch
2. Design/update components
3. Review with team
4. Merge to development
5. Test across products
6. Merge to main
7. Publish library update

Governance

Establish processes to maintain quality.

Contribution Process

Proposing New Components:

1. Check if component exists
2. Document use case
3. Create design proposal
4. Present to design system team
5. Iterate based on feedback
6. Add to library once approved

Design System Team

Designate team members as maintainers:

Responsibilities:

• Review contributions
• Maintain documentation
• Ensure consistency
• Handle updates
• Support users

Roles:

• Lead maintainer
• Component owners
• Documentation owner
• Accessibility owner

Review Checklist

Before adding to system:

• Follows naming conventions
• All variants included
• Proper Auto Layout setup
• Consistent spacing
• Accessible contrast ratios
• Documented in guidelines
• Tested in context
• Reviewed by team

Maintenance

Keep your design system healthy and up-to-date.

Regular Audits

Monthly:

• Review component usage
• Identify unused components
• Check for inconsistencies

Quarterly:

• Update to match brand evolution
• Add components for new patterns
• Deprecate outdated components

Yearly:

• Major version updates
• Comprehensive documentation review
• Tool and workflow evaluation

Metrics to Track

Adoption: How many projects use the design system?

Coverage: What percentage of UI uses system components?

Consistency: How consistent are implementations?

Efficiency: How much time saved using the system?

Communication

Keep team informed:

Changelog: Document every update with clear notes.

Newsletter: Monthly design system updates.

Office Hours: Regular sessions for questions and support.

Slack Channel: Dedicated channel for discussions.

Tools Integration

Connect design system to development.

Design Tokens

Export design tokens for development:

{
  "color": {
    "primary": "#3B82F6",
    "gray": {
      "50": "#F9FAFB",
      "500": "#6B7280"
    }
  },
  "spacing": {
    "4": "16px",
    "6": "24px"
  },
  "typography": {
    "h1": {
      "fontSize": "48px",
      "lineHeight": "60px"
    }
  }
}

Code Generation

Use plugins to generate:

• CSS variables
• Sass variables
• JavaScript/TypeScript tokens
• iOS Swift code
• Android XML resources

Handoff Tools

Integrate with developer handoff:

• Zeplin
• Figma for Developers
• Avocode
• Abstract

Developers can:

• Inspect component specs
• Copy CSS
• Download assets
• See implementation notes

Best Practices

Tips for successful design systems.

Start Small

Don’t build everything at once:

Phase 1: Foundation (colors, typography, spacing) Phase 2: Basic components (buttons, inputs) Phase 3: Complex components (navigation, modals) Phase 4: Templates and patterns

Make It Easy to Use

Good Defaults: Components should work well out of the box.

Flexibility: Allow customization when needed.

Clear Documentation: Make it obvious how to use components.

Stay Consistent

One Source of Truth: The library file is the source of truth.

Enforce Standards: Use naming conventions and organization rules.

Regular Reviews: Audit for consistency regularly.

Involve the Team

Collaboration: Include designers, developers, and PMs.

Feedback: Regularly collect and act on feedback.

Champions: Identify team members to advocate for the system.

Next Steps

• Explore Advanced Features
• Learn about Collaboration
• Read Best Practices
• Master Keyboard Shortcuts