The source of truth for the CanAsia visual identity: colour, type, logo, photography, icons, spacing, shape, and depth. Follow these decisions whenever you create or update anything for CanAsia.
The foundation section records the purpose, vision, and mission that guide every CanAsia touchpoint — from the website's own voice to how a delegation is welcomed on the ground.
To give the Pacific Rim's games and interactive media industries a standing place to trade, not just meet. CanAsia merges Signals' Beta Lounge and XP Indie Games Biz — the two rooms where deals already got done — into one B2B marketplace, so Asian delegations and Canadian studios can find each other on purpose instead of by chance.
A permanent trade corridor between Asia and North America's interactive sector, anchored in British Columbia and renewed every year — the natural B2B counterpart to GDC for any partner building a Pacific Rim strategy.
Run one focused week alongside Web Summit Vancouver that turns a global stage into a working marketplace: real delegations, real meetings, and a program built around outcomes, not just attendance.
The character of CanAsia's communication: clear, confident, and open to the Pacific Rim community it brings together.
The CanAsia Game Summit lockup is supplied in four approved colourways. Use the light and navy versions on light surfaces, and the dark and white versions on dark surfaces. The artwork is supplied, not retyped.
Photography should document the people, places, and work around the CanAsia program. This grid is queried from the media library so it reflects the current source material.
Static icons support navigation, utility actions, and short inline references without competing with the content.
chat-centered-dots
calendar-blank
camera
cloud-arrow-down
file-archive
folder-dashed
gear
globe-hemisphere-east
heart
house
image-broken
lightbulb-filament
lightning-a
lock-key
map-pin-area
moon
music-notes
paint-brush-broad
The palette is organized by job: Dark anchors body text and framing, Deep blue carries the primary identity, Sky blue provides a lighter supporting accent, and pink is reserved for calls to action.
Neutral surfaces create a quiet field for the programme's content, with dark reserved for strong contrast and framing.
These three blues form the primary CanAsia colour family: Dark anchors the identity and body text, Deep blue carries the main brand presence and regular supporting copy, and Sky blue provides a lighter supporting note on dark surfaces.
A restrained neutral scale supports readable text, quiet fills, dividers, and borders without competing with the brand colours.
Pink is reserved for calls to action, giving the clearest interactive moments a distinct visual signal.
Supporting colours are limited to illustration and wordmark work so the everyday interface stays focused.
Form and message states. Not brand colours, so reused verbatim from this workspace's own standing convention rather than invented per client.
Typography has separate visual roles rather than one label per HTML level. Use these names consistently in CanAsia designs, content, and implementation. Every size below renders from the live --type-* token — nothing on this page is a recreated specimen.
Lead paragraph, the first sentence in a section.
Body copy, the standard reading size.
Scale check, min–max, must stay in this order at every viewport width:
Display 48–88 > Title 36–60 > H2 32–52 > H3 22–32 > Lead 20 > Body/Label 14 > Micro 12
Two line-height bands, not one setting per element: tight (.82–.98) for every Display/H1/H2/H3, where the glyphs are large enough that loose leading reads as broken, and loose (1.4–1.55) for Lead/Body/Body small, where reading comfort matters more than compactness. A heading using the loose band or a paragraph using the tight one is a bug, not a style choice.
Alignment follows content shape, not position on the page: hero and section-intro copy that's short and centred stays centred; anything that's a real paragraph (About, Why Now, prose subheadings, card copy) is left-aligned, because justified-center prose is harder to read past 2 lines. Vertical rhythm after a heading is one shared rule — margin-top on the next element, from the spacing scale below, never a one-off px value guessed per section.
Veneer ships as a single 400-weight face, and we always use it at that weight. Every H1, H2, H3, Display heading, and CTA on this site is rendered at font-weight: 400. Weight is expressed through size, colour, and layout, not through the browser inventing thicker strokes on a face that was never designed for them. The audit above also found two live violations of this exact rule (.section__heading and a bare <strong> stat label both forcing bold on Veneer) — fixed the same pass.
Fake-bold synthesis (any font-weight above 400) fills in VeneerThree's texture cracks and reads blobby, especially above ~90px and on dark backgrounds. Because we don't use it, we don't need to design around it.
Documented identically in colors_and_type.css, llms.txt, and the theme README.md. Change all four together if the rule ever changes.
Spacing sets the rhythm, radius gives each edge its character, and elevation establishes hierarchy. These are fixed scales, so every layout decision can be reused instead of re-invented.
The space between elements. Use the defined scale rather than inventing values between the steps. Smaller values control component rhythm; larger values separate content groups and sections.
Radius gives each interface edge a consistent character, from square structural surfaces to soft cards and pill-shaped actions.
The visual difference between surfaces. Flat is the default; borders and shadows are used only where they clarify hierarchy, grouping, or interaction.
