Formcraft — Workspace Settings (cobalt two-column)
A two-column SaaS workspace-settings screen: sticky app nav, left section nav, grouped settings cards with toggles, a segmented control, selectable delivery cards, and a fixed save bar, in Inter on slate with one cobalt accent.
Summary
A two-column workspace-settings screen on a light SaaS canvas: a sticky translucent app nav and breadcrumb header, a left in-page section nav, and a right column of grouped settings cards (Profile, Form behaviour, Notifications, Response delivery, Danger zone). Inputs sit in slate-filled bordered rows with right-aligned controls; toggles, a segmented control, icon-led notification rows, and selectable delivery-destination cards carry one disciplined cobalt accent. A fixed bottom save bar with an unsaved-changes indicator persists across the page. Everything reflows from a two-column desktop grid to a single stacked column on mobile.
Style
Calm, modern product-settings aesthetic on a near-white (#f8fafc) canvas with a slate ink palette and one disciplined cobalt-blue accent (#2563eb). Inter typeface, soft rounded cards with hairline borders and a very light card shadow, generous padding, and translucent backdrop-blurred sticky chrome top and bottom.
Layout & Structure
A max-w-6xl page with a sticky top app nav, a white breadcrumb + title header band, then a body that is a CSS grid of [208px sidebar | 1fr content] on large screens and a single stacked column on mobile. The left sidebar is a sticky in-page section nav; the right column is a vertical stack (gap-7) of rounded settings cards, each card a titled header strip plus rows. A fixed bottom save bar spans the viewport. The sidebar nav becomes a horizontal scrollable strip and every label/field row collapses to stacked on mobile.
Sticky app nav
Breadcrumb + page header band
Two-column body grid + in-page nav
Profile card
Form behaviour card (toggles + segmented control)
Notifications card (icon rows + select)
Response delivery card (selectable destination cards)
Danger zone card + fixed save bar
Special Notes
Single accent discipline is the core idea: cobalt #2563eb is reserved for the active nav item, links, focus rings, the primary 'Save/Upload' buttons, the selected destination card, and the notification icon tiles; everything else is slate-on-white, with rose used only for the danger zone, emerald only for the synced status, and amber only for the unsaved-changes dot. The page is a two-column [208px sidebar | 1fr] grid on lg and a single stacked column on mobile; the left section nav is sticky on desktop and a horizontal overflow strip on mobile. Each label+field row is row-on-sm and stacked-on-mobile, with controls capped at max-w-md so long forms stay scannable. Inputs default to a slate-50/60 fill that turns white with a 4px cobalt focus ring. Toggles, segmented control, and selects are drawn in pure CSS (pseudo-elements + inlined SVG), not images. A fixed bottom save bar (pb-32 on main reserves space) keeps the primary action always reachable. Fonts via Google Fonts Inter (400-800); icons via Iconify lucide:* set; Tailwind via CDN with extended 'cobalt' (50 #eff4ff -> 900 #1e3a8a) and 'ink' (50 #f8fafc -> 900 #0f172a) color scales.