isonew · design system · 2026
One accent, hairlines, and numbers that carry their source
This is the system as it is actually built, not as it was once sketched. Every specimen below is the live component rendering with the live tokens, so the page cannot drift away from the site it documents.
Color and type tokens
Defined in src/styles.css
Kit components
Exported from components/ds
Routes on the system
Files under src/routes
Years operating
Team, cumulative
Principles
Three rules the whole system answers to
Everything below is downstream of these. When a decision is unclear, the principle wins over the preference.
Evidence over adjectives
A number with its scope and source beats any superlative. If we cannot label where a figure came from, it does not ship.
Hairline over shadow
Structure comes from 1px and 2px borders and from whitespace. Depth appears only when a surface responds to a pointer.
One accent, for action
Signal orange marks the thing to click. Red and green carry meaning on numbers. Nothing else is colored.
Color
Four groups, and each one has a job
Surfaces carry structure, ink carries text, the accent carries action, semantic color carries meaning on numbers. Nothing carries mood.
Surfaces
Three surfaces only. Everything else is a border or whitespace.
--paper
oklch(0.957 0.011 88)
Page background and every alternating band.
--card
oklch(1 0 0)
Cards, tables, artifacts, anything that carries evidence.
--muted
oklch(0.93 0.013 88)
Card headers and table headers. Never a full band.
Ink and hairlines
Ink is reserved for closing bands and the footer, so it still reads as an ending.
--ink
oklch(0.155 0.002 90)
Body text on light surfaces; background of closing band and footer.
--muted-foreground
oklch(0.46 0.012 80)
Eyebrows, table headers, secondary labels. Never body copy.
--border
oklch(0.892 0.019 88)
Every hairline, every divider, every 2px evidence border.
Accent
One accent, and it means action. If it is not clickable or focused, it is not orange.
--signal
oklch(0.678 0.219 36)
Primary CTA fill, focus ring, active tab underline, quote rule.
Semantic
Gain and loss belong to numbers and comparisons. They are never decoration.
--loss
oklch(0.474 0.176 27)
What the manual process costs today. Before column, red metrics.
--gain
oklch(0.428 0.089 161)
What comes back after the system ships. After column, green metrics.
Contrast pairings
Measured with the WCAG 2.1 formula against the token values above. Ratios are computed from the hex values, not sampled from a screenshot.
Ink on Paper
16.4:1
AAA
Default body pairing. Never lighten body copy below 80% opacity.
Ink on White
18.1:1
AAA
Card copy. Same rule on opacity applies.
Ink on Signal
6.2:1
AA
Why the primary CTA is ink on orange, not white on orange.
Signal on Ink
7.8:1
AAA
High-contrast CTA variant: orange on the ink surface. Use when the action must dominate the band.
Paper on Ink
16.4:1
AAA
Closing band and footer. Secondary copy stops at 70% opacity.
Loss on White
6.9:1
AA
Red numbers pass at body size. Do not use red on the muted surface.
Gain on White
6.5:1
AA
Green numbers pass at body size. Same restriction as loss.
Typography
Outfit does the talking, mono does the labeling
Two families. Outfit at 600 for anything structural and 450 for reading. IBM Plex Mono is restricted to uppercase eyebrows, tabular figures, and token names.
Know what AI pays back first
One per route, always the promise in owner language.
What the manual process costs today
One per band, sitting under an eyebrow.
Fixed scope, fixed price
Cards, rows, artifacts, person names.
We document what your team does by hand, price it, and rank the work by what it returns in the first year.
Every paragraph. Max width 2xl so lines stay under 75 characters.
$48M+
Metrics and headline numbers only, with scope and source underneath.
Evidence, not adjectives
One per band, above the section title. Never a sentence.
Spacing and rhythm
A 4px scale, used at six sizes
Bands alternate Paper and White so the page has a pulse without adding a single decorative element.
4px
Icon nudges and optical alignment only.
8px / 12px
Gaps inside a card: label to value, icon to text.
20px (gap-5)
Grid gutter between cards, everywhere.
24px (p-6)
Standard card padding. 20px on dense cells.
40px (mt-10)
Section title to the content it introduces.
64px → 96px (py-16 → py-24)
Band padding, mobile to desktop.
max-w-6xl
Every band's inner column. 20px page gutter, 32px from sm.
max-w-3xl
Section titles and hero copy blocks.
max-w-2xl
Running paragraphs, so a line never exceeds ~75 characters.
Shape and elevation
Borders build the structure, shadows only answer a pointer
A resting page has no drop shadows worth noticing. Depth appears when something is hoverable, and it disappears again on release.
radius 10px
Cards, tables, artifacts, framed screenshots.
radius 999px
CTAs only. Nothing else is a pill.
border 1px
Default hairline: dividers, standard cards.
border 2px
Evidence surfaces: artifacts, flow steps, tables, person cards.
border-l 2px
Meaning on a card edge: loss red, gain green, signal on quotes.
Resting state on cards that can be interacted with. Never on a static band.
Hover and focus only, paired with a 1px to 2px translate. Never a resting state.
Motion
Four movements, and a contract to turn them all off
Motion here exists to sequence attention, never to entertain. Under reduced motion the page renders complete and static, with nothing hidden.
Reveal on enter
opacity 0 → 1, translateY 18px → 0, 620ms, cubic-bezier(0.2, 0.7, 0.2, 1) — Fires once per element via IntersectionObserver. Stagger siblings by 40ms.
Count up
0 → target over 900ms, requestAnimationFrame, tabular figures — Display numbers only, triggered at 10% visibility. The final value is the truth.
Hover lift
translateY -1px to -2px plus shadow-lift, default transition — Only on surfaces that navigate or submit. Icons may translate 2px in the arrow direction.
Reduced motion
prefers-reduced-motion: reduce — Reveals render revealed, counters jump to the final value, lifts still change shadow only.
Icons
One library, one stroke weight
Icons are marks, not illustrations. A monochrome 2px glyph keeps a technology grid inside the system without importing a single trademark asset.
Library
Lucide only. No second icon set, no emoji, no vendor logo files.
Stroke
2px for evidence and comparison marks, 2.5px for small checks and crosses.
Color
currentColor. Signal orange only when the icon marks an action or a check.
Size
size-4 inline with text, size-5 in strips, size-8 in the stack grid.
Semantics
Decorative icons are aria-hidden. A meaningful icon gets a label.
Components
The kit, rendering live
Every page on this site is assembled from these. No route redefines a color, a radius, or a type size on its own.
Cost today
Returned
Named engagements
Today
- Intake arrives in three inboxes and one WhatsApp thread.
- Someone retypes the same order into two systems.
After
- One queue, one record, one status everyone can see.
- The system writes to both systems and logs what it wrote.
- 01
Map
We watch the work and write down what actually happens.
- 02
Price
Each step gets an hour cost and an error cost.
- 03
Rank
Opportunities ordered by first-year return.
- 01
Fixed scope engagement
Priced before it starts, delivered against a written outcome.
- 02
Handover as a deliverable
Documentation and access transfer are part of the phase, not an extra.
- You own the code and the cloud accounts
- Every figure carries its scope
- No retainer required to keep it running
- A person answers your contact form
- 0101 Quote assembly — 62 h/mo — automate — payback 2.1 mo
- 0202 Order re-entry — 38 h/mo — integrate — payback 3.4 mo
- 0303 Weekly reporting — 12 h/mo — leave alone for now
Average handle time fell to 40 seconds
ScopeSupport queue, 90 days after launch
SourceClient-reported dashboard export
Four live surfaces in production
ScopePublic URLs, verifiable today
SourceThis site's case records
ChatSac
Live
VerdeOps
Signed · In delivery
ChurnDefense
Operator proof
They shipped the thing we had been describing in meetings for two years.
Ronan Pinho
Founder & CEO, Board Advisor
Runs the Diagnostic conversations with owners and decides what we take on. Sits on the other side of the table often enough to know which projects quietly never pay back.
ronanpinho.comWhat if the plan says do nothing?
Then the plan says do nothing, and you saved the cost of finding out the expensive way.
Fixed scope, fixed price
The Diagnostic is priced before it starts. No hourly surprises, no open-ended discovery.
You keep the plan
The ranked opportunity plan is yours to act on with us, with your team, or with anyone else.
You own everything
Code, data, and cloud accounts live under your organization from the first commit.
No retainer trap
We document and hand over. A system you cannot run without us is a system we failed to build.
Patterns
The page recipe every route follows
A reader should be able to move between two pages on this site and never have to relearn where the argument is going.
- 01
Promise
One H1 in owner language, with controlled line breaks.
- 02
Proof
Four checks or four figures, immediately under the promise.
- 03
Problem
The cost of doing it by hand today, as a red number.
- 04
Mechanism
Three to five numbered steps. What we actually do.
- 05
Before and after
Red Today column against green After column.
- 06
Evidence
Cases, quotes, live surfaces, claim/scope/source table.
- 07
Objections
The four questions owners ask before they say yes.
- 08
One action
A single closing band. Stage decides the secondary link.
Closing band by stage
explore
Primary: Diagnostic. Secondary: savings calculator. For readers who do not yet have a number.
evaluate
Primary: Diagnostic. Secondary: contact. For readers comparing us against an alternative.
decide
Primary: Diagnostic, alone. Any second link at this point loses the decision.
Voice
What we say, and what we never say
The copy rules are part of the design system. A beautiful page carrying an unsourced number is a failed page.
We say
- Plain money and plain hours, with the scope attached.
- What we will not do, before the client has to ask.
- Named clients, live URLs, and quotes with an attribution.
- Short sentences. One idea per line.
We never say
- Unsourced percentages, or a metric without its scope.
- Cutting-edge, world-class, seamless, revolutionary.
- Lorem ipsum, placeholder cards, or buttons that go nowhere.
- Long em dashes and exclamation marks in body copy.
Ship checklist
The gate a surface passes before it goes live
If a line here fails, the page is not late. It is unfinished.
Visual
- Bands alternate Paper and White; ink appears once, at the close.
- No hardcoded color class anywhere in the diff.
- Cards use 10px radius; only CTAs are pills.
- No horizontal overflow at 390, 768, and 1440.
Copy
- Exactly one H1, and it states the promise in owner language.
- Every figure carries scope and source, or is labeled an estimate.
- Route has its own title, description, and og tags.
- No placeholder text and no dead links.
Accessibility
- Every CTA is at least 48px tall and passes AA on its own surface.
- Focus ring is visible on every interactive element.
- Decorative icons are aria-hidden; meaningful ones have labels.
- Reduced motion removes every reveal and counter.
The system exists so the argument stays visible
If you want the same discipline applied to your operation, the Diagnostic is where it starts.