Olosirkon

olosirkon-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root variables + class rules. Fictional/sample product; described factually.

Overview

Olosirkon is a luxury Maasai Mara safari camp presented as a printed editorial essay that you scroll through. The surface is a warm bone paper (#EFE8DC) carrying charcoal ink (#22201C), and a single gold voltage (#C8A24B) does nearly all the accent work — kicker labels, italicized display highlights, hairline rules, oversized quotation marks, the link underline, and even the text selection color. The type story is the whole design: a Fraunces display serif (frequently font-light and italic) for hero and headings, Lora for a generous 18.5px reading column complete with a Fraunces dropcap, and Archivo set as wide-tracked uppercase micro-caps ("kicker", letter-spacing:0.22em) for chapter markers, field-note timestamps, and captions. A 12-column grid stages deliberately asymmetric spreads — narrow label column, wide body column, offset marginal notes — alternating with full-bleed parallax photography and full-height charcoal pull-quote panels. The geometry is flat and rectangular: no rounded corners, no shadows. The only ornament is the 1px gold-rule hairline. Ochre (#B05A2E) and acacia (#5C6B4A) appear sparingly as a dropcap color, secondary kicker, and one full-width acacia "A Day in Camp" panel.

Colors

Brand / Voltage. gold #C8A24B is the sole accent and appears everywhere small: kicker text, the italic highlight words in display headings ("the lions", "the Mara", "each its own hide"), every gold-rule hairline, the large quote glyphs, the link-underline baseline, and ::selection (gold background, charcoal text).

Surface. bone #EFE8DC is the page background and also the text color on every dark panel. charcoal #22201C is the body ink on bone and the background of the hero, the two pull-quote bands, the migration image band, and the footer.

Secondary accents. ochre #B05A2E colors the .dropcap first letter and a few kickers ("Almanac", "A Marginal Note", the Jul–Oct season). acacia #5C6B4A colors italic display sub-labels ("The Waiting", "each its own hide") and is the full-width background of the "A Day in Camp" timeline panel.

Hairlines. Dividers are translucent: rgba(34,32,28,0.15) between season rows on bone, and rgba(239,232,220,0.25) between day rows on the acacia panel. The gold border-top on the seasons block uses solid gold.

Gradient. The hero carries a single diagonal legibility scrim: linear-gradient(115deg, rgba(34,32,28,0.78) → 0.35 → 0.15). Hero/band images are tuned with CSS filter (brightness(0.62) saturate(1.05) on hero; brightness(0.78) on migration).

Typography

Three Google-Fonts families, all loaded via one @import: Fraunces (display serif, optical sizing, weights 300–600 plus italics), Lora (body serif, 400/500 + italic), and Archivo (sans, 400/500/600) used exclusively for uppercase micro-caps. Fraunces and Lora are open-source and used directly — no substitution needed.

The .dropcap::first-letter is Fraunces 400 at 6.2rem, line-height:0.78, floated left, in ochre.

Layout

Tailwind 4px base unit; vertical rhythm runs on a 24/36 step (py-24 md:py-36, my-24 md:my-36). The spine is a lg:grid-cols-12 layout used to compose asymmetric editorial spreads: a narrow 2–3 column label/kicker, a wide 5-column body column, and an offset 3-column marginal note. Image spreads alternate left/right (col-start swaps with order-1/order-2) with images at fixed viewport heights (h-[70vh]–h-[78vh]). Page padding steps px-6 md:px-16 lg:px-24; the hero text is capped at max-w-[1100px], body prose at max-w-md. Full-bleed moments break the grid: a 100vh hero, two h-[80vh]/ h-[120%] parallax image bands, full-height charcoal quote panels, and an edge-to-edge acacia day-schedule panel. Whitespace is generous and quiet, in service of the reading rhythm.

Elevation & Depth

Flat. There are no box-shadows and no glass/blur. Depth comes from (1) layered scrims and image filter darkening behind the hero/band text, (2) the charcoal panels reversing figure/ground against the bone page, and (3) parallax — image layers drifting at a different rate than pinned text. Separation between rows is a single hairline, never a shadow.

Shapes

Strictly rectangular. There are no rounded-* classes and no border-radius anywhere — images, panels, and rules are all hard-edged. The signature shape is the gold-rule: a 1px gold bar used as a section underline, a "Scroll" tick, an inline accent before season dates, and full-width dividers in the footer. Captions sit flush as plain text under images.

Components

• Nav — fixed, transparent, mix-blend-mode:difference so it inverts over the hero; bone Fraunces wordmark + Archivo kicker links, hover:opacity-60. Padding py-5 px-6/12.
• Hero — 100vh charcoal stage; parallax image with scrim; gold kicker, light Fraunces H1 with a gold italic phrase, a 32px gold-rule, and a bone kicker sub-line.
• Pull-quote panel — full-width charcoal band, py-24/36, light italic Fraunces in bone with gold curly quote glyphs; attributed by a gold kicker or closed by a gold-rule.
• Essay column — Lora .body-col (18.5px/1.7) with a Fraunces ochre dropcap; flanked by gold/ ochre kicker labels and an acacia italic marginal note.
• Image spread — fixed-height object-cover photo + a right/left-aligned gray kicker credit caption (opacity:0.6).
• Season / day rows — 12-col rows separated by hairlines; gold (or ochre) kicker date, Fraunces text-2xl/3xl title, Lora 17px description. Day rows invert on the acacia panel (bone text).
• Suite block — large image + Fraunces title, gold kicker spec line ("68 m² · King · …"), Lora blurb, and a link-underline kicker CTA ("Reserve the Ilbarta →").
• Link-underline — gold 1px baseline drawn via linear-gradient background; used on CTAs and the large italic Fraunces email link in the footer.
• Footer — charcoal, full-width gold-rules top/middle/bottom; gold kickers over bone columns for Visit / Call / Follow, a clamp display headline, and faint photography credits.

Motion

Built on Lenis smooth scroll (lerp:0.09) driving GSAP ScrollTrigger. Hero is the hallmark move: the image scrubs yPercent:16 while #hero-text rises yPercent:-22 and fades to opacity:0.15 as you scroll past — a pinned-feeling parallax dissolve. The migration band scrubs yPercent -8 → 8. Content enters with two reveals: .reveal (y:34 → 0, opacity 0 → 1, 0.95s power3.out, trigger top 88%) and .reveal-img (image scale:1.12 → 1, 1.4s power3.out, trigger top 85%). Note .reveal is authored opacity:1 in CSS as a no-JS fallback. Hover states are simple opacity/color shifts.

Iconography

No icon library. The interface uses typographic glyphs only: arrows (→) on CTAs, large gold curly quotation marks on pull-quotes, and the gold-rule hairline as the universal graphic device. All visual richness comes from photography and type.

Do's and Don'ts

• Do keep gold as the single accent and use it sparingly — kickers, italic display highlights, hairlines, and underlines only.
• Do preserve the editorial 12-column asymmetry (narrow label / wide body / offset note) and the alternating image spreads.
• Do set every label, timestamp, and caption as Archivo uppercase kicker with 0.22em tracking.
• Do keep everything rectangular and shadowless; rely on the gold-rule and charcoal panels for structure.
• Don't introduce rounded corners, drop shadows, or glass effects.
• Don't add more accent colors — ochre and acacia are deliberately rare; never let them compete with gold.
• Don't tighten the body measure or shrink Lora below ~16px; the generous reading rhythm is the point.
• Don't swap the smooth-scroll parallax for snappy transitions; the slow, patient motion is part of the brand.

Known Gaps

• The three duplicate lenis.css <link> tags in the HTML are redundant (a copy-paste artifact); they load the same stylesheet and were not treated as distinct tokens.
• Section heading sizes are expressed as Tailwind steps (text-4xl md:text-6xl, text-3xl md:text-4xl); the heading token approximates these with the footer's explicit clamp(2.5rem,5vw,4.5rem) as a representative value.
• letterSpacing for body/headings is left at the browser default (not explicitly set in the HTML).