Get started
The source of truth for how Ascern looks and behaves. Code in hire-crm matches this file; when they disagree, this file wins and the code gets a fix.
Ascern design system
Readme
The source of truth for how Ascern looks and behaves. Code in hire-crm matches this file; when they disagree, this file wins and the code gets a fix.
How the file is organized
The file is split into foundations, components and patterns.
· Readme, Changelog, Cover. Start here.
· Foundations. Accessibility, Content, AI, Brand, Tokens, Color, Typography, Spacing radius elevation, Grid and border, Motion, Iconography, Layout and scaffold, Data visualisation, Illustrations. Each page states Ascern's rule. Values live as file tokens.
· Components. The component sheet, the inventory and design floor, then one ❖ page per component, alphabetical. A ❖ page has two artboards: examples (header, variants and states, rules) and code (import and parts table).
· Patterns. Page templates, full-page mockups and Pattern pages built only from components.
· Readme, Changelog, Cover. Start here.
· Foundations. Accessibility, Content, AI, Brand, Tokens, Color, Typography, Spacing radius elevation, Grid and border, Motion, Iconography, Layout and scaffold, Data visualisation, Illustrations. Each page states Ascern's rule. Values live as file tokens.
· Components. The component sheet, the inventory and design floor, then one ❖ page per component, alphabetical. A ❖ page has two artboards: examples (header, variants and states, rules) and code (import and parts table).
· Patterns. Page templates, full-page mockups and Pattern pages built only from components.
Status tags
Specced · locked, build to it
Build · specced, not in code yet
Spec next · needs a drawing
Gap · missing from the product
How a decision gets made
1. Research the proven pattern first and record the source in ADS-MAP.
2. Follow the familiar pattern (Jakob's law). Where sources differ, keep what Ascern ships or pick the more familiar one.
3. Brand green only where it counts: the primary action, links, selection and focus.
4. Joseph locks it; the Changelog records the date.
2. Follow the familiar pattern (Jakob's law). Where sources differ, keep what Ascern ships or pick the more familiar one.
3. Brand green only where it counts: the primary action, links, selection and focus.
4. Joseph locks it; the Changelog records the date.
Where it lives in code
· Tokens: src/app/globals.css, docs/design/tokens.json
· Components: src/components/ui (shadcn on Base UI), src/components/record-table
· The floor every PR passes: docs/design/floor.md
· Research: hire-references/ascern-design-system (ADS-MAP, ATTIO-COMPONENTS, RAMP-NOTES)
· Components: src/components/ui (shadcn on Base UI), src/components/record-table
· The floor every PR passes: docs/design/floor.md
· Research: hire-references/ascern-design-system (ADS-MAP, ATTIO-COMPONENTS, RAMP-NOTES)