# SwedenStart design rules

The user requires a borderless interface across the entire project.

- Separate cards, rows, sections, navigation and forms with whitespace, typography and subtle background fills. Do not add decorative borders, hairline dividers, outline buttons, permanent rings, perimeter shadows or pseudo-element substitutes.
- Keep keyboard focus clearly visible with `:focus-visible` outlines. Preserve native form-control accessibility, icon strokes, progress bars and the meaningful connections between journey stages.
- Show selected, completed and error states through clear text, icons and background fills. Do not restore decorative outlines to distinguish these states.
- Use exactly two font families: DM Sans for the interface, account/form headings, controls, body and code text; DM Serif Display (regular weight) for public editorial headings and editorial image captions. Use only `var(--font-sans)` and `var(--font-serif)` in components. The `--font-mono` token aliases Sans to override browser defaults. Do not introduce another family or synthetic bold/italic faces.
- Use the shared styles in `resources/css/app.css`; do not bypass the rule through inline styles, utility classes, imported styles or JavaScript.
- Run `npm run check:design` after interface changes. The build and CI enforce this policy; do not weaken or bypass the check. Change this preference only if the user explicitly requests it.