#Styling Basics

The Basics are everything you use when writing styles day to day. They read in order — each page builds on the ones before it — but each topic below also works as a starting point on its own.

#Components

How a style object turns into undefineds or plain class strings, and how one component covers many looks with variants, dynamic values and interactive state. Start with Styled Components, then Class Names.

#Tokens & theming

Design tokens as typed CSS variables, themes that switch them, and the reusable templates and global styles built on top. Start with Variables & Tokens, then Theming.

#Layout, type & motion

Responsive breakpoints, fonts, animations, and the modifiers and helpers that cut down repetition. Start with Breakpoints & responsive layouts or Fonts & Imports.

#Beyond the styles

How components compose and override each other, what to do when a value is only known at runtime, and the accessibility, tooling, testing and security notes around it all. Start with Scoping and composition or Runtime styles.