Brand guidelines
Randilen Plains
Quiet, photo-led and exact. The identity starts from the land at Randilen: pale grass, petrol-dark water and night sky, low sun. Restraint, space and photography come first, with a voice and palette of its own.
01
Logo
The wordmark is the final artwork (src/assets/brand/randilen-plains-logo.svg). It is a single colour and always takes the colour of the text around it: ink on paper, paper on night and on photographs.
- Minimum size, screen
- 120px wide (the site header uses 124–140px on phones, 160px from 900px)
- Minimum size, print
- 30mm wide
- Files
- One SVG using currentColor.
Don’t
Put a white or paper logo on a light background
Stretch, squash or redraw it
Recolour it in gold, gradients or accent colours
Rotate it or set it on a curve
Also avoid: drop shadows or glows, and busy parts of a photograph without a scrim.
02
Colour
Paper, an abyssal navy called Ink, and an earth scale of Sand, Clay, Terracotta and Mahogany. Ink is the text and the logo on paper, and the photo wells and the lightbox. Earth night, #1c1612, is the footer, the open menu, the end of nightfall, and the primary button: a near-black warm brown, not that navy. The header bar, once solid, stays paper. Ink soft is secondary text on paper, and the map water. Navy stays on the map. Terracotta is for links and form focus on paper, not for buttons. Outlined buttons use an earth-night border and label. Never use terracotta, ink soft or navy on earth night. On earth night the text is paper, mist or haze, outlined buttons are paper, and the focus ring is haze. Mahogany is the map’s land label and the button focus ring on paper; it is too red for a button fill. Burning Flame is a glint on earth night only, never a fill. Contrast is WCAG 2.2, measured against Paper and Earth night.
-
Neutrals
Paper
#eee9df--paperPage base. Palladian, a warm off-white, never pure white.
- On paper
- 1.0:1 Decorative
- On night
- 14.8:1 AAA
-
Neutrals
Paper sunk
#e1dbcf--paper-sunkQuiet panels. Palladian stepped toward oatmeal #c9c1b1.
- On paper
- 1.1:1 Decorative
- On night
- 13.0:1 AAA
-
Neutrals
Ink
#1b2632--inkAbyssal navy. Text and the logo on paper, photo wells and the lightbox. Not the menu.
- On paper
- 12.7:1 AAA
- On night
- 1.2:1 Decorative
-
Neutrals
Ink soft
#434e5a--ink-softSecondary text and micro labels on paper (7.0:1, 6.2:1 on sunk). Map water. Never on earth night (2.1:1).
- On paper
- 7.0:1 AAA
- On night
- 2.1:1 Decorative
-
Night
Earth night
#1c1612--earth-nightFooter, the open menu, nightfall, and primary buttons. Near-black warm brown, not the navy of Ink. A paper label is 14.8:1. Hover lifts to #3a2c24 (11.1:1).
- On paper
- 14.8:1 AAA
- On night
- 1.0:1 Decorative
-
Night
Navy
#2c3b4d--petrolMap routes and text selection. Blue Fantastic. Not used for buttons. Never on earth night (1.6:1).
- On paper
- 9.4:1 AAA
- On night
- 1.6:1 Decorative
-
Night
Mist
#c5c2ba--mistSecondary text on earth night (10.1:1).
- On paper
- 1.5:1 Decorative
- On night
- 10.1:1 AAA
-
Night
Dusk
#e4d9c8--duskWarm stone midpoint of nightfall, before earth night.
- On paper
- 1.2:1 Decorative
- On night
- 12.8:1 AAA
-
Earth
Sand
#d69e6b--sandSampled light ochre. Decorative. Not for small text on paper (1.9:1).
- On paper
- 1.9:1 Decorative
- On night
- 7.6:1 AAA
-
Earth
Clay
#b9805d--claySampled sandy clay. Decorative on paper (2.8:1). 5.4:1 on earth night.
- On paper
- 2.8:1 Decorative
- On night
- 5.4:1 AA
-
Earth
Terracotta
#8e4632--terracottaLinks and the focus ring on paper fields. Truffle #a35139 deepened for small text (5.7:1). Not outlined buttons. Never on earth night (2.6:1).
- On paper
- 5.6:1 AA
- On night
- 2.6:1 Decorative
-
Earth
Mahogany
#744537--mahoganyThe dark earth. Map land label, small text on paper (6.6:1), and the button focus ring. Too red for a button fill.
- On paper
- 6.6:1 AA
- On night
- 2.3:1 Decorative
-
Glint
Flame
#ffb162--hazeBurning Flame. A glint on earth night only (10.0:1). Never a fill, never text on paper (1.5:1).
- On paper
- 1.5:1 Decorative
- On night
- 10.0:1 AAA
Proportions, roughly: 70% paper, 20% ink and photography, 8% earth night and navy, 2% earth and flame. Sand and clay are swatches, not text colours.
03
Typography
Bodoni Moda for headlines, Hanken Grotesk for everything else. A high-contrast Didone gives the calm, editorial register; the optical size is capped so hairlines survive at large sizes. Headlines are set in regular weight, upright, in sentence case: no italic or bold first words, no all-caps headlines.
-
Randilen
-
Two ways to stay
-
A veranda over the waterhole
-
Breakfast somewhere remote
-
Six bandas and eight tents on the open plains.
-
The veranda looks out over a natural waterhole where elephants come to drink.
-
Stay · The Lodge
- Pairing
- One serif headline, one sans lead or body, one micro label. Never two serif sizes side by side.
- Labels
- Uppercase, tracked 0.26em, weight 600. Used for eyebrows, navigation, buttons and counters.
- Numbers
- Tabular figures for times, counts and coordinates (05:30, 06 / 13, 3.7225° S).
04
Photography
Photographs carry the brand. Natural light, honest colour and a lot of land. People appear small, busy with something real, never posing for the camera.
- Do
- Early and late light · muted, warm-neutral grade · one clear subject · space for text in the frame · wildlife at a respectful distance.
- Avoid
- HDR, heavy vignettes and orange filters · staged “safari” clichés · crowded vehicles · baited or stressed animals · people photographed without consent.
- Treatment
- Full-bleed or generous crops; fixed ratios (3:2, 4:5, 21:9). Text over images only on a calm area with a soft night scrim.
The Lodge, the Bush Camp and Experiences each take a set of 10–15 photographs.
05
Lines and icons
Hairlines do the structuring that boxes and shadows do elsewhere. Corners stay square. There is no icon set: an arrow, a close mark, chevrons and a menu mark, all drawn as hairlines (1–1.25px).
Hairline · 1px · ink at 14%
Vertical rule · 1px · 72px
Arrow · hairline
Counter · tabular
06
Motion
The site is still. Two motions are allowed: nightfall into the earth-night footer, and the scroll-cue glide. Photographs stay still while the page scrolls. They do not scale, drift or zoom. Both allowed motions stop when the reader asks for reduced motion. The scroll cue holds a static hairline in that case.
- Photographs
- A photograph stays in its frame. Scrolling does not scale it, drift it or zoom it. Nightfall changes the ground around it and leaves the picture where it is.
- Nightfall
- Across the evening chapters the ground moves from paper, through dusk, to earth night #1c1612. The footer is the same colour and continues that night.
- Scroll cue
- A hairline under the word Scroll, with a light that travels the line. It is the other allowed motion. Reduced motion parks the light and does not run the glide.
- Menu
- The open menu uses earth night #1c1612, the same ground as the footer. Text is paper, secondary lines are mist, the current item and the focus ring are haze. The header bar, once solid, stays paper with ink text.
- Galleries
- Arrows sit inside the photograph, vertically centred. From 1024px each half of the image is a click. On a phone the arrows stay narrow and the middle of the image swipes.
- Text without a photograph
- A centred Intro. The eyebrow and heading stay centred. Below 640px the body is start-aligned. From 1024px the heading may run to 900px. The body stays at 36rem.
07
Tone of voice
Plain, specific and warm. Say what is there and let the place do the persuading. British English, short sentences, no superlatives.
Specific, not superlative
Write “Six round bandas face a natural waterhole where elephants come to drink.”
Not “An unforgettable, world-class luxury experience in breathtaking surroundings.”
Quiet confidence
Write “There are no fixed routes. Guides track off-road wherever the sightings lead.”
Not “Guaranteed Big Five sightings on every drive!”
Respectful of people and land
Write “Randilen is leased in partnership with the Maasai communities who live here.”
Not “Meet authentic tribal warriors in their untouched world.”
Personal, not pushy
Write “Tell us when you would like to come, and we will shape the rest with you.”
Not “Book now! Limited availability!”
08
UI examples
Solid buttons are earth night #1c1612 with a paper label (14.8:1). Hover is #3a2c24, still in that brown (11.1:1). Outlined buttons use the same brown for the border and the label, and fill with it on hover. On earth night the solid button turns paper and the outline stays paper. Focus on paper is mahogany; on earth night it is haze. Disabled buttons stay in this brown and fade. Labels never wrap. Cards stay the same size.
Buttons and links
Form fields
Demo only; nothing is sent.
09
How it should feel
The identity starts from the land. What it holds to is the attitude; the material is Randilen’s own.
What it holds to
- Restraint and a lot of white space
- Photography first, text second
- Uppercase, widely tracked navigation and labels
- Outlined, square, uppercase buttons
- Alternating image and text sections with small eyebrows
- A light serif for headlines over a light sans
Randilen’s own
- Bodoni Moda and Hanken Grotesk, not Cormorant Garamond and Outfit
- Paper and earth night, not black, white and gold
- Upright headlines, no italic accent words
- Nightfall from paper to earth night, and the same night in the footer and the menu
- Coordinates, times and counters as quiet detail
- Its own wordmark