Saab

Visual

---
bcp_version: "2.0.0"
file_type: visual
parent: https://registry.encodedbrands.ai/saab-b8a26b99/.well-known/brand.md
last_updated: "2026-10-29"
---

# Visual

Saab looks like a uniform: one logotype, one typeface, a dark grey and yellow pairing, square corners, and natural, documentary photography. The Brand Portal frames each element that way ("Military uniforms use colour…", "Stitching holds a uniform together, and typography holds our visual identity together"). The result should feel calm, technical and confident, never loud.

Three evidence layers are kept apart. Agents must not blend them silently.

1. **Declared [P].** Saab's public Brand Portal (https://brand.saab.com/point/en/saab/), chapters Logotype, Colours, Typography, Imagery, Icons, Digital colours, Motion principles. Pages say "Copyright 2022 by Saab"; the Imagery chapter says "Updated 2026.02.01". Checked 2026-10-27. `brand_declared`.
2. **Official files [F].** *Saab_logopack_2022.zip*, linked from the Logotype chapter, and the public Media Bank logotype files. `brand_declared` as assets.
3. **Observed [W].** www.saab.com as served on 2026-10-27: `main.min.css` (88 KB), computed styles at 1440x900 and 390x844. `observed`. These describe one surface, not a design system.

Login-only portal material (templates, the internal icon library, the Uniform UI kit, restricted Media Bank) was not accessed. Rules that live only there are unknown here.

## Logo

The logotype is the symbol (the griffin roundel) plus the wordmark SAAB. "These elements must always be used together – never separately" [P Logotype]. There is "only one official logotype for the entire company."

**Default to monochrome.** "While the coloured logo remains part of our identity, we mainly use the monochrome logo (black or white)" [P]. The full-colour version (navy, red, gold, silver) is in the pack but is the exception.

```yaml
logo:
  primary:
    description: "Saab logotype, monochrome. Symbol plus SAAB wordmark, always together, always horizontal. Default for all Saab-branded work [P Logotype]. Files are unmodified extracts from Saab_logopack_2022.zip."
    variants:
      - format: svg
        url: "https://drive.google.com/file/d/1plK73PA9bBhHAR0gPGMdZE0aFClcY6Oj/view"
        sha256: "5a0757cbd2cb6421f3efd1fdc24e8f052a8d47f359f39209fee77639213ee8b4"
        background: "transparent; for white, light grey #F3F3F2 or calm light imagery"
        treatment: "monochrome black (Saab_black.svg)"
        purpose: "Default mark on light grounds."
      - format: svg
        url: "https://drive.google.com/file/d/1zh24WYelYqq8c_t62h7Qr6MweTkDg8JJ/view"
        sha256: "b406bc5f61c2dc2555c489d1c823972a2995382763506435614e5c00ae8f23a1"
        background: "transparent; for dark grey #373532 or calm dark imagery"
        treatment: "monochrome white (Saab_neg.svg)"
        purpose: "Default mark on dark grey and over photography."
      - format: png
        url: "https://drive.google.com/file/d/1-VCz8GToqL8-fWuIn_biKN7WZeQp-21r/view"
        sha256: "533c6959ec9273c667c671a2eadae662d1a5bfca739bb859bf266f97d5a5edb0"
        width: 1174
        height: 364
        background: "transparent"
        treatment: "monochrome black (Saab_black.png)"
        purpose: "Raster fallback; never upscale past 1174 px wide."
      - format: png
        url: "https://drive.google.com/file/d/1pH00tCaenEst3sxS-KOICljCwaHZWp5r/view"
        sha256: "532f697367e4e102af2c3339c3ee544fc92d70052aa93709570015914f265f46"
        width: 1174
        height: 364
        background: "transparent"
        treatment: "monochrome white (Saab_neg.png)"
        purpose: "Raster fallback on dark; never upscale."
  full_colour:
    description: "Coloured logotype (navy disc and wordmark, red griffin, gold crown and SAAB, silver ring). Part of the identity but secondary: use only where a colour logo is specifically required, on white or light calm grounds."
    fallback: primary
    variants:
      - format: png
        url: "https://drive.google.com/file/d/1isONdleLYi2YsxJ7WqMUBQKEmRcc6v2j/view"
        sha256: "b3976d9161c188fd3ba0941ec08ec7737285fcb16c70871caa49884895bf5cd5"
        width: 2270
        height: 720
        background: "transparent; light grounds"
        treatment: "full colour RGB (Saab_rgb_2270x720.png)"
        purpose: "Colour logo on white."
      - format: png
        url: "https://drive.google.com/file/d/1_pwDddYvGkPdNd3cuWO2wSL8RbjDadvw/view"
        sha256: "23250754d52f89804add81d47f3f0426b87fec49e8d9273a24af5753f5a9022f"
        width: 2270
        height: 720
        background: "transparent; dark grounds"
        treatment: "full colour negative RGB (Saab_rgb_neg_2270x720.png)"
        purpose: "Colour logo on dark."
      - format: eps
        url: "https://drive.google.com/file/d/1ClFiHX7-RoBnCwvK1EyipyQ6AkUsbZM3/view"
        sha256: "bf0fa4a67284006b84510b641149ff32969193060136deada7b21f48692f2d03"
        background: "light"
        treatment: "full colour CMYK (print)"
        purpose: "Print production only."
logo_usage:
  clear_space:
    rule: "Always maintain clear space around the logotype [P]. The public chapter gives no numeric value; the measured rule sits in Saab's templates (login only). Until confirmed, keep at least the roundel's height free on every side."
  approved_backgrounds:
    - type: solid_color
      color_token: surface_dark
      note: "White monochrome logo."
    - type: solid_color
      color_token: surface_light
      note: "Black monochrome logo."
    - type: solid_color
      color_token: surface_white
      note: "Black monochrome or full-colour logo."
    - type: photographic
      min_contrast_ratio: 4.5
      note: "Only on 'calm, unobtrusive areas of imagery' [P]."
  forbidden_backgrounds:
    - type: patterned
      note: "Busy imagery or graphics behind the logo [P: solid colour blocks or calm areas only]."
    - type: solid_color
      color_token: accent
      note: "Inferred: no Saab surface places the logo on yellow; avoid until confirmed."
  forbidden_modifications:
    - "separate the symbol from the wordmark, or use either alone"
    - "alter, distort, stretch, crop or redraw"
    - "rotate or set vertically (always horizontal)"
    - "recolour, including using logo colours (navy, red, gold, silver) anywhere outside the logo"
    - "place inside body text"
    - "move it in templates where placement is fixed"
    - "drop_shadow, glow, outline, container_shape"
    - "animated effects on the mark (in film the logo appears whole and still in the outro)"
    - "use an icon as a logo for a product, project or campaign"
  generation_policy: official_assets_only
  generation_instructions:
    - "Never draw or approximate the griffin roundel or the SAAB wordmark. Place the supplied file."
    - "Placement: upper right as host of content; lower right as sender in advertisements; centred on standard lightboxes and roll-ups; upper left on wide lightboxes and roll-ups [P]."
  evidence_status: brand_declared
```

The saab.com header uses a different inline SVG (`#CDCDCD` ring and wordmark on a `#34322E` disc, light on the charcoal bar) [W]. Treat it as the web implementation, not a fourth logo.

## Colour

"The dominant colour pairing is dark grey and yellow" [P Colours]. Dark grey stands for "neutrality, strength and pragmatism"; yellow for "human creativity, energy and innovation". Blue and red support them and exist "to draw people's attention to important information", mainly in UI. Light grey and sand "are not brand colours as such, but functional colours". **Logo colours are never used outside the logo.**

Three sources give slightly different values for the same colours. The table keeps them apart; use the digital values on screen and the print values in print.

| Colour | Print / brand chapter [P] | Digital theme [P Digital] | saab.com CSS [W] |
| --- | --- | --- | --- |
| Dark grey | #373737, PMS 447C | #373532 (text, dark bg) | #34322E |
| Yellow | #FFB600, PMS 7549C | #FAB900 (CTA primary) | #FFB838 (hover #FA9900) |
| Blue | #004C97, PMS 2945C | #004C97 (CTA secondary) | #004C97 (links, blue buttons) |
| Red | #DA291C, PMS 485C | #DA291C (invalid) | #DA291C (form errors only) |
| Light grey | #D9D9D6, Cool Gray 1 | #F3F3F2 page bg, #E3E3E1 container | #F3F3F2 page, #D9D9D6 rules |
| Sand | #B4AA98, PMS 7529C | #E0DCD6 container 3 | #E9E5E0 stone band |

```yaml
color:
  tokens:
    primary:
      hex: "#373532"
      role: primary
      semantic_name: "Saab dark grey"
      description: "Dominant brand colour. Text on light, dark-theme background, footer, header bar. Print reference #373737 / PMS 447C."
      perceptual_descriptors: ["warm charcoal", "near-black with a slight brown cast", "not pure black"]
      avoid_confusion_with: ["#000000", "navy #041E42 from the logo"]
      evidence_status: brand_declared
    accent:
      hex: "#FAB900"
      role: accent
      semantic_name: "Saab yellow"
      description: "The partner to dark grey and the primary call-to-action colour across Saab digital products. Print reference #FFB600 / PMS 7549C."
      perceptual_descriptors: ["warm amber-yellow", "signal, not sunshine"]
      usage_rule: "Use in small, deliberate doses: primary buttons, key figures, a short rule under eyebrows, active nav item. Never as a large page ground behind body text."
      avoid_confusion_with: ["logo gold PMS 873", "warning yellow #FFE100"]
      evidence_status: brand_declared
    secondary:
      hex: "#004C97"
      role: secondary
      semantic_name: "Saab blue"
      description: "Supporting colour. Secondary CTA, links. Draws attention to important information."
      usage_rule: "Never the dominant colour; never the logo navy."
      evidence_status: brand_declared
    critical:
      hex: "#DA291C"
      role: critical
      semantic_name: "Saab red"
      description: "Supporting attention colour; in UI it means invalid/error."
      usage_rule: "Sparingly. Never decorative, never the logo red."
      evidence_status: brand_declared
    success:
      hex: "#24A148"
      role: success
      description: "Digital 'valid' state only."
      evidence_status: brand_declared
    caution:
      hex: "#FF6700"
      role: warning
      semantic_name: "Caution"
      description: "Digital 'caution' state only."
      evidence_status: brand_declared
    warning:
      hex: "#FFE100"
      role: warning
      semantic_name: "Warning"
      description: "Digital 'warning' state only. Not Saab yellow."
      evidence_status: brand_declared
    surface_light:
      hex: "#F3F3F2"
      role: surface
      semantic_name: "Light theme background"
      description: "Default page background (light theme v1). Warm off-white."
      evidence_status: brand_declared
    surface_white:
      hex: "#FFFFFF"
      role: surface
      description: "Containers on light grey; background in light theme v2."
      evidence_status: brand_declared
    container_grey:
      hex: "#E3E3E1"
      role: neutral
      description: "Light theme container 1."
      evidence_status: brand_declared
    container_sand:
      hex: "#E0DCD6"
      role: neutral
      description: "Light theme container 3 (light sand). Functional, not a brand colour."
      evidence_status: brand_declared
    surface_dark:
      hex: "#373532"
      role: surface-inverse
      description: "Dark theme background; containers #5F5D5B and #878684."
      evidence_status: brand_declared
    text:
      hex: "#373532"
      role: text
      evidence_status: brand_declared
    text_inverse:
      hex: "#F3F3F2"
      role: text-inverse
      evidence_status: brand_declared
    meta:
      hex: "#8F918F"
      role: neutral
      description: "Uppercase eyebrow labels, dates and meta text on saab.com."
      evidence_status: observed
  approved_pairs:
    - {foreground: text, background: surface_light}
    - {foreground: text, background: surface_white}
    - {foreground: text_inverse, background: surface_dark}
    - {foreground: accent, background: surface_dark, context: "Headings, key figures and CTAs on dark; the signature pairing."}
    - {foreground: primary, background: accent, context: "Text on yellow primary buttons only."}
    - {foreground: surface_white, background: secondary, context: "Blue buttons."}
  forbidden_pairs:
    - {foreground: accent, background: surface_light, reason: "Yellow text on light grey fails contrast; use yellow as a fill or rule, not as text, on light grounds."}
    - {foreground: surface_white, background: accent, reason: "White on yellow fails contrast; Saab sets dark grey on yellow."}
    - {foreground: secondary, background: surface_dark, reason: "Blue on dark grey is low contrast and is not a Saab pairing."}
```

## Typography

"Aktiv Grotesk is our font family. It's a modern, bold font which says we are confident, clear and the authoritative experts in our industry" [P Typography]. Four weights with italics: Light, Regular, Medium, Bold. In Microsoft Office, substitute Arial (body 10 pt Regular; H1 14 pt Bold; H2 13 pt Bold; line space 1.0) [P].

```yaml
typography:
  families:
    brand:
      family: "Aktiv Grotesk"
      fallback_stack: ["AktivGrotesk", "Arial", "sans-serif"]
      weights: [300, 400, 500, 700]
      styles: [normal, italic]
      source: "Dalton Maag, licensed by Saab; self-hosted on saab.com under /ui/fonts/grotesk/"
      license_note: "Proprietary. Saab's licence scope for third-party use is unknown. Do not redistribute, embed or self-host for non-Saab work without a confirmed licence. Arial is Saab's own declared substitute."
      classification: "neo-grotesque sans"
      character: ["confident", "clear", "authoritative", "technical"]
      comparable_families: ["Arial (declared Office substitute)"]
      usage_rule: "One family for everything. No serif, display or script faces."
      evidence_status: brand_declared
  roles:
    display: brand
    body: brand
    ui: brand
```

Observed weight use on saab.com [W]: **Medium** for headings and buttons; **Light** for long-form body (18/28 desktop, 16/24 mobile); **Regular** for base UI and nav; **Bold** rarely. Headlines are sentence case, never all caps; small eyebrow labels (14/24 Medium, `#8F918F`) are uppercase with slight tracking. Hero H1 about 60–68 px Medium; article H1 45/55.

Portal rules [P]: tighter tracking on large headlines, looser on small type and all-caps; 40–60 characters per line for English body copy, 20–40 for short lines.

## Layout and components

These come from saab.com [W] and the public Digital chapters [P Digital]. They are `observed` unless marked.

- **Square corners.** Every button and card on saab.com has `border-radius: 0`. The one exception is a 35 px pill on the image download chip. Do not round corners.
- **Buttons.** 10 px 20 px padding, 2 px border, Aktiv Grotesk Medium 16 px. Primary: yellow fill, dark grey text. Secondary: blue fill, white text. Outline variants exist for dark grounds. Yellow is primary CTA, blue secondary [P Digital].
- **Themes.** Light (light grey ground with white, light grey and light sand containers) and dark (dark grey ground with dark grey containers) [P Digital]. Shades of grey dominate; colour is used sparingly.
- **Signature details.** A short yellow bar (about 35x4 px) under eyebrows and above article titles; a 4 px yellow vertical rule on blockquotes; a hard offset block shadow `20px 20px 0 #E4E4E2` on featured images (10 px on mobile); charcoal overlay panels (`rgba(52,50,46,.8)`) carrying text over photography; yellow key-figure numbers on dark bands.
- **Grid.** Content container about 86% (1238 px at 1440); body text column 600 px; intro 790 px. Generous whitespace.
- **Icons.** Technical-drawing line or solid icons on a pixel grid; functional, never decorative, and never used as a product or campaign logo [P Icons].

```yaml
layout:
  principles:
    - "Grey-dominant grounds with yellow as the single strong accent."
    - "Square corners on buttons, cards and images."
    - "Full-bleed photography with text on charcoal panels, or on calm image areas."
    - "One idea per section; generous whitespace; text columns near 600 px."
  forbidden_treatments:
    - "rounded cards or pill buttons"
    - "gradients in web UI, glows, neon or glassmorphism (observed on saab.com; the portal's gradient module is a motion and layout device, not a UI fill)"
    - "large yellow page grounds behind body text"
    - "multicolour palettes or the logo colours used as UI colours"
  evidence_status: observed
```

## Imagery

From the Imagery chapter, updated 2026.02.01 [P]. Five categories:

- **Portrait.** Saab people, alone or in teams; staged but "confident, relaxed and approachable"; the person is always the subject.
- **Activity.** People and products "in purposeful action"; employees building and testing; end users in operational settings. "Aim for a documentary feel, with scenes that look natural and unstaged."
- **Detail.** Close perspectives on products, materials, interfaces; precision, texture, "the meeting point between human and technology".
- **Product.** Catalogue (alone on plain or transparent ground), Concept CGI (only for things that do not yet exist or cannot be photographed), and In-domain (the full product in a real, technically correct operational setting; operators only for scale and never dominant).
- **Brand imagery.** Not the technology but "what is worth protecting", what the technology enables: society, trust, legitimacy, responsibility.

```yaml
imagery:
  photographic_style: "Natural, documentary, true to life. Neutral tone and contrast; colour correction within a natural range; natural light preferred, and artificial light must replicate real conditions without stylisation [P]. On saab.com the result reads cool, steel-toned and calm [W]."
  iconography_style: "Technical-drawing icons, line or solid, on a pixel grid; functional only [P]."
  forbidden_treatments:
    - "stylised grading, heavy filters, teal-and-orange looks (only centrally produced campaigns approved by Group Brand & Marketing may grade) [P]"
    - "staged-looking action, posed heroics, explosions, gore or casualties"
    - "CGI presented as a real, fielded product"
    - "operators dominating an In-domain product image"
    - "AI-generated people, aircraft, ships or weapons presented as Saab photography"
    - "soft-focus stock imagery unrelated to Saab's domains"
  photography:
    evidence_status: brand_declared
  video:
    evidence_status: brand_declared
  prompt_fragments:
    - "documentary photograph, natural light, neutral colour grade, true-to-life contrast"
    - "Saab engineer focused on hands-on work, unposed"
    - "complete product in a realistic operational environment, fully visible, sharp"
  negative_prompts:
    - "cinematic grade, lens flare, explosions, dramatic smoke, neon, HDR, glossy CGI look"
  evidence_status: brand_declared
```

Quality floor [P]: full-frame or medium-format stills suitable for large print; film at 4K minimum, interviews at 25 fps.

Rights: Media Bank images are cleared for non-commercial use with credit (for example "Photo: Saab"). Commercial or advertising use of any Saab image, logo or trademark needs Saab's written consent. Encoded Brands example pages are demonstrations, not Saab advertising.

## Motion

From the portal chapters Motion principles and Motion graphics [P]. "Our motion principles are simple and elegant. Most of all, they perform a purposeful role."

- **Straight and simple.** "Just like our layout principle and gradient module, our motion elements move horizontally and vertically." No diagonal, orbital or spinning paths.
- **Energetic and fast, but calm.** Quick enough that nobody waits, never "rushed or frenetic".
- **Clear and meaningful.** Motion points the eye to one spot at a time; avoid showing too much at once. "Every motion should be purposeful, never decorative."
- **Three motion types only:** wipe (revealing new ideas), parallax (depth), transformation (evolving). "Avoid using new motion types."
- **Easing.** Ease-out for incoming elements, ease-in for outgoing; ease-out for user-triggered UI motion. Asymmetric: quicker at the start than at the end. Easing may apply to speed, opacity or scale.

Film and motion graphics [P Motion graphics]:

- On-screen bug in the upper part of the frame, preferably upper right.
- On-screen text flush-left, in white, yellow or black, on the area with most contrast. Not too much text per screen; never cover important action.
- Do not use the gradient module and lower thirds together in one video.
- Subtitles centred, with a slight drop shadow if needed.
- **Outro:** every film ends with the Saab logo, with or without the claim. The claim comes before the logo, never together. Everything centred on full black.

saab.com implements this with `.3s ease` transitions and a hover underline that grows from zero [W].

```yaml
motion:
  character: ["simple", "elegant", "purposeful", "confident", "calm"]
  principles:
    - "Move elements horizontally and vertically only."
    - "Use wipe, parallax or transformation; do not invent new motion types."
    - "Ease-out in, ease-in out; asymmetric easing, quicker at the start."
    - "Point the eye to one thing at a time."
    - "Films end on the Saab logo centred on full black; the claim, if used, appears before the logo, never with it."
  forbidden_treatments:
    - "decorative motion with no purpose"
    - "diagonal, rotating, bouncing or elastic movement"
    - "new motion types beyond wipe, parallax and transformation"
    - "gradient module and lower thirds in the same video"
    - "animated effects applied to the logo mark itself (it appears whole in the outro)"
  reduced_motion_policy: "Not stated by Saab. Encoded recommendation: respect prefers-reduced-motion; content must read fully without motion."
  evidence_status: brand_declared
```

## What an agent should check before shipping Saab visuals

1. Monochrome logo from the files above, symbol and wordmark together, horizontal, on a calm ground, in the right corner for the format.
2. Dark grey and yellow lead; blue and red appear only to flag important information; no logo colours outside the logo.
3. Aktiv Grotesk only if licensed for the job, otherwise Arial; sentence-case headlines; Medium for headings, Light for body.
4. Square corners; no gradients or glows in UI.
5. Natural, documentary photography with neutral grading and correct operational context.