01 — Brand

Logo & Voice

Primary logo — no date lockup

Logo with 2026 event date

Voice & Tone

Confident but grounded. Warm, not corporate. We explain things clearly without hype or jargon. Short sentences. Concrete over abstract.

"From Disruption to Direction" is the anchor — we guide, we don't sell.

02 — Colour

Palette

Sampled from the VIATEC lanyard and the Prompt Victoria logo. The purple → teal → green gradient is the signature brand expression; orange is the attention colour reserved for primary actions.

Core

Navy

#2B2D7E · --pv-navy

Teal

#00A8B5 · --pv-teal

Green

#4FB84D · --pv-green

Orange

#F58220 · --pv-orange

Gold

#FBB040 · --pv-gold

Coral

#E8423A · --pv-coral

Neutrals

Ink

#0F1024 · --pv-ink

Graphite

#3A3C52 · --pv-graphite

Slate

#6B6E85 · --pv-slate

Line

#E4E6EF · --pv-line

Canvas

#F7F8FB · --pv-canvas

Signature Gradient

Prompt Victoria Gradient

linear-gradient(135deg, #2B2D7E 0%, #00A8B5 55%, #4FB84D 100%)

03 — Typography

Type System

Two typefaces, loaded from Google Fonts. Space Grotesk handles display, headings, buttons and nav. Inter handles body, captions and forms.

H1 · Display / 64·48·36

From Disruption to Direction

H2 · Section / 48·36·28

What Is Prompt Victoria?

H3 · Subsection / 28

World-Class Speakers. Grounded in What Works.

H4 · Card / 22

Track 1 — Start Here

Eyebrow · 14 / 600 / upper · w/ prompt mark

Standard eyebrow for every section heading. The chevron + blinking underscore (>_) is a terminal prompt, echoing the event name and the AI/developer audience. Use this pattern on every new mockup.

Default · on light background November 5, 2026 · Victoria Conference Centre

Dark background · gold variant November 5, 2026 · Victoria Conference Centre

Eyebrow markup · copy-paste

<span class="pv-eyebrow pv-eyebrow--prompt">
  <svg class="pv-eyebrow-prompt-mark" aria-hidden="true" viewBox="0 0 28 16">
    <path d="M4 4 L 11 8 L 4 12" fill="none" stroke="currentColor"
          stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
    <line class="pv-eyebrow-prompt-cursor" x1="15" y1="12" x2="23" y2="12"
          stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </svg>
  Section Label
</span>

Default mark colour is var(--pv-orange) on light backgrounds. On dark sections (e.g. pv-bg-ink), add style="color:var(--pv-gold);" to both the outer <span> and the <svg>. Only the underscore blinks; the chevron stays static. Respects prefers-reduced-motion.

Lede · 18 / 400

Vancouver Island's largest AI conference returns. A full day of practical learning, honest conversation, and real connections for professionals and businesses navigating the age of AI.

Body · 16 / 400

AI is moving fast. For most businesses and professionals, it can feel impossible to keep up. New tools appear daily. The headlines swing between utopian and apocalyptic. And somewhere in the middle, real people are trying to figure out what any of this actually means for their work, their teams, and their future.

Small · 14 / 400

No spam. Just the good stuff. Unsubscribe anytime.

04 — Buttons

Actions & CTAs

Primary — Orange

The single highest-priority action per view. Reserved for Register / Notify Me / Keep Me Posted.

Register Now Notify Me When Registration Opens Keep Me Posted

Secondary — Navy

Supportive actions that deserve weight but not attention. Used next to a primary.

Learn More Meet the Speakers

Ghost — Outline

Tertiary actions on a light background.

See All Speakers View Agenda

Ghost Inverse — On Dark / Gradient

For use over the signature gradient or dark image hero.

Register Now Learn More About the Event

05 — Forms

Inputs & Fields

First Name

Email Address

Message

06 — Spacing

Scale

Use these tokens exclusively — no arbitrary pixel values in layouts. Vertical rhythm keeps every page coherent.

4 · s-1

8 · s-2

12 · s-3

16 · s-4

24 · s-5

32 · s-6

48 · s-7

64 · s-8

96 · s-9

07 — Elevation & Radius

Surfaces

Shadow SM

Default card rest-state. Subtle separation from canvas.

Shadow MD

Newsletter card, elevated panels, hover state on primary cards.

Shadow LG

Modal / menu overlays. Use sparingly — heavy lift.

Radius SM · 4px

Fields, tag chips.

Radius LG · 12px

Cards, images, panels.

Radius Pill · 999

Buttons, pill chips.

08 — Iconography

Feature Icons

Feature icons are always filled with the signature gradient — no line-art, no flat colours, no bitmap glyphs. One recipe so every three-up feature grid on the site reads as part of the same set.

Envelope

General inquiries, press, email channels.

Map pin

Venue, travel, directions.

Users group

Organizers, community, team.

Rules

Style: filled only. Icons are solid gradient silhouettes — never stroke-based line-art, never flat single colour.
Dimensions: always viewBox="0 0 64 64". CSS renders each SVG at 64×64 inside .pv-feature__icon.
Palette: one <linearGradient> per icon using the signature stops (#2B2D7E · #00A8B5 · #4FB84D). Gradient goes top-left to bottom-right (x1=0 y1=0 x2=64 y2=64).
Gradient IDs: must be unique on the page — prefix with pv-grad- followed by the page and feature slug, e.g. pv-grad-contact-speakers.
Cutouts: use fill-rule="evenodd" on compound paths when an icon needs holes (envelope flap, map-pin dot, ring).
Artwork: one clear silhouette per card — envelope, microphone, map pin. Keep the body chunky enough to read at 64 px.
Never: stroke-based line icons, white fill, container circles, emoji, or bitmap images inside .pv-feature__icon.

Copy-paste template

<span class="pv-feature__icon" aria-hidden="true">
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="pv-grad-{page}-{slug}"
        x1="0" y1="0" x2="64" y2="64"
        gradientUnits="userSpaceOnUse">
        <stop offset="0%"   stop-color="#2B2D7E"/>
        <stop offset="55%"  stop-color="#00A8B5"/>
        <stop offset="100%" stop-color="#4FB84D"/>
      </linearGradient>
    </defs>
    <!-- Single filled silhouette: -->
    <path fill="url(#pv-grad-{page}-{slug})"
          fill-rule="evenodd"
          d="..."/>
    <!-- Or multiple pieces under one <g>: -->
    <g fill="url(#pv-grad-{page}-{slug})">
      <!-- shapes here -->
    </g>
  </svg>
</span>

09 — Shared Components

Preview

Each of these layout pieces lives in its own HTML file so subsequent page mockups can drop them in directly.

header-nav.html

pre-footer.html

footer.html