# Design Language for scire.bar

## Aesthetics and Tone

scire.bar is a **neon-lit knowledge distillery** — imagine a candlelit underground lab where a polymathic technologist annotates dense textbooks by hand, their desk surface bathed in amber from a single flame and overridden by electric-violet glow from three monitors running code. The site is a **tech tutorial engine built on neubrutalism bones**: raw black structural frames, brutally thick borders, exposed grid seams, and zero-radius corners — but every panel inside that raw cage is rendered as a **glassmorphic card**, refracting neon through frosted acetate. The candle is the north star: warm #F5A623 amber bleeds into the hero and into the bottom of every card, while electric neon (#00FFCC teal, #FF2D78 magenta, #B24BF3 violet) cuts across the frosted surfaces like laser lines.

The **tone is tech-tutorial**: declarative, confident, process-obsessed. scire (Latin: *to know*) is not aspirational fluff — it is a knowledge bar: you walk up, you get served a concept, you leave knowing something. The copy reads like a senior engineer explaining a system to a curious peer — no jargon gates, no condescension, no marketing. The aesthetic does not perform humility or luxury; it performs *competence under candlelight*.

The mood is a dark laboratory that has been claimed by a highly visual thinker: sticky-note annotations on raw concrete walls, neon strip lighting at ankle height, a single candle flickering near the terminal, and every tutorial panel illuminated like a CRT in a darkened room.

## Layout Motifs and Structure

The page is organized as a strict **f-pattern reading flow** baked into the structural grid — not simulated with photography tricks, but enforced by hard CSS grid lines.

**The F-Pattern Grid:**
- **F-stroke 1 (top horizontal):** A full-width header band at `100svh` — the hero. Left-aligned headline mass, right side occupied by a live code snippet in a glassmorphic terminal card. The eye enters top-left (scire. wordmark), reads across to the code artifact, anchors.
- **F-stroke 2 (second horizontal):** A 72% width content band below the hero. Left-heavy: a section label in oversized Bebas Neue, a two-column article teaser row ending at the ~72% viewport mark. The right 28% is dead (neubrutalist negative space — exposed dark grid).
- **F-spine (vertical):** A left-anchored vertical rail of tutorial cards stacking below the second horizontal stroke, each 58% wide. The rail is the learning path — each card is a discrete lesson or concept. Cards snap to the left edge, leaving the right rail exposed as deliberate void.

**Neubrutalist Frame System:**
- All cards and panels have `border: 3px solid #E8E8E8` (off-white chalk on black) with `box-shadow: 6px 6px 0 #00FFCC` (neon teal drop shadow, hard offset, no blur).
- Section containers use `outline: 2px dashed #FF2D78` as an exposed grid marker — visible structural scaffolding, never hidden.
- The page background is `#0A0A0F` (near-black with blue undertone). Section seams are marked by a 2px `#1A1A2E` rule and a sticky label floated left in Bebas Neue caps.

**Glassmorphic Cards (inside the brutal frame):**
- Each tutorial card interior: `background: rgba(255,255,255,0.05)`, `backdrop-filter: blur(18px) saturate(160%)`, inner `border: 1px solid rgba(255,255,255,0.12)`.
- Cards stack on the F-spine at `width: min(780px, 58vw)` on desktop, full width on mobile.
- Each card has a **candle glow footer**: a 48px tall gradient strip at the card bottom, `linear-gradient(to top, rgba(245,166,35,0.18), transparent)` — the candle flame signature.

**Zoom-Focus Interaction:**
- On hover/focus, the active tutorial card scales to `transform: scale(1.025)` with a 240ms ease-out, and its neon box-shadow expands from `6px 6px 0` to `10px 10px 0 #00FFCC`. All sibling cards desaturate to `filter: brightness(0.55)`. This creates a zoom-focus reading lens — one concept in focus at a time.
- The hero code terminal has a continuous typing animation (CSS `@keyframes`) that cycles through 4 tutorial commands.

**Navigation:**
- A thin 48px sticky bar at the top: left-anchored `scire.` wordmark in Bebas Neue, right-anchored a monospace breadcrumb `> /topics/all`. No hamburger, no dropdown. Hard black `#0A0A0F` background, `border-bottom: 2px solid #00FFCC`.

## Typography and Palette

**Typography (Google Fonts only):**

- **Display / Headlines:** `Bebas Neue` — weight 400 (Bebas is single-weight). Used for: hero headline, section labels, card titles. Sizes: hero `clamp(72px, 10vw, 148px)`, section labels `clamp(40px, 5vw, 72px)`, card titles `clamp(24px, 3vw, 40px)`. Letter-spacing: `-0.01em` for hero, `0.08em` for section labels (caps lockup). Color: `#E8E8E8` default, `#00FFCC` for active/hover state.
- **Body / Tutorial Prose:** `IBM Plex Mono` — weight 300 for body prose, 500 for inline code labels. Line-height `1.75`. Font size `clamp(14px, 1.4vw, 17px)`. Color: `#C4C4D4` (cool near-white). IBM Plex Mono carries the tutorial voice — monospace signals technical precision without affectation.
- **UI Labels / Metadata:** `Space Grotesk` — weight 400/600. Used for timestamps, topic tags, author slugs. Size `clamp(11px, 1.1vw, 13px)`. Tracking `0.06em`. Color: `#8888AA`.

**Palette — dark-neon:**

| Role | Hex | Usage |
|------|-----|-------|
| Background | `#0A0A0F` | Page canvas, near-black blue-black |
| Surface dark | `#0F0F1A` | Card backs, sidebar panels |
| Structure line | `#1A1A2E` | Grid seams, section dividers |
| Off-white chalk | `#E8E8E8` | Primary text, neubrutalist borders |
| Neon teal | `#00FFCC` | Primary neon accent: box-shadows, hover states, active borders |
| Neon magenta | `#FF2D78` | Secondary neon: dashed outlines, error/alert markers, highlight underlines |
| Neon violet | `#B24BF3` | Tertiary neon: gradient accents, tag chips |
| Candle amber | `#F5A623` | Warm counterweight: footer glow, hero underline, candle flame SVG |
| Candle deep | `#C17D11` | Darker amber for gradient stops, hover states on amber elements |
| Body text | `#C4C4D4` | Tutorial prose, comfortable on `#0A0A0F` |
| Muted label | `#8888AA` | Metadata, timestamps, secondary UI |

## Imagery and Motifs

**No photographs. No stock imagery.** All visual matter is generated, SVG-native, or code-rendered.

**Glassmorphic Tutorial Cards:**
Each card is a frosted acetate pane suspended in dark space. The card body: `rgba(255,255,255,0.05)` fill, `blur(18px)`, a 1px semi-transparent white inner border. The card appears to float 6–10px above the grid surface because of the hard neon box-shadow offset (no blur radius). Inside each card: the tutorial concept name in Bebas Neue, 3–5 sentences of IBM Plex Mono prose, and an inline code block styled as a miniature terminal (`background: #050508`, `border-left: 3px solid #00FFCC`, `font-size: 13px`).

**Candle Flame SVG:**
A single animated SVG candle sits in the hero, positioned bottom-right of the headline block (desktop) or below the headline (mobile). The candle is schematic — a 3px stroked wick, a wax column rendered as two parallel vertical lines, and the flame as a single organic teardrop path animated with a subtle `@keyframes` flicker (scale 0.95→1.05, slight x-skew ±1.5deg, 1.8s ease-in-out infinite alternate). The flame fill: `radial-gradient` from `#F5A623` core to `#FF2D78` outer edge — neon-contaminated candlelight. No fill textures, no raster paths.

**Neon Grid Annotation Lines:**
Thin SVG lines (1px, `#FF2D78`, `stroke-dasharray: 6 4`) radiate from the hero candle toward the first row of tutorial cards — like a diagram on a lab blackboard annotating the relationship between the flame and the knowledge below. These are purely decorative structural lines that reinforce the f-pattern reading path.

**Zoom-Focus Depth Field:**
When a card is in focus (hover/keyboard), the background grid (a subtle `repeating-linear-gradient` crosshatch in `rgba(255,255,255,0.03)`) becomes slightly more visible beneath the focused card — as if the grid itself is lit by the reader's attention.

**Topic Tag Chips:**
Each card carries 1–3 pill-shaped topic tags: `border: 1.5px solid #B24BF3`, `border-radius: 4px` (neubrutalist — minimal radius, not fully rounded), `background: rgba(178,75,243,0.12)`, text in Space Grotesk 11px `#B24BF3`. Tags are the only element with a small `border-radius`.

**Section Anchor Stamps:**
At each F-pattern section boundary, a large Bebas Neue label is stamped in the left rail — `opacity: 0.08`, `font-size: clamp(80px, 12vw, 160px)`, `color: #E8E8E8` — creating a ghost watermark that reinforces the reading spine without cluttering the layout. These are background elements only.

## Prompts for Implementation

Build scire.bar as a **single-page knowledge bar** — a dark, candlelit tutorial engine. The visitor scrolls through an f-pattern feed of discrete knowledge cards, each illuminated like a monitor in a dark room. No hero CTA, no pricing, no feature grids, no testimonials. Pure tutorial content delivery.

**Macro structure (top to bottom):**

1. **Sticky Nav (48px):** `scire.` in Bebas Neue left. `> /topics/all` in IBM Plex Mono right. `border-bottom: 2px solid #00FFCC`. Background `#0A0A0F`.

2. **Hero (`100svh`):** Left 60%: Bebas Neue headline `clamp(72px, 10vw, 148px)` — "KNOW THE SYSTEM." in `#E8E8E8`. Below it: two lines of IBM Plex Mono in `#8888AA` — a tagline that reads like a man page header. Below that: a candle-amber underline (`4px solid #F5A623`, width 200px). Right 40%: a glassmorphic terminal card showing a fake tutorial command sequence with cursor blink animation. The animated SVG candle sits at bottom-right of the headline block. Background: `#0A0A0F` with a very faint radial gradient from `rgba(245,166,35,0.06)` at bottom-right (candle warmth seeping in).

3. **F-Stroke 2 — Topic Navigator (72% width):** Full-width section label `LATEST LESSONS` in Bebas Neue 64px `#E8E8E8`, then two tutorial teasers side by side — each a mini glassmorphic card at 48% width, stopping at the 72% mark. Right 28% is void with a `2px dashed #FF2D78` outline marking the edge. Hover on either teaser triggers zoom-focus.

4. **F-Spine — Tutorial Card Stack:** Left-anchored cards (58% wide, gap 32px between cards). Each card: Bebas Neue title, IBM Plex Mono prose, inline code block, topic tags, candle-glow footer gradient. On hover: scale(1.025), expanded neon box-shadow, siblings desaturate. Minimum 6 cards visible on initial load.

5. **Footer (96px):** Left: `scire.bar` in Bebas Neue 24px. Right: `IBM Plex Mono` text `> knowledge is infrastructure`. Center: three neon dots in teal/magenta/violet. Background: `#050508`. `border-top: 2px solid #1A1A2E`.

**Implementation specifics:**
- Use CSS custom properties for all palette values.
- The neubrutalist box-shadow (`6px 6px 0 #00FFCC`) must use `transition: box-shadow 200ms ease, transform 240ms ease-out` on cards.
- Code blocks inside cards: `background: #050508`, monospace 13px, `padding: 16px 20px`, left border `3px solid #00FFCC`. Overflow scrollable horizontally.
- The repeating crosshatch background: `repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 40px)`.
- Candle SVG must be inline (not `<img>`) to allow the `@keyframes` flame flicker.
- All Bebas Neue text must be `letter-spacing: 0.02em` at minimum — the face has natural tight tracking that needs breathing room at small sizes.
- Zoom-focus: use `:has()` CSS selector if target browser supports it; fall back to JS classList on mouseenter.
- The `outline: 2px dashed #FF2D78` exposed grid markers must be applied to section wrappers as `outline-offset: -1px` so they appear inside the section boundary, not outside it.
- AVOID: modal overlays, sidebar navigation, accordion components, sticky sidebars, hero images, progress bars, social proof grids.

## Uniqueness Notes

1. **Neubrutalism at 1% frequency — claimed fully.** No other design in the corpus commits to the neubrutalist raw-frame system (thick borders, hard drop shadows, zero radius, exposed grid seams) at the structural level. scire.bar does not merely nod at the aesthetic — the entire frame system is brutalist, and the glassmorphic cards live *inside* that cage, creating an explicit tension between raw exposed structure and refined frosted-glass content.

2. **F-pattern as a grid contract, not a content heuristic.** F-pattern appears at 3% in the corpus and is always used loosely (just placing things where eyes go). scire.bar bakes the f-pattern into hard CSS grid lines: F-stroke 1 = hero row, F-stroke 2 = 72% content band with enforced void, F-spine = left-anchored card rail. The pattern is structural, not stylistic.

3. **Candle-atmospheric as a warm counterweight to neon.** candle-atmospheric appears at 4% but is always used as a primary mood. scire.bar uses it as a *counterweight* — the dominant mood is cold dark-neon lab; the candle is a single warm element (amber glow, animated SVG flame, card footer gradients) that reads as human presence in a machine environment. This creates a genuine aesthetic tension that no other design in the corpus exploits.

4. **Seed committed:** `aesthetic: neubrutalism, layout: f-pattern, typography: bebas-bold, palette: dark-neon, patterns: zoom-focus, imagery: glassmorphic-cards, motifs: candle-atmospheric, tone: tech-tutorial`
<!-- DESIGN STAMP
  timestamp: 2026-05-11T09:40:22
  domain: scire.bar
  seed: committed:
  aesthetic: scire.bar is a **neon-lit knowledge distillery** — imagine a candlelit undergrou...
  content_hash: 6293ef688703
-->