Wilderness Interactive

---
version: alpha
name: Wilderness Interactive
description: Most software runs. Most marketing spends. Ours compound.
colors:
  primary: "#f0ebe3"
  secondary: "#b9724a"
  tertiary: "#c4653a"
  neutral: "#0a0f0a"
  border: "#374151"
  brand-cafe-royale: "#6c4c2c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 56.7px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Cormorant Garamond
    fontSize: 54.4px
    fontWeight: 300
    lineHeight: 1.02
    letterSpacing: -0.022em
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.2
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 17.6px
    fontWeight: 300
    lineHeight: 1.63
    letterSpacing: 0.3em
rounded:
  sm: 8px
spacing:
  xs: 12px
  sm: 24px
  md: 40px
  lg: 52px
  xl: 88px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 38px
    height: 57px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 38px
    height: 57px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Wilderness Interactive: Copper Accents on a Firefly Dark Canvas

## Overview

A dark, atmospheric system with high contrast and spare ornament. The tone is technical and editorial: confident, restrained, and text-forward. Audience includes founders, technical buyers, and creative leads; the interface should feel deliberate rather than flashy. Spacing is generous and sections breathe—use density only for data clusters and navigation.

## Colors

- **primary (#f0ebe3):** Cream for text, headlines, and icons on dark surfaces.
- **secondary (#b9724a):** Muted clay accent for subtle highlights and hover states.
- **tertiary (#c4653a):** Copper action color for CTAs, key words, and emphasized headings.
- **neutral (#0a0f0a):** Near-black base for page backgrounds and cards.
- **border (#374151):** Blue-slate divider for fine rules and input outlines.
- **brand-cafe-royale (#6c4c2c):** Deep coffee tone for brand flourishes and subdued accents.
- **surface ({colors.neutral}):** Surface color equals the neutral background on this site.
- **on-surface ({colors.primary}):** Default text/icon color on dark surfaces.

## Typography

- Headline Large — Inter, 56.7px, weight 300, 1.2 line-height, 0.15em tracking. Used for hero and key section titles in uppercase for a spaced, architectural feel. Inter is a Google font; substitutes: system-ui, Roboto.
- Headline Medium — Cormorant Garamond, 54.4px, weight 300, 1.02 line-height, -0.022em tracking. Used for display subheads and italic emphasis. Cormorant Garamond is a Google font; substitutes: EB Garamond, Spectral.
- Headline Small — Inter, 20px, weight 300, 1.2. For navigational labels, small section headers, and captions.
- Headline XS — Inter, 18px, weight 300, 1.22. For meta text and micro-CTAs.
- Body MD — Inter, 17.6px, weight 300, 1.63 with 0.3em tracking. Apply to eyebrow lines and all-caps metadata; reduce tracking to normal for long paragraphs if accessibility testing requires.

## Layout

Spacing follows a compact-to-generous stepped scale: 12 / 24 / 40 / 52 / 88px. Use XL (88px) between major sections, LG (52px) for intra-section groups, and MD (40px) for paragraph stacks. The layout reads as a centered single column with occasional two- to four-column clusters for metrics and product links. Wide side gutters preserve the dark canvas and let the copper highlights breathe.

## Elevation & Depth

No shadows are used; all measured levels are none. Hierarchy is achieved through contrast (cream on near-black), weight/size changes, and the copper accent. Borders in #374151 may separate dense data or inputs. Ambient depth comes from motion (the particle field), not elevation.

## Shapes

Corners are mostly square. Buttons explicitly use 0px radii for a utilitarian, engineered look. Cards take the single rounded value at 8px, signaling contained content without softness elsewhere.

## Components

Buttons and Card
- Primary Button: #c4653a background, #f0ebe3 text, 0px radius, 16px×38px padding, 57px height.
- Secondary Button: transparent background, #f0ebe3 text, 0px radius, 16px×38px padding, 57px height.
- Link Button: #c4653a text, 0px radius.
- Card: #0a0f0a background, #f0ebe3 text, 8px radius, 16px padding.

### Top Navigation
- Inter 18–20px, wide tracking; links in #f0ebe3 with hover in #b9724a. Right-aligned primary button uses the tertiary copper.

### Hero Title Lockup
- Line 1 in Inter 56.7px #f0ebe3; line 2 accentuates with #c4653a. Centered with ~LG (52px) below to the descriptor.

### Particle Field ("Emergence Engine")
- Full-bleed dark surface (#0a0f0a) with small copper points; sits between sections as living illustration. No borders or shadows.

### Eyebrow Line
- Prefixed with a middle dot. Inter 17.6px, 0.3em tracking, #f0ebe3; MD (40px) space to the following heading.

### Metrics Grid
- 2–4 columns. Large numerals in Inter, supporting labels in Headline XS. Use #f0ebe3 text; highlight key deltas in #c4653a.

### Blockquote
- Body MD for quote with increased line-height; author line in Headline XS. Optional left rule in #374151.

### Product Rail
- Compact links with short blurbs in a flowing line; product names may use Cormorant italics. Hover accents in #b9724a.

### Footer
- Single-row links in #f0ebe3 at 18px; no shadows; ample SM–MD spacing and square edges throughout.

## Do's and Don'ts

- Do keep backgrounds on #0a0f0a and body text on #f0ebe3 for contrast compliance.
- Do reserve #c4653a for CTAs, emphasized words, and key numbers; use #b9724a only for subtle hovers.
- Do set buttons with 0px radius and 16px×38px padding; mixing rounded and square actions weakens the voice.
- Do use the eyebrow line pattern (• label) with 0.3em tracking to introduce sections.
- Don't introduce drop shadows; use tonal contrast or the border color #374151 for separation instead.
- Don't stack dense paragraphs without at least MD (40px) vertical rhythm—readability depends on breathing room.

## Agent Prompt Guide

Quick color reference
- Text: #f0ebe3
- Background: #0a0f0a
- Border: #374151
- Accent/CTA: #c4653a (secondary accent #b9724a)

1) Build a dark hero with dual-tone title
- Page background #0a0f0a. Centered hero block with XL (88px) top/bottom padding.
- Title line 1: Inter, 56.7px, weight 300, letter-spacing 0.15em, color #f0ebe3, uppercase.
- Title line 2: same settings, color #c4653a.
- Subtitle: Inter, 20px, color #f0ebe3 at 70% opacity. Primary button: 57px height, 16px 38px, 0px radius, background #c4653a, text #f0ebe3.

2) Section with eyebrow and Cormorant display
- Eyebrow: Inter 17.6px, 0.3em tracking, color #f0ebe3, leading middle dot prefix, MD (40px) space below.
- Heading: Cormorant Garamond 54.4px, weight 300, -0.022em tracking, color #f0ebe3 with a single emphasized word in #c4653a italics.
- Body: Inter 17.6px, 1.63 line-height, color #f0ebe3.

3) Case-study metrics grid
- Container with LG (52px) vertical padding, background #0a0f0a.
- 3–4 columns. Numbers: Inter 56.7px #f0ebe3; labels: Inter 18px #f0ebe3 at 70%.
- Use #c4653a to color the numerals for the most important KPI. No shadows; optional thin rule #374151 between items.

4) Product teaser row with link buttons
- Each item uses a Card: background #0a0f0a, text #f0ebe3, 8px radius, 16px padding.
- Title: Cormorant Garamond 20–24px; blurb: Inter 17.6px.
- Link button style: text #c4653a, 0px radius; on hover shift to #b9724a.

## Similar Brands

- Vercel — Dark, minimal marketing with a single accent; Wilderness is warmer with copper and editorial italics.
- Linear — Precision dark UI and restrained motion; this site is more text-led and serif-friendly.
- Obsidian — Dark aesthetic and high contrast; here the tone is more brand/story than app UI.
- Valve — Atmospheric, game-adjacent visuals on dark backgrounds; Wilderness pairs that mood with B2B clarity.

:root {
  /* Colors */
  --color-primary: #f0ebe3;
  --color-secondary: #b9724a;
  --color-tertiary: #c4653a;
  --color-neutral: #0a0f0a;
  --color-border: #374151;
  --color-brand-cafe-royale: #6c4c2c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56.7px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: 0.15em;
  --text-headline-md-size: 54.4px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.02;
  --text-headline-md-tracking: -0.022em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 17.6px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.63;
  --text-body-md-tracking: 0.3em;
  --font-inter: "Inter";
  --font-cormorant-garamond: "Cormorant Garamond";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 52px;
  --spacing-xl: 88px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 16px 38px;
  --button-primary-height: 57px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 16px 38px;
  --button-secondary-height: 57px;
  --button-link-text-color: var(--color-tertiary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Most software runs. Most marketing spends. Ours compound.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.941,
          0.922,
          0.89
        ],
        "hex": "#f0ebe3"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.725,
          0.447,
          0.29
        ],
        "hex": "#b9724a"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.769,
          0.396,
          0.227
        ],
        "hex": "#c4653a"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.059,
          0.039
        ],
        "hex": "#0a0f0a"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-cafe-royale": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.424,
          0.298,
          0.173
        ],
        "hex": "#6c4c2c"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.059,
          0.039
        ],
        "hex": "#0a0f0a"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.941,
          0.922,
          0.89
        ],
        "hex": "#f0ebe3"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 52,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 88,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 56.7,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": 0.15,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Cormorant Garamond",
        "fontSize": {
          "value": 54.4,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.022,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 17.6,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": 0.3,
          "unit": "em"
        }
      }
    }
  }
}