Principles

Every decision in Linea UI traces back to one of these. Each one is a SASS variable or a single layer away from your own rules.

Minimalism

Each component ships the styles it needs and nothing more. There are no elaborate themes, no animation libraries, and no decorative defaults. The baseline appearance is intentionally plain so that your brand and content stand out, not the framework.

Modifiers add variations on demand rather than bundling every possible state up front. If a component can be simple, it stays simple. Fewer decisions to undo when your design takes over.

Specificity

Every component follows the Block Element Modifier convention, namespaced with a configurable prefix (ln- by default). BEM class names describe what an element is and keep every rule scoped to its block. No selector reaches into another component, so styles never collide.

This strict naming removes the need for deep nesting, descendant selectors, or specificity battles. Each block owns a flat set of classes that never leak into other components.

Ease of use

Link one stylesheet and write semantic HTML. Headings, lists and tables look right before you add a single class. Components are built with semantic HTML and follow WAI-ARIA patterns where applicable, so the markup you write is the markup your users get.

Accessibility

Contrast-checked tokens, visible focus states and scripts that respect keyboard users and reduced motion settings. Focus states, color contrast, and keyboard navigation are considered part of the baseline, not optional extras.

Small footprint

Import modules one by one through SASS @use. The JS layer is optional and adds behavior only where markup asks for it. The library is pure CSS and Sass with no runtime JavaScript dependency.

CSS cascade layers (@layer) eliminate specificity conflicts without resorting to !important or deeply nested selectors. The layer order—reset, tokens, base, layout, blocks, helpers, utilities—means utilities always win by layer precedence, keeping the compiled output lean and predictable.

Unused blocks can be excluded at compile time via the $blocks setting, so production stylesheets contain only what the project actually uses.

Readability

Text follows a vertical rhythm: every size and space snap to a grid, and lines flow on a stable baseline. The eye moves down the page at a steady pace.

All spacing, sizing, and line-height tokens are derived from two values: an 8px base grid ($g) and a 24px line grid ($r). Every margin, padding, and component height snaps to a multiple of 8px, and every line of text sits on a 24px baseline grid. Whitespace stops being arbitrary and becomes part of the system.

Responsiveness

Layouts, headings and utilities adapt through breakpoint suffixes like @md and @lg. The rhythm holds at every screen size.

Responsive modifiers use a clear @{bp} suffix so breakpoint behavior is visible directly in the markup. No hidden media queries or magic values—the class name tells you exactly when a rule takes effect.

Native first

Built on what browsers already support: cascade layers, custom properties and light-dark(). No vendor prefixes, polyfills or workarounds to carry around.

Color tokens use light-dark() to automatically respect the user's OS preference, with a data-theme attribute available for manual overrides.