Brand Guidelines
The source of truth for the MagsBC visual identity — colour, type, logos, icons, spacing, and the rules around them. Follow these whenever you create or update anything for MagsBC.
What MagsBC stands for.
Purpose
To connect readers across British Columbia with the writing, art, and reporting produced by the province's magazine publishers, and to give those publishers the shared infrastructure — distribution, professional development, advocacy — that keeps independent magazines viable.
Vision
A BC where independent magazines reach the readers who want them, in the venues that fit them, without depending on the traditional channels that no longer serve either side well.
Mission
Building programs that solve the problems working publishers actually have — non-traditional newsstands in cafés, museums, and campuses; a speaker directory that raises up underrepresented voices; professional development for the next generation of magazine workers.
Voice & mood
Two orientations.
MagsBC has a horizontal and vertical lockup. Use the version that fits the space and the background — horizontal for wide layouts, vertical when the room is taller than it is wide. On dark surfaces, use the reverse (white) file.
Warm, grounded, unmistakably BC.
The palette holds Deep Olive as its ink, Coral as its call to action, and Yellow, Teal, and Soft Green as the surfaces that mark different content types. Each colour has one job on the site and does not do the others.
Surface.
The backgrounds every layout sits on. Pages, cards, and dark sections. White is the default page, card, and navigation surface. The category bands use the named brand colours below.
Primary.
The brand colours. Used for accents, section bands, and anything that should read as the brand rather than as generic UI.
CTA & Links.
Two colours, two jobs. Coral is the filled-button colour and the approved Writing & Visual Arts band colour. Link Orange is the plain-text link colour used inline. Never swap them.
The approved website system.
The homepage establishes the hierarchy used throughout the site. Leads are 20px at weight 400 (18px on small screens), body copy is 16px, and controls and captions are 14px. Section headings are 28–36px, page titles 40–48px, and the homepage display 40–64px. Use sentence case for navigation, links, and buttons.
Navigation and buttons
White navigation on content pages; a transparent overlay on the animated homepage. Mobile navigation opens from a Menu button, with separate submenu controls and Escape to close. Filled buttons use Coral with Deep Olive labels, 14px / 700 text, pill corners, and 16px by 32px padding. Search uses one joined pill outline with a 48px-tall input and Deep Olive submit segment. Inline links use Link Orange; category exploration links are Deep Olive and underlined.
Magazine covers
The shared cover filter is saturate(.58) sepia(.12) contrast(.96) brightness(1.02), with a 5% Deep Olive wash. Hover restores the original colour. Category grids use a 2px olive stroke at 45% opacity; hover lifts a cover 5px with a soft shadow. The hero uses a lighter 0.6px stroke and fades covers with distance; no blur.
Motion and readability
Continuous backward movement belongs only in the homepage hero. Category grids have one staggered entrance, lasting 650ms with 45ms between covers. Reduced-motion preferences disable entrances and automatic hero movement. Wheel scrolling remains available for normal page navigation. Headings use compact line heights (1.08 for the hero, 1.18 for page and section titles, 1.3 for card titles); prose uses 1.65. No white box sits behind the hero copy.
Category colour mapping
Arts & Culture: Yellow. Writing & Visual Arts: Coral. Business & Community: Teal Light. Lifestyle & Leisure: Soft Green. These surfaces always carry Deep Olive text.
Roboto, one family, three weights.
MagsBC uses Roboto for display, prose, and interface text. JetBrains Mono is reserved for utility labels. The weight decides the role — 400 for body, 700 for headings and prose emphasis, 900 for the loudest moments. No serif accent.
Space. Shape. Depth.
The three scales nobody looks at directly. Spacing sets the rhythm, radius gives every edge its character, and elevation decides what sits above what. All three are fixed lists, so each decision is made once and reused.
Spacing.
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.
Website spacing: the homepage hero has 96px of space before the introduction (64px on screens up to 800px). Major homepage sections use 80px vertical padding, reduced to 48px on those smaller screens. The introduction and service cards form one group, with a combined 72px gap on desktop and 48px on mobile. Directory grids end with 80px / 48px of breathing room. Adjacent coloured sections each retain their own padding.
Keep 24px outer page gutters, 24px card padding, 24px directory grid gaps, and 12px filter gaps. Article paragraphs and form controls use the smaller spacing steps; do not apply section-sized spacing to product details. Product images and details have a 24px row gap.
Mobile stacking: at 800px and below, article sidebars move beneath the main content, magazine covers sit above their profile text, and membership options stack. At 600px and below, homepage service cards and news cards use one column. Visual cover grids retain two columns, and magazine browsing rows remain horizontally scrollable.
Magazine scroll arrows: 44px circular controls with a 2px coral outline; coral fill on hover and keyboard focus. Disabled arrows are dimmed. Article paragraphs use 24px spacing, headings 40px above / 16px below, and lists 8px between items. Images use responsive larger WordPress sizes where available.
Directory filters: colour transitions take 180ms; results fade in and rise 8px over 280ms, with a short stagger. Filtering uses the loaded directory without waiting for a network request and preserves normal links, browser history, keyboard focus and result announcements. Reduced-motion settings remove the movement.
Radius.
The curve applied to an interface edge. Smaller radii belong to dense controls; larger radii belong to cards and surfaces. Buttons and tags use the pill.
Elevation.
The visual difference between surfaces. Flat is the default; borders and shadows are used only where they clarify hierarchy, grouping, or interaction.
Static for utility and inline use.
Phosphor, Light weight, always this suffix. A curated sample below; the full library ships alongside for browsing.
newspaper
book-open
article
quotes
pen-nib
users-three
hand-heart
chats-circle
megaphone
storefront
buildings
coffee
map-pin-area
microphone-stage
chalkboard-teacher
graduation-cap
mountains
tree
boat
magnifying-glass
calendar-blank
envelope-simple
phone
compass
lightning
heart
sparkle
Example content, not real content.
The grid below applies the system above to twenty Instagram post formats. It's inspiration for what the brand looks like on real content shapes — every headline, quote, and stat in it is a placeholder, not copy to publish as-is.
