Colour Palette
The palette is built around deep oceanic blues — the colour of 30-metre visibility water on a clear Galápagos morning — and a warm antique gold that reads as sunlight filtering down from the surface. Everything lives in the dark. Gold is reserved for accent; never use it as a background for large content areas.
Typography
Two typefaces. Cormorant Garamond — editorial, italic, centuries-old; the serif that feels like a handwritten logbook. It carries all display headings and emotional text. DM Sans — modern, geometric, clean; it handles every functional element. Never swap their roles.
The Galápagos Marine Reserve is one of the largest and most biologically diverse on the planet. Operating a dive school here is not just a business — it is a responsibility.
Check availability, ask questions, or build a custom plan for your Isabela stay. We respond quickly.
The <em> tag is sacred. In Cormorant headings, italicised text renders in gold and shifts to the beautiful cursive form of the typeface. Use it for the emotional pivot of a headline — the word that carries weight. One wild is enough. Never italicise an entire heading.
Logo Usage
The logotype pairs the marine iguana mark — circular, cropped, 34–48px in the nav — with the Cormorant Garamond wordmark "Galápagos Below". The word "Below" renders in gold to hint at depth. The icon is the iguana PNG embedded as a base64 data URI; do not hotlink an external image.
- Always use the iguana icon alongside the wordmark in navigation
- Use the full lockup (icon + wordmark) on all pages
- Maintain the gold colour on "Below" — never change it
- Keep minimum clear space equal to the icon height on all sides
- Scale proportionally — icon and wordmark stay coupled
- Use the nav-compact size (28px icon) once the page is scrolled
- Place the logo on a light or white background
- Separate the wordmark from the icon in headers
- Outline, shadow, or add effects to the iguana icon
- Recolour "Galápagos" — it is always --white (#f8f6f2)
- Use a rasterised screenshot of the logo — always embed the PNG or base64
- Display the icon without the wordmark except in favicon contexts
Voice & Tone
Galápagos Below is a serious dive school operating in a UNESCO World Heritage Site. The writing is confident without being arrogant, scientific without being dry, and warm without being a tourist brochure. Think: knowledgeable local who also happens to have a PADI master instructor card.
- Expert — referencing species by common and scientific name where it matters
- Candid about conservation — the park fees fund preservation, not profit
- Specific — names, depths, dive sites, temperatures; never vague
- Understated — lets the Galápagos do the talking
- Bilingual by default — EN and ES are equals, not an afterthought
- Direct — sentences end. No meandering.
- Warm — these are people who love the water and love sharing it
- Hypey — "AMAZING!" and "INCREDIBLE!" are tourist brochure words
- Salesy — the experience sells itself; we inform, not pressure
- Apologetic about pricing — park fees are explained, never excused
- Generic — "pristine waters" and "once in a lifetime" are banned phrases
- Formal — no corporate language; this is a dive school on an island
- Casual to the point of flippancy — this is a serious marine environment
- Exclusively English — never build a page without the ES equivalent
Examples — the left is how we write, the right is what we avoid:
"Scalloped hammerheads aggregate around Tortuga Island in groups of 20–40 individuals. You'll descend to 18 metres. You will see them."
"Get ready for the most AMAZING underwater experience of your life with our incredible hammerhead shark dives!!"
"Galápagos diving costs more than most destinations. Operating licences in the Marine Reserve are among the most expensive on Earth — fees that fund conservation of a UNESCO World Heritage Site."
"We know our prices might seem high but we promise it's totally worth it and you won't regret it!"
"Tiburones martillo se congregan en grupos de 20 a 40 individuos cerca de Isla Tortuga. Descenderás a 18 metros. Los verás."
Every piece of user-visible text has a data-lang="en" and a data-lang="es" sibling. Spanish is not a translation — it is written for the local Ecuadorian market and may emphasise different selling points. When adding content, write the EN version first, then write the ES version independently for natural fluency. Do not machine-translate and ship.
Imagery Direction
The site currently uses SVG/CSS-animated marine life in the hero. When adding photography, follow these guidelines. The underwater world is naturally dramatic — do not over-edit. Colour grade toward cool teals, not the warm-orange Instagram dive aesthetic.
- →Minimum 1920px wide for hero use
- →Compress with WebP at 85% quality
- →Credit photographer in alt text
- →Dark overlay (rgba 0,0,0,0.3) when text sits over image
- ×Stock photography — real Galápagos only
- ×Warm orange/teal split grade
- ×Text on undarked photos (contrast fails)
- ×Animals being touched or handled
UI Components
All components are built from the CSS variables above with no external UI library. Rendered examples below — inspect or copy the source from index.html for each.
::before pseudo-element draws the 30px gold rule. DM Sans, 0.7rem, 0.2em tracking, uppercase, --gold.
::before dot animates with a pulse. Pill shape (2rem border-radius). Do not use elsewhere — it loses impact.
Wild Encounters
Hammerheads, mantas, whale sharks. No aquarium.
PADI Certified
Full certification pathway on-island.
Small Groups
Max 6 divers per instructor in open water.
Conservation
Park fees fund the Marine Reserve directly.
Spacing & Layout
The grid is 1200px max-width, 2rem horizontal padding. Sections are generously padded — the breathing room is intentional. The ocean is vast; the layout should feel it.
| Context | Value | Usage |
|---|---|---|
| section padding | 6rem 2rem | Top/bottom for all major sections |
| max-width | 1200px | Inner container for all sections |
| section → heading gap | 1.5–2rem | Below section eyebrow label |
| heading → description | 1.2–1.5rem | Below H2 before body text |
| description → grid | 2.5–3rem | Before card grids or component rows |
| card grid gap | 1.2–1.5rem | Between tour, team, promise cards |
| card internal padding | 2rem | Inside team/tour cards |
| nav padding | 1.2rem 2.5rem | Resting state; compresses to 0.8rem on scroll |
| section-label ::before line | 30px × 1px | Gold rule before label text |
| btn padding | 0.9rem 2rem | Primary btn; ghost: 0.5–0.6rem 1.2rem |
| card border | 1px rgba(gold,0.1) | All card outlines at rest |
| card border hover | 1px rgba(gold,0.25) | On hover — subtle gold brightening |
- →Copy all :root CSS variables from index.html
- →Link the same Google Fonts
- →Include nav (fixed, transparent → scrolled)
- →Add language system CSS + JS toggle
- →Every text node needs data-lang="en" + data-lang="es"
- →Add JSON-LD breadcrumb if it's a sub-page
- →Set canonical URL, og:url, og:title, og:image
- →Include sticky WhatsApp CTA
- →Same footer as index.html
- →Add page to deploy.sh sitemap generation