Brand
Brand & Style Guide
Download the club logo and presentation template, and see how we use color, type and imagery.
Logo
The club seal
Use the seal as supplied. It carries the five Nordic flags, so it needs no extra decoration. Pick the version that suits the background, then download it in the format you need.
-
Seal, white center
The default. A white center keeps the shield readable on any background.
-
Seal, see-through center
Navy ring with a transparent center. Best on white or light backgrounds.
-
Seal, white ring
White ring with navy lettering. For navy, dark or darkened photo backgrounds.
-
Shield, white lettering
No ring, white lettering. For dark backgrounds where a ring would feel heavy.
-
Shield, name stacked
Name above and web address below in white. For wide, dark spaces like banners.
Which format?
- SVG or PDF for print, signs, shirts and anything that gets resized.
- PNG for web, email, documents and slides. All PNGs have transparent backgrounds.
- AI for designers who need to edit the artwork in Illustrator.
Using it well
- Keep clear space around the logo of about a quarter of its width.
- Scale proportionally. Don't recolor, rotate, stretch or add effects.
- On photos, darken the photo first so the logo stays readable.
Color
The Nordic palette
The five Nordic countries share equal prominence. No single country color is "the" brand color: rotate through all five on covers, section dividers, charts and highlights. Click a swatch to copy its hex code.
-
Denmark
-
Finland
-
Iceland
-
Norway
-
Sweden
White is shared by every flag, so it is a neutral, not a country color.
How to use it
Rotate, don't pick a favorite
Across a deck or a page, give each country a turn. On slides, use the Title, Section and Statement versions for all five.
Solid fields, light or dark text
Use a country color as a full background with white text. Sweden yellow takes dark text instead.
Neutrals carry the rest
Light gray pages, white cards, near-black text. Color is for emphasis, not for every surface.
Accessible pairings
| Color | Hex | White text | Dark text | Use as |
|---|---|---|---|---|
| Denmark red | #C8102E | 5.9:1 · AA | 3.0:1 · large text only | Background with white text |
| Finland blue | #002F6C | 12.9:1 · AAA | 1.4:1 · too low | Background with white text |
| Iceland blue | #02529C | 7.8:1 · AAA | 2.3:1 · too low | Background with white text |
| Iceland red | #DC1E35 | 4.9:1 · AA | 3.6:1 · large text only | Labels and accents with white text |
| Norway red | #BA0C2F | 6.6:1 · AA | 2.7:1 · too low | Labels and accents with white text |
| Norway blue | #00205B | 15.5:1 · AAA | 1.1:1 · too low | Headings and dark backgrounds |
| Sweden blue | #005293 | 8.0:1 · AAA | 2.2:1 · too low | Background with white text |
| Sweden yellow | #FECB00 | 1.5:1 · too low | 11.6:1 · AAA | Background with dark text, never as text on white |
WCAG 2.x contrast ratios. Body text needs 4.5:1; large text (24 px, or 19 px bold) needs 3:1.
Web scales
Blue, from blue-50
to blue-950.
brand
and primary
are #144993 (blue-900); buttons use blue-700.
Neutral (zinc): text, borders and surfaces.
Typography
Plain, sturdy type
The site uses the system sans-serif, so it loads instantly and looks native on every device. Weight, tracking and line height travel together as five tokens; only the size changes with the screen.
700 · −0.022em · 1.05
Young Scandinavians
700 · −0.015em · 1.15
Upcoming events and gatherings
600 · −0.01em · 1.25
Midsummer dinner at the cabin
400 · 0 · 1.6
Join us for an evening of food, songs and friends. Members can bring one guest, and tickets are limited so reserve early.
600 · +0.05em · 1.3 · caps
Events · Tahoe cabin · Members
- Headings use a token; don't set weight, tracking or leading by hand.
- One page title (
h1) per page. - Uppercase only for the eyebrow tier, at small sizes.
- Never uppercase headings or body text.
- No extra-heavy weights; use bold (700).
- Left-align paragraphs; center only titles.
Components
Buttons and badges
Square-ish corners, generous touch targets, and one clear primary action per view.
Buttons
Blue is the primary action. Outline for secondary, gray for neutral, red only for destructive actions.
Badges
Small soft tint with dark text. Say it in words; never rely on color alone.
Icons come from Heroicons (outline), added with the
<.icon name="hero-…" />
component. On slides, place a white outline icon on a solid Nordic-color circle; the slide template has an icon library ready to copy.
Imagery
Real people, real gatherings
Use candid photos of members: bonfires, dinners, the cabins. Avoid stock imagery. Warm light and group shots fit best.
Midsummer at the beach
Charts
Data in the Nordic colors
When bars or slices are countries, color each with its own country. For other series, use the fixed order below.
By country
Denmark · Finland · Iceland · Norway · Sweden
Series order (four at most)
No chart title (the heading does that), light gray gridlines, labels 11 px or larger, no 3D.
Presentations
Slide template
A PowerPoint template carries all of this: Title, Section and Statement slides in all five country colors, Five columns and Process layouts, chart styles and an icon library.
Using Google Slides? Download the .pptx, upload it to Google Drive, and open it with Google Slides.
Slides use Arial in place of the system font so they look the same on every computer.
Documents
Document template
A Word template for letters, reports, agendas and minutes, with the brand styles built in. It works in Google Docs too.
Using Google Docs? Upload the .docx to Google Drive and open it with Google Docs, then make a copy for each new document.
What's inside
- Title, Subtitle, Heading 1 to 3, Quote, lists and tables, all as real styles.
- The logo and club name in the page header, web address and page number in the footer.
- A meeting agenda and minutes page with an action items table.
- Callouts in all five Nordic colors.
Writing tips
- Use the heading styles instead of making text big and bold by hand.
- Navy headings, blue sub-headings and near-black body text keep contrast high.
- Use country colors for callouts and charts, not for long passages of text.
- Save as PDF before sending, so fonts and layout stay put.
Social & web
Images for posts, pages and email
Start from a ready-made canvas, add your headline or photo in any design tool, and export at the size you need.
Profile pictures and link preview
Link preview image
1200 × 630 px, the size used when a link is shared on Facebook, Slack, iMessage and LinkedIn.
PNG 1200 × 630Post canvases
Text-free backgrounds in the five Nordic colors with the seal in the corner. Keep text clear of the seal and away from the edges.
Common image sizes
| Where | Size (px) | Notes |
|---|---|---|
| Link preview (Open Graph) | 1200 × 630 | Facebook, LinkedIn, Slack, iMessage |
| Instagram or Facebook post | 1080 × 1080 | Square. 1080 × 1350 for a portrait post |
| Story or Reel | 1080 × 1920 | Keep text out of the top and bottom 250 px |
| Facebook event cover | 1920 × 1005 | Photo or color field with a short headline |
| Profile picture | 1080 × 1080 | Shown as a circle, so keep the seal centered |
| Email header or banner | 1200 px wide | Shown at 600 px; keep it under 200 KB |
| Slides | 1920 × 1080 | 16:9, the same as the slide template |
| A4 or US Letter | 2480 × 3508 / 2550 × 3300 | 300 dpi, for print |
Platforms change their sizes from time to time, so check before exporting a final file.
Email signature
Select the preview and copy it, or use Copy HTML for apps that take raw HTML, then paste it into your email app's signature settings. Replace the name, role and email address.
|
Your Name
Your role, Young Scandinavians Club
|
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #18181b;">
<tr>
<td style="padding-right: 16px; vertical-align: top;">
<a href="https://ysc.org"><img src="https://ysc.org/images/brand/logos/ysc-logo-seal-white-center-512.png" width="96" alt="Young Scandinavians Club" style="display: block; border: 0;"></a>
</td>
<td style="vertical-align: top; line-height: 1.4;">
<div style="font-size: 16px; font-weight: bold; color: #00205b;">Your Name</div>
<div style="color: #52525b;">Your role, Young Scandinavians Club</div>
<div style="margin-top: 6px;"><a href="mailto:[email protected]" style="color: #0c69e9; text-decoration: none;">[email protected]</a> · <a href="https://ysc.org" style="color: #0c69e9; text-decoration: none;">ysc.org</a></div>
</td>
</tr>
</table>Before you publish
A quick checklist
Looks right
- Logo from this page, not recolored or stretched, with room around it.
- Country colors rotated, not one color everywhere.
- Real photos of members, darkened if text sits on top.
Readable by everyone
- Text contrast of at least 4.5:1. Check the pairings table above.
- Never rely on color alone; add a word or label.
- Alt text on every image that carries meaning.
- Links say where they go ("Buy tickets"), not "click here".
Ready to share
- Exported at the right size, and under 500 KB for the web.
- Dates, times, prices and links checked once more.
- Documents saved as PDF; slides exported if they will be emailed.