---
name: Internet es Cool
description: Bienestar digital, no-code y programación para una internet más consciente.
colors:
  canvas: "#000000"
  surface-primary: "rgba(0, 0, 0, 0.85)"
  surface-header: "rgba(0, 0, 0, 0.85)"
  ink-primary: "#FFFFFF"
  ink-body: "#f6f6f7"
  ink-muted: "#A0A0A0"
  ink-subtle: "#949494"
  category-bienestar: "#FF3D97"
  category-nocode: "#2D7DFF"
  category-programacion: "#FFC400"
  accent-electric-blue: "#2563EB"
  accent-signal-blue: "#2D7DFF"
  accent-rosa: "#FF3D97"
  accent-fucsia: "#FF5EA8"
  accent-naranja: "#FF8A00"
  accent-amarillo: "#FFC400"
  accent-verde: "#4CD137"
  base-black: "#000000"
  selection-bg: "#2563EB"
typography:
  display:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "clamp(2.5rem, 7vw, 4.25rem)"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.03em"
    textTransform: "none"
  display-fwh:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "clamp(3.75rem, 10vw, 6rem)"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.035em"
    textTransform: "none"
  headline:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.02em"
    textTransform: "none"
  title:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "1.25rem"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.02em"
    textTransform: "none"
  body:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "normal"
  label:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "0.08em"
    textTransform: "uppercase"
  mono:
    fontFamily: "Geist Mono, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: "normal"
rounded:
  sm: "8px"
  md: "12px"
spacing:
  card-width: "300px"
  page-padding: "1.5rem"
  section-gap: "1rem"
  content-max: "72rem"
components:
  button-primary:
    backgroundColor: "{colors.accent-electric-blue}"
    textColor: "{colors.ink-primary}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    padding: "8px 20px"
    border: "1px solid #2563EB"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink-primary}"
    rounded: "{rounded.sm}"
    padding: "8px 20px"
    border: "1px solid #2563EB"
  category-pill:
    backgroundColor: "transparent"
    textColor: "{colors.category-bienestar}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: "4px 12px"
    border: "1px solid #FFFFFF"
  post-card:
    backgroundColor: "{colors.category-bienestar}"
    textColor: "{colors.base-black}"
    rounded: "{rounded.md} (full radius; 8px gap between carousel cards)"
    padding: "0px"
    width: "{spacing.card-width}"
---

# Design System: Internet es Cool

## 1. Overview

**Creative North Star: "La Red Somos Personas"**

Internet es Cool is a high-contrast editorial brand on a pure black **pixel canvas**: electric blues, signal pinks, cyber yellows, and neon greens from the official moodboard — not muted SaaS neutrals. Surfaces sit at **85% black** so the animated pixel field reads through. Typography is Geist throughout: bold **sentence-case** display (first capital letter), tight leading, and the signature trailing underscore (`_`) in Azul Eléctrico (`#2563EB`).

The animated pixel canvas stays as ambient texture behind content. Structure is grid-lined (1px white hairlines), category tags are outlined with lane-colored text and arrows, and post cards carry full lane saturation. **No backdrop blur / frosted glass** — panels are plain, hard-edged, and pixel-readable.

**Key Characteristics:**

- Pixel canvas (`#000000`) with moodboard spectrum accents; chrome/surfaces at `rgba(0,0,0,0.85)`
- Geist Sans display + body (Neue-Haas-style grotesk voice; no pixel fonts)
- Soft radius (`8–12px`) only on cards, listings, buttons, and sheets — never on heroes or article prose
- Uniform 1px borders on modules — no thickened single-side strokes
- Category lanes: Bienestar = Rosa, No Code = Azul Señal, Programación = Amarillo Cyber
- Selection highlight: Azul Eléctrico (`#2563EB`) on white text
- Logo: `#internet` + `es.cool` in bordered box
- Module panels (`.glass-card`) are translucent black **without** blur — plain pixelated style
- Titles use sentence case, not forced CSS `lowercase`
- Full-height **Main Content Heroes** (`[data-main-content-hero]`) cover ~100% above-the-fold, stay transparent over canvas FX + CRT + mouse, and include a “Saber más” scroll CTA
- Content shell aligns with the navbar logo column (`.page-hero__shell`)

## 2. Colors

**Strategy:** Full palette — moodboard primaries plus dark companions for canvas accents and hover depth.

### Category Lanes (structural)

| Lane | Surface | Accent (dark) | Moodboard name |
|------|---------|---------------|----------------|
| Bienestar Digital | `#FF3D97` | `#C42D74` | Rosa |
| No Code | `#2D7DFF` | `#2563EB` | Azul Señal |
| Programación | `#FFC400` | `#CC9C00` | Amarillo Cyber |

### Full Spectrum (campaign / future use)

| Name | Hex | Role |
|------|-----|------|
| Azul Eléctrico | `#2563EB` | Selection, underscores, links |
| Azul Señal | `#2D7DFF` | No Code lane |
| Violeta | `#6A2C70` | Dark accent |
| Lila | `#B65ACF` | Accent |
| Rosa | `#FF3D97` | Bienestar lane |
| Fucsia | `#FF5EA8` | Accent |
| Rojo Señal | `#E63946` | Alert / urgency |
| Naranja | `#FF8A00` | Accent |
| Amarillo Cyber | `#FFC400` | Programación lane |
| Verde | `#4CD137` | Success / privacy cues |

### Neutrals

- **Canvas:** `#000000` (pixel field; always opaque behind everything)
- **Surface / chrome / panels:** `rgba(0, 0, 0, 0.85)` — heroes, header, footer, `.glass-card`
- **Ink primary:** `#FFFFFF`
- **Ink body:** `#f6f6f7`
- **Ink muted:** `#A0A0A0` / `#949494`
- **On-lane text:** `#000000` on saturated cards

### Named Rules

**The Category Lane Rule.** Cards use lane fill + black ink. Tags on dark surfaces use white border + lane-colored text + arrow. Lane marquees always use black ink on the lane surface.

**The Underscore Rule.** Display titles may end with `_` in Azul Eléctrico via `.title-mark`.

**The Grid Line Rule.** Use horizontal lines only to separate **sibling modules** where needed (article → FAQ → metadata → related). Always use `.module-divider`: a **full-bleed** `1px` **white** (`#FFFFFF`) cut with compact vertical margin (`1rem`). Internal list rows inside cards use `--border-subtle` (`rgba(255,255,255,0.14)`), not full white. Never inset a module divider inside a padded column. Never stack two module dividers. Do **not** put dividers between home category sliders, and do **not** put a hairline between a PostGrid title row and its cards.

**The Uniform Border Rule.** Module borders are equal on all sides (`1px`). Do **not** thicken a single edge (`border-left: 3px`, `border-top: 2px`, etc.) to fake emphasis — that reads like a broken radius/misaligned stroke. Use icon color, fill, or glow for accent instead.

**The Container Scope Rule.** Module containers (`.glass-card`, radius, inner highlight) apply only to **cards, listings, FAQs, sheets, and dialogs**. Heroes, cover images, and post body content sit flush on the canvas — no extra wrapper or border-radius. Editorial surfaces “cut naturally.”

**The Plain Pixel Rule.** Never use `backdrop-filter` / frosted glass. Panels are flat `rgba(0,0,0,0.85)` so the pixel canvas stays sharp underneath. Overlays may dim with solid black alpha; they must not blur the page.

## 3. Typography

**Display & UI:** Geist Sans (`font-body`, weight 600)  
**Mono:** Geist Mono  
**Character:** Bold sentence-case headlines with tight leading; uppercase only for category tags and eyebrows.

### Hierarchy

| Level | Size | Weight | Transform | Use |
|-------|------|--------|-----------|-----|
| Display FWH | `clamp(3.75rem, 10vw, 6rem)` | 600 | sentence case | Full-height heroes (`.page-hero--fwh .text-display`) |
| Display | `clamp(2.5rem, 7vw, 4.25rem)` | 600 | sentence case | Non-FWH titles if needed |
| Section | 1.35rem | 600 | sentence case | Post grid headers, FAQ, module titles |
| Title | 1.25rem | 600 | sentence case | Card titles |
| Body | 1rem | 400 | normal | Prose, intros |
| Category tag | 0.75rem | 600 | uppercase | Pills, metadata |
| Eyebrow | 0.75rem | 500 | uppercase | Archive labels |

### Named Rules

**The Sentence Case Title Rule.** All authored titles (`h1`–`h6`, `.text-display*`, `.type-section-title`, card titles) use **sentence case**: capitalize the first letter, leave the rest natural Spanish casing (e.g. `Preguntas y respuestas`, `Cómo leen los robots este artículo`). Never apply CSS `text-transform: lowercase` on titles. Uppercase remains reserved for category tags and eyebrows only.

**The Tight Leading Rule.** Display line-height ≤ 1.05; body prose at 1.6.

**The Hero Shell Rule.** Full-height hero copy uses `.page-hero__shell` — same `max-width` (`72rem` / `max-w-6xl`) and horizontal pad (`1.5rem` / `p-6`) as the site header, so text aligns with the logo column.

**The Main Content Hero Rule.** Entrance heroes cover almost 100% of the above-the-fold viewport (`.page-hero--fwh` / `[data-main-content-hero]`) so the first screen feels like a doorway, not a header strip. Heroes are **transparent** so the site canvas FX + CRT (with mouse trail) reads through. Always include a clear “Saber más” scroll CTA (`.hero-scroll-cue`). Target heroes via `[data-main-content-hero]`.

## 4. Elevation

Mostly flat and **sharp**. Depth from lane color blocks, grid lines, and the site **canvas FX + CRT** (mouse trail phosphor). Module panels use a light inner highlight only — **never** backdrop blur or soft frosted glass. Main Content Heroes stay transparent so CRT/canvas reads through — no separate hero glow overlay.

## 5. Components

### Logo

**Full lockup** (`/brand/iescool-logo.png`): isologo (`#` in white square) + `internet` on black + `es.cool` in white box. Used in topbar via `<SiteLogo />`.

**Isologo** (`/brand/iescool-isologo.png`): tilted `#` mark in white square. Used in footer and compact slots via `<SiteLogo variant="isologo" />`.

Assets live in `public/brand/`; paths centralized in `lib/brand-assets.ts`.

### Buttons

- **Primary:** Azul Eléctrico fill, white text, `8px` radius, soft blue glow
- **Secondary:** Transparent, blue border, muted text → filled on hover, same radius

### Category pill (accent tone)

`border border-white`, lane-colored uppercase text, `ri-arrow-right-line` icon. Sharp corners on full-bleed surface pills in article headers.

### Category pill (surface tone)

Full-width lane fill on post headers; black uppercase text; no rounded corners (editorial strip). Category marquees repeat `Title >` on the lane surface with black ink.

### Post card / listings

300px lane fill with **full radius on every card**, separated by an `8px` gap (black canvas shows through) — **no strip background and no negative overlap**. Cards are direct children of the scroll container so prev/next uses the staggered slide wave. Blinking `>_` uses the category accent. Section headers use `8px` lateral padding; carousel block has `pb-8` to balance the heading bar.

### Module divider

`.module-divider` — full-width `1px` **white** line with compact `1rem` vertical margin. Used between post-page modules, not between home sliders.

### Tip callout

`.reading-tip-callout` inside `.reading-tip-callout-wrap`: equal `1px` border on all sides, horizontal page padding (`1.5rem`), and a bottom `border-grid` divider. Accent comes from the icon color — not a thicker left border. No backdrop blur.

### Module card (scoped)

`.glass-card` — `rgba(0,0,0,0.85)` fill, hairline **uniform** border, subtle inner top highlight, `12px` radius, **no backdrop-filter**.

**Allowed on:** FAQ / Q&A module, metadata expander, bottom sheets, modal dialogs, tip callouts near tools.

**Never on:** home/category/article heroes, cover images, Notion article body, plain page prose.

### Canvas background

**Do not remove.** Particle animation uses lane accent colors; respects `prefers-reduced-motion` and tab visibility. Surfaces at 85% opacity exist so this field stays visible.

### Main Content Hero (FWH)

Component: `MainContentHero` → `[data-main-content-hero].page-hero--fwh`.

- Fills remaining viewport under the site header (~100% above-the-fold entrance).
- **Transparent** — the site `CanvasBackground` (pixel FX + mouse hover) is post-processed with [Ichiaka/CRTFilter](https://github.com/Ichiaka/CRTFilter) and shows through the hero. No per-hero CRT overlay.
- CTA: `.hero-scroll-cue` — solid **Saber más** button (`.btn-hero`) left-aligned with `.page-hero__shell`; article split aligns to the title column. Links to `#contenido`.
- Respects `prefers-reduced-motion` (raw canvas FX without CRT).

**Selectors for agents / CSS / JS:**

| Target | Selector |
|--------|----------|
| Hero root | `[data-main-content-hero]` or `.page-hero--fwh` |
| Canvas FX host | `[data-canvas-fx-host]` / `.canvas-fx` |
| Canvas FX (+ CRT output) | `canvas[data-canvas-fx]` / `canvas[data-canvas-fx-crt]` |
| Scroll CTA | `.hero-scroll-cue` |
| Copy shell | `.page-hero__shell` |

## 6. Do's and Don'ts

### Do

- Use `lib/brand-palette.json` and `lib/semantic-colors.json` as source of truth
- Use `.text-display`, `.type-section-title`, `.type-category-tag` utilities
- Keep canvas animation; tune colors via category accent map only
- Write titles in sentence case with intentional `_` marks where needed
- Use FWH display scale on `.page-hero--fwh` titles; shell-align copy with `.page-hero__shell`
- Build entrance heroes with `MainContentHero` (`[data-main-content-hero]`) over canvas FX + CRT + “Saber más” cue
- Keep editorial content flush to the canvas (no decorative wrappers)
- Use equal-width borders on cards/callouts/sheets
- Separate sibling modules with a single full-bleed `.module-divider`
- Keep panels plain (85% black, no blur) so pixels stay crisp

### Don't

- Reintroduce Silkscreen or pixel fonts for headings
- Use cream/warm body backgrounds
- Force `text-transform: lowercase` on titles or headings
- Thicken only one side of a border to create accent (no `border-left: 3px` callouts)
- Inset short divider lines inside padded columns, or double-stack module dividers
- Wrap heroes, images, or post content in `.glass-card` / rounded containers
- Use `backdrop-filter` / frosted glass anywhere on the site
- Replace Main Content Hero CRT with soft CSS gradient glows
- Use pill/`rounded-full` controls except sheet handle nubs
- Put white text on saturated lane cards (black ink only)