Documentation Index
Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt
Use this file to discover all available pages before exploring further.
Pikanté is a premium artisanal michelada mix brand made in Honduras by Grupo Futura. Every design decision — from the near-black background to the fire-orange CTAs — reinforces the brand’s core promise: bold, vivid, unapologetically Honduran. This page documents the full visual identity system so that any developer or designer working on the landing page can apply it consistently.
Brand overview
| Property | Value |
|---|
| Product | Bottled michelada mix (michemix) |
| Tagline | ”La michelada que prende todo” |
| Made by | Grupo Futura · Honduras |
| Sizes | 250 ml, 570 ml, 1 L |
| Flavors | Versión picante 🔥🔥🔥 (3/5) · Versión suave 🔥 (1/5) |
| Instagram | @pikantehn |
| TikTok | @pikantehn |
| WhatsApp | +504 9786 4648 |
Color palette
All colors are defined as CSS custom properties in src/styles/global.css using the OKLCH color model. OKLCH separates lightness (L), chroma (C), and hue (H) in a perceptually uniform space — a chroma of 0.21+ produces the vivid saturation you see in --fire and --chile, while the 35° hue sits squarely in the fire-orange zone. This makes it trivial to lighten or darken any color without shifting its perceived hue.
Fire / chile accents
These are the brand’s primary expressive colors and should be used for CTAs, highlights, hover states, and decorative glows.
| CSS variable | OKLCH value | Usage |
|---|
--fire | oklch(65% 0.21 35deg) | Primary accent · buttons · glow effects |
--chile | oklch(56% 0.23 22deg) | Secondary accent · hover states |
--dark-red | oklch(38% 0.14 22deg) | Deep red backgrounds · overlays |
--lime | oklch(76% 0.17 130deg) | Step labels · .mono eyebrows in HowTo |
--amber | oklch(50% 0.12 50deg) | Warm amber · subtle warmth |
Backgrounds and surfaces
The page lives on a near-black canvas with a cool 260° hue that creates deliberate thermal opposition against the warm fire accent — the deeper the background, the more the orange pops.
| CSS variable | OKLCH value | Usage |
|---|
--bg | oklch(5% 0.008 260deg) | Page background |
--carbon | oklch(8% 0.010 260deg) | Section backgrounds |
--char | oklch(11% 0.010 260deg) | Card surfaces |
--line | oklch(16% 0.008 260deg) | Borders and dividers |
--paper | oklch(94% 0.010 60deg) | Primary text · headings |
--smoke | oklch(55% 0.006 260deg) | Muted labels · eyebrows |
Derived accent tokens
These tokens are computed from --fire at runtime using color-mix() and should never be hardcoded:
--accent: var(--fire);
--accent-soft: color-mix(in oklab, var(--accent) 38%, transparent);
--accent-glow: color-mix(in oklab, var(--accent) 72%, transparent);
--lime-soft: color-mix(in oklab, var(--lime) 35%, transparent);
Use var(--accent-soft) for radial gradient glows on section backgrounds and var(--accent-glow) for box-shadow on primary buttons and product cards.
Typography
All three typefaces are loaded from Google Fonts via a single <link> in the <head> of src/pages/index.astro:
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
Typeface roles
| Font | Role | CSS class / selector |
|---|
| Anton | Display headings, large numbers, product names, section <h2> | .h-display · font-family:'Anton' |
| Inter | Body text, paragraphs, general content | Default body font |
| JetBrains Mono | Labels, eyebrows, prices, step tags, nav links, button text | .mono · .eyebrow |
Display heading class
.h-display {
font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
letter-spacing: -.01em;
line-height: .86;
text-transform: uppercase;
}
<h1> — font size scales from 64px at mobile to 196px at wide viewports via clamp(64px, 11.5vw, 196px).
Mono / eyebrow class
.mono {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--smoke);
}
::before { content: ""; width: 18px; height: 1px; background: var(--accent); }.
Logo and image assets
All image assets are stored in src/images/ and imported via Astro’s <Image> component for automatic optimization.
Logo files
| File | Usage |
|---|
logo_no_background.png | Transparent logo — used in Nav.astro |
logo.png | Full logo with background — used in Footer.astro |
logo-flame.webp | Flame mark only — use as standalone icon |
logo-wordmark.webp | Wordmark only — use in text-heavy contexts |
Always import logos with Astro’s <Image> component, never via a plain <img> tag, so that width/height attributes and lazy-loading are set automatically.
Product imagery
| File | Description |
|---|
product-limes.webp | Product shot with limes — hero card for Versión picante |
pikante_escarcha.webp | Escarchado / rimmed glass shot — used in HowTo step 1 |
pikante_hielo.webp | Ice preparation shot — used in HowTo step 2 |
products-row.webp | All bottles in a row — comparison / hero uses |
Lifestyle imagery
| File | Description |
|---|
lifestyle-pool.webp | Pool party lifestyle — used in Lifestyle section |
lifestyle-night.webp | Night scene — hero card for Versión suave |
lifestyle-overhead.webp | Overhead flat-lay — editorial use |
Hero imagery
| File | Description |
|---|
hero-bottle.webp | Clean bottle hero shot |
hero-fire.webp | Bottle with fire/flames — HowTo step 3 and commented hero slot |
Video
| File | Description |
|---|
src/images/prep-video.mp4 | Short-form preparation video — rendered inside PrepVideo React component in the Hero section |
Cinematic design details
The landing page uses three layered techniques to create a high-production “cinematic” feel:
1. Film grain overlay
A persistent pseudo-element on body::after renders an SVG feTurbulence noise pattern at 18% opacity with mix-blend-mode: overlay:
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
background-image: url("data:image/svg+xml;utf8,<svg ...><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>...</svg>");
mix-blend-mode: overlay;
opacity: .18;
}
z-index: 200) and should never be removed — it is core to the brand aesthetic.
2. Dark background with cool hue
The --bg token uses hue 260deg (a cool near-black) instead of a neutral grey. This creates subtle thermal opposition: the warm fire-orange accent (hue 35deg) reads as more vivid against a cool dark than it would against a neutral dark.
3. Radial gradient glows
Section backgrounds use radial-gradient with var(--accent-soft) to simulate a soft light source emanating from one corner of the section. Example from .hero:
.hero {
background:
radial-gradient(60% 50% at 80% 60%, var(--accent-soft), transparent 60%),
radial-gradient(40% 40% at 15% 30%, rgba(255,30,30,.10), transparent 70%),
var(--bg);
}
Do not replace these multi-layer gradients with a plain background color — the depth they create is intentional and brand-defining.
