+ /* one flat colour, held */ +

``` If a glow must exist, let it point at one element instead of filling the void. ### 07 Serif-italic on one word ```diff - The editor that actually ships. + The editor that ships. /* emphasise by weight/position, one voice */ ``` ### 08 Serif where sans belongs Swap the display serif for the project's UI sans in the font tokens; keep serif only if the product's voice is genuinely editorial (and then use a *text* serif). ```diff - font-family: "Playfair Display", serif; + font-family: var(--font-sans); ``` For the oversized italic-serif hero: set it roman, or move to a non-serif display face — the italic-serif hero is the AI-startup landing page uniform. ### 09 Decorative strikes & highlights Remove the strike/underline/highlight used for emphasis; let structure carry it. ```diff -

The old new way to ship.

A faster way to ship.

``` Keep strike-through for a real edit, underline for a link, highlight for a real annotation — each only when it does that job. ### 10 The kicker above every heading Delete kickers that restate their heading; keep one only where it adds a real dimension (a category, a date, a genuine sequence number). ```diff -

Features

What it does

/* scale and space introduce the section */ ``` ### 11 Full-sentence display headline Compress the point into a few words at display size; move the rest to a normal-size subline. ```diff -

- We help modern teams resolve incidents faster than ever before -

Pages the right engineer

It maps alerts to code owners and routes + each incident to whoever shipped the change.

``` After shortening, re-check any `max-width` that was sized for the old headline — a stale narrow measure (say `20ch`) will re-wrap your few words onto two lines and undo the fix. Verify the rendered result, not just the copy. ### 12 Flat type hierarchy Give the scale real steps; let the most important thing be unmistakably bigger. ```diff -

Usage this month

API calls: 48,210 (+12% vs May)

API calls this month

48,210

+12% vs May

``` Merge sizes that are within a pixel or two; aim for ≥1.25× between steps. ### 13 Highlighted keywords ```diff - Our revolutionary platform helps - ambitious teams move faster. + A project tracker for engineering teams. It updates issues from your commits. ``` Let structure carry emphasis; at most one accented phrase. ### 14 AI copywriting voice Rewrite for specifics. Delete triads, em-dash drama, and "X theater" framing. ```diff - It's not just an editor — it's a movement. Say goodbye to friction. + A code editor. Opens in under a second, ~half the memory of Electron editors. - We killed the standup theater. + It replaces the daily standup with a three-line summary of yesterday's PRs. ``` ### 15 Emoji everywhere Remove emoji from headings, buttons, and bullets; keep one only where it carries real information (a status). ```diff -

🚀 Why you'll love it

Why teams pick it

``` ### 16 Glowing status dot Drop the halo, the pulse, and the glow shadow; a flat dot plus a word is enough. ```diff - - - - Ready + Ready ``` ### 17 Rounded card, colored left border Collapse stacked callouts to body text; keep at most one real aside. ```diff -

Note …

Tip …

… the note, inline as normal prose …

+ ``` ### 18 Rounded-square icon tiles Drop decorative tiles; use a labelled list with real specifics. ```diff -

Fast

Very fast.

Fast — cold start in 180 ms, measured on a 2020 laptop.

``` ### 19 Max radius + glassmorphism Pick one small radius token; replace blur panes with solid surfaces. ```diff - class="rounded-full backdrop-blur bg-white/10 border border-white/20" + class="rounded-[--radius] bg-[--card] border border-[--rule]" ``` ### 20 Oversized drop shadow Shrink the shadow to a real elevation: tight blur, small offset, low opacity, never bigger than the element. Often a hairline replaces it outright. ```diff - box-shadow: 0 16px 80px 10px rgba(0,0,0,0.36); /* a room-sized fog */ + border: 1px solid var(--rule); + box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px -6px rgba(0,0,0,0.1); ``` Keep it colorless; a tinted glow is not depth. (See tell 01 for the purple glow-shadow, tell 16 for the status-dot halo.) Ghost-card variant: if a card has both a hairline border and a wide soft shadow, keep one — usually the hairline. ### 21 Corners that don't nest Compute the inner radius from the outer minus the padding, or don't round the inner element at all. ```diff -

…

/* both 16px */ +

…

/* 16 − 12 ≈ 8 */ ``` ### 22 Border that dies at the corner Put the radius and the border on the same box; never let a clip eat a stroke. ```diff -

/* wrapper owns the radius… */ - …

/* …child owns the stroke — erased at every corner */ -

/* same box: the stroke wraps the arc */ + …

``` Or keep the hairlines as dividers: run them straight, edge to edge, and drop the radius from the fill — square-cornered regions need no arc. ### 23 Badge & pill spam Delete decorative pills; keep at most a real status tag. ```diff -

Dashboard

✨ New🔥 Popularβ Beta +

Dashboard

v2.1 ``` ### 24 AI-drawn SVG icons Get a real, high-quality icon: commission a designer, or generate one with the best image model and refine it until it's crisp and on-brand. ```diff - +

/* a real icon: a designer, or a strong image model, refined */ ``` Don't ship the crude blob the model sketched, and don't fall back to a bare letter; a crude generated icon is worse than no picture at all. ### 25 Icon in a tint of itself Let the icon inherit the text color with no container; if it truly needs one, give it a deliberate opaque surface. ```diff -

+ /* just an icon; no tinted tile */ ``` ### 26 The springy hover Transition only the properties that carry the state change, at 120–200ms with a standard ease; hover feedback is a surface shift, not growth. ```diff - class="transition-all duration-500 hover:scale-105 hover:-translate-y-2 hover:shadow-2xl" + class="transition-colors duration-150 hover:bg-[--surface-2] hover:border-[--rule-strong]" ``` Never animate layout properties (width/height/margin/padding); save spring easing for things that genuinely move through space. ### 27 The wobbling spinner Give the rotation a fixed centre; never put centering and spinning in the same `transform` — a keyframe replaces the whole property. ```diff - .spinner { position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); animation: spin 1s linear infinite; } - @keyframes spin { to { transform: rotate(360deg); } } /* clobbers the translate */ + .spinner-box { position: absolute; inset: 0; display: grid; place-items: center; } + .spinner { animation: spin 1s linear infinite; } /* rotates in place */ ``` Centre the artwork too: the SVG arc centred on its viewBox, `transform-origin` left at center (or use the standalone `rotate` property, which composes with `translate` instead of replacing it). Then watch one full revolution before moving on. ### 28 The all-caps card grid Replace the grid of equal-weight cards with the single most important point, told fully; drop the ALL-CAPS micro-labels. ```diff -

…6 icon+CAPS-label+one-liner cards…

It replaces your standups.

Every morning it reads yesterday's commits and PRs and writes the team a + three-line summary.

``` ### 29 The invented stat row Keep only measured, sourced numbers; delete the set dressing. ```diff -

10k+ Developers 99.9% Uptime 24/7 Support

1,847 CI runs yesterday, median 3m 12s — from the public status page.

``` One real, checkable figure beats three round ones. No numbers yet? Say what the product does instead. ### 30 The 01 / 02 / 03 section markers Delete ornamental ordinals on unordered sections; number only real sequences. ```diff - 01

Collaborate

- 02

Innovate

Collaborate

/* sections distinguished by scale and space */ ``` Install steps, changelogs, and catalogues have earned their numbers; keep those. ### 31 Cards inside cards One surface per region; group inside it with spacing and hairlines. ```diff -

Pro — $8/mo

Billing

Plan Pro — $8/mo

/* rows split by hairlines */ +

Renews May 3

``` A child keeps its own surface only when it's genuinely a separate object (a preview, an embed). ### 32 One gap everywhere Space by relationship: pull a heading toward its own rows, push groups apart. ```diff -

Profile

Name

Danger zone

Delete workspace

Profile

Name

Danger zone

Delete workspace

``` Use a small scale with real jumps (4/8/16/32/64), unevenly on purpose. ### 33 Inter everywhere Choose a face like you'd choose a logo: try a few, set your own copy in each, and be able to say why this one. ```diff - font-family: "Space Grotesk", sans-serif; /* display */ - font-family: "Inter", sans-serif; /* body — the stock pairing */ + font-family: var(--font-sans); /* one face, compared and chosen — with the + reason recorded in the tokens file */ ``` Landing back on Inter after comparing is a choice; starting there isn't. A system stack picked for a reason is a choice too. Propose candidates; let the user pick — never swap a brand font silently. ### 34 The tasteful terminal Move monospace back to code; use terminal metaphors only where they serve the product. ```diff - -

  ╔══════════════╗
-          ║  WELCOME  ║
-          ╚══════════════╝

+ +

Welcome

/* mono stays in

/ for actual code */
```

### 35 The editorial dashboard
Type follows the job: sans + tabular lining numerals for scanned surfaces;
serif display only where the surface is genuinely editorial.
```diff
- Good evening, Mara.
- The quiet rhythm of your services.
- 3
+ 
+   On-call — payments
22:41 UTC
+ 
+ 3
```