Skip to content
Kalinko Labs

Sahel Design System

A warm, editorial design system built with OKLCH colors, paper-like shadows, and accessible contrast.

·
In Progress
·
design
css
tokens
Project Overview
In Progress
Technologies
design
css
tokens

The Sahel design system provides a cohesive visual language for building warm, professional web experiences.

Color Palette

Built on three OKLCH scales:

  • Sand — Warm beige tones for light mode surfaces
  • Bark — Rich brown tones for dark mode and muted text
  • Ember — Terracotta accent for primary actions and highlights

Shadow System

Paper-like layered shadows with warm color tinting:

  • shadow-sm — Subtle depth for small elements
  • shadow-shadow — Default resting state
  • shadow-pressed — Hover/active state (press-into effect)
  • shadow-lg — Elevated elements like modals

Accessibility

  • High-contrast media query overrides
  • HDR display enhancement for dark mode
  • Reduced motion support throughout