Foundations

Why it works

1. min-width: 0 lets flex and grid items shrink below their content. Their default is min-width: auto, which is why a long word or a wide child overflows a grid.
2. interpolate-size: allow-keywords turns on transitions to and from auto for the whole page. Accordion that animates its height depends on it.
3. text-wrap: pretty tells the browser to spend more effort on line breaks. It avoids a last line that holds one short word, and Safari also evens out the ragged edge. The property inherits, so :root reaches every element.
4. text-wrap: balance gives headings lines of similar length.
5. font-synthesis: none stops the browser from faking a bold or italic that the font file lacks.
6. The two smoothing rules switch macOS from subpixel to grayscale antialiasing. Text renders thinner and matches the weight shown in Figma. Other systems ignore them.
7. 100svh is the viewport height with the mobile browser toolbars showing, so the page never sits behind them. 100dvh changes as the toolbar moves and re-lays out the page each time.
8. scrollbar-gutter: stable reserves the scrollbar's space. The page does not shift sideways when a modal locks scrolling or when content grows past one screen.
9. overflow-wrap: break-word breaks a word that cannot fit on a line, such as a URL, where it would otherwise run out of its box. Long text that wraps, truncates or clamps has the rest.
10. -webkit-text-size-adjust: 100% stops iOS from inflating text in landscape.
11. -webkit-tap-highlight-color: transparent removes the gray flash iOS and Android paint over a tapped element.
12. Inputs at 16px or more stop iOS Safari from zooming the page on focus. It does not zoom back out.
13. touch-action: manipulation tells the browser the element never double-tap zooms, so click fires without the wait.
14. user-select: none on controls stops a long press from selecting a button's label.

Rules

1. Load every weight and style the design uses. With font-synthesis: none a missing bold renders as regular.
2. With min-width: 0 on everything, a sized image, icon or avatar in a flex row shrinks to make room for the text beside it. Give it flex: none.
3. The reset removes the tap highlight, so every pressable element needs its own :active state. Press feedback has it.
4. Never fix input zoom with user-scalable=no or maximum-scale=1. That takes zoom away from people who need it.
5. Keep user-select: none to controls. Never set it on body or on links, because people copy text.
6. Text the user types inherits pretty, in textarea and contenteditable. If lines shift while typing, set text-wrap: stable on that element.
7. The reserved gutter puts centered content slightly off-center on a page too short to scroll. Chris Coyier documents this. Accept it.
8. svh is for documents and heroes. An app shell with UI pinned to the bottom uses height: 100dvh, so it tracks the toolbar. Emil Kowalski draws this line in his mobile-native skill.

Support

Credits

Why it works

1. inline is the direction text runs and block the direction blocks stack. Start and end follow dir and writing-mode, so one set of declarations renders mirrored in a right-to-left page.

Rules

1. The four-value margin, padding and inset shorthands stay physical. Use the -inline and -block shorthands.

Support

Credits

Why it works

1. The three channels are lightness, chroma and hue. Lightness is perceptual, so two colors with the same L look equally light whatever their hue. Scales and contrast become predictable.
2. Mixing in OKLCH keeps the hue of the base color, where sRGB mixing drifts toward gray.
3. One base value drives the whole family. Change the base and the hover and subtle versions follow.

Rules

1. Write grays, white and black with none as the hue, as in oklch(98% 0 none). A written hue of 0 is red, and it pulls every mix toward red. Half white oklch(1 0 0) and half a blue at hue 264 came out at hue 312 in Chrome and Safari. With none, or with the keyword white, it stayed at 264.

Credits

Why it works

1. color-scheme: light dark says the page supports both and follows the system setting. It also switches the browser's own UI, such as form controls, scrollbars and the default page background.
2. light-dark(a, b) returns a in a light scheme and b in a dark one.
3. It resolves per element. Set color-scheme on any subtree and every token used inside it flips. The same tokens serve a manual toggle and a section that is always dark.

Rules

1. Switch themes by setting color-scheme. Never redefine the tokens.
2. The grays use none for the hue, so they can be mixed with a color later without drifting toward red. OKLCH color has the measurement.
3. light-dark() takes two colors. Anything else that differs by theme, such as an image, needs its own rule.
4. Add <meta name="color-scheme" content="light dark"> so the browser paints the right background before the CSS loads.

Support

Credits

Why it works

1. clamp(min, preferred, max) uses the preferred value and stops at the two bounds.
2. The vw part of the preferred value grows with the viewport. The rem part sets where the growth starts.
3. --text-body above is 16px up to a 400px viewport, 28px from 1600px, and a straight line between.

Rules

1. Write the preferred value as rem + vw, never vw alone. clamp(1rem, 1vw, 1.75rem) stays at 16px on every screen narrower than 1600px, because 1vw is smaller than 1rem until then. A bare vw value also ignores the reader's font size setting.
2. Work the preferred value out from two points. The slope is (max - min) / (wide - narrow), in px over px, and times 100 it is the vw number. The rem part is min - slope × narrow.
3. Keep both bounds in rem so they follow the reader's font size.
4. For a font size, keep the maximum at or below 2.5 times the minimum. The vw part does not grow when the reader zooms, so fluid text grows less than the page. Past 2.5 times, 500% zoom cannot double the text at some widths, and that fails WCAG 1.4.4.
5. Put fluid values in tokens. Components use the token and never repeat the math.
6. For more than two or three sizes, derive a whole scale as One fluid scale for type and space does.

Credits

Why it works

1. The first six lines are the whole design decision. Widths and sizes are in rem, written as plain numbers, so 20 is 320px and 1.125 is 18px. Body text runs from 18px on a 320px screen to 20px on a 1240px one, and each heading step is 1.2 times the last on the phone and 1.25 times on the desktop.
2. --fluid is a length that is 0 at the narrow width, 1rem at the wide width and a straight line between. It holds the only clamp(), and that one bounds every token.
3. --at-narrow and --at-wide are the two base sizes, each weighted by how close the viewport is to its width. Their sum is step 0.
4. pow() raises each ratio to the step number. A step is the narrow scale's size times one weight plus the wide scale's size times the other, which is the line Fluid sizes with clamp() draws between two points.
5. A space token is a multiple of step 0, so it grows as much as body text does. A pair such as --space-s-l gives the two terms different multipliers. It is the small size on the phone and the large size on the desktop, 18px to 40px here.

Rules

1. Write the inputs as plain numbers. With 20rem and 77.5rem the --fluid line divides a length by a length, and Firefox does not support that.
2. Change an input in the rule that declares the steps. A step takes its value where it is declared, so a ratio set on a descendant changes nothing below it.
3. Derive sizes below step 0 from step 0 and the narrow ratio, as --step--1 does. With both ratios a small size shrinks as the screen grows.
4. Check the top step against the limit in Fluid sizes with clamp(). Step n passes when (size-wide / size-narrow) × (ratio-wide / ratio-narrow)ⁿ is 2.5 or less. The example gives 1.31 at step 4.
5. Write a pair only where a layout uses it, and never use one for a font size. A pair is steep on purpose and breaks that limit.
6. For a scale that follows the container, write 100cqi in place of 100vw. Container queries with container units has the rules.
7. Components use the tokens and never repeat the math.

Support

Credits