# Okami — Brand Guidelines

> **FOCUS. RELEASE. REPEAT.**
> One pack, two expressions: **Okami Creek** — the range — and **Okami Vision** — the app.

This is the single source of truth for the Okami brand: architecture, logo, color, type,
voice and assets. Copy any block straight into a doc, a ticket, or an AI prompt.

---

## 1. Brand architecture

**Okami** is the world — the pack, the wolf, the archer's pursuit of mastery. It shows up in
two places that share one visual system:

| | What it is | Voice in one line |
|---|---|---|
| **Okami Creek** | The AI‑integrated archery range — a physical facility in Phoenix, AZ. | "Built by archers, forged by community." |
| **Okami Vision** | The archery performance app — score, auto‑score and analyze every arrow. | "Score smarter." |

Okami Vision is made **by Okami Creek**. The range is the home; the app is the tool you bring
to the line. Same green, same black, same mantra — so the two always read as family.

**Shared essence — "The Technical Naturalist."** Precision meets the organic. The world is dark
and immersive, OLED‑black like a rangefinder at dusk; one living sage green carries all the energy
and reads "outdoor mastery," never "industrial warfare." Edges are hard and engineered (0px radius);
the typography is tall, modern and human.

| | |
|---|---|
| **Master brand** | Okami |
| **The range** | Okami Creek Archery Range — Phoenix, AZ |
| **The app** | Okami Vision |
| **Mantra** | FOCUS. RELEASE. REPEAT. |
| **App tagline** | Score Smarter. |
| **Promise** | Track every arrow. Analyze your performance. Own your progress. |
| **Domains** | okamicreek.com · okamivision.com |

**Voice & tone**

- **Precise, athletic, direct.** Short, active sentences. Verbs first — *Track. Analyze. Own.*
- **Of the pack.** Community and craft: "the pack is stronger together," "arrow by arrow."
- **Technical but accessible.** We talk data — totals, averages, trends, personal bests —
  without jargon walls.
- **Confident, never loud.** Calm authority. Let the numbers and the dark space do the work.

**Do** — "Point your camera. View your score." · "Every arrow counted." · "Be first in the pack."
**Don't** — hype words ("revolutionary game‑changer"), exclamation spam, soft/cute copy.

**Messaging pillars (app)**

1. **Digital Scoring** — End‑by‑end. No pen, no paper, no mental math.
2. **AI AutoScore** — Point your camera, view your score. (10‑ring, Vegas 3‑spot, 6‑ring.)
3. **Analytics** — Your progress, quantified. Trends, averages, PBs, gear loadout per round.

---

## 2. Logo & marks

| Mark | What it is | Use it for |
|---|---|---|
| **App icon** (`wolf + target`) | Geometric line‑art wolf head with a concentric archery target on the face; yellow bullseye center. | App stores, home‑screen icon, avatar, primary brand stamp. |
| **Okami Vision mark** | Taller shield‑shaped wolf‑and‑target lockup. | Badges, watermarks, merch, embroidery. |
| **Okami Vision wordmark** | "OKAMI" (white) · "VISION" (sage) + metallic broadhead arrow. | App headers/footers — **dark backgrounds only**. |
| **Okami Creek wordmark** | "OKAMI CREEK" (white) · "ARCHERY" (sage) + broadhead arrow. | Range branding, signage, footers — **dark backgrounds only**. |
| **Wolf & star** | Howling wolf with sand outline reaching a sage star. | Storytelling, illustration, loading/empty states, merch. |
| **Paw** | Dark paw inside a sage ring. | Tiny stamps, favicons, list bullets, loyalty marks. |

**Rules**

- **Clear space:** keep at least the height of the wolf's ear (≈ 25% of the mark) clear on all sides.
- **Minimum size:** app icon ≥ 40px on screen / 12mm print. Wordmarks ≥ 120px / 25mm wide.
- **Backgrounds:** the wordmarks are white + sage — place them only on `#0A0A0A`–`#050505` or a dark scrim.
- **Don't:** recolor the marks, stretch, add drop shadows/glows beyond the approved sage glow,
  rotate, or box them in.

---

## 3. Color

A small, dark‑only system: **one green** (in two shades), a **red accent**, a warm **sand** neutral,
**two darks**, and **one text**.

### Core palette

| Token | Hex | RGB | Use |
|---|---|---|---|
| **Sage** | `#9CCD6D` | `156, 205, 109` | The brand. Primary actions, links, active states, every accent. |
| **Brand Strong** | `#65824A` | `101, 130, 74` | Deep green — gradient ends, borders, hovers, charts. |
| **Accent** | `#ED554B` | `237, 85, 75` | Alerts, destructive, sparing highlight. Red < 1% of any layout. |
| **Sand** | `#DED7CE` | `222, 215, 206` | Warm neutral — illustration outlines (wolf & star), light copy accents. |
| **Base** | `#0A0A0A` | `10, 10, 10` | Page background and all surfaces (OLED black). |
| **Deep** | `#050505` | `5, 5, 5` | Footer, wells, the true floor. |
| **Ink** | `#E0E0E0` | `224, 224, 224` | All text. |

### Color usage — how much of each to use

A rough mix for any screen or page: **~80% near‑black background · ~15% ink text · ~5% sage
accents · red < 1%** (alerts only). The point is restraint — keep the green rare so it stays loud.
Text on sage is always **black `#0A0A0A`**, never white.

---

## 4. Typography

| Role | Typeface | Weights | Notes |
|---|---|---|---|
| **Display / Heading** | **Plus Jakarta Sans** | 700, 800 | UPPERCASE, tight tracking (−0.25 to −0.5px). Hero, H1–H4, buttons. |
| **Body / Data** | **Manrope** | 300, 400, 600, 700 | Paragraphs, numbers, stats. Beautiful tabular digits. |
| **Web default sans** | **Geist Sans** | — | Falls back to Manrope, system‑ui. |
| **Mono / eyebrow** | **Geist Mono** / JetBrains Mono | — | Micro‑labels: UPPERCASE, wide tracking (0.3–0.4em). |

Google Fonts: [Plus Jakarta Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans) ·
[Manrope](https://fonts.google.com/specimen/Manrope) · [Geist](https://fonts.google.com/specimen/Geist)

### Type scale (reference)

| Style | Font | Size / line | Tracking | Transform |
|---|---|---|---|---|
| H1 / Display | Plus Jakarta 800 | 32 / 38 | −0.5 | UPPERCASE |
| H2 | Plus Jakarta 700 | 24 / 30 | −0.25 | — |
| H3 | Plus Jakarta 700 | 20 / 26 | −0.2 | — |
| Body | Manrope 400 | 16 / 24 | 0 | — |
| Data | Manrope 700 | 18 / 24 | 0 | sage `#9CCD6D` |
| Label | Manrope 600 | 12 / 16 | +1 | UPPERCASE |
| Eyebrow | Geist Mono | 10–12 | +0.3em | UPPERCASE |

---

## 5. Iconography

- **Library:** [Lucide](https://lucide.dev) (`lucide-react` / `lucide-react-native`).
- **Style:** outline, 1.5–2px stroke, square‑cut to match the 0px‑radius system.
- **Default:** 20–24px, `#E0E0E0`; active/brand `#9CCD6D`; muted ink @ ~52%.
- **Sample set in use:** `Target` · `Crosshair` · `Camera` · `BarChart3` · `TrendingUp` ·
  `Trophy` · `NotebookPen` · `Sparkles` · `Calendar` · `MapPin` · `Share2`.

---

## 6. Design principles

1. **Dark‑only, OLED‑first.** Build on `#0A0A0A`. No light mode.
2. **Hard edges — 0px radius.** Buttons, cards, inputs, images are square. (Bottom sheets are the
   single exception: `rounded-t-3xl`.)
3. **Sage glass card.** Base fill, a white hairline at ~7%, optional sage glow.
4. **Type does the hierarchy.** UPPERCASE display + wide‑tracked mono eyebrows + calm Manrope body.
5. **Restraint with color.** Black space dominates; sage is the hero. One green, used sparingly.
6. **Black text on sage**, always — accessibility and brand consistency.

---

*Okami Vision is a product of Okami Creek Archery Range. FOCUS. RELEASE. REPEAT.*