Web
How the system lands on the site: one page grammar for home, docs, release notes, the Portal and Rook Library, from 1440 down to a phone.
Page grammar
Every page is built from the same four parts, in the same order. Learn them once and the Portal reads like the docs, and the Library like both.
- Sticky navMark and wordmark, then Portal, Library, Docs and Release notes. The current section gets a cyan underline. The account chip sits right. It never scrolls away.
- Library tab barInside Rook Library only: Details, Families, Projects, Imports. Send from Revit is the one ink button, at the right end.
- Category railOn the page ground behind a hairline, not on a grey panel. The current row takes the cyan wash and a 2px cyan edge, with its count beside it.
- One page headerTitle, an optional one-line summary, actions on the right. One per page, from PageHeader.tsx. Nothing stacks above it.
Screens
Each one is the same white page with the same header; only the content between the rules changes. Open them to see the system at work.
- HomeWhat Rook is, both products, and sign in. The dog in a hard hat on the drafting sheet.
- Library · DetailsThe category rail, a search field, the approval filter and a grid of resting detail cards.
- Docs articleThe docs rail, the reading column at 16/24, an On this page list and the pager cards.
- Release notesA version index on the left, ruled entries on the right, older versions collapsed.
- Portal overviewThe account header, Portal tabs, the release band and seat meters as key-value rows.
- Design systemThis guide. The same rail, header and ruled sections as the docs.
Mobile
At 390 the nav collapses to the mark and a menu button, the rails become a sheet, and the page header stacks: title, summary, then actions at full width.
- Nav: mark, sign in, menu
- Section links move into the menu. The bar stays sticky and keeps its hairline.
- The menu is a full-height sheet
- Library tabs nest under Library. The current section takes the same 2px cyan edge as the rail.
- Headers stack
- Title, then summary, then actions at full width. Display drops to 40/48 and Title to 32/40 below 768px.
- Same tokens at every width
- Only layout reflows. Color, depth, radius and the type roles stay as they are at 1440.