Design system
How we design, and why.
The rules synergyprod.com is built on. Each one says what it is, why we chose it, which research argues for it, and where it lives in the code. Like our principles, it's where we stand today, and better evidence will move us.
Version 1.1 · Updated November 9, 2026
Start
About this system.
This is the working rulebook for synergyprod.com: the tokens in the code, the components built from them, and the way we write. It's public for three reasons. It keeps us honest, because a rule written down can be checked. It shows clients how we think before they hire us. And it gives anyone who works with us, contractors included, one place to look.
Each rule follows the same pattern: what it is, why, the research behind it where there is some, and the file it lives in. When a rule is a taste call with no study behind it, we say so. The numbers are not typed in by hand: contrast ratios and hex values are computed from the same values the site uses, and a test fails if the documented colors and the code disagree. Where the site falls short of a rule, the change log says so.
It covers synergyprod.com and our two essays, which share its foundations and keep their own layouts (see the Synergy family). The products we run have their own brands.
Start
Five commitments.
Everything below follows from these. When two rules pull against each other, these decide.
- 01
Clear before clever.
A visitor should get the point of any section from its label and headline. If a detail makes people work without helping them, it goes.
- 02
One thing at a time.
One red, one kind of call to action, one idea per section. Emphasis only works when it's rare.
- 03
Familiar where people act, ours where they look.
Navigation, links and buttons behave the way people expect. The typefaces, the red and the drawings are where we're distinctive.
- 04
Honest by default.
No invented proof, no pressure, no fake progress. What we show about ourselves can be checked.
- 05
Usable by everyone, checked by a test.
Contrast, target sizes, keyboard focus and reduced motion are part of the design, not a pass at the end.
Foundations
Name and logo.
The name
- Write it Synergy. One word, capital S, no "Inc." or "Studio" in running text. The legal name, Synergy Productions, Inc. (founded 1998), goes on the copyright line, contracts, estimates and anything else a client signs.
- synergyprod.com names Brent Spore, who founded it and does the work, with contractors when a project needs more hands. Our products and accounts say Synergy only.
- Say "we". It's honest about the contractors, and it keeps the focus on the work.
The logo
| Version | Colors | Where | Size |
|---|---|---|---|
| Standard | #A41D1C · #CAC8B8 · #878574 | The header, on both themes. The one people should remember. | 32px tall, 40px from 768px up |
| Muted | #A41D1C · #B3B3A8 · #818173 | The footer and the 404, where it signs off rather than leads. | 20 to 24px tall, 50% opacity |
| White | #FFFFFF | Not used on the site today. | Same rules |
There was no separate brand guide before this page. These rules are the standard now, for every Synergy property that carries the logo.
- Use the files as they are. Don't recolor the mark, stretch it, add effects or set the wordmark in another typeface.
- Give it room: nothing closer than a third of its height on any side.
- Don't go below 20px tall. The mark's inner details fill in.
- The logo's red is the site's red, #A41D1C. Both logo files use it; the muted version had its own slightly different red until 2026-11-09.
Source: src/assets/synergy-logo.svg, src/assets/synergy-logo-dark.svg, src/assets/synergy-logo-white.svg, public/favicon.png
Foundations
Color.
The palette is small on purpose: warm neutrals, one red. Light mode is a warm off-white page with near-black text. Dark mode, the default, is a blue-black page with cream text. Neither uses pure white or pure black, which glare on screens and make text shimmer at the edges.
Background
--background · bg-background
The page. A warm off-white in light, a blue-black in dark, never pure white or black.
Card
--card · bg-card
A half step off the page. Used at 50% behind the closing call to action.
Muted
--muted · bg-muted
Bands that set a region apart, at 20 to 30% (the products band, the 'Also in' band).
Border
--border · border-border
Hairlines: card tops, section edges, the filter row. Decorative, so it's quiet on purpose.
Display text
--text-display · text-display
Headlines, card titles, the result line of a case study, anything the eye should land on.
Body text
--text-body · text-body
Paragraphs and lists. Softer than display text so headlines lead.
Muted text
--muted-foreground · text-muted-foreground
Labels, meta lines, captions, the footer. The quietest text that still passes 4.5:1.
Caption text
--text-caption · text-caption
Reserved for fine print. Not in use today; kept above 4.5:1 so it's safe when it is.
Foreground
--foreground · text-foreground
The default text color and the color of inline links in muted lines.
Synergy Red
--accent · text-accent, bg-accent, border-accent
The logo's red, and the only red: taglines, index numbers, the hero's accent word, hover states, rules, note borders, the button, drawing highlights. The same value in both themes.
Focus ring
--ring · outline (global)
The keyboard focus outline on every link and button. Synergy Red.
Synergy Red
The red is the logo's, #A41D1C, and there is only one. It's the only color with a job, and the job is pointing: at the label over a section, the rule under a headline, the one word in the hero that matters, the main button, the active tab. Everything else is neutral, which is why those few things get seen.
The same red is used for everything, in both themes and on all three of our sites: text, rules, borders, the button and the focus ring all read --accent. For a while dark mode had a second, lighter red for text, and the button had a gradient into a darker one. Side by side they read as three different reds, and a brand color that changes with the theme isn't one color. So we went back to the logo's.
That has a cost we'd rather state than hide. On the light page the red is 7.2:1, well past every floor. On the dark page it's 2.4:1, below the 4.5:1 WCAG asks of small text and the 3:1 it asks of a focus ring. No single red can pass both, since the two pages sit near opposite ends of the brightness scale, so the choice was between one red and full contrast in dark mode. We chose one red. The contrast table lists the misses, and anyone who needs every word at full contrast can switch to the light theme from the header.
- One red thing per eyeful. If two red things compete in the same view, one of them should go neutral.
- Red never carries meaning alone. The active tab also gets an underline and full-strength text; the hero's red word is also in italics.
- No other hues. Status colors (green for success, amber for warning) aren't in the system because the site has nothing to report. If it ever does, they're added here first.
- Never red body text. Red is for short labels and single words.
Don't
A red headline, a red button and red links all in the same section.
Do
A red tagline over a neutral headline, and one red button below it.
Why
People remember and notice the thing that differs from its surroundings. Difference is relative, so the more places red appears, the less any one of them stands out.
The research: Von Restorff Effect, Selective Attention
Source: src/index.css (:root, .dark), tailwind.config.ts (textColor.accent)
Bands and regions
A section gets a tinted band (bg-muted/30) only when it's a different kind of thing from what's around it: the products we run, the "Also in" list under a principle, the tradeoffs and guardrails. The closing call to action sits on bg-card/50, a half step off the page. Bands are never nested.
Why
A shared background is a strong signal that things belong together. Used everywhere, it stops meaning anything, so we keep it for the sections that really are separate.
The research: Law of Common Region
Foundations
Contrast.
Every pairing of text and background the site uses, in both themes, computed from the token values. Text must reach 4.5:1 (WCAG 2.2, level AA). Controls and focus rings must reach 3:1. The test in src/test/designSystem.test.ts runs these same numbers, so a token change that breaks one fails the build's tests.
Four pairings miss in dark mode, and we know it: red text on the page, on a card and on a tinted band, and the focus ring. They come from keeping one red (see Synergy Red). The test lists them by name and fails if one starts passing, so this note can't go stale.
| Pairing | Needs | Light | Dark |
|---|---|---|---|
| Headlines on the page | 4.5:1 | 16.4:1 | 14.6:1 |
| Body text on the page | 4.5:1 | 10.7:1 | 9.4:1 |
| Lead paragraphs (body at 90%) | 4.5:1 | 8.0:1 | 7.8:1 |
| Muted text on the page | 4.5:1 | 5.0:1 | 5.7:1 |
| Muted text on a card | 4.5:1 | 4.8:1 | 5.4:1 |
| Muted text on a tinted band | 4.5:1 | 4.6:1 | 5.2:1 |
| Caption text on the page | 4.5:1 | 5.2:1 | 4.8:1 |
| Red text on the page | 4.5:1 | 7.3:1 | 2.4:1 |
| Red text on a card | 4.5:1 | 7.0:1 | 2.2:1 |
| Red text on a tinted band | 4.5:1 | 6.7:1 | 2.1:1 |
| Button text on red | 4.5:1 | 7.6:1 | 7.6:1 |
| Focus ring on the page | 3:1 | 7.3:1 | 2.4:1 |
| Scroll arrow (body at 60%) | 3:1 | 3.4:1 | 4.2:1 |
Not listed: borders, the red rules and the decorative hairlines. They separate things that are already separated by space, and carry no meaning alone, so WCAG sets no floor for them. They're quiet on purpose.
Why
Text has to stand clear of what's behind it to be read at all, and text that's easy to read is also judged more pleasant and more believable.
The research: Figure-Ground, Processing Fluency
Foundations
Typography.
Aa
The quick read on a slow problem.
perspective
Aa
Plain sentences, one idea each, in a sans that stays clear at 12px.
Tagline
Two typefaces from the same family, designed by Peter Biľak at Typotheque. The serif sets the editorial tone in headlines; the sans does the reading and the interface. Because they share proportions, they sit together without fighting. They're licensed and self-hosted from public/fonts/.
| Family | Weights on file | Used on the site |
|---|---|---|
| Fedra Serif A Std | Book 400, Medium 500, Demi 600, Bold 700, each with italic | Book 400 and Book Italic only |
| Fedra Sans Std | Light 300, Book 400, Medium 500, Demi 600, Bold 700, each with italic | Book 400 and Medium 500 |
The scale
Display
The hero headline. One per page.
Strategy probably isn't your problem.
Serif 400 · 30 / 48 / 60 / 72px by breakpoint · leading 1.25 · tracking −0.025em
Page title
The h1 on pages without a hero: /principles, /work, this page.
What people do before they think.
Serif 400 · 36 / 48 / 60px · leading 1.25
Section headline
The h2 that opens each section.
What the work looks like.
Serif 400 · 30 / 36 / 48px · leading 1.25
Item title
Card titles, service names, case study titles, steps.
Automation Bias
Serif 400 · 20 / 24px
Lead
The paragraphs right under a section headline.
You've restructured. Rebranded. Relaunched.
Sans 400 · 18 / 20px · leading 1.625 · body color at 90%
Body
Everything else you read.
We put a price on that work, and you agree to it before anything starts.
Sans 400 · 16px · leading 1.625
Small
Card descriptions, case study details, sources.
A plain read on why a homepage gets visitors but not customers.
Sans 400 · 14px · leading 1.625
Tagline
The small red label over each section headline. The hero's uses 0.3em.
Selected work
Sans 400 · 12px · uppercase · tracking 0.25em · red
Label
Headings of notes, filter tabs, group names.
How it applies here
Sans 400 · 12px · uppercase · tracking 0.2em · muted
Meta
Status and category lines under a card, definition terms.
Web app · Live
Sans 400 · 12px · uppercase · tracking 0.15em · muted
Index number
Step and list numbers. Always two digits.
01
Sans 500 · 12px · tracking 0.1em · red
Rules
- Headlines are always serif at regular weight (400). Weight isn't how we add emphasis; size and space are.
- Red italics mark the key word of a line, and appear only in the hero and the essay promos.
- Uppercase only for labels of a few words, and always with added letter spacing (0.15 to 0.3em). Never uppercase a sentence.
- Lines of reading text stay between about 45 and 75 characters (max-w-xl to max-w-2xl).
- No orphans: the last two words of a headline or short paragraph are joined with a non-breaking space ( in JSX, \u00A0 in strings, or noWidow() for principle copy).
- Numbers in lists are two digits (01, 02). Counts that change use tabular figures so they don't jump.
- Paragraphs are 16px or larger. Card descriptions and details are 14px. 12px is for uppercase labels and meta lines only.
Why
People judge a product that looks considered as easier to use, and give it more patience. Type is most of how a text-led site looks. Readable type also makes the same words seem clearer and more credible, which is a reason to get it right and a reason to be careful what we say.
The research: Aesthetic-Usability Effect, Processing Fluency
Loading
Fonts load with font-display: swap, and the page waits up to three seconds for them before showing, so the first thing you see is in the right typeface. That wait is a tradeoff we chose for the look of the site (see Performance). The four files in use total about 900 KB.
Source: src/index.css (@font-face), index.html (font gate), tailwind.config.ts (fontFamily)
Foundations
Spacing.
Space is the main grouping tool. Things that belong together sit closer than anything else around them; sections are separated by generous space instead of boxes. All spacing comes from Tailwind's 4px scale.
| Space | Value | Why |
|---|---|---|
| Gutter | 24px (px-6) | The side margin at every width. Wide enough for a thumb on a phone, quiet on a desktop. |
| Section | 96px top and bottom, 128px from 768px up (py-24 md:py-32) | Sections are separated by space, not boxes, so the space has to be generous enough to read as a break. |
| Page top without a hero | 144px, 176px from 768px up (pt-36 md:pt-44) | Clears the fixed header (64 to 72px) and still leaves a section's worth of air. |
| Tagline to headline | 16px (mb-4) | The smallest gap in the opener, so the two read as one unit. |
| Headline to rule | 32 to 40px (mt-8 / mt-10) | Enough to separate the rule from the words without detaching it. |
| Grid gaps | 32 to 48px (gap-8 to gap-12) | Bigger than any gap inside a card, so cards stay distinct. |
Tagline
A headline that owns its label.
The body sits further away, so the label and headline read as one unit and the body as the next.
Why
Things close together look related. Space is the cheapest grouping tool there is, so we reach for it before borders and boxes.
The research: Law of Proximity
Foundations
Layout.
Centered, single column for anything you read; two or three columns for things you compare. Every layout starts from the phone and adds columns as room allows.
Widths
| Content | Max width | Why |
|---|---|---|
| Lead text | 576px (max-w-xl) | About 60 to 70 characters a line at 18 to 20px. |
| Section opener | 672 to 768px (max-w-2xl, max-w-3xl) | A headline that wraps in two or three lines, not five. |
| Lists and steps | 896px (max-w-4xl) | Two or three columns of short items. |
| Case studies, products | 1024px (max-w-5xl) | Three columns of dense cards. |
| Principles grid, this page | 1152px (max-w-6xl) | Three columns of cards with drawings. |
Breakpoints
Tailwind's defaults, plus a 1400px cap on the container. Columns appear at:
| Name | From | What changes |
|---|---|---|
| sm | 640px | Card grids go to two columns. |
| md | 768px | Section padding and headline sizes step up; steps and services go to columns; the header logo grows. |
| lg | 1024px | Three-column grids; this page's side navigation appears. |
| xl | 1280px | The hero headline reaches its largest size. |
| 2xl | 1400px | The container stops growing. |
- No horizontal scrolling at any width, except inside a table or the filter tabs, which scroll on purpose.
- Test every change at 390px wide, the size of a common phone, before anything else.
Source: tailwind.config.ts (container), src/pages/*.tsx
Foundations
Shape and lines.
Corners are square. The base radius is 4px, and the button's rounded-sm works out to 0px, so buttons have hard corners too; the only round things are the theme toggle and dots. Square corners match the editorial, printed feel of the type.
- The headline rule sits under a headline that leads into prose. The heavier section rule sits under a headline that leads into a grid of items.
- Hairlines sit on top of cards and between table rows. Faded hairlines (transparent at both ends) separate whole sections.
- Shadows appear only on the primary button (shadow-elevated). Nothing else floats.
- One gradient: the hero's faint vertical wash with 3% grain. The button is flat Synergy Red; a gradient into a darker red would be a second red.
Source: src/index.css (.hero-gradient, shadows), tailwind.config.ts (borderRadius)
Foundations
Motion.
Motion is quiet and one-way: things fade up into place as you reach them, once, and then stay put. Nothing loops except the hint arrow on the hero, and that stops when your device asks for less motion.
| Motion | Spec | Where |
|---|---|---|
| Entrance | Opacity 0 → 1 and 20 to 24px up, 0.5 to 0.8s, ease-out, once | Section content as it scrolls into view, once it's 100px onto the screen. |
| Stagger | 0.1s between items (0.04s on dense grids) | Cards and steps, so a group arrives as a group. |
| Rule draw | scaleX 0 → 1, 0.6s, 0.3s delay | The red rule under a headline. |
| Hover color | 300ms | Links and titles turning red. |
| Button hover | Scale 1.05, opacity 0.9, arrow 4px right, 300ms | The primary button. |
| Reduced motion | Transforms off, CSS transitions and animations at 0.01ms, no smooth scroll | Everywhere, when the device asks for less motion. |
- Items in a group arrive together, with a short stagger. Unrelated things don't move at the same time.
- Never animate to get attention. The red already does that.
- Everything works with motion off. MotionConfig reducedMotion="user" wraps every page, and index.css sets CSS transitions and animations to 0.01ms under prefers-reduced-motion.
A tradeoff we chose: the fade-ins start from invisible in the prebuilt HTML, so with scripts on, the words wait for the page's JavaScript before they appear. Without scripts, a fallback shows everything at once. The owner kept the fade-ins for the feel of the site (2026-11-09); the Doherty Threshold page says so too.
Why
Things that move together read as a group, so motion either groups things or creates false groups. And motion is the loudest kind of difference there is, so it's saved for arrivals.
The research: Law of Common Fate, Von Restorff Effect
Source: framer-motion props in each component, src/App.tsx (MotionConfig), src/index.css (reduced motion)
Foundations
Drawings and icons.
Principle drawings
- Drawn on a 64-unit grid with 1.5-unit strokes in the current text color.
- Only plain shapes: circles, dots, lines, squares, simple curves.
- Red marks the one thing the drawing is about. Exactly one red element, or one red group.
- It should still read when you squint. If it needs a caption to make sense, simplify it.
- Drawings are decorative (aria-hidden). The name and rule next to them carry the meaning.
Why
People read an image as the simplest shape it could be. Simple shapes are recognized faster and remembered longer.
The research: Law of Prägnanz
Source: src/components/principles/PrincipleGlyph.tsx
Icons
Icons come from Lucide, at 14 to 20px, in the color of the text next to them. Each has one meaning:
| Icon | Means | Example |
|---|---|---|
| Go on, on this site, or send | The primary button, the essay promos | |
| Leaves for another site or product | Product cards, essay links | |
| Do, or passes | Example pairs, the contrast table | |
| Don't, or fails | Example pairs |
An icon never stands alone without a label or an accessible name.
Foundations
Imagery.
- No stock photos and no illustrations of people. The type, the red and the drawings carry the look.
- Client logos appear only for organizations we've worked for, at 60% opacity so no single brand outshouts the page, at full strength on hover. Five of twelve show at a time.
- The share image (public/og-image.png, 1344 × 768) and the favicon are brand assets. Change them only with the brand.
Source: src/components/ClientLogos.tsx, src/assets/clients/, public/og-image.png
Foundations
Light and dark.
Dark is the default. The toggle in the header switches to light, and the browser remembers the choice. Both themes are first-class: every token has both values, and every contrast check runs in both.
- Never hard-code a color in a component. Use a token, so both themes follow.
- Check every change in both themes before shipping.
- The browser's theme color and the loading screen use a dark blue-black (#1A1F2E) in both themes, so the first paint matches the default.
Source: src/App.tsx (ThemeProvider), src/components/Header.tsx (toggle), index.html (theme-color)
Components
Section opener.
Every section starts the same way: a red tagline, a serif headline, a short red rule, then the body.
How we work
No surprises.
A conversation, then an agreed quote, then the paperwork. Nothing in the contract is new to you.
A muted line can close the section.
- The tagline names the section in two or three words. The headline says something about it.
- One h2 per section. Items inside use h3.
- Centered for sections you read; left-aligned on pages that are mostly reference, like this one.
Why
A pattern that repeats is learned once. People skim pages by their headings, so a label and a headline that say what's coming let them read the page from its openers alone, a chunk at a time.
The research: Law of Similarity, F-Shaped Pattern, Chunking
Components
Links.
Inline links are underlined, so they never rely on color.
designisnotui.com Read it in Design is not UI Principles- Links in running text are underlined. Standalone links carry an arrow or sit where only links sit (the header, the table of contents).
- Hover turns links red over 300ms. Visited links don't change color; the site is small enough not to need it.
- A link that leaves synergyprod.com uses the up-and-right arrow. Product cards and the essay promos open in a new tab; links in reading text open in the same tab.
- Link text says where it goes. "Read it in Design is not UI", not "Click here".
Components
Header and footer.
The header is fixed, 64px tall (72px from 768px up), on a slightly see-through, blurred band so the page scrolls behind it without the links getting lost. Logo top left, links top right: the theme toggle, Principles, and Let's talk. There's no menu, because there's nowhere else to go.
The footer is one line: the muted logo, the year, and the email address, written out. Nothing to read and nothing new to do.
Why
People expect a site to work like the ones they already use: the logo goes home, the way to reach someone sits top right. A header that stays clear of the page behind it keeps that promise while scrolling.
The research: Jakob's Law, Figure-Ground
Source: src/components/Header.tsx, src/components/Footer.tsx
Components
Stats strip.
- Three facts, no more. Each must be defensible if a client asks; 500+ projects was confirmed by the owner on 2026-10-23.
- The years also appear in the structured data and the persona copy. Change them everywhere at once.
Why
People hold three or four things in mind at once, not seven. A strip people are meant to remember stops at three.
The research: Miller's Law
Source: src/components/StatsStrip.tsx, index.html (JSON-LD), src/hooks/usePersonaContent.ts
Components
Notes and steps.
Side notes, steps, case studies and examples hang off a 2px left rule instead of sitting in boxes. A red rule marks something we're saying ("How it applies here", a step, a Do); a neutral rule marks background ("Where it comes from", a Don't).
How it applies here
The note itself, at full strength.
A conversation
You tell us what's in the way.
Why
A line joining things is a stronger tie than nearness alone. A rule down the side binds a label to its text without the weight of a box.
The research: Law of Uniform Connectedness
Source: src/pages/PrincipleDetail.tsx, src/components/HowWeWork.tsx, src/components/CaseStudies.tsx
Components
Cards.
Cards are open: no box, just a rule, the content, and space. Where a card is a link, the whole card is the link. A principle card has a hairline on top that turns red on hover; a product card gains a red rule on its left. There are three kinds.
Von Restorff Effect
Site Checkups
A plain read on why a homepage gets visitors but not customers.
Web app
Client
What the project was
The result
Only what was reported.
- Every card of a kind has the same parts in the same order. A card never gets a special style to stand out.
- Case studies follow problem, what we did, result. The result says only what was measured and reported.
- A product without a live link shows a status (Coming soon) and isn't a link.
Source: src/pages/Principles.tsx (PrincipleCard), src/components/Projects.tsx, src/components/CaseStudies.tsx
Components
Filter tabs.
- Buttons with aria-pressed, not links: they filter what's on the page, they don't go anywhere.
- Each shows its count, so people know what they're choosing before they choose it.
- The active tab is marked three ways: the red underline, full-strength text, and the pressed state for screen readers.
- A short line under the row (aria-live) says what the filter now shows.
- On phones the row scrolls sideways instead of wrapping.
Source: src/pages/Principles.tsx
Components
Evidence grade.
Three filled bars: holds up. Two: holds, with limits. One: disputed. Three dashed outlines: a rule of thumb that was never an experiment. The grade is in the bars' shape, not their color, and the label is always written next to them.
Source: src/components/principles/Verdict.tsx, src/content/principlesResearch.ts (verdicts)
Components
Do and don't.
Don't
A spinner that says “Analyzing…” for twenty seconds with nothing behind it.
Do
“Checking page 4 of 12: /pricing”, updated as it really happens.
- The Don't sits first, on a neutral rule, with a cross. The Do sits second, on a red rule, with a check.
- Bad examples are patterns, never named companies. Named examples are only ever positive and documented.
Components
Page order.
The home page runs: header, hero, stats, the jar line, client logos, about, services, selected work, how we work, products, where we stand, and the invitation to write. The invitation comes last, after every section that links away, so the page ends on the one thing we'd like you to do.
Why
People remember the start and end of a sequence best, and judge an experience largely by how it ends.
The research: Serial Position Effect, Peak-End Rule
Source: src/pages/Index.tsx
Content
Voice.
Plain, short, direct. We write the way a senior designer talks to a client they respect: no jargon, no hype, no hedging for its own sake.
- Short sentences, one idea each, everyday words. Aim for a reader who's busy, not a reader who's slow.
- Say what we know and how we know it. Positions are held on the evidence and stated as where we stand today. We invite disagreement and answer it politely.
- No forecasts dressed as certainties (always, never, the only way) unless they're true.
- No buzzwords: seamless, robust, cutting-edge, game-changing, leverage as a verb.
- Em dashes sparingly, ideally never. Commas, periods and parentheses do the job.
- No reflex patterns: "not X, but Y", three-part lists for rhythm, summary tails like "highlighting its importance".
- US spelling. Numerals for figures and results (25+, 33.7%); words for small counts in a sentence (three projects).
- Title case for buttons; sentence case for everything else, including headlines.
Don't
We leverage cutting-edge methodologies to deliver seamless, robust experiences.
Do
We find what's getting in your users' way, and fix it in the order that matters.
Why
Plain words are read faster and believed more. Each extra word or clever turn spends attention the reader came to spend on the point.
The research: Processing Fluency, Cognitive Load
Content
Honesty.
These are choices, not findings. We'd need a very good reason to move any of them.
- No testimonials unless a real client said it and agreed to be named. The placeholder quotes were removed on 2026-11-09.
- Numbers only if we can stand behind them. Case study results say only what was measured and reported.
- No countdowns, fake scarcity, decoy options, guilt-trip buttons or add-ons ticked in advance.
- No padded waits. If something takes time, the screen says what's really happening.
- Our research cites primary sources. We never name or link other UX-principle collections.
Why
Each of these levers works as well against a visitor as for them. Knowing that is exactly why we write down that we only pull them in the visitor's favor.
The research: Social Proof, Loss Aversion, Decoy Effect
Content
Personas.
The home page speaks to three readers. Add ?persona=product or ?persona=designer to the address and the hero, the jar section, services, the closing section and the page title change their words; the rest of the page doesn't. The design never changes, only the copy, which all lives in one file.
- Edit copy in the persona file, not in components.
- Every persona follows the same voice and honesty rules. A claim one persona can't make, none can.
- Persona visits render in the browser rather than from the prebuilt HTML, since their words differ.
Source: src/hooks/usePersonaContent.ts, src/hooks/usePersonaSEO.ts
Quality
Accessibility.
We aim for WCAG 2.2 level AA on every page, and test what a test can check. The rest is a checklist for every change: keyboard only, a screen reader, 200% zoom, a phone, and both themes.
- Contrast: every pairing in the contrast table, tested in both themes. Red in dark mode is the known exception, listed there.
- Color never alone: links are underlined, active states have a shape, grades are bars.
- Motion: off when the device asks. Nothing flashes.
- Structure: one h1 per page, sections with h2, and the header, main content and footer as separate landmarks.
- Images: logos and photos have alt text; drawings are decorative and hidden from screen readers.
- Without JavaScript: every page shows in full (a noscript style lifts the font gate and the fade-ins).
Quality
Targets.
Anything you tap or click is at least 44px tall where the layout allows, and never less than 24 × 24px, the WCAG 2.2 floor. Links inside a sentence are exempt, as the guideline allows. The scroll arrow on the hero is 40px; the theme toggle is 32px.
Why
The time to hit a target grows as it gets smaller and farther away. Bigger targets are faster for everyone and essential for some.
The research: Fitts's Law
Quality
Focus.
One ring for everything, set once in src/index.css on :focus-visible, so it shows for keyboard users and not on every mouse click. It uses Synergy Red, which is 7.2:1 on the light page and 2.4:1 on the dark one, a known miss (see Contrast). Tab order follows reading order; nothing hidden can take focus.
Quality
Performance.
Every page is built ahead of time as plain HTML (vite-react-ssg), so the first response carries the words and search engines and AI readers see the whole page. Then the page's JavaScript takes over.
| Choice | What it costs | Why we made it |
|---|---|---|
| Prebuilt HTML | A build step | Words arrive with the first response, for people and crawlers. |
| Font gate (up to 3s) | A short wait on slow connections | The first thing you see is in the right typeface, with no reflow. |
| Fade-ins from invisible | Words wait for the JavaScript bundle (about 540 KB) | The feel of the site; owner's call, 2026-11-09. |
| Self-hosted OTF fonts (about 900 KB in use) | Larger than WOFF2 | Licensed files used as supplied. Converting them is a candidate if the license allows. |
Why
People work best when a system answers in well under a second. We meet that for clicks and taps, and we're open about where the page's first load trades speed for look.
The research: Doherty Threshold
Reference
Decisions and their research.
Every decision above, and the principles that argue for it. Each principle page links back here.
Some choices have no study behind them: the square corners, the warm neutrals, the two typefaces themselves. Those are taste, and we call them that.
Reference
The Synergy family.
| Site | Shares | Its own |
|---|---|---|
| synergyprod.com | Everything on this page | The source of the system |
| designisnotui.com | Name, logo, typefaces, neutrals, Synergy Red, the focus ring, voice and honesty, and a contrast test | Essay layout, its own figures. Argues the work. |
| itsoktobehuman.com | Name, logo, typefaces, neutrals, Synergy Red, the focus ring, voice and honesty, and a contrast test | The same layout as its sibling, its own metaphors. Argues the person. |
| Products (Site Checkups, Mesh Gradient Studio, the games…) | The voice and honesty rules | Their own names, colors and type |
Both essays joined the system on 2026-11-09. Each now carries a test (src/test/standard.test.ts) that checks its colors against this page and every text pairing against 4.5:1 in both themes, with the same dark-mode red misses listed by name. All three sites use one red, the logo's #A41D1C. The essays and this site also cross-link their research: each essay closes with the principles it rests on, and those principle pages point back.
Reference
Changing the system.
- Start by asking what could be removed. A new token, size or component has to replace something or earn its place against what's here.
- Change the token, not the component. Colors live in src/index.css, scales in tailwind.config.ts, documented values in src/content/designSystem.ts.
- Run the tests. src/test/designSystem.test.ts fails if this page and the CSS disagree or a pairing drops below its floor.
- Update this page and its change log in the same change, and record lasting decisions in .ai/memory/DECISIONS.md.
- Don't hand-edit the vendored parts: src/components/ui/ (shadcn-ui), public/fonts/, and the brand assets.
Why
People reach for additions and overlook removals, more so under pressure. A system grows by default, so we make removal the first question.
The research: Subtraction Neglect, Occam's Razor
What's not in the system
shadcn-ui ships tokens for popovers, sidebars, destructive actions and a secondary color. They exist so the vendored components work, and none of them appears on the site. If one ever does, it gets documented here first, with its contrast checked.
Disagree?
If you think a rule here is wrong, or the research reads differently, write to hello@synergyprod.com. We'll read it and write back.
Reference
Change log.
Version 1.1: one red. Synergy Red is the logo's #A41D1C in both themes, for text, fills, rules, the button and the focus ring, here and in both essays; the lighter dark-mode text red, the button gradient and the essays' own fill red are gone, and both logo files use the same value. The cost is contrast in dark mode: red text and the focus ring are 2.4:1 on the dark page. We chose one red over passing there, and the contrast table lists those pairings as known misses instead of hiding them.
Design is not UI and It's OK to be human joined the system: the standard's neutrals, a text-only red (their red words were 2.4:1 in dark mode, now 5.3:1), the focus ring, and a contrast test in each repo. Their fill red and layouts stay their own.
First edition, adopted as the Synergy standard (owner, 2026-11-09); the logo rules here are the brand rules. Writing it down turned up five gaps, fixed the same day: keyboard focus had no designed style (now one red ring everywhere), the caption color was 4.2:1 in light mode (now 4.6:1), red text was 3.1:1 in dark mode (now 5.3:1 through its own token), eight em dashes in page copy broke the house voice rule, and the 404 page was a stock template.