Chris Christiansen
9fcb9c354a
Some checks are pending
Check Python Version Consistency / Check Python Version (push) Waiting to run
91 lines
2.9 KiB
Markdown
91 lines
2.9 KiB
Markdown
# Threadstone · ChatGPT Theme
|
|
|
|
**Modell:** OpenAI ChatGPT (chat.openai.com)
|
|
**Threadstone-rolle:** Generalist, hurtig iterasjon, kode, kreativ skriving
|
|
|
|
---
|
|
|
|
## Identitet
|
|
|
|
ChatGPT er klar, effektiv og direkte. Paletten er kjølig og nøytral — nær OpenAIs eget designspråk, men med mer personlighet. Mørk modus er primær for denne modellen; lys modus er ren og funksjonell.
|
|
|
|
---
|
|
|
|
## Fargepalett
|
|
|
|
| Token | Lys modus | Mørk modus | Bruk |
|
|
|---|---|---|---|
|
|
| `--ts-bg` | `#f7f7f7` | `#0d0d0d` | Sidebunn |
|
|
| `--ts-surface` | `#ffffff` | `#141414` | Kort, sidepanel |
|
|
| `--ts-surface-2` | `#f0f0f0` | `#1c1c1c` | Nested elementer |
|
|
| `--ts-border` | `#e0e0e0` | `#2a2a2a` | Skillere |
|
|
| `--ts-text` | `#0d0d0d` | `#ececec` | Brødtekst |
|
|
| `--ts-text-muted` | `#6b6b6b` | `#8a8a8a` | Sekundær tekst |
|
|
| `--ts-accent` | `#10a37f` | `#19c37d` | CTA, fokusring, lenker |
|
|
| `--ts-accent-hover` | `#0d8a6a` | `#10a37f` | Hover-state |
|
|
| `--ts-accent-highlight` | `#d4f1e9` | `#0d2e25` | Subtil bakgrunn |
|
|
|
|
---
|
|
|
|
## Typografi
|
|
|
|
```css
|
|
--ts-font-display: 'General Sans', 'Helvetica Neue', sans-serif; /* Overskrifter ≥ 24px */
|
|
--ts-font-body: 'General Sans', 'Inter', sans-serif; /* Brødtekst, UI */
|
|
```
|
|
|
|
- **Display + Body:** General Sans (Fontshare) — to vekter er nok (400 + 600)
|
|
- Overskrifter: vekt 600, linjehøyde 1.15, letter-spacing -0.01em
|
|
- Brødtekst: 16px, linjehøyde 1.6, maks 70ch bredde
|
|
- Monospace for kode: `'Geist Mono', 'Fira Code', monospace`
|
|
|
|
---
|
|
|
|
## Designprinsipp
|
|
|
|
- **Minimalt og funksjonelt** — ingen dekorasjon som ikke har formål
|
|
- **Grønn som eneste aksent** — OpenAI-signaturfargen, men Threadstone-justert
|
|
- **Mørk modus er primær** — design for mørk bakgrunn først
|
|
- **Avrunding:** `--radius-md: 0.75rem` — konsistent, moderne
|
|
- **Tetthet:** kompakt — kortere padding enn Claude-tema, mer innhold per skjerm
|
|
- Kode-blokker: alltid synlige, `surface-2`-bakgrunn med scrollbar
|
|
|
|
---
|
|
|
|
## Eksempel — CSS-variabler
|
|
|
|
```css
|
|
[data-theme="chatgpt"] {
|
|
--ts-bg: #f7f7f7;
|
|
--ts-surface: #ffffff;
|
|
--ts-surface-2: #f0f0f0;
|
|
--ts-border: #e0e0e0;
|
|
--ts-text: #0d0d0d;
|
|
--ts-text-muted: #6b6b6b;
|
|
--ts-accent: #10a37f;
|
|
--ts-accent-hover: #0d8a6a;
|
|
--ts-accent-highlight: #d4f1e9;
|
|
--ts-font-display: 'General Sans', 'Helvetica Neue', sans-serif;
|
|
--ts-font-body: 'General Sans', Inter, sans-serif;
|
|
}
|
|
|
|
[data-theme="chatgpt"][data-mode="dark"] {
|
|
--ts-bg: #0d0d0d;
|
|
--ts-surface: #141414;
|
|
--ts-surface-2: #1c1c1c;
|
|
--ts-border: #2a2a2a;
|
|
--ts-text: #ececec;
|
|
--ts-text-muted: #8a8a8a;
|
|
--ts-accent: #19c37d;
|
|
--ts-accent-hover: #10a37f;
|
|
--ts-accent-highlight: #0d2e25;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Stemning
|
|
|
|
> Tenk: et moderne coworking-space klokken 23.
|
|
> Mørkt, stille, effektivt — grønt terminalblinktt i hjørnet.
|