Guide: Screens from a design system

When the design already has components and tokens, build new screens from them.

1. Read what exists: the tokens, the components and one screen that is like the new one.

   Print(GetTokens())
   Print(Tree('document', { depth: 0 }))
   return await Search('button card input', { kinds: ['component'] })
   

2. Use the tokens. Do not write a hex value or a size that a token already gives.

3. Use instances of the components. Set only their props, children and slots.

4. When a component is missing, make it with Define in the same style as the others. Knighn puts its main on the canvas. Then use it.

5. Keep the rhythm of spacing: 4, 8, 12, 16, 24, 32, 48, 64. Use 24 to 48 px of padding on desktop pages and 16 to 20 px on mobile pages, and 48 to 96 px between sections.

6. Keep the type scale: body 14 to 16 px, secondary text 12 to 13 px, headings 20, 24, 32, 40 and 56 px. Use regular weight for body text, medium for labels, and semibold or bold for headings.

7. Use the colour pairs of tokens.md. Keep the contrast of body text at 4.5:1 or more.

8. Show states such as hover, active, disabled and focus as variants of the component, not as colours on one instance.

9. After each screen, run Lint() and take a screenshot.

To copy a screen and change it, make a new screen from its TSX:

const [source] = Find(page, '[data-name="Settings"]')
const { tsx } = await Get(source)
billing = AddScreen('Billing', tsx.replace('Profile', 'Billing'), { width: 1440 })
return billing