Tokens and components every FirstHour CRM screen is built from. Toggle dark mode and density in the top bar to see both themes.
All color comes from CSS variables. Neutrals carry the interface; primary and signal are the only two loud colors.
Each relationship type keeps one color, icon and diagram everywhere: badges, the ERD, the field wizard and the builder.
Bricolage Grotesque for headings, IBM Plex Sans for the interface, JetBrains Mono for API names, IDs and SQL.
One primary action per view. Outline for secondary, ghost inside dense toolbars.
Labels sit above controls. Hints explain consequences, not mechanics.
Shown on layouts and list views.
Cannot be changed after the field is created.
Enter a hostname without the protocol.
Small, square-cornered, and always paired with text so color is never the only signal.
Hairline rows, sortable headers, tabular numerals, right-aligned amounts. Row height follows the density toggle.
| FY27 spares renewal | Negotiation | €1,240,000 | 15 Jan 2027 |
| Stavanger depot expansion | Discovery | €310,000 | 30 Mar 2027 |
| Bergen cold-chain retrofit | Proposal | €780,000 | 12 Dec 2026 |
| Fleet telemetry pilot | Closed won | €96,000 | 02 Sep 2026 |
Line tabs for record pages, segmented tabs for switching modes inside a panel.
Dialogs for decisions that need focus. Toasts confirm what changed and offer undo.
Every screen has all three. Add ?state=empty, ?state=loading or ?state=error to any URL to preview them.
Connect a PostgreSQL database, including Supabase-hosted Postgres, to get suggested objects, fields and relationships.
The metadata service did not respond within 10 seconds. Your data is safe. Retry, or check the system status if it keeps happening.
req_7f3a91c2 · 504 gateway timeout