dsalathe Design System

Alpine/Swiss Technical Theme - A clean, precise design system inspired by glacier ice, mountain skies, and Swiss craftsmanship.

Colors

Our color palette draws inspiration from the Swiss Alps: glacier blues, mountain navy shadows, and the iconic Swiss red accent. Each color has a full 50-950 scale for versatility.

Glacier Blue

Primary cool tone inspired by alpine glacier ice.

50
#F0F9FB
100
#E0F3F7
200
#C2E7EF
300
#94D6E3
400
#5FBDD1
500
#3AA3BC
600
#2E849D
700
#2A6B80
800
#295969
900
#264A59

Sky Blue (Primary)

Primary action color inspired by clear mountain skies.

50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#4A90E2
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A

Alpine Navy (Secondary)

Deep, authoritative tone inspired by mountain shadows.

50
#F4F6F7
100
#E3E8EB
200
#CAD3D9
300
#A5B3BD
500
#5E717F
700
#44505A
900
#2C3E50
950
#1A252F

Alpine Red (Accent)

Bold accent inspired by the Swiss cross - use sparingly for emphasis.

50
#FEF2F3
100
#FEE2E4
200
#FECACD
400
#F8717B
500
#EF4352
600
#C41E3A
700
#A91B32
900
#761C2D

Semantic Colors

Pre-mapped colors for common use cases.

Primary
--ds-primary
Secondary
--ds-secondary
Accent
--ds-accent
Success
--ds-success
Warning
--ds-warning
Error
--ds-error

Typography

Clean, readable typography with Inter for UI text and JetBrains Mono for code. Swiss-inspired precision with comfortable line heights.

Type Scale

--ds-text-5xl (3rem)
The quick brown fox
--ds-text-4xl (2.25rem)
The quick brown fox
--ds-text-3xl (1.875rem)
The quick brown fox
--ds-text-2xl (1.5rem)
The quick brown fox jumps over the lazy dog
--ds-text-xl (1.25rem)
The quick brown fox jumps over the lazy dog
--ds-text-lg (1.125rem)
The quick brown fox jumps over the lazy dog
--ds-text-base (1rem) - Default
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--ds-text-sm (0.875rem)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--ds-text-xs (0.75rem)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Monospace

JetBrains Mono - Code
const greeting = "Hello, Alps!";
function calculate(a, b) {
  return a + b;
}

Font Weights

Light (300) Regular (400) Medium (500) Semibold (600) Bold (700)

Spacing

A consistent spacing scale based on 0.25rem (4px) units. Swiss grid-inspired for clean, geometric layouts.

--ds-space-1 (4px)
--ds-space-2 (8px)
--ds-space-3 (12px)
--ds-space-4 (16px)
--ds-space-6 (24px)
--ds-space-8 (32px)
--ds-space-12 (48px)
--ds-space-16 (64px)

Shadows

Subtle, minimal shadows for a clean Swiss aesthetic. Use sparingly to indicate elevation.

xs
sm
md
lg
xl
2xl

Buttons

Confident, precise button styles. Use primary for main actions, secondary for supporting actions, and accent sparingly for critical calls-to-action.

Button Variants

<button class="ds-btn ds-btn-primary">Primary</button>
<button class="ds-btn ds-btn-secondary">Secondary</button>
<button class="ds-btn ds-btn-accent">Accent</button>
<button class="ds-btn ds-btn-outline">Outline</button>
<button class="ds-btn ds-btn-ghost">Ghost</button>

Button Sizes

Button States

Cards

Clean surfaces for grouping related content. Use subtle elevation to indicate hierarchy.

Default Card

With header and body

Card content goes here. This is a basic card with a subtle border and shadow.

Elevated Card

More prominent shadow for highlighted content.

Interactive Card

Hover to see the lift effect. Great for clickable items.

Forms

Clean, accessible form elements with clear focus states.

Must be at least 8 characters

Input States

This field is required

Badges

Compact indicators for status, labels, and counts.

Badge Variants

Default Primary Secondary Accent Success Warning Error

Solid Badges

Primary Secondary Accent Success

With Dot

Online Away Offline

Alerts

Contextual feedback messages for user actions and system status.

Information
Your session will expire in 5 minutes.
Success
Your changes have been saved successfully.
Warning
Your subscription will expire soon.
Error
Failed to save changes. Please try again.

Usage

How to integrate the design system into your projects.

CDN Usage (Recommended)

<!-- Fonts (optional - falls back to system fonts) -->
<link rel="stylesheet" href="https://static.dsalathe.dev/css/dsalathe-fonts.css">

<!-- Design Tokens (required) -->
<link rel="stylesheet" href="https://static.dsalathe.dev/css/dsalathe-tokens.css">

<!-- Theme & Base Styles (recommended) -->
<link rel="stylesheet" href="https://static.dsalathe.dev/css/dsalathe-theme.css">

<!-- Pre-built Components (optional) -->
<link rel="stylesheet" href="https://static.dsalathe.dev/css/dsalathe-components.css">

Tailwind CSS Integration

// tailwind.config.js
import { dsalatheTheme } from 'https://static.dsalathe.dev/js/tailwind-theme.js';
// Or download and import locally

export default {
  theme: {
    extend: dsalatheTheme
  }
}

Using CSS Variables

.my-component {
  background-color: var(--ds-surface);
  color: var(--ds-text-primary);
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  font-family: var(--ds-font-sans);
}

Framework Integration

The design system works with any framework:

  • Next.js / React: Import CSS in _app.tsx or layout.tsx
  • Vue: Import CSS in main.ts or App.vue
  • Streamlit: Use st.markdown with unsafe_allow_html
  • Keycloak: Add to theme resources
  • Static HTML: Link tags in head