90 lines
2.7 KiB
Markdown
90 lines
2.7 KiB
Markdown
# Threadstone · Claude Theme
|
||
|
||
**Modell:** Anthropic Claude (claude.ai)
|
||
**Threadstone-rolle:** Dyp analyse, lange kontekstvinduer, juridisk/medisinsk presisjon
|
||
|
||
---
|
||
|
||
## Identitet
|
||
|
||
Claude er varm, rolig og gjennomtenkt. Paletten reflekterer dette: kremhvite overflater, terrakotta-aksent, ingen harde kontraster. Brukeropplevelsen skal føles som et bibliotek — rolig, strukturert, trygg.
|
||
|
||
---
|
||
|
||
## Fargepalett
|
||
|
||
| Token | Lys modus | Mørk modus | Bruk |
|
||
|---|---|---|---|
|
||
| `--ts-bg` | `#f9f6f1` | `#1a1714` | Sidebunn |
|
||
| `--ts-surface` | `#f4f0e8` | `#201d1a` | Kort, sidepanel |
|
||
| `--ts-surface-2` | `#ede8de` | `#272320` | Nested elementer |
|
||
| `--ts-border` | `#d6cfc4` | `#3a3530` | Skillere |
|
||
| `--ts-text` | `#2c2420` | `#e8e2d8` | Brødtekst |
|
||
| `--ts-text-muted` | `#7a6e65` | `#8a7e74` | Sekundær tekst |
|
||
| `--ts-accent` | `#c96442` | `#e07a57` | CTA, fokusring, lenker |
|
||
| `--ts-accent-hover` | `#a84e30` | `#c96442` | Hover-state |
|
||
| `--ts-accent-highlight` | `#f0ddd6` | `#3d2820` | Subtil bakgrunn |
|
||
|
||
---
|
||
|
||
## Typografi
|
||
|
||
```css
|
||
--ts-font-display: 'Zodiak', 'Georgia', serif; /* Overskrifter ≥ 24px */
|
||
--ts-font-body: 'Satoshi', 'Inter', sans-serif; /* Brødtekst, UI */
|
||
```
|
||
|
||
- **Display:** Zodiak (Fontshare) — elegant serif med humanistisk karakter
|
||
- **Body:** Satoshi (Fontshare) — geometrisk grotesk, lesbar i alle størrelser
|
||
- Overskrifter: vekter 500–700, linjehøyde 1.15
|
||
- Brødtekst: 16px, linjehøyde 1.65, maks 68ch bredde
|
||
|
||
---
|
||
|
||
## Designprinsipp
|
||
|
||
- **Varm nøytral** — ikke ren hvit, ikke grå. Krem og sand.
|
||
- **Terrakotta som eneste aksent** — aldri blå eller lilla på Claude-tema
|
||
- **Luft og margin** — romslig padding, ingen tranghet
|
||
- **Avrunding:** `--radius-md: 0.5rem` — ingen skarpe hjørner, men ikke bubbly
|
||
- Ikoner: Lucide, stroke-style, aldri fylt
|
||
|
||
---
|
||
|
||
## Eksempel — CSS-variabler
|
||
|
||
```css
|
||
[data-theme="claude"] {
|
||
--ts-bg: #f9f6f1;
|
||
--ts-surface: #f4f0e8;
|
||
--ts-surface-2: #ede8de;
|
||
--ts-border: #d6cfc4;
|
||
--ts-text: #2c2420;
|
||
--ts-text-muted: #7a6e65;
|
||
--ts-accent: #c96442;
|
||
--ts-accent-hover: #a84e30;
|
||
--ts-accent-highlight: #f0ddd6;
|
||
--ts-font-display: 'Zodiak', Georgia, serif;
|
||
--ts-font-body: 'Satoshi', Inter, sans-serif;
|
||
}
|
||
|
||
[data-theme="claude"][data-mode="dark"] {
|
||
--ts-bg: #1a1714;
|
||
--ts-surface: #201d1a;
|
||
--ts-surface-2: #272320;
|
||
--ts-border: #3a3530;
|
||
--ts-text: #e8e2d8;
|
||
--ts-text-muted: #8a7e74;
|
||
--ts-accent: #e07a57;
|
||
--ts-accent-hover: #c96442;
|
||
--ts-accent-highlight: #3d2820;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Stemning
|
||
|
||
> Tenk: et gammelt universitetsbibliotek med nye vinduer.
|
||
> Varmt lys, tunge bøker, men luftig og ryddig.
|