Choose a saved system, let the assistant select one from the brief, start from plain defaults, or derive a reusable design system from a supplied site or image without mistaking a social-card photo for the site design.
Where: Designer → Design system page → Look choice / Create or derive from reference.
Key ideas
- Three explicit Look choices: Pick lets you choose a design system from the list. Let the AI pick reads the brief and chooses one while you set motion. None clears the choice and uses plain defaults; it does not create a hidden system.
- Reference source changes what is trusted: A supplied image is the reference itself. When deriving from a website, the reader examines declared stylesheet roles; a social-card/OG image is not assumed to be a screenshot of the site, so it cannot overrule the page’s declared ground, ink, or scheme.
- Fonts must be loadable in the workspace: Reference-derived typography resolves against organization fonts, Adobe kits, and Google Fonts. If the requested face is unavailable, the system reports that and can suggest a nearest usable Google family; upload the intended font when exact brand typography matters.
Steps
- On the Design system page, choose Pick, Let the AI pick, or None according to who should choose the system.
- For Pick, select a saved/prebuilt system and inspect representative Deck/Landing examples before applying it.
- For Let the AI pick, provide a clear brief and review the proposed system; you remain responsible for the motion direction.
- To derive a new system, provide a reference site or a supplied image and inspect the extracted brand, palette, type, mood, and evidence notes.
- Treat a site’s own stylesheet as the authority for declared ground/ink/brand roles. Upload a true page screenshot when visual-page evidence is needed; do not rely on an OG product photograph.
- Check font availability. Upload exact organization fonts or choose a reported substitute deliberately.
- Tune Parameters, inspect multiple examples/components, save the system if reusable, then explicitly Use for project where it should become active.
- Check representative pages for token use and drift; arbitrary hard-coded styles may not repaint automatically.
Look mode behavior
- Pick — choose one listed design system.
- Let the AI pick — assistant chooses from the brief; user sets motion.
- None — plain defaults, with no system selected or created.
Evidence order for references
- A user-supplied image is direct visual evidence.
- A website stylesheet provides declared design roles.
- A site preview/social-card image is not automatically treated as a screenshot of the website.
- A supplied true screenshot can provide page-level visual evidence when the site cannot be read or its preview image is unsuitable.
Typography sources
- Organization-uploaded font library.
- Organization Adobe kits where configured.
- Google Fonts catalog.
- Unavailable typefaces are reported; a nearest usable Google option may be suggested, or the exact face can be uploaded.
Tips
- Review whole examples before adjusting one token; a coherent system is more than a palette.
- Keep the original reference and verify every inferred field that will be used for customer-facing work.
Limitations and important notes
- Derivation proposes editable system parameters; it does not guarantee an arbitrary existing page will be restyled.
- A connected project system and page-level styling may differ; check which system is active.
- Font substitutions are approximations, not proof of brand approval.
Troubleshooting
The derived colors reflect an object in the website’s preview image.
Use the website URL so declared stylesheet roles can lead, or supply an actual screenshot. A social-card product photograph is not a page screenshot.
The exact brand font did not load.
Check whether it exists in the organization library, Adobe kit, or Google catalog. Upload it to the organization font library or choose a deliberate substitute.