WDS - Inter
Projektanci uwielbiają upychać dziwne znaki w zdaniach testowych. To podgląd stylów typografii.
background
foreground
primary
secondary
muted
accent
border
chart-1
chart-2
chart-3
chart-4
chart-5
Jak treść - Inter
Projektowanie z rytmem i hierarchią.
Dobry styl treści utrzymuje czytelność długich tekstów i równoważy wagę nagłówków.
Przemyślane odstępy i rytm pomagają szybko przeglądać akapity bez wrażenia gęstości.
Za codespaces w tym repozytorium płaci wds.
| Pozycja | Ilość | Cena | Kwota |
|---|---|---|---|
| Licencja design systemu | 1 | 499 zł | 499 zł |
| Wsparcie priorytetowe | 12 | 99 zł | 1188 zł |
| Komponenty na zamówienie | 3 | 250 zł | 750 zł |
| Suma częściowa | 2437 zł | ||
| VAT | 0 zł | ||
| Do zapłaty | 2437 zł | ||
DATABASE_URL••••••••
NEXT_PUBLIC_APIhttps://api.example.com
STRIPE_SECRET••••••••
Komputer
1224
Telefon
860
Różnica
+42%
2 h 10
Głęboki
3 h 48
Płytki
1 h 26
REM
84
Wynik
Pn
Wt
Śr
Cz
Pt
So
Nd
Skróty
theme.css
/* Motyw WDS: Neutral / Neutral / Inter */
:root {
--wds-radius: 0.625rem;
--wds-background: oklch(1 0 0);
--wds-foreground: oklch(0.145 0 0);
--wds-card: oklch(1 0 0);
--wds-card-foreground: oklch(0.145 0 0);
--wds-popover: oklch(1 0 0);
--wds-popover-foreground: oklch(0.145 0 0);
--wds-primary: oklch(0.205 0 0);
--wds-primary-foreground: oklch(0.985 0 0);
--wds-secondary: oklch(0.97 0 0);
--wds-secondary-foreground: oklch(0.205 0 0);
--wds-muted: oklch(0.97 0 0);
--wds-muted-foreground: oklch(0.556 0 0);
--wds-accent: oklch(0.97 0 0);
--wds-accent-foreground: oklch(0.205 0 0);
--wds-destructive: oklch(0.577 0.245 27.325);
--wds-border: oklch(0.922 0 0);
--wds-input: oklch(0.922 0 0);
--wds-ring: oklch(0.708 0 0);
--wds-chart-1: oklch(0.87 0 0);
--wds-chart-2: oklch(0.556 0 0);
--wds-chart-3: oklch(0.439 0 0);
--wds-chart-4: oklch(0.371 0 0);
--wds-chart-5: oklch(0.269 0 0);
--wds-sidebar: oklch(0.985 0 0);
--wds-sidebar-foreground: oklch(0.145 0 0);
--wds-sidebar-primary: oklch(0.205 0 0);
--wds-sidebar-primary-foreground: oklch(0.985 0 0);
--wds-sidebar-accent: oklch(0.97 0 0);
--wds-sidebar-accent-foreground: oklch(0.205 0 0);
--wds-sidebar-border: oklch(0.922 0 0);
--wds-sidebar-ring: oklch(0.708 0 0);
}
.dark {
--wds-background: oklch(0.145 0 0);
--wds-foreground: oklch(0.985 0 0);
--wds-card: oklch(0.205 0 0);
--wds-card-foreground: oklch(0.985 0 0);
--wds-popover: oklch(0.205 0 0);
--wds-popover-foreground: oklch(0.985 0 0);
--wds-primary: oklch(0.922 0 0);
--wds-primary-foreground: oklch(0.205 0 0);
--wds-secondary: oklch(0.269 0 0);
--wds-secondary-foreground: oklch(0.985 0 0);
--wds-muted: oklch(0.269 0 0);
--wds-muted-foreground: oklch(0.708 0 0);
--wds-accent: oklch(0.269 0 0);
--wds-accent-foreground: oklch(0.985 0 0);
--wds-destructive: oklch(0.704 0.191 22.216);
--wds-border: oklch(1 0 0 / 10%);
--wds-input: oklch(1 0 0 / 15%);
--wds-ring: oklch(0.556 0 0);
--wds-chart-1: oklch(0.87 0 0);
--wds-chart-2: oklch(0.556 0 0);
--wds-chart-3: oklch(0.439 0 0);
--wds-chart-4: oklch(0.371 0 0);
--wds-chart-5: oklch(0.269 0 0);
--wds-sidebar: oklch(0.205 0 0);
--wds-sidebar-foreground: oklch(0.985 0 0);
--wds-sidebar-primary: oklch(0.488 0.243 264.376);
--wds-sidebar-primary-foreground: oklch(0.985 0 0);
--wds-sidebar-accent: oklch(0.269 0 0);
--wds-sidebar-accent-foreground: oklch(0.985 0 0);
--wds-sidebar-border: oklch(1 0 0 / 10%);
--wds-sidebar-ring: oklch(0.556 0 0);
}
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3 {
font-family: 'Inter', sans-serif;
}/create