# Tactile settings panel > **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. When a kit is locked, map the surface and inks onto the theme tokens and keep the two shadow tokens and the 1px edge: the edge is what keeps neumorphism legible. ## What it is The settings screen of Warm, a fictional heating app, in monochrome neumorphism. There is one colour, a warm putty `#e6e3df`, and everything is either raised out of it (an outer pair of shadows: light from the top left, shade to the bottom right) or pressed into it (the same pair, inset). Rows are raised 64px cards with a 20px radius; inside each, an icon sits in a small well, and the control is a switch whose track is a well and whose knob is raised. Turning a switch on slides the knob 26px and fills it ink, so the state is visible without reading depth. A range slider for the target temperature runs in a well with a raised knob that has an ink ring; a segmented control for units is a well with the pressed option raised. The detail worth copying is the 1px edge: every control and row has a `#7d7770` hairline, which is 3.5:1 against the surface, so the boundaries pass non-text contrast even where the shadows wash out. ## Reference behaviour 1. First frame: a raised round Back button and "Settings" at the top (62px top padding for the status bar). Three groups: Heating (Target while home 19.5° with a slider, Follow the schedule on, Eco mode off), Display (Units °C | °F, Boiler alerts on), Home (two link rows with chevrons). 2. Drag the slider: the value updates live ("19.5°" in 0.5 steps from 15 to 24) and `aria-valuetext` follows. The knob is a raised 30px disc with an ink ring; the track is a 14px well. 3. Tap a switch: the knob slides 26px over 240ms and turns ink; the small ON/OFF word inside the track swaps sides. Tap again to turn off. 4. Tap °F: the pressed segment is raised and ink; the temperature reads in Fahrenheit (67°). °C returns it. 5. Press a link row or the Back button: it goes from raised to pressed (the well) while held, with no other change. 6. The list scrolls inside the frame; the header stays. Nothing animates on load. ## Structure ``` 390 × 844, surface #E6E3DF everywhere (no second background) top 62/20/10 (◯ back 48) Settings 30/800 scroll, padding 14/20/40, groups gap 22, rows gap 10 HEATING 12/600 caps ┌ row tall, 20 r, raised ─────────────────────────────┐ │ [well ic 36] Target while home 19.5° │ │ Holds from 06:30 to 22:00 │ │ (═══════════●══════════════) slider, well track │ ├ row 64, raised ─────────────────────────────────────┤ │ [ic] Follow the schedule (ON ●) │ switch 60 × 34, well; knob 26 raised │ Weekdays and weekends differ │ ├ row ────────────────────────────────────────────────┤ │ [ic] Eco mode (○ OFF) │ └─────────────────────────────────────────────────────┘ DISPLAY │ [ic] Units Shown everywhere ( °C | °F ) │ segmented: well, pressed option raised │ [ic] Boiler alerts (ON ●) │ HOME │ [ic] Rooms and radiators 5 rooms, 7 valves… › │ button rows │ [ic] People Mira, Tej and one guest key › │ ``` - `header.top` → `button.back[aria-label]`, `h1`. - `main.scroll` → three `section.group[aria-labelledby]`, each an `h2` then rows. - A row is `div.row` (or `button.row.link` for navigation) → `span.ic` (well, `aria-hidden` SVG), `div.t` (`b` title, `span` caption), then the control: `button.sw[role=switch][aria-checked][aria-labelledby]` with a `span.lab` ON/OFF; or `div.seg[role=group]` of `aria-pressed` buttons; or `input[type=range][aria-labelledby][aria-valuetext]` in `div.slide` under a `span.val[aria-live]`. ## Tokens ```css :root { --surface: #e6e3df; /* the only ground */ --ink: #2a2622; --ink-2: #56514b; --ink-3: #625c56; --edge: #7d7770; /* 1px hairline, 3.5:1 on the surface */ --light: rgba(255,255,255,.85); --shade: rgba(74,66,58,.22); --raise: 8px 8px 18px var(--shade), -8px -8px 18px var(--light); /* rows */ --raise-sm: 4px 4px 10px var(--shade), -4px -4px 10px var(--light); /* knobs, back button, pressed segment */ --well: inset 6px 6px 12px var(--shade), inset -6px -6px 12px var(--light); /* a held row */ --well-sm: inset 3px 3px 7px var(--shade), inset -3px -3px 7px var(--light); /* icon wells, tracks, segments */ --sans: "Sora", system-ui, sans-serif; --r: 20px; --r-card: 24px; --row-h: 64px; --sw-w: 60px; --sw-h: 34px; --sw-knob: 26px; --thumb: 30px; --t-micro: 200ms; --t-knob: 240ms; --ease: cubic-bezier(.2, .7, .2, 1); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |---|---|---:|---:|---:|---:|---| | Title | Sora | 30px | 800 | 1 | −0.03em | sentence | | Value | Sora | 22px | 800 | 1 | −0.02em | tabular numerals | | Row title | Sora | 16px | 600 | 1.3 | 0 | sentence | | Row caption | Sora | 13px | 400 | 1.4 | 0 | sentence, `--ink-2` | | Segment | Sora | 13px | 600 | 1 | 0 | as written | | Group label | Sora | 12px | 600 | 1 | +0.06em | UPPERCASE, `--ink-3` | | Switch word | Sora | 10px | 600 | 1 | +0.06em | ON / OFF, `--ink-3` off, `--ink` on | ## Motion | Element | Trigger | Property | From → To | Duration | Easing | |---|---|---|---|---:|---| | `.sw::after` (knob) | toggle | transform, background | 0, surface → `translateX(26px)`, `--ink` | 240ms / 200ms | `--ease` | | `.seg button` | press | box-shadow, color | none, `--ink-2` → `--raise-sm`, `--ink` | 200ms | `--ease` | | `.row.link`, `.back` | :active | box-shadow | `--raise` → `--well` | 0 (instant) | – | | slider value | input | text | live | 0 | – | Reduced motion: transitions 1ms; the knob still moves, instantly. ## States - **Row:** raised, 1px edge. **Link row held:** the well. **Focus-visible:** 2px ink outline at 3px offset. - **Switch off:** well track, knob at left in the surface colour with an edge, the word OFF at the right in `--ink-3`. **On:** knob at right filled `--ink`, the word ON at the left in `--ink`. - **Segment:** unpressed flat in `--ink-2`; pressed raised in `--ink`. - **Slider:** well track, raised knob with a 3px ink ring inside a surface ring; the value beside the title is live. - **Icon well:** a 36px square well with a 12px radius; the icon is `currentColor` ink. ## Accessibility - Switches are `role="switch"` with `aria-checked`, labelled by the row title; Space toggles. The ON/OFF word is visual only (pointer-events none) and is in addition to the knob's position and colour. - The slider is a native `input[type=range]` with `aria-labelledby` and `aria-valuetext` ("19.5 degrees"), so arrow keys and screen readers work without extra code; the visible value is `aria-live="polite"`. - Segments are buttons with `aria-pressed` in a `role="group"` labelled "Units". - Link rows are `