# Settings page with sticky nav > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The account-settings page of *Halden Post*, a parcel-logistics product. A 56px top bar, then a centred two-column layout: a 220px left column that sticks to the top of the scroll container and lists six sections along a 1px hairline (the current section gets a 2px teal bar and weight 500), and a 720px right column of six sections, each a heading, a one-line description and a white card of rows. Rows hold a label + hint on the left and one control on the right: a 40 × 24 switch, a 36px select, a text input or a small button. The last section is a danger zone with red-tinted borders and a "Delete workspace" button that arms an inline confirmation requiring the workspace name to be typed. The feeling is neutral, quiet and trustworthy: one teal, one red, no other colour. ## Reference behaviour 1. Initial state: "Profile" is current in the nav; the Profile and Notifications cards are visible; two of four notification switches are on; "All changes saved" with a 6px teal dot sits at the right of the top bar. 2. Scroll the right column (the whole page area below the top bar is one scroll container; the nav is `position: sticky; top: 0` inside it): the current nav item updates to the last section whose top is ≤ scrollTop + 120px. At the very bottom, "Danger zone" becomes current regardless. 3. Click a nav item: the container scrolls smoothly so that section's top sits 24px below the top of the scroll area; the item becomes current. 4. Hover a nav item: colour `--ink-2` → `--ink` over 150ms. "Danger zone" is always `--danger`. 5. Click a switch: the track animates `--line-2` → `--accent` over 200ms and the 18px knob slides 16px right with expo-out easing. Space toggles it when focused; focus draws a 2px teal ring around the track. 6. Focus a select or text input: border becomes `--accent` with a 3px `--accent-soft` ring; hover darkens the border to `--ink-3`. 7. Hover a secondary button: background `--bg`, border `--ink-3`. Hover a danger button: fills `--danger` with white text. 8. Click "Delete workspace": the card gets `.armed`, a confirmation row appears beneath (text input + disabled red "Permanently delete" + "Cancel"), `aria-expanded` becomes true, focus moves to the input. Typing exactly `halden-post` enables the red button. Cancel collapses the row, clears the input and returns focus to the trigger. 9. Reduced motion: smooth scroll becomes instant; switch transitions 1ms. ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────────────────────┐ │ ■ Halden Post / Settings ● All changes saved │ 56 top bar ├────────────────────────────────────────────────────────────────────────────┤ │ ┌ sticky ─────────┐ Profile │ │ │ Account settings│ How you appear to teammates … │ │ │ ▌Profile │ ┌──────────────────────────────────────────┐ │ │ │ Notifications │ │ Display name [ Mara Lindqvist ] │ │ rows 16/20 pad │ │ Security │ │ Language [ English (UK) ⌄ ] │ │ │ │ Billing │ │ Time zone [ Europe/Oslo ⌄ ] │ │ │ │ Integrations │ └──────────────────────────────────────────┘ │ │ │ Danger zone │ Notifications │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ Signed in as … │ │ Delivery exceptions (●━━) │ │ switch 40×24 │ └─────────────────┘ │ Daily digest (●━━) │ │ │ │ Mentions (━━○) │ │ │ 220px 48px └───────── 720px ────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────┘ wrap = 220 + 48 + 720 = 988px, centred; padding 40px 32px 80px ``` - `

` — logo square, product, slash, page name, `.saved` status. - `.scroll` — `flex:1; overflow-y:auto` scroll container. - `.wrap` — grid `220px 1fr`, gap 48px, `align-items:start`. - `