# Julkee × Lempee — Brand
> The brand itself, for every medium: strategy, logo, colour, type, imagery, voice, applications and presentations.
> Web build, components, motion and interaction live in **jxl-web.md**; CSS variables in **jxl-tokens.css**.
> Sources: online brand book (guidelines + material bank, primary) · JulkeexLempee_brändikirja_2024.pdf · JxL masterdeck (66 slides)
> Updated: 2026-09-23 · Replaces jxl-brand-core.md, jxl-components.md (non-web parts) and jxl-slides.md

---

## HOW TO USE THIS FILE

- Rules marked **Always / Never** are binding. Everything else is guidance.
- `FLAG` marks an open question or a known conflict between sources — don't resolve it silently, ask.
- The guidelines exist to give direction, not to restrict creativity or trying new ideas (2024 brand book foreword).

---

## 1. CONCEPT AND SLOGAN

| | |
|---|---|
| Concept | **Suora asiantuntija** (The Direct Expert) — real expertise and easy, human collaboration at the same time, not as a compromise |
| Slogan | **Jatkuvan markkinoinnin toimisto** (The agency for continuous marketing) — the only approved external tagline |
| Core line | "Tärkeintä että viesti tulee sanotuksi." — the point is that the message gets said |

### Values — the three anchors
| Value | EN | One line |
|---|---|---|
| Asiantuntijuus | Expertise | Opinions are backed by know-how, not confidence alone. If we say it, we can defend it. |
| Asiakasymmärrys | Customer understanding | Understanding the client's customer is core craft, not a research phase to get through. |
| Arjen helpottaminen | Easing everyday life | Good marketing should make the client's week easier, not add another meeting to survive. |

Three, not four ("Läpinäkyvyys" was dropped to match the 2024 brand book).

---

## 2. LOGO

### Versions and files (material bank → Tunnus)
| Version | Black | White | Colour |
|---|---|---|---|
| Logo — wordmark "Julkee × Lempee" | `logo-black.svg` | `logo-white.svg` | — |
| Logo + loop — stacked lockup | `logo-loop-black.svg` | `logo-loop-white.svg` | — |
| Loop — brand mark alone | `loop-black.svg` | `loop-white.svg` | `brandmark-gradient.png` (528 px, special use) |

Every black/white version downloads as SVG or as a 2400 px transparent PNG. The colour loop exists only as a PNG.
The colour loop file is 528 px wide — that is the asset in use; keep it to screen sizes it holds up at.

### Which version, when
- **Everyday logo = black or white.** Black on light grounds, white on dark ones. Pick whichever stands out best from its background.
- **Colour loop = special use only** — large cover visuals, merch. Everyday materials stay black and white.
- On photos: white on dark tones, black on light tones. On Julkee Blue / Lempee Red: white only.

Note: the 2024 PDF called the colour loop + wordmark the primary logo; the current brand book deliberately reverses that — black/white is the everyday logo.

### Clear space
Leave at least the loop's own height free on all four sides. No text or graphics inside it.

### Always / Never
**Always**
- Black logo on light grounds, white on dark
- Enough clear space; small sizes only while the lettering stays legible
- Use the supplied files — never redraw the loop or rebuild the gradient
- The wordmark may stand on its own (navigation, footers, small spaces) — as in the 2024 brand book

**Never**
- Stretch, distort or rotate the loop (the site may replay its draw-and-fill build on hover; that is not rotation)
- Combine the logo with other text, such as the old "Markkinointitoimisto" lockup
- The colour logo on a coloured background
- The loop in non-brand colours


The "Julkee × Lempee" lettering is bespoke, baked into the logo file — it is not Work Sans and never typed live.

---

## 3. COLOUR

| Name | HEX | RGB | CMYK (approx) | Use |
|---|---|---|---|---|
| Julkee Blue | `#0B63F6` | 11, 99, 246 | C96 M60 Y0 K4 | Primary accent, CTA buttons, expert card backgrounds |
| Lempee Red | `#D00931` | 208, 9, 49 | C0 M96 Y76 K18 | Secondary accent, emphasis blocks, dividers |
| Infinity Black | `#000000` | 0, 0, 0 | C0 M0 Y0 K100 | Default text, dark backgrounds, the page canvas |
| Off-White | `#EFEFEF` | 239, 239, 239 | C0 M0 Y0 K6 | Neutral surface, editorial backgrounds |
| White | `#FFFFFF` | 255, 255, 255 | C0 M0 Y0 K0 | Card surfaces, reversed type on dark/colour |

- **Ratio, roughly 60 / 30 / 10** — neutral base, one dominant brand colour, one sparing accent. Often, less is more.
- **Gradient** (blue → purple → red): **backgrounds only, and sparingly** — e.g. a glow behind long text or a B&W brand photo; not every time. (The colour loop carries the same gradient as artwork, not as a style to reuse.)
- Colour can code categories (e.g. service areas on julkeexlempee.fi) — keep the same code in every channel.

**Always:** white type on blue, red or black · one brand colour dominates, the other is used sparingly · the gradient as a background, sparingly
**Never:** blue and red as equal-weight backgrounds in one layout · colours outside the palette without sign-off · the gradient on text, buttons or graphics

---

## 4. TYPOGRAPHY

**Work Sans, one family, no exceptions.** Google Fonts: https://fonts.google.com/specimen/Work+Sans — load the variable font (`wght@100..900`) so weights can animate.
Fallback: `'Work Sans', 'Helvetica Neue', Arial, sans-serif`

| Weight | Use |
|---|---|
| 400 Regular | Body text, captions, long-form copy |
| 500 Medium | Sub-headings, UI labels |
| 600 SemiBold | Section headings, emphasis |
| 700–900 Bold → Black | Hero headlines, CTAs, ads |

**Always**
- **Headings always in capitals** (ALL CAPS) — web, ads, social, slides
- Hierarchy through size and weight contrast, not colour
- The font may play (the site's specimen breathes between Black 900 and Regular 400) — text must still read cleanly

**Never:** a second typeface, anywhere, for any reason

---

## 5. IMAGERY

The stars are the experts themselves: stylised black-and-white portraits of real moments and emotions.

| Always | Never |
|---|---|
| Black and white, high contrast | Full-colour portraits as the main image |
| Real situations, expressions and emotions | Generic stock photos |
| Dark clothing that keeps attention on faces | Flat, low-contrast lighting · over-retouched commercial portraits |

- Signature pairing: a B&W cut-out person on Julkee Blue (or Lempee Red).
- Mood: energetic · authentic · direct · expressive · confident · human.
- Colour photos only as a rare contrast, e.g. low-effort everyday posts in a mostly B&W feed.
- **Formats** (material bank crops any photo to these on download): **16:9** hero/banner · **4:5** portrait social · **1:1** social square.

---

## 6. VOICE

Always unpretentious, enthusiastic and above all expert.
Keywords (shown in the reader's language on the site): **Suora** (direct) · **Konstailematon** (no-nonsense) · **Innostava** (inspiring) · **Asiantunteva** (expert) · **Inhimillinen** (human)

| We say | We don't say |
|---|---|
| "Tämä on mainos. Ja koska sinä näet tämän, se on kohdennettu oikein." | "Olemme innovatiivinen kumppani kokonaisvaltaisiin markkinointiratkaisuihin." |
| "Tästä mainoksesta pyörii viisi erilaista versiota. Varsinaista ABCDE-testausta siis." | "Hyödynnämme synergioita asiakaslähtöisten konseptien luomiseksi." |

### Expert comments (a signature format)
Short, sharp comments that show personality, expertise and timeliness at once:
- Name + role, a question as the headline ("Syöksy uusiin kanaviin?", "Vanhassa vara parempi?", "Tavoitteena tehokkuus")
- 2–4 sentences with a clear opinion — ideally a twist at the end

### Real lines from our ads (the guidelines' line generator draws from these)
"Oonhan mä teidän lempiasiakas?" · "Löytyykö sinulta hieno brändi autotallista?" · "Et muuten usko! Tehokas mainos koukuttaa heti ensimmäisellä sekunnilla." · "Näistä olemme ylpeitä!" · "Ota tämä taktiikka käyttöön." · "Smile! You're on camera!" · "Näin me katsomme markkinointia."

- Finnish first; English selectively in ads and international contexts.
- CTAs: a short imperative ("Ota yhteyttä", "Tutustu", "Lue lisää") — never "klikkaa tästä".

---

## 7. APPLICATIONS

At its best, the union of image, type and colour is an effective brand message.

### Social (1:1, 4:5) and web stories (9:16)
- Solid brand-colour or off-white background, B&W cut-out person, ALL-CAPS headline (2–3 text elements max)
- Gradient glow along the bottom edge as the recurring device
- Small white or black wordmark, bottom corner; the loop can crop off an edge as a graphic
- Reusable formats: expert intro, reference/case, expert comment, carousel, "Pölli tästä" checklist story
- Remix content across formats (post → carousel → story → blog)

### Events and print
- The 6th-anniversary poster series sets the tone: black or off-white grounds, a thin framed border, one strong illustration or B&W photo (dice, the Hiilikellari stoker, Media Mogulit's two-faced bust, the crest), a short confident line, the wordmark and loop small at top or bottom
- Playful, a little retro, never busy; the loop can appear as the hero graphic (the fading row of loops, the loop in a palm)
- Party and event invites keep the same system

### Merch
- Follows the brand look but is free to play with style
- The loop is always findable somewhere on the product
- Current line: IDEA Lager, Inspiraatio IPA, flame socks, cap, tote, sticker set

### Presentations (masterdeck)
| Slide | Structure |
|---|---|
| Cover | Full-bleed B&W photo, dark bottom gradient, large white ALL-CAPS headline bottom-left, wordmark bottom centre |
| Section divider | 100% Julkee Blue, one ALL-CAPS word centred, white header strip with logo |
| Content | White or black; ALL-CAPS headline top-left; one idea per slide (table, diagram, or text + B&W cut-out person) |
| Team / experts | Black; B&W portraits on blue squares with name, role, experience |
| Reference / case | Client logo top-left, visual right (mockup or product), bullets left, blue pill tags |
| End / CTA | White with gradient glow bottom-left, "Mitä haluat tehdä seuraavaksi?", contact, two pill buttons, B&W cut-out right |

- **Header strip on every slide**: white; section names left (active in bold black); black wordmark + loop top-right
- **Logo on slides**: black monochrome only — the colour logo never appears in the deck
- **Tables**: blue header row with white bold caps; JxL's own column highlighted blue; black footer row for guarantees
- **Diagrams**: flat, blue for active/recommended, off-white/grey outline for the rest — no 3D, no shadows
- **Never**: gradient slide backgrounds, a second typeface, sentence-case headlines, body text filling the slide, bullets nested deeper than two levels

---

## 8. FILES

| Need | Where |
|---|---|
| Logos (all versions, SVG/PNG) | Material bank → Tunnus |
| Brand photos, cropped to 16:9 / 4:5 / 1:1 | Material bank → Valokuvat |
| Ad examples, videos | Material bank → Mainosesimerkit, Video |
| Original 2024 brand book PDF, deck template | Material bank → Dokumentit |
| Web build rules and motion | jxl-web.md · jxl-tokens.css |
| Creative Cloud library "Julkee x Lempee" | For designers (2024 brand book) |