# Design Language for holos.dev
## Aesthetics and Tone
`holos.dev` is a **ritual interface** — a digital altar where software and ceremony converge. The word *holos* (ὅλος) means *whole, entire, complete* in Greek, and this site embodies that completeness: a developer tool or platform presented not as a product pitch but as an unbroken meditation. Imagine a Kyoto temple bookshop, the kind where handmade paper notebooks share a shelf with IDE documentation printed on washi, and a single beeswax candle burns at the register.
The aesthetic is **japanese-minimal** executed with weight. This is not the sterile minimalism of blank SaaS landing pages — it is the *ma* (間) principle, negative space as active force. Every empty zone on the page breathes. Grids are rigid not because of Bootstrap columns, but because Zen rock gardens have raked lines. The burgundy is not a brand color; it is the color of dried lacquer on a centuries-old writing desk.
The tone is **authoritative** without arrogance. The site speaks the way a seasoned practitioner writes: measured, unhurried, with sentences that resolve rather than escalate. No hyperbole. No superlatives. Statements that carry the weight of evidence.
Candle-atmospheric motifs thread through the visual language: warm amber glows emerge from dark wells, content sections are separated by what feel like softly illuminated paper panels, and the entire palette shifts toward deeper darkness as the visitor scrolls — as if descending from daylight into a candlelit study.
## Layout Motifs and Structure
The layout is a **masonry grid** — but this is not the default Pinterest scatter. It is a **disciplined masonry**: columns are fixed at 3 (desktop), 2 (tablet), 1 (mobile), and each card has a precisely controlled maximum height. The masonry rhythm is governed by a hidden vertical cadence of 8px base units. Cards are not equal height by accident — they are unequal by intention, the way stones in a dry garden wall are selected for their irregular edges.
The masonry grid sits inside a **tight outer frame**: 96px horizontal gutters on wide screens, creating the impression that the content grid is a precious object resting inside a lacquered box. The frame itself is darkened — `#1a0d12` — and the cards sit inside it at a slightly warmer tone, as if lit from within.
**Navigation** is minimal: a fixed left sidebar, 60px wide, containing only a vertical logotype and three icon-glyphs. The sidebar is so narrow it reads as a seam rather than a navigation surface — a binding spine, not a menu. On mobile, it collapses into a 48px top bar with a single hamburger-adjacent icon.
**Spatial logic:**
- The masthead is a single horizontal band, full-width, 120px tall, containing only the domain name in ultra-light grotesque and a single line of supporting text.
- Below the masthead, the masonry grid begins immediately — no hero image, no stacked sections, no full-viewport entrance.
- Each masonry card has a `border-animate` treatment on hover: a thin 1px border draws itself around the card perimeter clockwise, completing the circuit in 480ms before fading back on mouse-leave.
- Card footers embed a small icon cluster (2–3 icons per card) that appears only on hover, rising from the bottom edge of the card via a 240ms slide-up.
**Section breaks** between content clusters are rendered not as `` elements but as a 48px negative-space band containing a single centered SVG glyph — a minimal enso circle, 24×24px, drawn at 0.5px stroke weight in `#6b2737`. This is the only decorative punctuation the layout allows.
## Typography and Palette
**Type system (all Google Fonts, verified):**
- **Headings — `Plus Jakarta Sans`**, weight 300 (extra-light), set at 36–52px. Tracked at `+0.08em`. This grotesque feels cold and architectural at light weights, which is precisely the register `holos.dev` inhabits. Section headings in Plus Jakarta Sans 300 italic, 28px, tracked at `+0.06em`.
- **Body — `Plus Jakarta Sans`**, weight 400, 16px, line-height 1.75. The same family used everywhere creates a mono-tonal typographic texture — variation comes only from weight and size, never from family-switching.
- **Monospace accents — `JetBrains Mono`**, weight 300, 13px. Used exclusively for code fragments, version strings, and the small metadata labels at the bottom of each masonry card. The contrast between the humanist grotesque and the technical mono is the only typographic drama allowed.
- **Display numerals** (section ordinals, card indices): Plus Jakarta Sans 200, 72px, `#6b2737`, displayed as background watermarks behind card content at 8% opacity.
**Color Palette:**
- `#1a0d12` — Deep burgundy-black. Page background, sidebar. The color of a lacquer writing box in low candlelight.
- `#2d1520` — Card surface background. Slightly warmer than the page background; creates the impression cards are lit from within.
- `#6b2737` — Burgundy accent. Used for enso glyphs, border-animate strokes, active nav states, and inline code backgrounds.
- `#9e4a5a` — Muted rose. Hover states, icon fills on interaction.
- `#f2e8dc` — Cream parchment. Primary text color. Not pure white — the warmth reduces fatigue against the dark backgrounds.
- `#c8b8a8` — Warm gray. Secondary text, metadata labels, card timestamps.
- `#3d2030` — Card border at rest (0.5px). Barely visible, just enough to define the card edge in low light.
- `#7a5a40` — Amber accent. Used sparingly for the candle-glow effect — a radial gradient bleed from card corners that simulates warm light pooling on a dark surface.
**Candle-glow technique:** Each card has a pseudo-element `::before` with a radial gradient from `rgba(122, 90, 64, 0.12)` at the card's bottom-left corner to `transparent` — creating the impression that a candle just out of frame is warming that corner. This effect is CSS-only, no JavaScript.
## Imagery and Motifs
Imagery is **icon-heavy** with strict restraint. The site contains no photographs and no decorative illustrations. All visual elements are SVG icons designed to a consistent **16×16 grid** with a `1.5px` stroke weight, rounded caps, and a `4px` corner radius on any rectangular element. The icon set is exclusively outline-style — filled icons are not used.
**Icon vocabulary (40–60 icons total):**
- Tool-category icons: compiler, debugger, linter, formatter, bundler, runtime
- State icons: running, paused, error, warning, success, archived
- Connectivity icons: webhook, socket, pipe, sync, async, queue
- Navigation glyphs: the enso circle, a single horizontal rule fragment, a minimal arrow (14×1.5px line with a 6px arrowhead)
Each masonry card contains exactly one primary icon rendered at `48×48px` (scaled from 16×16 grid, so all proportions hold). The icon sits at the top-left of the card, with `24px` padding. On hover, the icon's stroke color transitions from `#c8b8a8` to `#9e4a5a` over 200ms.
**Candle-atmospheric motifs:**
- The page background itself is not flat `#1a0d12` — it is a very slow `radial-gradient` that pulses between `#1a0d12` and `#200f16` on a 12-second CSS animation (`@keyframes candle-breathe`), simulating the subtle flicker of a candle lighting the room. The animation is set to `ease-in-out` with `alternate` direction so it never snaps.
- The masthead logotype has a very subtle text-shadow: `0 0 32px rgba(107, 39, 55, 0.4)` — a deep burgundy bloom, as if the lettering were cut from paper and backlit.
- The enso section-break glyphs use a `path-draw-svg` animation: they draw themselves into existence over 800ms when they enter the viewport via IntersectionObserver.
**No decorative patterns, no gradients, no photography.** The only textures are the typographic rhythm of the masonry grid and the candle-glow pseudo-elements. This restraint is Japanese-minimal discipline enforced, not accidental.
## Prompts for Implementation
Build this as a **silent catalog of capabilities** — a practitioner's reference arranged for reading in depth, not skimming for conversion. The visitor arrives, the dark room receives them, and they begin reading. There is no above-the-fold imperative. There is no first-screen hero demanding action.
**Structural implementation directives:**
1. **The masonry grid is CSS-only, column-count based.** Use `column-count: 3` with `column-gap: 24px` and `break-inside: avoid` on each card. No JavaScript masonry library (no Masonry.js, no Isotope). The imperfect column-balancing of CSS columns is intentional — it mimics the subtle irregularity of hand-laid stone.
2. **The border-animate pattern.** Each card's border draw is achieved with a single `