Gotowy DESIGN.md do skopiowania: nasz styl QKI krok po kroku

---
name: QKI Analytics Signal
colors:
  background: "#10151a"
  surface: "#1c2630"
  surface-hover: "#263543"
  on-background: "#edf1f5"
  on-surface: "#d3dee7"
  muted: "#b7c5d0"
  outline: "#37414b"
  primary: "#a9cfff"
  on-primary: "#10151a"
typography:
  headline-lg:
    fontFamily: Signal Grotesk
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Signal Grotesk
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.05em
  body-md:
    fontFamily: Signal Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: Signal Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
  quote:
    fontFamily: Signal Serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
components:
  button-primary:
    backgroundColor: "{colors.on-background}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
---

## Overview
Spokojny, redakcyjny serwis o AI. Ciemne, granatowe tło, jasny tekst, jeden chłodny akcent. Ma wyglądać jak magazyn, nie jak landing startupu.

## Colors
Tło `background` i karty `surface` to dwa odcienie granatu. Tekst główny `on-background`, treść `on-surface`, podpisy `muted`. Akcent `primary` (jasny błękit) tylko na linki i stan aktywny, nigdy jako duże tło. Linie oddzielające: `outline`. Bez gradientów i fioletu.

## Typography
Jedna rodzina bezszeryfowa (Signal Grotesk) na wszystko. Nagłówki średniej grubości (500), ciasne (line-height 1.05, letter-spacing -0.05em), bez wersalików. Signal Serif kursywą tylko do cytatów i wyróżnień.

## Layout
Dużo powietrza, siatka redakcyjna, linie `outline` zamiast cieni. Teksty w kolumnie czytelnej szerokości.

## Shapes
Prawie wszystkie narożniki proste (0px). Jedyny wyjątek: okrągła ikonka w linku (signal-round-link). Żadnych zaokrąglonych kart ani przycisków-pigułek.

## Components
Przycisk główny: jasne tło `on-background`, ciemny tekst. Karta: `surface`, cienka linia `outline`, bez cienia.

## Do's and Don'ts
- Do: jeden akcent, proste narożniki, linie zamiast cieni.
- Don't: gradienty, glow, emoji w nagłówkach, zaokrąglone karty, więcej niż dwie rodziny fontów.

{
  "findings": [
    {
      "severity": "warning",
      "path": "colors.surface-hover",
      "message": "'surface-hover' is defined but never referenced by any component.",
      "rule": "orphaned-tokens"
    },
    {
      "severity": "warning",
      "path": "colors.muted",
      "message": "'muted' is defined but never referenced by any component.",
      "rule": "orphaned-tokens"
    },
    {
      "severity": "info",
      "message": "Design system defines 9 colors, 5 typography scales, 1 rounding level, 2 components.",
      "rule": "token-summary"
    },
    {
      "severity": "info",
      "path": "spacing",
      "message": "No 'spacing' section defined. Layout spacing will fall back to agent defaults.",
      "rule": "missing-sections"
    }
  ],
  "summary": {
    "errors": 0,
    "warnings": 2,
    "infos": 2
  }
}

## Wygląd
Przed każdą zmianą UI wczytaj DESIGN.md.
Kolory, fonty i narożniki bierz tylko z tokenów. Nie dodawaj gradientów ani zaokrągleń.
Po zmianie uruchom: npx @google/design.md lint DESIGN.md