> ## 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.

# Create your design system

> Extract your colors, type, and tokens into a saved design system, then bring existing apps under it.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Your brand lives in a Drive folder, a Figma file, or one design you already like. Turn it
into a design system saved in your workspace: colors by role, a type scale, tokens, and a
few example components. New work then starts on brand, and you can rebuild existing apps
under the same system. Applying a system to an app you already shipped is a real rebuild,
not a stylesheet swap.

## Best for

* Product designers who need one source of truth before the next five pages get designed.
* Founders whose apps drifted apart and need every one of them on the same look.

## Connectors

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, colors, type, and brand guidelines",
},
{ id: "figma", name: "Figma", why: "An existing design to extract from" },
]}
/>

## Before you start

Gather everything that defines your brand, wherever it lives today: brand files, a design
you already like, your website, or a Figma file. Connect Drive if your logo, colors, or type
are stored there. Have a Figma URL, a site URL, or an existing `DESIGN.md` ready if you have
one.

## Prompt the agent

<AiPrompt>
  Create a design system for \[brand] from the brand files in this Google Drive
  folder \[link] and this Figma file \[URL]. Extract the palette by role, the type
  scale, and the tokens. Include the logo.
</AiPrompt>

## What to expect

Agent turns the source you gave it into a [living style guide](/design/design-md): your
colors with a role for each one, a type scale, the tokens the rest of the system references,
two or three example components, and the brand assets you provided. Review it, then select
**Save design system** to keep it in your workspace. From then on, new work generates on
brand from the first frame.

To bring an app you already built under the system, select the target and
[apply the system](/design/apply-design-system).

## Make it work for you

<AiPrompt>
  Extend the design system with more example components: buttons, form fields,
  navigation, cards, tables, and empty states.
</AiPrompt>

<AiPrompt>
  Add a dark mode to the system: same tokens, second set of color values by role.
</AiPrompt>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The system doesn't look like your brand">
    Point at a source instead of describing it. A Drive brand folder, a Figma
    URL, a live site, or a `DESIGN.md` all work as input.
  </Accordion>

  <Accordion title="Applying it is slower than you expected">
    Applying a system to existing work re-generates the styling layer rather
    than swapping a stylesheet. The time and credits warning before it starts is
    normal.
  </Accordion>

  <Accordion title="New edits drift back to the old styling">
    Continued edits should keep using the system. When you spot drift, say so in
    the chat and name the screen.
  </Accordion>

  <Accordion title="You can't reuse the system in another project">
    Save it first. An unsaved style guide stays in the project where it was
    generated.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Design a landing page" href="/use-cases/design-landing-page">
    Put the saved system to work on a waitlist or launch page.
  </Card>

  <Card title="Redesign your existing website" href="/use-cases/redesign-your-website">
    Extract the system from the site you already have.
  </Card>
</CardGroup>