96 lines
2.2 KiB
CSS
96 lines
2.2 KiB
CSS
/*
|
||
wlkns-dev-standards
|
||
Design Tokens – CSS
|
||
Version: v1.0
|
||
|
||
Zweck:
|
||
Zentrale, technologieunabhängige Design-Tokens für Web-UIs.
|
||
Dieses File ist die Single Source of Truth für Farben, Typografie
|
||
und grundlegende Abstände.
|
||
*/
|
||
|
||
:root {
|
||
/* =========================
|
||
Farben – Identity
|
||
========================= */
|
||
|
||
--color-primary: #1F2A37; /* Header, Navigation, Headlines */
|
||
--color-accent: #0EA5A4; /* Links, Fokus, aktive States */
|
||
|
||
/* =========================
|
||
Farben – Status
|
||
========================= */
|
||
|
||
--color-success: #16A34A;
|
||
--color-warning: #D97706;
|
||
--color-error: #DC2626;
|
||
|
||
/* =========================
|
||
Farben – Neutrals (Light)
|
||
========================= */
|
||
|
||
--color-bg: #F8FAFC;
|
||
--color-surface: #FFFFFF;
|
||
--color-border: #E5E7EB;
|
||
|
||
--color-text: #111827;
|
||
--color-text-muted: #4B5563;
|
||
|
||
/* =========================
|
||
Typografie
|
||
========================= */
|
||
|
||
--font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
|
||
'Segoe UI', sans-serif;
|
||
|
||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
|
||
Menlo, Consolas, monospace;
|
||
|
||
--font-size-xs: 0.75rem; /* 12px */
|
||
--font-size-sm: 0.875rem; /* 14px */
|
||
--font-size-md: 1rem; /* 16px */
|
||
--font-size-lg: 1.125rem; /* 18px */
|
||
--font-size-xl: 1.25rem; /* 20px */
|
||
|
||
--line-height-tight: 1.3;
|
||
--line-height-base: 1.6;
|
||
|
||
/* =========================
|
||
Spacing (8px Grid)
|
||
========================= */
|
||
|
||
--space-1: 0.25rem; /* 4px */
|
||
--space-2: 0.5rem; /* 8px */
|
||
--space-3: 0.75rem; /* 12px */
|
||
--space-4: 1rem; /* 16px */
|
||
--space-5: 1.5rem; /* 24px */
|
||
--space-6: 2rem; /* 32px */
|
||
|
||
/* =========================
|
||
Radius & Effects
|
||
========================= */
|
||
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 8px;
|
||
|
||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* =========================
|
||
Base Styles (optional)
|
||
========================= */
|
||
|
||
body {
|
||
font-family: var(--font-ui);
|
||
font-size: var(--font-size-md);
|
||
line-height: var(--line-height-base);
|
||
color: var(--color-text);
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
code, pre {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
}
|