IONUT MAXIM Vol. 04
Archive Say · hello
14 / INSTRUMENTS — A SPECIMEN BOOK CONTROLS · v04

The small precision
tools the site
actually uses.

A catalog of every interactive control across the practice. Each one designed for a specific small decision. Each one works. Drag, click, type, turn. The page saves nothing.

a designer's habit, naming the tools you keep on the desk
No. 01

Toggle switch.

Binary on/off, no middle. For settings that flip a single property of the page.

  • For: focus mode, reduced motion, notifications
  • Not for: more than two states (use segmented)
Focus mode
Stateoff
No. 02

Segmented control.

Mutually exclusive choice from two to five options. Same shape as the footer's day/night toggle.

  • For: view modes, reading length, year tabs
  • Not for: multi-select (use chips)
Chosennarrow
No. 03

Stepper.

Bounded numeric value with plus / minus. Tabular numerals, hold-to-repeat.

  • For: essays per page, cohort year, count
  • Not for: open-ended numbers (use input)
12essays / page
Value12
No. 04

Horizontal slider.

Single-thumb continuous value with tick rhythm and a soft value bubble.

  • For: reading width, font size, slow pace
  • Not for: discrete options (use segmented)
42
SHORTLONG
Value42
No. 05

Range slider.

Two thumbs, one filled segment between them. For bounded filters.

  • For: reading time, price, year filter
  • Not for: single value (use slider)
3 min
12 min
0 min20 min
Reading time 3 — 12 min
No. 06

Rotary knob.

Drag vertically to rotate. Maps 0–100% across 270°. Tactile, analog, deliberate.

  • For: volume, density, intensity
  • Note: use sparingly, one per page
MIN MAX
62%
Value62
No. 07

Toggle chips.

Multi-select tags. Independent of each other. Persist a small set of preferences.

  • For: essay tag filter, topic interests
  • Not for: mutually exclusive (use radio)
Selectedon-design, mentorship
No. 08

Radio cards.

Large click-area, mutually exclusive. For pivotal choices that benefit from breathing room.

  • For: engagement length, cohort tier
  • Not for: long lists (use segmented)
Chosenshort
No. 09

Accordion.

Expandable row. Quiet by default, opens on click. Useful for questions you sometimes have.

  • For: FAQ, practice notes, policy
  • Not for: primary content (read it inline)
01 Do you take retainers?

No retainers longer than three months. The clean ending is part of the deliverable.

02 Will you sign an NDA?

Yes. Standard, mutual, simple. I prefer the one-pager. Anything longer than three pages, I will read but probably negotiate.

03 Where are you based, really?

Oslo, since 2017. Bucharest before that. Office in Grünerløkka by appointment.

No. 10

Reaction.

Three-state response. Lives at the end of essays. Quiet, not gamified. No counts shown.

  • For: end of essays, after worksheets
  • Note: data is local-only by design
Did this land?
Markednone
↘ ALSO IN THE SET

The instruments already
at work elsewhere.

For completeness, a quick reference to the controls that appear across the site, each linked to where it lives.

No. 11

Clarity slider.

The vertical pill on the homepage. Capsule knob, orange fill, ticks, live ghost numeral. The signature control.

Index · hero →
No. 12

Channel tabs.

Four-channel switcher with a side rail. Switches between Operating / Engagements / Reach / Person.

Index · practice notes →
No. 13

Six-dot dial.

Six discrete questions arranged in a circle. One active at a time. Replaces the continuous knob in the diagnostic card.

Index · five commitments →
No. 14

Filter chips.

Quietly different from toggle chips — these are single-select. Used at the top of the essays index.

Essays · filter →
No. 15

The diagnostic form.

Five small fields. Quiet labels. Sends a real email. A form is also a control.

Conversation · form →
No. 16

Magnetic buttons.

Primary CTAs that lean slightly toward the cursor on hover. Subtle. Don't notice until you do.

Index · footer →
↘ A DESIGN SYSTEM IN MOTION

If you would like the
full kit-of-parts.

The component source, including every control on this page, is available as a Figma library and as a small CSS file. Email if useful.

Request the kit Or browse the archive