> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Use a design system > Use a saved design system as context for colors, typography, spacing, and components when you want Replit to create consistent visual work. export const DesignSystemCover = () =>
; 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](/chat/agent-skills) provides reusable instructions or an approach for a task. APEX X1 Design System showing its color palette, type scale, 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](/design/apply-design-system). With project context and visual direction in place, explore how to [create assets](/chat/create-assets) such as images, audio, video, and SVGs.