Skip to main content
A design system gives Replit reusable visual direction. It can capture color tokens, typography, spacing, example components, logos, and brand assets so new designs stay consistent. From the prompt box, select the plus menu, then Use a design system when a saved system should guide what you create.

​
When a design system helps

  • Create consistently: Keep colors, typography, spacing, and components aligned across new work.
  • Give a team shared direction: Use one saved system as the visual reference for multiple Projects.
  • Restyle existing work: Apply a system when an artifact needs to follow a different visual language.
Name the saved system and the outcome you need. Add other relevant context, such as a brief, Figma frame, screenshot, or content requirements, when those sources define what the work should accomplish. For example: “Use the saved Acme design system to create a mobile onboarding screen. Keep the existing type scale and button styles, and show two layout directions.” A design system shapes visual work. A Skill provides reusable instructions or an approach for a task.
APEX X1 Design System showing its color palette, type scale, spacing, and example components

A saved design system with colors, typography, spacing, and example components.

​
Follow design-system workflows in Design

The Design guides explain what a system contains, how to create or extract one, and how to apply one to existing work.
Design systems, explained

Learn what a design system contains and when it helps.

Learn more →
Create a design system

Create one from a prompt or extract it from an existing design.

Open the Design guide →
For existing work, follow Apply a design system. With project context and visual direction in place, explore how to create assets such as images, audio, video, and SVGs.