IONUT MAXIM Vol. 04
Instruments Say · hello
15 / STYLE GUIDE VOL. 04 · LOCKED

The system,
on one page.

Every token, type ramp, surface, and rule that holds the practice together. The page is built from the same parts it documents, so what you see is what ships. Read it the way you would read a colour chart: as the source of truth.

the canonical reference lives in DESIGN.md; this is its rendered twin
01 / OVERVIEW

The Field Notebook.

The website as a practitioner's quietly-kept log: a numbered volume of field notes, ruled margins, tabular figures, and a single orange pen used sparingly. Calm, precise, unhurried, warm without being soft. Editorial restraint, not SaaS marketing.

Two themes, equally first-class: a cool paper day and a warm, ink-deep writer's-desk night. The orange is the same in both; only the surface tone changes. Toggle it in the footer.

02 / COLOURS

One accent,
a tinted neutral ramp.

The frontmatter holds the day values; both palettes are shown so the night equivalents are visible regardless of the current theme.

Primary

Pulse Orange#F26B3FThe single brand voice. Same in both themes.
Pulse Deep#D9542CHover / pressed. Night: #FF8556.
Pulse Soft#FDE6DCActive-state halo only. Night: #3A2218.

Neutral day

Canvas#F2F4F7Page background.
Recess#ECEFF3Inset / alternating sections.
Surface#FFFFFFRaised cards, panels, chips.
Ink#2C313APrimary text, brand mark.
Ink Soft#4A515CSecondary text, ledes.
Slate#8A929ELabels, eyebrow caps.
Track#C7CFD6Inactive bars, ticks at rest.
Hairline#E5E9EEThe only border value.
Ghost#E8ECF0Background watermark numerals.
Ink Block#2C313ACTA, footer, featured cards.

Neutral night

Canvas#15171C
Recess#101216
Surface#1C1F25
Ink#E8E5DE
Ink Soft#A8A59E
Slate#6E706C
Track#2C2F37
Hairline#262931
Ghost#1B1E24
Ink Block#0A0C10
The One Voice Rule. The accent appears on no more than ~10% of any screen, and only to mean something. A decorative orange is a bug.
The No-Pure-Channel Rule. #000 and #fff never appear as text or background tokens. Every neutral is tinted toward the theme's temperature.
The Block Rule. Ink Block stays dark in both themes. The CTA, footer, and featured cards are always ink blocks.
03 / TYPOGRAPHY

One typeface,
used with conviction.

Inter carries the whole system. The accent voice that most editorial sites assign to a serif is here a thin italic Inter (weight 200), in pulse orange.

DisplayInter · 700 · clamp(56–108px) · −0.045em · lh 0.96Hero headlines only.
Take your time.
HeadlineInter · 700 · clamp(38–72px) · −0.035emSection heads.
A response so flat it disappears.
TitleInter · 600 · 21px · −0.015emCard & component headings.
Make sense of complexity.
BodyInter · 400 · 16px · lh 1.55 · −0.005emParagraphs. Lede steps to 17–19px. Cap ~65ch.
Not with templates, but with time. Not with buzzwords, but with perspective. We can start small: a call, a map, a clearer next step.
Accent voiceInter · 200 · italic · pulse orange · −0.01emThe signature. Emphasis inside headings, ledes, quotes.
doing the real work, together
LabelInter · 600 · 11px · 0.22em · UPPERCASE · slateEyebrows, section numbers, metadata.
02 / MAYBE THIS SOUNDS FAMILIAR
Tabular figuresfont-variant-numeric: tabular-numsEvery figure that aligns or changes.
20+ · 50+ · 27 · 2014
The Thin-Italic Rule. The accent voice is Inter italic at weight 200, never a serif and never heavier. If it reads bold, the weight is wrong.
The Tabular Rule. Any figure that can change or align uses tabular numerals. Numbers are treated as instrument data.
The Two-Words Rule. Display headlines are short, two or three lines, with a single accent word carrying the emphasis.
04 / SPACING & GEOMETRY

Capsules, hairlines,
soft corners.

Radius

sm10px
md18px
lg28px
pill999px

Cards 28px, tiles/wells 18px, the smallest 10px, every button/badge/chip a full pill.

Spacing

  • xs4px
  • sm8px
  • md16px
  • lg24px
  • xl40px
  • card36px pad
  • section120px+ y
1px hairline perfect circle tick rhythm
05 / ELEVATION

Mostly flat. A soft
light from the north-west.

Depth comes from tonal layering and 1px hairlines first; shadow is a response, never a default. Values shown are day; they deepen at night.

Subtlechips, pills, the toggle
Cardraised surfaces, card hover
Knobtactile controls only
Orange glowprimary CTAs only
The Flat-By-Default Rule. Sections are flat, separated by tonal steps and hairlines. A shadow is a response, not decoration.
The Single-Light Rule. All shadows fall the same way: soft, downward, slightly NW-lit. Never mix directions or add a second hard drop.
06 / MOTION

Ease out. No bounce.

One easing for everything. Transform and opacity only; layout properties are never animated. Hover the tile to feel the curve.

hover me
Easingcubic-bezier(.22,.61,.36,1)exponential ease-out
Fast0.2shover, focus, links, chips
Slow0.35sslider fill, knob travel
07 / COMPONENTS

The core parts,
rendered.

The foundational set. The full interactive instrument library, sliders, knobs, steppers and the rest, lives on the Instruments page.

Buttons
Let's talk See how I work
Eyebrow
03 / THAT'S WHERE I COME IN
Segmented control
Chips
On design Mentorship
Input
Nav link
01Essays 02Work
Card
No. 01

Make sense of complexity.

Soft 28px corners, 1px hairline, flat at rest, lifts on hover. Surface on canvas; the dark block variant for featured cards and the CTA.

See the full interactive set on Instruments
08 / DO'S & DON'TS

The guardrails,
without apology.

Do
  • Keep the orange to ~10% of any screen, for state and emphasis.
  • Build from one neutral ramp plus the single accent.
  • Use Inter everywhere; reach for thin italic 200 in orange for accents.
  • Use tabular numerals on every figure that aligns or changes.
  • Separate sections with tonal steps, hairlines, and generous padding.
  • Keep capsule and hairline geometry: pills, 28px cards, 1px borders.
  • Keep both themes first-class; only the surface tone changes.
  • Write display headlines as two or three words, one accent word.
Don't
  • Use em dashes in copy. Use commas, colons, semicolons, periods.
  • Ship the SaaS funnel: gradient hero-metric, five identical feature tiles, "Trusted by 10,000+", stock-photo testimonials.
  • Use glassmorphism decoratively (only the nav backdrop is sanctioned).
  • Use gradient text. Emphasis is weight, size, or the orange.
  • Put a colored border-left/right stripe on cards or callouts.
  • Nest cards inside cards; subdivide with hairlines and tonal steps.
  • Introduce a second accent hue, neon, or a serif.
  • Animate layout properties or add bounce/elastic motion.
↘ THE CANONICAL SOURCE

This page is the rendered
twin of DESIGN.md.

Tokens are normative in the file; this page is how they look in the wild. When the two disagree, the file wins, then gets corrected here.

See the instruments Browse the archive