Design Spec
The Design Spec is your app's visual language: its colours, fonts, corner style and the screens it will have. Codalio plans it from your PRD, and your prototype is built from it. Nothing is built until you approve it.
You'll find it in the Design Spec tab of the PRD canvas.
Before we design
Codalio first asks for the feel you're after:
- Tone: choose one, or click Or describe it in your own words.
- Reference sites: up to a few links to sites whose look you like.
Click Start the design spec (or Create design spec), or Skip preferences to let Codalio decide. Planning usually takes a minute or two. Click Follow along to watch it happen.
What you can change
| Setting | Details |
|---|---|
| Colours | The colours your prototype uses for backgrounds, text and buttons. Click a swatch to pick a new colour, or type a hex value. Use Show all colours for the full palette, including dark mode. |
| Fonts | A heading font and a body font. Any Google Fonts family works. Type its name exactly as Google Fonts writes it, for example Inter. |
| Corner radius | How rounded buttons, cards and inputs are. |
| Design notes | Anything else the builder should follow, for example "use generous white space". |
Click Save changes to keep your edits, or Discard to undo them.
What you can't change here
The screens and the components they use (from the shadcn/ui library) are planned from your requirements. To change them, edit your PRD in the chat and plan again.
Approve it
When the design looks right, click Approve design spec. Codalio then builds your prototype with it. See UI prototype.
Changing the design later
You can reopen an approved spec at any time. If you change it after the prototype is built, Codalio tells you the prototype uses an earlier version of the design. Click Regenerate with these changes to rebuild its pages with the new design.
Prototypes built before Design Specs existed have no spec to review. Ask for design changes in the prototype chat instead.