← All docs
Brand System
Branding Guidelines
The visual and verbal system behind Territori. Use this as the source of truth for any UI, document, or communication — from dashboard panels to email digests. Every color, typeface, and phrase here has been chosen to communicate one thing: this is intelligence, not software.
01 · Identity
Logo & Mark
The Territori mark is a conic-gradient circle — five brand colors rotating from 210°. It is the only decorative element allowed to use multiple colors simultaneously. The wordmark is set in Fraunces weight 500, sentence case. Never alter the gradient, never reorder the colors.
Territori
Category intelligence for hospitality leaders
Territori
Category intelligence for hospitality leaders
Gradient specification: conic-gradient(from 210deg, #B99B6A, #8A9A7B, #2E4E4A, #B85A3E, #D4A85C, #B99B6A)
Inner ring: inset 0 0 0 2px --cream, inset 0 0 0 3px --ink
02 · Color
Color Palette
The palette is rooted in the Pacific Northwest landscape — parchment cream, old-growth teal, oxidized brass, sage understory, harvest gold, and volcanic rust. Colors are semantic: each carries a consistent meaning across the product.
Grounds — surfaces & structure
Paper
#FAF8F5
Card & panel backgrounds
Cream
#F2EFEC
Page background
Cream 2
#ECE7E1
Hover states, note fills
Cream 3
#E4DED6
Pressed states, dividers
Rule
#D9D2C8
Borders, dividers
Rule Soft
#E7E0D6
Subtle card borders
Ink — text hierarchy
Ink
#2B2826
Primary text, headings
Ink 2
#4D4845
Body text, descriptions
Ink 3
#7A736C
Labels, captions, metadata
Brand — five signature hues
Teal
#2E4E4A
Primary action, core entities, nav
Teal 2
#1F3835
Teal hover / pressed
Brass
#B99B6A
Operators & supply, notes accent
Brass 2
#8E7448
Brass hover / section labels
Sage
#8A9A7B
Geography, open/available signals
Sage 2
#6B7D5D
Sage hover / pressed
Gold
#D4A85C
Contested, open questions, alerts
Rust
#B85A3E
Signals, saturated, urgency
Rust 2
#8E3F27
Rust hover / pressed
Rose
#D4967E
Warm accent, secondary highlight
Accent — extended brand
Plum
#6E4E63
Search flag accent, secondary UI tint
Plum 2
#523A4A
Plum hover / pressed
Plum Light
#9B7D8F
Flag gradient start, light tint
Gradient tints — card surfaces & intent fills
Tint Warm
#FBF7EE
General card top gradient stop
Tint Brass
#FBF3E6
Scoping / brass-mode card fill
Tint Brass 2
#F8F0DE
Mid brass tint — paid item top
Tint Brass 3
#F3E9D0
Deep brass tint — paid item bottom
Tint Sage
#EEF2EA
Defending / sage-mode card fill
Tint Teal
#E6ECEA
Repositioning / teal-mode card fill
Tint Gold
#FBF2DF
Gold accent strip endpoint
Pacific accents — map & data visualization
Ocean
#5789A8
Wide-open moats, Pacific / water
Ocean 2
#3F6A86
Deep strait, ocean hover
Ocean Soft
#B9CCD9
Tidal haze, isochrone tints
Saturation spectrum — used on gauge and moat grid
WIDE OPEN
OPEN
CONTESTED
SATURATED
02b · Spacing & Depth
Radius, Shadow & Dark Mode
The spatial system that gives the UI its depth. Use named tokens only — don't introduce new values without documenting them here.
Border Radius Scale
--radius-xs
4px
Tags, chips
--radius-sm
8px
Buttons, pills
--radius-md
12px
Inputs, badges
--radius-lg
16px
Cards, panels
--radius-xl
20px
Screens, stages
--radius-full
999px
Pills, badges
Shadow Scale
--shadow-xs
Search box resting state
--shadow-sm
Preview panels
--shadow-md
Cards, screens
--shadow-lg
Hover state lift
--shadow-xl
Featured / elevated cards
--shadow-focus
Focus ring (brass) — inputs, interactive elements
--shadow-glow
Probing mark glow — dark screen only
Dark Mode Tokens — AEO probing screen only
--dark-deep
#0f0e0d · Chrome bar
--dark-surface
#1f1c1a · Card top gradient
--dark-base
#1a1816 · Page background
Text hierarchy on dark
--dark-ink · Primary
--dark-ink-2 · Body
--dark-ink-3 · Secondary
--dark-ink-4 · Muted
03 · Typography
Type System
Three typefaces, each with a distinct role. Never swap them. The system is legible at every scale and deliberately avoids the "tech startup" sans-only look — Fraunces carries intelligence and editorial authority.
Fraunces — editorial voice & hierarchy
Category intelligence
for hospitality leaders.
Schema Reference
Olympic National Park Gateway
Display44px / 500 / −0.02emPage titles, hero text
Heading 128px / 500 / −0.01emSection headings
Heading 222px / 500 / −0.01emEntity headings, panel titles
Wordmark17px / 500Logo lockup only
Data hero26–36px / 500Score callouts, stat cards
Inter — interface & body copy
Territori analyzes a named geographic catchment on a continuously updated basis. Everything — operators, parcels, scores, narratives — is scoped to a Market. A Market is the unit of subscription.
Body large15px / 400 / 1.7Page intros, definitions
Body13.5–14px / 400 / 1.65Card descriptions, notes
Label12–13px / 500–600Nav items, field labels
Caption10–11px / 700 / +0.14em UCSECTION LABELS, KICKERS
JetBrains Mono — data & code
market_id · avg_unit_spacing_ft · onp-gateway · M01–M15
Field names12px / 500snake_case identifiers
Metadata12px / 400Last updated 2026-04-20
Inline code11–12px on cream-2 bgFK → Markets
04 · Components
UI Components
Buttons, badges, cards, and data tokens. Use these patterns consistently — don't invent new variants without a documented reason.
Buttons
Primary (ink) = one per screen, the singular CTA. Brass = partner/commercial action. Teal = navigation/view action. Outline teal = secondary teal. Ghost = tertiary, destructive.
Badges & Status Chips
Core · MVP
Operators & Supply
Reference
Signal · MVP
Core IP
Post-MVP
Operator Tier Chips — map legend
Primary Anchor
Established
Active STR
Coastal
Tier = map segmentation only. These chips appear in the legend and operator table. Not a quality signal.
Moat Grid — saturation cells
Geo
Sound
Story
Scale
Arch
Hist
Cult
Attr
Scar
Prod
Ocean = wide open · Sage = open · Gold = contested · Rust = saturated. The same spectrum anchors the hero gauge arc.
Flag Gradients — market & search icons
All flags use linear-gradient(135deg, lighter, darker) at 38×38px with a 10px border radius. Each market is assigned a consistent color pair — don't mix pairs across markets.
Note & Callout Patterns
Note (brass left border): Used for explanatory context — design decisions, formula derivations, caveats. Background is cream-2.
Open question (gold left border): Used for deferred decisions and items to revisit at scheduled sessions (T-09, T-21). Background is #FFF8EE.
05 · Voice & Tone
Editorial Voice
Territori speaks like a trusted analyst who has done the work — not a SaaS dashboard that lists features. The voice is precise, opinionated, and never condescending. It names things, takes positions, and leaves the user feeling smarter, not confused.
Write this way
- Name the insight, not the data
- Use active voice, short sentences
- Refer to "operators" not "users" or "customers"
- Positions first, caveats second
- Specific geographic detail ("Olympic National Park," not "the park")
- Numbers with context ("82 on Geography — highest in the market")
Avoid
- Jargon for its own sake ("leverage synergies")
- Passive voice ("it can be seen that…")
- "Users," "customers," "clients"
- Hedging without reason ("this might possibly suggest…")
- Generic startup phrases ("best-in-class," "cutting-edge")
- Lists when prose is more precise
Example rewrites
Your dashboard shows data about the competitive landscape in this area so you can make better decisions about what to build.
Olympic National Park Gateway has five operators claiming Soundscape. Three of them are STRs charging $185 ADR. That gap is your opening.
We utilize AI-powered analytics to surface insights from multiple data sources.
We run AEO probes across Claude, ChatGPT, and Perplexity every week — then show you which operators the machines are already recommending, and which categories they haven't named yet.
Key phrase glossary
| Category | A perceptual position held in the mind of the guest. Not a zoning class. |
| Moat | One of 15 dimensions of competitive defensibility. Scored per property. |
| Market | A named geographic catchment analyzed on a continuously updated basis. |
| Anchor | The primary demand generator a market orbits (e.g. Olympic National Park). |
| Operator | A lodging business — the entity, not the physical property. |
| Study | A frozen, one-time $3k report. Distinct from a Market (the living subscription). |
| Substitutability score | The hero gauge: how differentiated is this market, really? 0 = interchangeable, 100 = irreplaceable. |
05b · Index Specifications
PCI & DPI — Range Definitions
The two hero indices that drive the Opportunity Signal. Colors are drawn from the existing saturation spectrum (Ocean → Sage → Gold → Rust). These definitions are canonical — any UI displaying PCI or DPI values must use exactly these thresholds and colors.
Positioning Convergence Index (PCI) · 0–100
Measures how much operators within a catchment converge on the same positioning. Computed from five sub-axes: keyword overlap, positioning frequency, amenity similarity, price dispersion, review-axis overlap. Higher = more convergence = more opportunity for a differentiated entrant.
0–25
Differentiated
Operators occupy distinct, defensible positions. Hard to displace.
26–50
Recognizable
Some common themes but real variation. Room for sharper positioning.
51–75
Converging ← opportunity zone
Significant overlap emerging. First-mover window opening for a distinct entrant.
76–100
Indistinct
Commoditized. Operators compete on price. Enter only with a radical differentiator.
Sub-axes: keyword overlap, positioning frequency, amenity similarity, price dispersion, review-axis overlap. Each scored 0–100 and weighted equally into the composite.
Demand Pressure Index (DPI) · 0–100+ scale
DPI = daily visitor arrivals ÷ available keys in catchment. Expressed as a 0–100+ index (actual ratio × 100). 100 means demand exactly fills supply; above 100 is a pricing power window. Annual avg is the mean of 12 monthly DPI values.
≥ 100
Demand Exceeds Supply
Pricing power window. Rate up, occupancy will hold. Bar gradient: sage-2 → sage.
70–99
Approaching Capacity
Strong seasonal opportunity. Watch shoulder months. Bar gradient: brass → gold.
0–69
Low Demand Pressure
Demand gap. Off-peak or structurally weak. Bar gradient: rust-2 → rust.
threshold
Supply ceiling line
Rendered as a brass dashed line on the bar chart. Crossing it is good — never use rust/red for this line.
PCI × DPI Opportunity Quadrant
The two indices combine into a 2×2 quadrant that determines the headline opportunity signal. X-axis = DPI (demand intensity), Y-axis = PCI (convergence). The market dot is plotted on this matrix in the OpportunityBanner.
High PCI · Low DPI
Converging on weak demand
Competitive but demand is thin. Not worth entering unless you can move the demand needle.
High PCI · High DPI ★ The opening
Prime entry window
Strong demand, no one owns a category. A distinct entrant has the highest probability of durable positioning.
Low PCI · Low DPI
Quiet niche
Differentiated market with low demand. Fine for a niche operator; not a scale play.
Low PCI · High DPI
Well defended
Strong demand but incumbents hold distinct positions. Entry requires outcompeting on a moat, not just arriving.
Axis direction: higher PCI = more convergence (top of chart). Higher DPI = more demand (right of chart). The opportunity quadrant is always top-right.
06 · Modals & Panels
Dark Surface Components
Two components share the dark surface language: the mini card (first-click summary) and the detail panel (full context). Both use the same dark gradient and brass border system — they read as family. Never use a light/paper surface for these overlay components.
Mini card · first-click summary
Best play: Soundscape
Open detail →
| Background | linear-gradient(160deg,#2B2826,#1b1917) |
| Border | 1px solid rgba(185,155,106,.24) |
| Shadow | 0 1px 0 rgba(185,155,106,.3), 0 10px 36px rgba(0,0,0,.55) |
| Border radius | 14px |
| Accent glow | Radial gold, top-right corner, opacity .18 |
| Primary text | #fff · Newsreader 18–20px for values |
| Secondary text | rgba(237,230,216,.45) |
| Accent value | #D4A85C (gold) · font-weight 600 |
Detail panel · right-side overlay
Parcel 4B
Jefferson Co. · 14.2 acres
✕
Moat grid · ranked plays · permit flags · CTA
| Background | linear-gradient(180deg,#272422,#1C1A18) |
| Width | 320px · position absolute right-0 |
| Left border | 1px solid rgba(185,155,106,.22) |
| Shadow | -6px 0 40px rgba(0,0,0,.45) |
| Backdrop | rgba(27,25,23,.4) · click to dismiss |
| Overflow | overflow-y: auto · scrolls within map bounds |
| Section dividers | 1px solid rgba(237,230,216,.07) |
| CTA button | linear-gradient(90deg,#B99B6A,#D4A85C) · full width |
Connector line
A 1.5px line runs from the bottom edge of the mini card to the parcel it references. Use linear-gradient(180deg, rgba(185,155,106,.55), transparent) — visible near the card, fading to nothing at the parcel. Never a solid line.
Dark text hierarchy
In dark contexts: primary labels #fff · secondary rgba(237,230,216,.45) · caps/labels rgba(237,230,216,.33) · accent values #D4A85C.
07 · Data Visualization
Bar Chart Gradient Direction
All data bars — vertical or horizontal — follow a single gradient rule: light at the base (zero), dark at the full-value end. This convention was established in the S01 DPI monthly bars (180deg, dark → light, with dark at the top since bars grow upward). For horizontal bars in S03 and elsewhere, the equivalent is 90deg, light → dark — the bar starts light on the left and builds to the status color on the right. Never invert this: dark-left / light-right reads as the bar depleting rather than filling.
✓ Correct — light base, dark tip
Saturated, Open and Wide open — all reading left-to-right, building intensity toward the full-value end.
✕ Wrong — dark base, light tip
Dark-left reads as the bar burning down rather than filling up. Avoid.
Dark-surface bars (right panel / mini overlays)
On dark panel backgrounds (#1b1917), use opacity-based gradients: rgba(color, 0.28) → rgba(color, 0.82). Same directional rule applies — dim on the left, full on the right. The ghost/track uses rgba(237,230,216,.08).
08 · Layout
Layout Principles
Every screen follows a shared grammar. Consistency here means operators don't have to relearn the interface when they switch sections.
Sticky topbar
Always cream/paper background with backdrop-filter: blur(10px). Logo left, breadcrumb, spacer, then freshness/meta right. Never taller than 52px.
Max width & gutters
Content max-width 1100–1280px, centered. Horizontal padding 28–32px. Cards use 14px and 20px gap grids. Never full-bleed on desktop — cream margin shows the page depth.
Section anatomy
Every section opens with a kicker (10px UC, brass-2), then a Fraunces h1/h2, then a body-copy intro. Section groups are separated by a 1px rule in --rule. Cards sit on --paper, not --cream.
Dark mode accent
The AEO probe/loading screen uses a near-black ground (#1a1816). It is the only full-screen dark surface. All other screens are cream/paper.