92 lines
2.9 KiB
Markdown
92 lines
2.9 KiB
Markdown
# Threadstone · Gemini Theme
|
||
|
||
**Modell:** Google Gemini (gemini.google.com)
|
||
**Threadstone-rolle:** Multimodal analyse, GCP-integrasjon, sanntidsdata, kode + bilde
|
||
|
||
---
|
||
|
||
## Identitet
|
||
|
||
Gemini er fremtidsrettet, levende og fargerik — Googles multimodale flaggskip. Paletten bruker Googles signaturfarge-DNA (blå, indigo) men fortynnet til noe som faktisk er behagelig over tid. Dynamisk uten å være urolig.
|
||
|
||
---
|
||
|
||
## Fargepalett
|
||
|
||
| Token | Lys modus | Mørk modus | Bruk |
|
||
|---|---|---|---|
|
||
| `--ts-bg` | `#f8f9ff` | `#0c0e1a` | Sidebunn |
|
||
| `--ts-surface` | `#f0f2ff` | `#12152a` | Kort, sidepanel |
|
||
| `--ts-surface-2` | `#e6e9ff` | `#181c30` | Nested elementer |
|
||
| `--ts-border` | `#cdd2f5` | `#252a42` | Skillere |
|
||
| `--ts-text` | `#0c0e1a` | `#e4e6f8` | Brødtekst |
|
||
| `--ts-text-muted` | `#5a5f82` | `#7a7fa8` | Sekundær tekst |
|
||
| `--ts-accent` | `#4355f5` | `#6b7cff` | CTA, fokusring, lenker |
|
||
| `--ts-accent-hover` | `#2d3dd4` | `#4355f5` | Hover-state |
|
||
| `--ts-accent-highlight` | `#dde0ff` | `#1a1f3a` | Subtil bakgrunn |
|
||
|
||
---
|
||
|
||
## Typografi
|
||
|
||
```css
|
||
--ts-font-display: 'Cabinet Grotesk', 'Google Sans', sans-serif; /* Overskrifter ≥ 24px */
|
||
--ts-font-body: 'Satoshi', 'Inter', sans-serif; /* Brødtekst, UI */
|
||
```
|
||
|
||
- **Display:** Cabinet Grotesk (Fontshare) — bred, geometrisk, høy vekt uttrykk (800–900)
|
||
- **Body:** Satoshi (Fontshare) — ren og lesbar
|
||
- Overskrifter: vekt 700–800, letter-spacing -0.02em
|
||
- Brødtekst: 16px, linjehøyde 1.6
|
||
- Display-skrift kan gå til `--text-hero` (128px) i hero-seksjoner
|
||
|
||
---
|
||
|
||
## Designprinsipp
|
||
|
||
- **Blå-indigo som primæraksent** — Googles DNA, men dempet til arbeidsbruk
|
||
- **Svakt blåfarget overflater** — ikke ren hvit/grå, men tinted bakgrunn
|
||
- **Gradient-moment:** én subtil gradient tillatt i hero (`in oklab` fra accent til surface)
|
||
- **Avrunding:** `--radius-lg: 1rem` — rund og moderne
|
||
- **Lys modus er primær** — frisk og åpen, klar for data og bilder
|
||
- Ikoner: Lucide eller Google Material Symbols (outline-variant)
|
||
|
||
---
|
||
|
||
## Eksempel — CSS-variabler
|
||
|
||
```css
|
||
[data-theme="gemini"] {
|
||
--ts-bg: #f8f9ff;
|
||
--ts-surface: #f0f2ff;
|
||
--ts-surface-2: #e6e9ff;
|
||
--ts-border: #cdd2f5;
|
||
--ts-text: #0c0e1a;
|
||
--ts-text-muted: #5a5f82;
|
||
--ts-accent: #4355f5;
|
||
--ts-accent-hover: #2d3dd4;
|
||
--ts-accent-highlight: #dde0ff;
|
||
--ts-font-display: 'Cabinet Grotesk', 'Google Sans', sans-serif;
|
||
--ts-font-body: 'Satoshi', Inter, sans-serif;
|
||
}
|
||
|
||
[data-theme="gemini"][data-mode="dark"] {
|
||
--ts-bg: #0c0e1a;
|
||
--ts-surface: #12152a;
|
||
--ts-surface-2: #181c30;
|
||
--ts-border: #252a42;
|
||
--ts-text: #e4e6f8;
|
||
--ts-text-muted: #7a7fa8;
|
||
--ts-accent: #6b7cff;
|
||
--ts-accent-hover: #4355f5;
|
||
--ts-accent-highlight: #1a1f3a;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Stemning
|
||
|
||
> Tenk: Google I/O på dagtid — lys, energisk, full av muligheter.
|
||
> Blå luft, hvite flater, én lysende akkord.
|