Introduction
Design system overview for getLegalStatus.com
This component library provides a comprehensive set of UI components and page sections for the getLegalStatus.com website, focused on EU citizenship services. All components share a consistent design language and are built to maintain visual fidelity across the site.
Design Philosophy
The design system uses a token-based approach. Colors, spacing, typography, and other visual properties are defined as CSS custom properties (variables) and applied consistently across all components.
Structure
The library is organized into two main categories:
- Components — Reusable UI primitives such as buttons, inputs, and navigation. These can be used anywhere in the application.
- Sections — Full page sections composed of multiple components. Each section is designed for a specific context (hero, about, advantages, benefits, etc.).
Layout Patterns
Common layout patterns used across sections include:
.two-col— Two-column grid with content and image.container— Max-width container with horizontal padding.section— Section wrapper with vertical padding.cards-grid— Card grid layouts
Variants
Many sections support theme variants for different backgrounds:
.v-light— Light/white background.v-subtle— Subtle gradient background.v-dark— Dark/navy gradient background
Dependencies
All components share these dependencies:
- Font — Onest (Google Fonts)
- Assets — Logo.svg (optional, used in navbar)