Design references
Start projects with visual inspiration from well-known app designs.
Design references let you anchor the AI to a recognizable visual language — palette, typography, spacing, and component style — without copying trademarks or brand assets.
How it works
Before or when starting a project, pick a reference from the Design System Picker on the dashboard. OpenV2 injects curated design guidance into early AI turns.
Available references include styles inspired by apps such as:
- Spotify, Linear, Notion
- Tinder, Duolingo, Headspace
- Airbnb, Uber, Revolut, Robinhood, Cash App, Things 3
The AI maps palette roles to your project's theme.ts and uses semantic NativeWind classes — it does not copy logos or trademarked copy.
Best practices
- Pick one reference per project for consistency
- Combine with plain-language UI notes — e.g. "large hero card on home, tab bar at bottom"
- Refine in chat if a screen drifts from the intended look
Design references vs. visual editor
| Tool | When to use |
|---|---|
| Design reference | Set the overall look at project start |
| Visual editor | Tweak specific elements after screens exist |
| Sketch | Wireframe layout before building |