Holocron Frontend CI / lint-and-test (push) Waiting to run

Details

docs(style): document R2/Farsight design system and align frontend neutral tokens

- Add docs/STYLE.md describing the .settings/style reference, per-surface
  reproduction, and how holocron-frontend / holocron-sim docs map to it
- Link the design system from README.md and AGENTS.md
- Nudge holocron-frontend default-dark neutral tokens to reference values
  (bg-primary, text-primary/secondary/muted); keep tactical accents

2026-06-02 01:03:02 -04:00

5.4 KiB

Raw Permalink Blame History

Styling & Design System

The canonical design reference for this project lives in .settings/style/. That directory is a self-contained, copy-paste export of the R2 / Farsight aesthetic and is the source of truth — read its README.md first, then the per-surface files.

When in doubt about a color, font, radius, shadow, or spacing token, take the value from .settings/style/, not from an existing component.

The aesthetic (R2 / Farsight)

Dark navy (#0a0e1a) surfaces with glassy panels, a teal accent (#2dd4bf), slate text, a teal→blue→violet brand bar across the top, subtle grid texture behind articles, Inter for UI and JetBrains Mono for code.

Core palette (full token list in .settings/style/tailwind/tailwind.css):

Token	Value	Use
`--r2-bg`	`#0a0e1a`	base background (navy)
`--r2-bg-secondary`	`#111827`	raised surface
`--r2-border`	`rgba(255,255,255,0.06)`	hairline borders
`--r2-text`	`#f1f5f9`	primary text (slate-100)
`--r2-text-secondary`	`#94a3b8`	secondary text (slate-400)
`--r2-text-muted`	`#64748b`	muted text (slate-500)
`--r2-accent`	`#2dd4bf`	teal accent / interactive
`--r2-cyan`	`#22d3ee`	brand bar
`--r2-blue`	`#3b82f6`	brand bar
`--r2-violet`	`#8b5cf6`	brand bar
`--r2-online`	`#10b981`	status: online
`--r2-offline`	`#ef4444`	status: offline
`--r2-degraded`	`#f59e0b`	status: degraded

Fonts: Inter (UI) / JetBrains Mono (code). Radii: 6 / 10 / 14px. Shadows: --r2-card, --r2-card-hover, --r2-glow.

Reproducing each surface

The reference is split by surface — copy the matching folder into a new app:

fumadocs/ — the docs-site theme (Fumadocs 16.x + Tailwind v4, CSS-first, no tailwind.config.js). global.css is the whole theme; the root layout must carry class="dark" + class="r2-theme" or you get unstyled defaults.
scalar/ — the API-reference GUI. scalar.tsx mirrors the R2 palette into Scalar's --scalar-* variables; scalar-settings.md documents every theme and airgap setting (telemetry off, AI agent disabled, no proxy).
tailwind/tailwind.css — framework-agnostic Tailwind v4 sheet exposing the palette as utilities (bg-r2-bg, text-r2-accent, rounded-r2-md, font-r2-mono, shadow-r2-card, …). Put class="dark" (or r2-theme) on <html>.

Full step-by-step instructions are in .settings/style/README.md.

How this project's apps map to the reference

The two front-facing apps predate this export and each keep their own brand. They are aligned in spirit, not pixel-identical — that is intentional. Do not reskin either brand to teal without an explicit decision.

`holocron-frontend` (Vite + React, Tailwind v3)

Tactical NATO operations UI. Uses a [data-theme] CSS-variable system (src/index.css) with a default dark theme plus light and netbird variants. Its neutral/structural tokens are aligned to the reference; its accent / status colors are deliberately tactical-branded (tactical green, alert red, warning amber) and are not the R2 teal.

`holocron-frontend` var (default dark)	Reference token	Status
`--bg-primary: #0a0e1a`	`--r2-bg #0a0e1a`	aligned
`--text-primary: #f1f5f9`	`--r2-text #f1f5f9`	aligned
`--text-secondary: #94a3b8`	`--r2-text-secondary`	aligned
`--text-muted: #64748b`	`--r2-text-muted`	aligned
`--accent-cyan: #39d0d8`	`--r2-accent #2dd4bf`	tactical (kept)
`--accent-green: #3fb950`	`--r2-online #10b981`	tactical (kept)
`--accent-red: #f85149`	`--r2-offline #ef4444`	tactical (kept)
`--warning-amber: #ffb627`	`--r2-degraded #f59e0b`	tactical (kept)

Note: this app is on Tailwind v3 (tailwind.config.js), while the reference is Tailwind v4 (CSS-first). The palette transfers; the build wiring does not — don't copy .settings/style/fumadocs/postcss.config.mjs here.

`holocron-sim/apps/docs` (Next.js + Fumadocs)

The simulator documentation site. Carries its own green "Sim" brand (--color-fd-primary: #33c482) with Geist fonts and the Fumadocs neutral preset — a deliberate divergence from the R2/Farsight teal+Inter docs theme in .settings/style/fumadocs/. If this site is ever re-themed to R2, the reference fumadocs/global.css is the drop-in target.

Changelog

2026-06-02: Created. Nudged holocron-frontend neutral tokens (--bg-primary, --text-primary/-secondary/-muted) to the reference values; documented intentional divergences (tactical accents; Sim-green docs brand).

5.4 KiB Raw Permalink Blame History