Mika Design System · v0

Eine Werkstatt, die leuchtet wenn es drauf ankommt.

Alle Mika-Projekte teilen sich eine Atmosphäre: dunkles Charcoal mit ruhigem Gradient, präzise Typografie, und genau ein Akzent pro Projekt — der atmet, glüht und zieht den Blick.

Introducing Mika | Designsystem ansehen → Komponenten →
01 · Farbwelt

Signal-Paare — jeder Akzent besteht aus Lead + Trail

Aurora
#00e4ff → #3effc7
Ember
#ff7a1a → #ffd166
Flux
#ff4fa3 → #b76bff
Moss
#4ade80 → #e3f26b
Halo
#7aa2ff → #a8ecff
02 · Typografie

Fraunces für Display, Inter für UI, JetBrains Mono für Code

Display XL · 72
Leuchten, nicht blinken.
Display · 48
Werkstatt-Interfaces.
H1 · 32/500
Ein Akzent pro Projekt, bewusst gesetzt.
H2 · 24/500
Gradient, Noise, Ruhe — nie flaches Schwarz.
Body · 16/400
Fließtext sitzt ruhig auf der Atmosphäre-Fläche. Sekundäre Inhalte werden durch Opazitäts-Stufen differenziert, nicht durch Farbe.
Small · 14
Metadaten, Timestamps, Labels — Tertiary-Grau.
Mono · 14
JetBrains Mono · const cyan = "#00eaff"
03 · Komponenten

Cards, Buttons, Code

Aurora

Wandernde Kontur

Jede wichtige Fläche hat einen Leuchtpunkt, der um den Rand läuft. Kopf weiß-hell, dahinter fadet der Schweif in die zweite Akzentfarbe aus.

Ember

Zwei Farben, ein Paar

Jeder Akzent ist ein Lead-Trail-Pair. Der Lead ist der Kopf des Runners, der Trail füllt den Verlauf und Sekundär-Elemente.

Flux

Ruhiger Takt

Pills laufen in 3,2 Sekunden, Cards in 7 Sekunden. Unterschiedliche Geschwindigkeiten, damit das Bild nicht taktet — sondern atmet.

Primary Action → Ghost Action Pill CTA|Signature→ 
// Mika-Projekt-Setup
import { applyMikaTheme } from "@mika/design";

const theme = applyMikaTheme({
  accent: "cyan",     // cyan | amber | teal | rose | violet
  atmosphere: "warm", // warm | cool
  mode: "dark"       // Mika ist nie hellgrundig
});