Get started


Fractures does not try to replace your current systems. Instead it provides a solid, immutable base to build on top of. The point is not to stop writing CSS, but to keep your custom CSS maintainable. It aims to be the baseline of a system to enable fast moving teams to build better UIs.


For NextJS, you have to have a custom _app.tsx, with a single import at the top: import "@fractures/css".
Fractures works with empty :root {} or with a fully customized one. This page sets only a few:

:root {  --font-family-sans: "Inter", Arial, sans-serif;  --font-family-serif: "Georgia";  --font-family-mono: "IBM Plex Mono", monospace;  --font-weight-bold: 500;  --font-weight-bolder: 700;}



Fractures is below 10 KB gzipped, but for production you'll have to purge the unused CSS.


Font size and Line height

Defaults are based on a 8px scale.

--font-size-h1: 36px;--font-size-h2: 32px;--font-size-h3: 28px;--font-size-h4: 24px;--font-size-h5: 20px;--font-size-h6: 18px;--font-size-p: 16px;--font-size-small: 14px;--font-size-tiny: 12px;--line-height-h1: 44px;--line-height-h2: 40px;--line-height-h3: 36px;--line-height-h4: 32px;--line-height-h5: 26px;--line-height-h6: 24px;--line-height-p: 22px;--line-height-small: 18px;--line-height-tiny: 14px;

Font families

--font-family-sans: "Helvetica";--font-family-serif: "Georgia";--font-family-mono: "Monospace";

Font weights

--font-weight-lighter: lighter;--font-weight-light: light;--font-weight-normal: normal;--font-weight-bold: bold;--font-weight-bolder: bolder;


Colors are defined as HSL values, see details.

--hsl-aqua: 187,87%;--hsl-blue: 230,87%;--hsl-gray: 225,10%;--hsl-green: 120,75%;--hsl-orange: 23,94%;--hsl-pink: 324,76%;--hsl-purple: 266,80%;--hsl-red: 356,84%;--hsl-yellow: 39,93%;


Initial fracture scale goes from 1px to 96px.

--box-px: 1px;--box-1: 2px;--box-2: 4px;--box-3: 6px;--box-4: 8px;--box-5: 10px;--box-6: 12px;--box-7: 14px;--box-8: 16px;--box-9: 18px;--box-10: 20px;--box-11: 22px;--box-12: 24px;--box-13: 26px;--box-14: 28px;--box-15: 30px;--box-16: 32px;--box-24: 48px;--box-32: 64px;--box-40: 80px;--box-48: 96px;

Z indices

--z-index-0: 0;--z-index-10: 100;--z-index-20: 200;--z-index-30: 300;--z-index-40: 400;--z-index-50: 500;--z-index-60: 600;--z-index-70: 700;--z-index-80: 800;--z-index-90: 900;--z-index-100: 1000;