# AI Exploration Lab — Design System > **Tagline:** *"La IA no era para ti. Hasta hoy."* > **Org:** Universidad Pontificia Bolivariana — Sede Medellín (UPB Medellín) > **Version:** v1.0 — 2026 · *Documento Vivo* (living document) The AI Exploration Lab is a university initiative whose mission is to **spark massive curiosity about artificial intelligence among university students of *any* discipline** — proving that AI is an accessible, useful, already-available tool, not a future technology reserved for engineers. The whole brand exists to break one myth: *"AI is for engineers."* It is **not** a product company. It is a **laboratory of possibilities** ("El Lab no es un aula. Es un laboratorio de posibilidades"). Every session ends with something *created*. --- ## Sources This design system was built entirely from the materials below. No codebase or Figma file was provided — the brand book is the single source of truth. | Source | Path | Notes | |---|---|---| | Brand Book v1.0 (PDF, 14 pp, Spanish) | `uploads/AI_ExplorationLab_BrandBook_v1.0.pdf` | Manifesto, mission, audience, full visual + verbal identity, design tokens, restrictions | | Logo — dark bg (primary) | `uploads/Logo_Proyecto CLASE AI.png` → `assets/logo-dark-bg.png` | Vector Syntax Glyph + wordmark on Deep Space | | Logo — light bg (monochrome) | `uploads/Logo_Proyecto CLASE AI_FONDOBLANCO.png` → `assets/logo-light-bg.png` | Cyan→violet glyph for white backgrounds | > **There is no live product yet.** The brand book specifies *digital applications* > (landing page, registration forms, presentation slides, social formats). The UI kits and > slides in this system are faithful implementations of those written specs — not > recreations of existing screens. --- ## Index / Manifest Root files: - **`index.html`** — repo portal (also serves as GitHub Pages homepage) - **`README.md`** — this file (context, content + visual foundations, iconography, index) - **`colors_and_type.css`** — all design tokens (color, type, spacing, radii, shadow) + semantic type styles - **`SKILL.md`** — Agent-Skill manifest for downloading & reusing this system - **`LICENSE`** — MIT for source · brand assets © UPB Medellín - **`.gitignore`** — excludes scraps and the regenerable standalone bundle Folders: - **`assets/`** — logos (dark + light), isotipo (with transparent variant), Latent Map texture - **`preview/`** — design-system specimen cards (rendered in the Design System tab) - **`ui_kits/landing/`** — landing-page UI kit (hero, "cómo funciona", session card, registration form, footer) - **`slides/`** — presentation slide templates (title, section, content, big-quote, code/data) - **`uploads/`** — original brand book PDF (kept for reference) --- ## Use this repo ```bash git clone ai-exploration-lab-design cd ai-exploration-lab-design # No build step — open files directly in a browser. open index.html # or: python3 -m http.server 8000 ``` ### Deploy the landing on GitHub Pages 1. Push to a GitHub repo. 2. Repo **Settings → Pages → Source: Deploy from a branch → `main` / `/ (root)`**. 3. After ~1 min the portal is live at `https://.github.io//`, with the landing kit at `/ui_kits/landing/`. No build, no Node, no bundler — every page works as a static file (React + Babel are loaded from CDN at runtime). ### Pulling this into another project / Claude Code Copy the whole folder. The skill is self-contained: `SKILL.md` tells an agent how to read the system; `README.md` is the human reference; `colors_and_type.css` and `assets/` are the drop-in primitives. --- ## CONTENT FUNDAMENTALS **Language.** Primary copy is **Spanish (Colombia)**, conversational register. Technical docs (this README, tokens) may be bilingual. **Voice.** *"Habla como alguien que sabe mucho, pero prefiere hacerte preguntas."* Speaks like someone who knows a lot but would rather ask you a question. Never condescending, never empty hype. Energetic but honest — *honestidad técnica* is a core value: "No vendemos magia." **Person.** Speaks directly to **"tú" / "ti" / "tuyo"** (second person, informal). The audience is the protagonist: *"para ti"*, *"ya tenías superpoderes"*. The Lab refers to itself as "el Lab" / "nosotros" sparingly. **Casing.** Display titles are frequently **ALL CAPS** for impact (see logo wordmark "AI EXPLORATION LAB"). Mono labels are uppercase with tracking. Body is sentence case. **Copy formula for social** (from §05): `[ GANCHO ] + [ EJEMPLO COTIDIANO ] + [ PREGUNTA ABIERTA ] + [ CTA ]` > *"¿Sabes cómo sabe Spotify qué canción quieres escuchar después? La misma lógica puede > aplicarse a diagnosticar enfermedades, diseñar productos o entender a tus clientes. ¿Qué > harías tú si tuvieras esa herramienta? Inscríbete al próximo Lab."* **Everyday examples, always.** Anchor AI in things the reader already touches: Spotify's recommendations, the phone autocorrect, the Instagram feed, Maps, Netflix suggestions. Never abstract. **Vocabulary** | ✅ Use (external comms) | ❌ Avoid (external comms) | |---|---| | inteligencia artificial, IA | algoritmo, modelo, pipeline | | crear, explorar, experimentar | deployment, backend, API | | herramienta, asistente | machine learning (in headline copy) | | feed, sugerencia, recomendación | disruptivo, paradigma | | hoy, ya, ahora | innovación tecnológica (genérico) | | tuyo / tuya, para ti | futuro, próximamente, potencial | - **Emoji:** not part of the brand. Do not use emoji as iconography. Use the **syntax iconography** instead (see below). - **The word "hoy" ("today")** is load-bearing — it's the hinge of the tagline and the whole positioning. Favor immediacy: *hoy, ya, ahora*. - **Tone to avoid** (real example from book): *"...transformando los paradigmas del machine learning y el deployment de modelos a escala industrial."* — jargon that distances the non-tech reader. **Retired tagline — do NOT use:** *"Understand the syntax..."* (it was tech-oriented; the new tagline is universal across all majors). --- ## VISUAL FOUNDATIONS **Overall vibe.** Dark, technical, neon-on-deep-space. Reads like a *terminal / latent space* — confident and engineered, never sci-fi-kitsch. Think contour maps and syntax brackets, **never humanoid robots**. **Color.** - Built on **Deep Space `#0A0F1E`** — a very dark navy, *never pure black* as a fill. - **Acid Cyan `#00FFF0`** is the single action color: CTAs, links, focus, interactive energy. Used sparingly and always on dark. - **Electric Violet `#8A2BE2`** is the "depth" accent: subheadings, secondary highlights, the second note in the logo gradient. - Text is **white `#FFFFFF`** for headlines, **`#D0D0D0`** softened white for body, **`#888888`** muted for meta. - Semantic: success `#00FF88`, warning `#FFD700`, error `#FF4444`, info `#00B4D8`. - **Palette discipline:** cyan + violet are accents, not fills. The composition is mostly dark surface with small, glowing accents. No pastels, ever. **Type.** Three families, three jobs, **never mixed on one line**: - **Plus Jakarta Sans ExtraBold (800)** — display, titles, impact. Often ALL CAPS, tight tracking. Hero size 80px. - **JetBrains Mono (400/500)** — labels, code, data, version stamps, identifiers, kickers. Uppercase + letter-spacing for labels. - **Inter (400/500)** — body copy and long paragraphs only. **Backgrounds.** Flat **Deep Space**, optionally layered with the **Latent Map** — a topographic contour-line pattern representing the *latent space* of AI models. Rules: 10–15% opacity over Deep Space, lines in Acid Cyan or Electric Violet, subtle scale, **only as a background layer, never foreground**, never above 25% opacity, never on light backgrounds, never rotated/distorted. **No bright/rainbow gradients.** The only "gradient" in the brand is the cyan→violet stroke transition inside the logo glyph itself. **Imagery.** *Semantic and real.* Never generic stock, **never humanoid/cybernetic robots** (this reinforces the exact myth the Lab fights). Imagery, when used, should be real people creating real things; cool-toned to sit against Deep Space. **Glow & shadow.** Elevation is expressed as **cyan glow**, not soft gray drop shadows: `--shadow-glow: 0 0 24px rgba(0,255,240,0.35)`. Subtle `--shadow-sm/md` carry a faint cyan tint too. Primary CTAs glow. **Borders.** Hairline. Subtle white `rgba(255,255,255,0.08)` for structure; **Acid Cyan border on focus** for inputs. Cards sit on `--surface-2 #0D1530` with a faint border, no heavy shadow. **Corner radii.** `sm 4px` (chips, inputs), `md 8px` (buttons, cards, code blocks), `lg 16px` (large panels), `full` (pills/avatars). Moderate rounding — engineered, not bubbly. **Cards.** Background `#0D1530`, 1px subtle border, `radius-md/lg`, optional faint cyan glow on hover. No colored left-border-accent cards. No emoji cards. **Spacing.** 4px base scale (1,2,4,6,8,12,16,24). Generous negative space on dark; let the Deep Space breathe. **Motion** (not deeply specified in book; derived to fit the vibe): restrained and precise. Short fades + small translate-ups (8–12px). Easing `cubic-bezier(0.2,0.7,0.2,1)`. No bounces, no decorative infinite loops on content. Glow can pulse *very* subtly on a CTA. **Hover / press states** (derived): hover = brighter glow + slight lift, or cyan text on hover for links. Press = scale 0.98 + dimmed glow. Focus = Acid Cyan border + `--shadow-sm`. **Layout rules.** Minimalist. Landing = hero with the tagline, a "cómo funciona" section using syntax iconography, and **one** clear CTA. Posters/flyers: max 20 words, big cyan title, white body, Latent Map at 15%, QR bottom-right. --- ## ICONOGRAPHY The Lab does **not** use a conventional pictographic icon set, and **does not use emoji**. Its iconography is **Syntax Iconography** — characters borrowed from programming syntax as visual metaphors. Each has a fixed meaning (§04): | Symbol | Meaning | |---|---| | `[ ]` | Container, structure, block of information | | `{ }` | Data, variables, configurable content | | `(*)` | Highlight, important note, point of attention | | `>` | Action, direction, progress, user input | | `///` | Separator, transition, start of a new section | These are set in **JetBrains Mono**, typically in Acid Cyan or Electric Violet. The brand itself is written framed in brackets: **`[ AI Exploration Lab ]`**. Use these glyphs where another brand would use icons — as section markers, list bullets, CTA affixes (`Inscríbete >`), and kickers (`/// CÓMO FUNCIONA`). **Logo / Isotipo — the "Vector Syntax Glyph".** Rotated, nested diamonds with directional arrows, stroked in a cyan→violet gradient. Represents *data in motion, depth of layers, and direction with purpose*. Variants: - `assets/logo-dark-bg.png` — primary, on Deep Space. - `assets/logo-light-bg.png` — monochrome glyph for white backgrounds (wordmark greyed). - `assets/isotipo.png` — **isotipo only** (glyph), square crop on Deep Space. Use for avatars / favicons / nav marks on dark. - `assets/isotipo-transparent.png` — isotipo with the background keyed out (soft neon glow preserved). Clean on dark surfaces; on light backgrounds prefer the monochrome logo (a faint halo remains). - *Pure-white* variant is described in the book but was **not supplied** — see Caveats. Logo rules: clear space = height of the "A" in the wordmark. Never compress, stretch, rotate, or add shadows. Never place the standard cyan logo on a light background without the monochrome adaptation. Minimum 32px tall for the isotipo (favicons/avatars/pins). **Latent Map texture.** `assets/latent-map.svg` is a faithful recreation of the described topographic contour pattern (no source file existed). Use at 10–15% opacity as a background layer only. **Flagged as a recreation — see Caveats.** --- ## Caveats / open questions See the closing note of this README and the on-screen delivery message.