# Shortlist — Design System (Locked) This is the sole design system for Shortlist. All 10 prototype views conform to it. Reference mock: `owner-compare.html`. --- ## Direction **Editorial Instrument.** Two layers in one system: - **Editorial Authority** — Newsreader serif headlines, warm-cream "paper" ground, generous whitespace, narrative prose at reading widths. Communicates trust and expert advice. - **Instrument Precision** — hairline rules, strict grid, monospaced numeric data with tabular figures. Communicates accuracy and transparency. The system is "quiet": no shadows, no decorative flourishes, no theming. Structure and typography do the work. One screen breaks the rules — see *Payoff Moment*. --- ## Color — Light (locked) ``` --bg #FDF9F2 page ground (warm cream "paper") --surface #F4EDE0 primary container --surface-low #F7F3EC subtle container --surface-high #EBE8E1 raised container --surface-lowest #FFFFFF pure white (sparingly — inputs, callouts) --ink #1C1C18 primary text --ink-secondary #524940 secondary text, secondary headings --ink-tertiary #8B8275 meta, captions, disabled --rule #D8CFBF 1px hairline (default) --rule-strong #A89E8C stronger hairline (table headers, footer) --accent #7A2918 primary action ink (walnut/burgundy) --accent-deep #5B1305 accent-pressed, hover-on-accent --accent-soft #FFDAD3 accent-tinted surfaces --success #4A5D23 muted olive — positive flags --warning #B8761B muted amber — caution flags --error #A02E1A muted brick — negative flags ``` ## Color — Dark (counterpart, locked) Dark mode is "lamplight on dark paper" — warm dark, not slate. The editorial warmth is preserved by keeping hue and shifting value. ``` --bg #18130E warm near-black --surface #211B14 primary container --surface-low #1C1711 subtle container --surface-high #2A2219 raised container --surface-lowest #100C08 deepest layer (inputs, callouts) --ink #F4EDE0 primary text (the light --surface, inverted) --ink-secondary #C9C0B1 secondary text --ink-tertiary #8B8275 meta, captions, disabled (shared with light) --rule #3A3128 1px hairline --rule-strong #5A4F42 stronger hairline --accent #FFB4A4 primary action ink (burgundy washes out on dark — lifted to a warm coral that reads as "lit" walnut) --accent-deep #FF957D accent-hover --accent-soft #4A1B10 accent-tinted surfaces --success #A3BC6C olive, lifted --warning #E6A24B amber, lifted --error #FF8A75 brick, lifted ``` **Rule for both modes:** depth comes from tonal shift, never shadow. Cards and containers sit "above" the page by being one surface step lighter (light mode) or lighter (dark mode — `surface` is lighter than `bg`). --- ## Typography — locked Three families, strict roles: 1. **Newsreader** (serif) — display numbers, headlines, brand mark, the payoff-moment hero. Voice and gravitas. 2. **Inter** — UI: buttons, body prose, labels, form fields, navigation. Default for anything text-shaped that isn't a headline or a number. 3. **JetBrains Mono** — *only* for: tabular numeric data, monetary values in data grids, IDs (`RFP 0142`-style codes), timestamps, status-pill uppercase labels. Never for body copy, never decorative. ``` display-lg Newsreader 44 / 1.0 / 400 hero numbers, payoff moment display-lg-mobile Newsreader 34 / 1.0 / 400 headline-main Newsreader 24 / 1.15 / 500 page titles headline-section Newsreader 20 / 1.2 / 400 section titles body-base Inter 15 / 1.55 / 400 prose, narrative body-small Inter 13 / 1.7 / 400 secondary text, captions label-caps Inter 11 / 1.0 / 500 / +0.08em uppercase labels, button text data-mono JBM 14 / 1.2 / 400 / tnum numbers in grids meta-mono JBM 11 / 1.0 / 400 / +0.04em IDs, timestamps ``` All numbers use `font-feature-settings: 'tnum' 1` for vertical alignment. Body prose capped at **78ch** for editorial readability. --- ## Layout - **Max content width:** 1340px - **Desktop gutter:** 40px - **Mobile gutter:** 28px - **Vertical rhythm:** 8px baseline; 16px default row padding in data lists - **Comparison views:** column-based grid where each manager's data occupies a vertical track; sticky left column for row labels - **Reflow:** side-by-side comparisons become horizontally scrollable on mobile (no card stacking — preserves comparison) --- ## Shape - **0px corners** — default for all structural containers, cards, the comparison grid, the page itself - **4px corners** — inputs, buttons, the small accent-tinted blocks (the soft radius keeps daily-use elements from feeling severe) - **Pill (999px)** — reserved for status flags and the Owner/Manager role switcher - **Circle (50%)** — status dots, avatar placeholders, icon-button hit areas --- ## Depth No drop shadows. Ever. Depth is tonal: - Containers raise by one surface step - Interactive elements invert on hover (background ↔ ink) - Focus state: 2px solid `--accent` outline, offset 2px --- ## Components ### Buttons - **Primary:** `--ink` background, `--bg` text, 4px radius, 12px / 24px padding, `label-caps` typography. Hover: background shifts to `--accent`. - **Secondary:** transparent background, 1px `--rule-strong` border, 4px radius, `--ink` text. Hover: background `--surface-high`. - **Tertiary (text-only):** `label-caps`, `--ink-secondary`, underline on hover. ### Status flags (pills) - Pill background `--surface`, 1px `--rule` border - Leading dot (`::before` 6px circle) in semantic color (`--success`/`--warning`/`--error`) - Label in `label-caps` - Pending/awaiting variants use the `--accent` dot with a 1.6s opacity-pulse animation (the "live, waiting" state on the dashboard and on the shortlist-pending page) ### Goal-rank cards (Post a Property — Goals section) - Card: `--surface-lowest`, 1px `--rule`, 4px radius, 18px padding - Selected (ranked) state: border shifts to `--ink`, background to `--surface-low` - Rank badge: 24px circle, `--ink` fill, `--bg` text, JetBrains Mono number, top-right corner - Click in priority order: 1, 2, 3. Click again to remove. Max 3. ### Coverage chips & credential tags (Manager Profile) - Coverage chips: `--surface-lowest`, 1px `--rule`, 999px radius, 13px Inter, with a small inline ✕ remove button - "Add" affordance: dashed 1px `--rule-strong`, transparent background, picks up `--ink` on hover - Credential tags (NARPM CRMC/MPM/RMP, etc.) — used both on the profile (as toggleable cards with checkboxes) and inline on proposal cards (as 10px JetBrains Mono caps chips with 1px `--rule-strong` border, surface-lowest fill) - License-verified row: `--surface-low` background, 2px solid `--success` left border, check-icon prefix in `--success` ### Evaluation Engine callout - `--surface-low` background - 2px solid `--accent` left border - Max-width 78ch - Header: `meta-mono` "EXECUTIVE SUMMARY" in `--accent`, paired with a filled icon - Body: Inter `body-base` - Trailing chip row uses status flags **The engine never picks a winner.** No "Recommended" badges, no rankings, no scores. It explains, contextualizes, and flags. Owner decides. ### Data grids (proposal comparison) - 1px `--rule` between rows - No vertical borders except in comparison mode (where each column gets a hairline-left) - Alternating row tint: `--bg` and `--surface-lowest` - Numeric cells: `data-mono` tnum - Row labels: `body-small`, uppercase, `+0.04em`, `font-weight: 600` ### Cards (proposal summary, property tile) - Flat, 1px `--rule` border, 0px radius - Headline `headline-section` in Newsreader for the headline number - Fee data in a `data-mono` grid below ### Inputs - 1px `--rule` border, 4px radius, `--surface-lowest` background - Focus: border becomes `--accent`, no shadow - Label above field in `label-caps` ### Top app bar - Full-width, 64px tall, 1px `--rule` bottom border - `bg-bg`, no shadow - Left: brand mark (Newsreader) + nav tabs (Inter, underline-active) - Right: role switcher (text button → on click, becomes a confirming pill), notifications icon, account icon --- ## The Payoff Moment (Contact Revealed) This is the one screen that breaks the system. It's the product's emotional high point. - Full-bleed `--bg` (no max-width container) - Single column, centered - Owner's manager match shown as oversized Newsreader — **80px** display type on desktop (vs. 44px elsewhere), 56px on mobile - The reveal: contact info appears below as if it were redacted text being uncovered. Static in the prototype — black bar with `--bg` text becomes `--bg` background with `--ink` text. (No JS animation; we just show the revealed state.) - One short Newsreader sentence below explaining "Shortlist's job is done — you and [Manager] take it from here." - A single secondary button: "Download summary." Everywhere else: restrained. Here: this one moment lands hard. --- ## Terminology (locked) - The thing an owner posts is a **Property** (not "RFP," not "Listing"). - Owners have **Properties**; properties accumulate **Proposals**. - Managers see **Properties seeking management** in their feed. - "RFP" may appear in internal/data-model docs but never in user-facing UI. --- ## What this system rejects - Drop shadows of any kind - Gradients (except possibly a single subtle warm wash on the payoff screen — TBD per view) - Icons as decoration (icons must carry meaning) - Multi-step CTA hierarchies on the same screen (one primary, one secondary, max) - "Recommended" / "Best" badges from the evaluation engine - Dark-on-dark slate aesthetic in dark mode — warmth is preserved