Global Styling

This site uses Tailwind CSS with a small set of design tokens to keep the UI consistent and easy to maintain as the component library grows.

Styling foundation

Global styling is split into two layers:

• global.css handles site-wide tokens and base styles
• starlight.css maps those tokens into Starlight so the docs match the rest of the site

This keeps the portfolio and documentation visually aligned without duplicating styles.

Color system

Colors are defined using OKLCH, which makes it easier to reason about contrast and perceptual brightness across themes.

The core palette is French Blue (50–950), with semantic tokens layered on top:

• primary
• accent
• muted
• border
• ring

Semantic tokens are what components reference, so the UI can adapt cleanly between light and dark mode without rewriting component styles.

Light and dark mode

The site defaults to light mode and supports dark mode through a .dark class. Theme values are expressed as tokens, so switching themes changes the system consistently across components, pages, and docs.

Accessibility defaults

Global styles are built with accessibility in mind:

• WCAG AA contrast targets
• Clear, visible focus states for keyboard navigation
• prefers-reduced-motion support where animations are used

Related reference

shadcn-svelte theming approach: Theming