---
version: alpha
name: Raw Palawan — Wilderness Expedition System
description: >-
  Refined brutalism for a Palawan expedition outfit. Sharp corners, hard-edged
  elevation, a palette taken from jungle canopy, glacial water and coastal dune,
  and one variable typeface doing every job.
colors:
  coconut: '#f4f0e6'
  coconut-dim: '#ece7d9'
  paper: '#faf7ef'
  charcoal: '#1a1c1b'
  charcoal-soft: '#404945'
  jungle: '#154539'
  jungle-bright: '#2f5d50'
  teal: '#106872'
  teal-bright: '#1b6e78'
  sand: '#dac4a1'
  sand-light: '#f7dfbb'
  line: '#cdc6b6'
  destructive: '#ba1a1a'
  logo-sun: '#e3b57f'
  logo-wave: '#1f7185'
  logo-leaf: '#1d5f3f'
  background: '{colors.coconut}'
  foreground: '{colors.charcoal}'
  primary: '{colors.jungle}'
  accent: '{colors.teal}'
typography:
  display:
    fontFamily: Anybody Variable
    fontSize: 88px
    fontWeight: '800'
    lineHeight: '0.95'
    letterSpacing: -0.03em
  headline-xl:
    fontFamily: Anybody Variable
    fontSize: 64px
    fontWeight: '800'
    lineHeight: '1.05'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Anybody Variable
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.15'
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Anybody Variable
    fontSize: 24px
    fontWeight: '700'
    lineHeight: '1.25'
  body-lg:
    fontFamily: Anybody Variable
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Anybody Variable
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label:
    fontFamily: Anybody Variable
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1'
    letterSpacing: 0.08em
  label-sm:
    fontFamily: Anybody Variable
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.1'
    letterSpacing: 0.12em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  full: 0px
spacing:
  unit: 4px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 48px
  section-mobile: 80px
  section-desktop: 128px
  container-max: 1280px
components:
  button-primary:
    backgroundColor: '{colors.jungle}'
    textColor: '#ffffff'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    height: 56px
    padding: 32px
  button-primary-hover:
    backgroundColor: '{colors.jungle-bright}'
    textColor: '#ffffff'
  button-secondary:
    backgroundColor: 'transparent'
    textColor: '{colors.charcoal}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    height: 56px
    padding: 32px
  card:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.charcoal}'
    rounded: '{rounded.none}'
    padding: 24px
  input:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.charcoal}'
    typography: '{typography.body-md}'
    rounded: '{rounded.none}'
    height: 56px
    padding: 16px
  chip:
    backgroundColor: '{colors.coconut-dim}'
    textColor: '{colors.charcoal}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.none}'
    padding: 12px
  option-tile-selected:
    backgroundColor: '{colors.jungle}'
    textColor: '{colors.coconut}'
    rounded: '{rounded.none}'
    padding: 24px
  progress-track:
    backgroundColor: '{colors.sand}'
    height: 8px
    rounded: '{rounded.none}'
  progress-fill:
    backgroundColor: '{colors.teal}'
    height: 8px
    rounded: '{rounded.none}'
---

## Overview

Raw Palawan runs remote expeditions in Palawan, Philippines — islands, jungle
and fishing, without crowds or package tours. The identity has to feel like
gear, not like a travel agency: something you would trust on a boat at 5am.

The direction is **refined brutalism with tactile minimalism**. Heavy structural
lines, deliberate whitespace, and high contrast borrowed from natural
landscapes. Every element should read as physical — sturdy borders, unsmoothed
geometry, the textures of stone, moss and iron.

What it is not: no resort gloss, no gradients-as-decoration, no rounded friendly
softness, no stock-photo optimism. The photography carries the beauty; the
interface stays blunt and gets out of the way.

## Colors

Derived from deep forest canopy, glacial water and coastal dune.

- **Coconut `#f4f0e6`** — the primary canvas. A warm off-white that reads as
  paper rather than screen, and holds up in bright outdoor light.
- **Charcoal `#1a1c1b`** — the primary ink, and every structural border.
- **Jungle `#154539`** — primary actions and brand-heavy surfaces. The strength
  of the wild. `jungle-bright #2f5d50` is its hover.
- **Teal `#106872`** — interaction and progress: focus rings, progress fill,
  selected accents. Never used for large fills.
- **Sand `#dac4a1`** — warm accents, eyebrow markers and metadata chips. Grounds
  the palette against so much green.
- **Paper `#faf7ef`** — raised surfaces (cards, inputs) one step above canvas.

Dark bands invert the same contract: charcoal ground, coconut ink, sand accents.

The logo carries three slightly warmer, more saturated colours of its own
(`logo-sun`, `logo-wave`, `logo-leaf`). They are the artwork's colours, not UI
colours — do not use them for interface elements, and do not recolour the logo
into UI green.

Contrast is a hard requirement, not a preference: body text must clear 4.5:1 and
large text 3:1 against its background.

## Typography

**Anybody** (variable) does every job. It is the only typeface in the system.

- Headlines take weights 700–800 with tight, slightly negative tracking for an
  editorial, field-guide feel. Uppercase throughout.
- Body stays at 400 with generous line height, because much of this gets read on
  a phone in daylight.
- Labels are uppercase with wide tracking (0.08–0.12em) so metadata is
  distinguishable from instruction at a glance.

Anybody has no CJK coverage. Japanese, Korean and Chinese fall back to the
platform's own faces, and on those pages uppercase transforms and negative
tracking are switched off — neither applies to CJK. Latin proper nouns inside
CJK text keep their caps treatment.

## Layout

A fluid-fixed hybrid grid, capped at **1280px**.

Spacing runs on a **4px base unit**. Gaps between major sections are large and
deliberate — 80px on mobile, 128px on desktop — to mimic the openness of the
landscape. Anything less and the page starts to feel like a brochure.

- **Mobile:** single column, 16px margins.
- **Tablet:** 2 columns, 24px margins.
- **Desktop:** up to 12 columns, 48px margins, 24px gutters.

Full-bleed photography breaks the container deliberately; text never does.

## Elevation & Depth

Elevation is **tonal stacking and bold outlines**, never soft shadows.

1. **Level 0** — coconut canvas.
2. **Level 1** — paper surface with a 2px charcoal border.
3. **Level 2** — jungle or teal fills that read as pressed into the page.

Shadows are **hard-edged: zero blur**, offset 4–6px, charcoal at ~20%. The
effect is a sticker or a cut-out, not a floating card. Interactive elements move
*into* their own shadow on press rather than lifting.

## Shapes

**Sharp, 0px, everywhere.** Buttons, cards, inputs, chips, toggles, images,
the calendar, the consent bar — every corner is 90°. This is the single most
load-bearing rule in the system: rounding anything breaks the rugged, industrial
read immediately.

The only curves in the identity are inside the logo artwork itself.

## Components

**Buttons.** Primary is a solid jungle fill, white label, 2px charcoal border
and a hard offset shadow; on hover it translates into the shadow. Secondary is
transparent with a 2px charcoal border that inverts on hover. All buttons use
the `label` type style, uppercase.

**Inputs.** 2px charcoal border at 25% on paper, going solid on focus with a
teal focus ring. 56px tall — these get filled on phones.

**Cards.** 2px charcoal border, no radius, no blur. Imagery spans the full
width of its container to keep the grid structural.

**Chips and tags.** Rectangular, coconut-dim fill, charcoal text, uppercase
`label-sm`. Status is shown with an 8px solid square of colour beside the text
— never by rounding the container.

**Selectable tiles.** Unselected: paper with a hard shadow. Selected: jungle
fill, coconut text, translated 2px into its own shadow so selection is felt as
a physical press.

**Progress.** Linear only — teal fill on a sand track, 8px. No circular
spinners; anything indeterminate steps rather than spins.

**Lists.** Thin charcoal dividers. Interactive rows shift background, not shape.

## Do's and Don'ts

**Do**

- Keep every corner square, including on images and third-party embeds.
- Let photography do the emotional work and keep the copy blunt and short.
- Use teal for interaction and sand for warmth; keep jungle for actions.
- Give sections room — the large vertical gaps are part of the identity.
- Put the logo on coconut, charcoal, or a dark area of a photograph.

**Don't**

- Don't round anything. Not chips, not toggles, not avatars.
- Don't use soft or blurred shadows; hard offset only.
- Don't recolour the logo into UI greens, add gradients, outline it, or place
  it on a busy area of a photo.
- Don't stretch, rotate or rebuild the wordmark — the lettering is bespoke
  artwork, not a typeface, and cannot be re-set. Use the supplied vector.
- Don't introduce a second typeface.
- Don't use jungle and teal as large adjacent fills; they vibrate.
- Don't let the logo sit closer to anything than the height of its own sun.