culture happens when we're together.

0.1 How to use this hub

• Assets are linked in the footer and throughout the page. For motifs, logos, and palettes: click the asset to open its download panel.
• Automation scripts (where applicable) are linked in the footer. These are optional, not required.
• Use this hub as the framing for any VIVA PHX-related production. When in doubt, request clarification before shipping.

0.2 Background

VIVA PHX is an annual cultural festival built on gathering in Downtown Phoenix, to create and celebrate culture, music, food, art, and spend time together.

VIVA PHX frames culture as more than content delivered to an audience. It is a relational system produced through shared time, movement, and proximity. The festival is not a single stage or single event. It is a network: artists, venues, and audiences forming a temporary circuit across Downtown Phoenix. For six days, the city becomes programmable.

Identity primitives

• Single typeface: TT Neoris Variable
• Hierarchy via scale and weight, not stylistic variation
• Strict baseline and column grid alignment
• Approved colorways only

Fast checks before you export

Primary marks

Two primary marks are supplied: the logo lockup (wordmark + logomark) and the logomark (phoenix mark alone). Do not extract or use the wordmark by itself.

Rules

Clear space: minimum clear zone equals the cap-height of the “V” in the wordmark, on all sides.

Minimum size: full logo 120px / 32mm width. Icon alone 24px / 8mm width.

Don’ts:

• No stretching, skewing, or proportion changes
• No extracting typographic elements as a standalone wordmark
• No recoloring outside approved colorways
• No shadows, glows, or effects
• No cropping the icon mark
• No low-contrast placement

1.1.4 Co-branding constraints

• VIVA PHX logo appears at top or left of any co-branded layout; sponsor marks follow.
• Presenting sponsors may appear near the primary mark but never at equal or greater size.
• Sponsor logos remain in their own approved colorways. Do not recolor sponsor marks to match VIVA PHX palette.
• VIVA PHX clear space rules always apply, regardless of sponsor placement.
• No sponsor logo may be placed within the VIVA PHX clear space zone.

Typeface specification

TT Neoris Variable is the sole typeface of the VIVA PHX identity. Hierarchy is expressed through size and a single axis: weight.

The system uses flush alignment, tight spacing, and scale as the primary organizational tool. Decoration comes from weight and ratio, not additional typefaces.

Licensing note: the typeface cannot be redistributed via the hub. For web use, host licensed files locally. For vendors without a license: request outlined type from production.

Weight tiers

Tracking: display -0.01rem (Illustrator: -12). Body/meta 0rem (Illustrator: +12 for very small if needed).

Type scale

Baseline unit: 12px. The spine uses multipliers of 2 and 3 only: 12, 24, 48, 96, 192, 384 with intermediate steps 18, 36, 72, 144.

1.2.3 Typographic grid system

Baseline unit: 12px. Default layout uses a 12-column grid. Gutters: 12px. Minimum margin: 12px (scale up by multiples of 12).

Extended layouts can use a 24-column grid as a direct subdivision of 12 (each 12-col column equals 2 units in the 24-col grid). Use 24 when you need half-column offsets or finer asymmetric placement.

:root{
  --baseline: 12px;
  --cols: 12;     /* collapses via media queries */
  --gutter: 12px;
  --pad: 24px;    /* multiples of baseline */
}

Primary color tokens

Light / dark mappings

These variables drive the UI and serve as the reference for web production tokens.

/* Light */
--bg-primary: var(--color-offwhite);
--bg-secondary: var(--color-light-grey);
--bg-accent: var(--color-orange);
--bg-accent-muted: var(--color-maroon);

--text-primary: var(--color-black);
--text-secondary: var(--color-maroon-grey);
--text-tertiary: var(--color-mid-grey);

/* Dark */
--bg-primary: var(--color-black);
--bg-secondary: var(--color-maroon-grey);
--text-primary: var(--color-offwhite);
--text-secondary: var(--color-light-grey);
--text-tertiary: var(--color-orange-grey);

Greys as tonal matches

The greys are not “neutrals”; they’re tonal counterparts to the chroma colors to keep motifs from fighting typography.

• Maroon Grey is the b/w version of Maroon
• Orange Grey is the b/w version of Orange
• Mid Grey is the mathematical average of Maroon Grey and Orange Grey

Export / swatch files

Motifs and patterns

Voronoi pattern system (SVG/PNG) and usage rules. Use motif tokens so motif contrast stays intentionally low, this way the voronoi background doesn't interfere with typographic contrast.

Generative / parametric tools

Interactive generator for producing voronoi texture elements, so that repetition of the same voronoi shapes is limited.

Usage constraint

• Motifs should not compete with primary typography. Default to low-contrast motif tokens.
• Motifs function as atmosphere and structure, not illustration.
• When the layout is dense (lineups, multi-tier listings), motif contrast should be reduced further or removed.

2.1.1 Tone

VIVA PHX is confident, thoughtful, and serious.

2.1.2 Language principles

Approved framing

• Center Phoenix: use “Phoenix” or “Downtown Phoenix” as the subject of sentences wherever possible.
• Use connection terms: connection, culture, communication, sharing, relation, cooperation.
• Fallback line: culture happens when we’re together.

Prohibited framing

• Avoid colonial language: “takes over”, “conquers”.
• Avoid framing as solely a music festival; it’s broader cultural production and connection.
• Avoid consumptive language; foreground relationship and proximity.

2.1.3 Boilerplate copy

Short

VIVA PHX is an annual cultural festival built on gathering in Downtown Phoenix, to create and celebrate culture, music, food, art, and spend time together.

Why support VIVA PHX?

VIVA PHX connects local culture with national attention. Independent artists, established acts, scenes, audiences, and partners converge across a curated set of venues. The result is density, discovery, and measurable cultural impact.

Why multi-venue and multi-day?

Culture doesn’t happen in isolation. It builds in clusters, scenes, and neighborhoods over time, together. The multi-venue model preserves local identity while increasing exposure. It enables organic discovery and lets artists plug into a broader ecosystem without losing context.

Brand name usage

• Always set the name as VIVA PHX in all caps.
• Use full name wherever possible.
• “VIVA” alone is acceptable only infrequently in long body text; never in headlines or headers.
• PHX should appear whenever possible (the project is about Phoenix).

Programs

• Arts events: DEEP TIES

5.1 File organization

Naming convention: {brand}_{asset}_{variant}_{colorway}.{ext}

• kebab-case for nonsemantic separation (replacing spaces)
• underscores for semantic separation (brand vs asset vs variant vs colorway)
• Example: viva-phx_logo_primary_negative.svg

viva-phx-brand-kit/
├── 01-identity/
│   ├── logo/
│   │   ├── primary/
│   │   ├── alternate/
│   │   └── co-brand/
│   ├── typography/
│   ├── color/
│   └── graphic-language/
│       ├── voronoi/
│       └── generator/
├── 02-voice/
└── 05-assets/
    └── viva-phx_brand-kit_full.zip

Per-section bundles

Full kit

Single downloadable archive containing the complete directory structure and all assets.

6.1 Version & changelog

6.2 Contact

Creative Direction & Design Questions?

max@eros-works.com

Requests

• Missing assets or format conversions
• Approval on non-standard applications
• Outlined type requests for vendors without TT Neoris licensing