# Interface

> The foundations applied to screens — components, code surfaces, dark mode, icons, and forms.


Interface guidance applies the [foundations](/docs/foundations/)
to working software. Where a component appears here, its measurements are
normative — a 40px input is 40px, not "about 40px".


- [Components](https://projectious-work.github.io/brand/v3.0.0/docs/interface/components/index.md) — The component set as live specimens — buttons, inputs, cards, tables, navigation, feedback, overlays, and data display.
- [Patterns](https://projectious-work.github.io/brand/v3.0.0/docs/interface/patterns/index.md) — How the components combine into whole screens — the page shell, the KPI row, and the primary/secondary split.
- [Dark mode](https://projectious-work.github.io/brand/v3.0.0/docs/interface/dark-mode/index.md) — Both modes are equally supported. The implementation rules that keep them in step.
- [Code](https://projectious-work.github.io/brand/v3.0.0/docs/interface/code/index.md) — The default dark code surface, optional light-panel companion, and measured syntax roles.
- [Icons](https://projectious-work.github.io/brand/v3.0.0/docs/interface/icons/index.md) — Lucide as the icon library, and how icons are sized and coloured.
- [Forms](https://projectious-work.github.io/brand/v3.0.0/docs/interface/forms/index.md) — Input sizing, labels, focus, error, and disabled states.
- [States](https://projectious-work.github.io/brand/v3.0.0/docs/interface/states/index.md) — Empty, loading, and error states — the screens a component set never shows you.
- [Accessibility](https://projectious-work.github.io/brand/v3.0.0/docs/interface/accessibility/index.md) — Keyboard order, skip links, focus management across composed layouts, and the ARIA the component set requires.