Patterns
Page templates
Every Ascern screen is built from six templates and three named exceptions. Each row names the template, what Ascern ships today and the rule it moves to.
Patterns · Page templates
Page templates
Every Ascern screen is built from six templates and three named exceptions. Each row names the template, what Ascern ships today and the rule it moves to.
Template
Ascern today
Ascern decision
Templates
List page
rows of one record type
9 routes on RecordListHeader + RecordToolbar + RecordArea; Brief, Rules, People we found, Meetings list hand-rolled
ListPage: header, toolbar, table flush
the 9 routes as they are; the 4 hand-rolled lists move onto it
Record page
one record and its work
RecordPage on Company, Contact, Candidate; Job, Placement, Meeting, Rule hand-copy it with other gutters and rails (9 layouts)
RecordPage for every record
Job, Placement, Meeting, Rule move onto it; rail w-80, main gap-6
Settings page
forms and admin tables
6 layouts: 880px forms, full-width tables, in-body tabs, py-4 wrappers, a full-screen editor
SettingsPage: forms 880px, tables full width
tabs in the header, never in the body
Split view
a list beside the item it opens
Inbox: custom ListHead, no border, text-xl title; Flo chat: its own h-14 header
SplitPage: PageHeader, 384px list, reader
Inbox and Flo chat both use it
Home and dashboards
Today, Dashboard, Brief
Today: embedded grids capped at 292px plus hand-rolled lists; Dashboard: cards plus grids
HomePage: 12-column grid of blocks
each block: 16/600 title, then a table or row list
Named exceptions
pages no template fits
Job setup wizard, Application document, CV template editor, Import report
Wizard, Document, Editor
three named, each with PageHeader; Import report becomes a Document
Surfaces inside a template
Table
anything with columns
RecordArea and ReadOnlyGrid share RecordGridTable (good); ui/table once; about 10 hand-rolled lists are really tables
RecordGridTable, nothing else
editable as RecordArea, read-only as ReadOnlyGrid
Row list
items without columns
hand-rolled ul with 7 row heights: h-8, h-9, min-h-9, min-h-11, py-1.5, py-2, py-3
One RowList: 36px or 56px
one line or two; Inbox, Needs you, chats, upcoming
Toolbar
controls above a table
RecordToolbar h-11 plus 6 other bars (job review, board, dashboard, meetings, flo activity, inbox)
RecordToolbar is the only bar
filter left, search and display right
Tabs
views and sections
3 styles: header link tabs, in-body line tabs, Flo pill tabs
Views in the header, sections as line tabs
one style, 2px ink underline; pill tabs go
Empty state
nothing to show yet
ui/empty in some places; a plain <p> on 7 surfaces; grids show a muted cell
ui/empty, or the grid's empty row
no plain paragraphs
Hierarchy and spacing
Heading levels
one h1, then down
h1 in PageHeader; Meeting adds a second h1; body titles vary (text-2xl, text-xl)
Page 16/600, record 24/28, block 16/600, label 12/500
exactly one h1, in PageHeader
Gutter and width
who owns padding
majority px-4 sm:px-6 rail:px-3; 8 other gutters; 10 max widths; nested grids double the gutter
Templates own gutter and width
16 / 24 / 12px; widths full, 880 forms, 720 documents
Locked, 15 Oct
Joseph approved all three. Every row above is now final.
1
Six templates plus three named exceptions
Job, Placement, Meeting and Rule move onto RecordPage; Inbox and Flo chat onto SplitPage; no page builds its own frame.
2
Templates own gutter, width and header
Padding 16 / 24 / 12px and widths full, 880, 720 come from the template; page roots don't set px-* or max-w-*.
3
One RowList
36px or 56px rows with leading, title, meta and trailing slots; columns mean RecordGridTable.