Design manual
How to use the ProsessPilotene brand on screen and in print — logos, colours, typography and downloadable originals.
This manual is for everyone using the ProsessPilotene brand: customers, partners, agencies and our own team. It explains what is allowed, what works well and where to find the original files.
This page uses the same components and colour codes as the rest of the website, so what you see always reflects the current brand.
Logo
The mark and wordmark are the core of our identity. Use the original files, give them space and leave them unchanged.
Clear space
Always leave clear space around the logo of at least ¼ of the mark's height on all sides. Keep text, graphics and edges outside this area.
Minimum size
Below the minimum size, use the mark alone without the wordmark. On digital surfaces the mark rotates 180° on interaction. This signature movement must not be reproduced at other angles.
Visual language
The overall visual language should feel precise and geometric. Employer branding allows a more playful, dynamic and approachable expression. In both cases, logo elements may shape the design — reused, never redesigned.
Petal as an image mask
A single petal from the mark can be used to crop staff photos and portraits.
The mark as a pattern
Repeated at low opacity, the mark and the star shape between its petals create a decorative pattern for dark surfaces or employer branding.
Do
- Use the original files from the downloads section
- Positive variant on light surfaces, negative on dark surfaces
- Keep the clear space free of text and graphics
- Use the mark alone where space is limited
Avoid
- Do not use colours outside the palette
- Do not stretch, rotate or mirror the logo
- Do not add shadows, outlines or effects
- Do not place the logo on busy images without a contrasting surface
- Do not redraw the mark or change its proportions
Colours
Four colour families with five levels each, plus neutrals. The values below come directly from the codebase and stay in sync with the implementation.
Green
The core of the brand — the foundation of the entire website.
Pastel
Light surface — page backgrounds and large areas
--brand-green-pastel
Neutral
Muted surface — borders and secondary areas
--brand-green-neutral
Tint
Light accent — highlights and decoration
--brand-green-tint
Primary
Saturated accent — signature elements and fills
--brand-green-primary
Earth
Dark and rich — text and dark surfaces
--brand-green-earth
Purple
The action colour — buttons, links and interactive elements.
Pastel
Light surface — page backgrounds and large areas
--brand-purple-pastel
Neutral
Muted surface — borders and secondary areas
--brand-purple-neutral
Tint
Light accent — highlights and decoration
--brand-purple-tint
Primary
Saturated accent — buttons and actions
--brand-purple-primary
Earth
Dark and rich — text and dark surfaces
--brand-purple-earth
Blue
The calm supporting colour — information and data visualisation.
Pastel
Light surface — page backgrounds and large areas
--brand-blue-pastel
Neutral
Muted surface — borders and secondary areas
--brand-blue-neutral
Tint
Light accent — highlights and decoration
--brand-blue-tint
Primary
Saturated accent — signature elements and fills
--brand-blue-primary
Earth
Dark and rich — text and dark surfaces
--brand-blue-earth
Orange
The warm contrast — delivery, energy and emphasis.
Pastel
Light surface — page backgrounds and large areas
--brand-orange-pastel
Neutral
Muted surface — borders and secondary areas
--brand-orange-neutral
Tint
Light accent — highlights and decoration
--brand-orange-tint
Primary
Saturated accent — signature elements and fills
--brand-orange-primary
Earth
Dark and rich — text and dark surfaces
--brand-orange-earth
Neutrals
Always available alongside every colour family.
White
Cards and content surfaces
--brand-white
Grey 100
Light grey surface
--brand-gray-100
Grey 300
Dividers and borders
--brand-gray-300
Grey 500
Muted details
--brand-gray-500
Grey 700
Secondary text
--brand-gray-700
Grey 900
Body text and logo
--brand-gray-900
Black
Maximum contrast
--brand-black
Colour weighting
Distribute surfaces approximately 60/30/5/5: green dominates, purple carries primary actions, and blue and orange provide small accents — these are not four equal colours.
Combination examples
Approved pairs ready to use.
Within a family
Primary paired with the family's own earth colour — reliable and legible.
Across families
Green should always dominate a mixed combination (see 60/30/5/5) — feel free to add one or two neutrals.
Avoid these combinations
Colours from the same level — two primaries, two tints or two pastels — are too similar in lightness, producing low contrast and a flat appearance. Always combine different levels.
Gradients
Gradients run from primary through tint to pastel within one family — use them instead of solid colours for backgrounds or animation. Do not mix families in a gradient.
Green
Purple
Blue
Orange
How to combine colours
- Never combine two colours from the same level — earth on earth or pastel on pastel provides too little contrast. Combine different levels, such as earth text on a pastel surface.
- One primary colour per surface — the primary level supplies the saturated accent and should not compete with itself.
- Set text in earth colours or grey 900 on light surfaces, and in pastel or white on dark surfaces.
- The red family in the codebase is a functional colour for errors and alerts — it is outside the brand palette and is not used for branding.
All colour combinations on the website are automatically checked against WCAG contrast requirements. The CMYK values above are the official print values from the design system — see the print chapter for colour profiles and other specifications.
Typography
Maison Neue Extended gives the brand its voice. Lato is the freely available fallback anyone can use.
Maison Neue Extended — primary typeface
We help people and processes take flight — safely, efficiently and with room to soar.
Display
Page headings and heroes
Processes that flow
H2
Chapters and sections
Processes that flow
H3
Subheadings
Processes that flow
Body text
Running text
Processes that flow
Detail
Captions and metadata
Processes that flow
Fallback typeface: Lato
Use Lato wherever Maison Neue Extended is unavailable, including email, documents and partner materials.
Lato is freely available through Google Fonts and does not require a paid licence.
Licence
Maison Neue Extended is commercially licensed and must not be shared or redistributed. Partners needing the original typeface for joint materials should contact us. Otherwise, Lato is the approved fallback.
Digital use
How the brand appears in our products — live components, theme surfaces and accessibility.
Live components
Everything on this page — buttons, cards and colours — uses the same component library as the rest of the website. What you see here always reflects the current design.
Theme surfaces
The website changes appearance by business area. Each theme selects palette colours for backgrounds, primary actions, secondary elements, accents and links, while components retain their roles.
General
Default — the home page and pages without a business area.
Light
Background
Primary
Secondary
Accent
Hero panel
Link
Dark
Background
Primary
Secondary
Accent
Hero panel
Link
Marketing
Campaign pages and marketing content.
Light
Background
Primary
Secondary
Accent
Hero panel
The same dark purple in light and dark mode.
Link
Dark
Background
Primary
Secondary
Accent
Hero panel
The same dark purple in light and dark mode.
Link
Sales
Sales processes and proposals.
Light
Background
Primary
Secondary
Accent
Hero panel
Link
Dark
Background
Primary
Secondary
Accent
Hero panel
Link
Service
Customer service and support.
Light
Background
Primary
Secondary
Accent
Hero panel
Link
Dark
Background
Primary
Secondary
Accent
Hero panel
Link
Delivery
Project delivery and operations.
Light
Background
Primary
Secondary
Accent
Hero panel
Link
Dark
Background
Primary
Secondary
Accent
Hero panel
Link
Colour roles are controlled by data-brand-theme on <html> and assigned automatically by business area. Each theme has light and dark variants with different tokens for the same roles, both shown above. Link is the text-safe version of the primary colour (≥ 4.5:1 contrast), not a separate brand colour.
Colour rules
- The palette contains four colour families (green, purple, blue, orange), each with four levels (pastel, tint, primary, earth), plus neutral greys.
- Fill colours (backgrounds, buttons, badges) require 3:1 contrast against the surrounding surface, while text colours require 4.5:1. Fill tokens such as
--primary,--success,--warning,--infoand--destructivemust therefore never be used as text colours — use--linkand the corresponding*-textvariants instead. - Borders and outlines are derived automatically from each theme's foreground and background colours.
- En kontrastport i merkevarepakken verifiserer alle fargepar automatisk i 12 scopes (5 temaer + standard, hver i lys og mørk modus) ved bygg.
- Each theme has its own canvas in light and dark mode: General is green/cream, Marketing is purple, Sales is blue, Service is fresh green, and Delivery is orange.
Grid, spacing and corner radius
Grid
Content sits in one centred column with a maximum width of 90rem (1440px), with side padding that grows with screen width: 16px on mobile, 24px on tablets, 40px on desktop.
Spacing
Two fixed steps cover most spacing between content elements.
16px
Card content
24px
Between cards in a section
Corner radius
Buttons and panels use three fixed steps. Cards have square corners; only the image inside carries the signature shape, with one corner swept out to 48px.
8px
Small
12px
Medium
14px
Large
48px
Signature (images)
Tables
The same colour logic as the Office templates: a primary green header, alternating white and light neutral body rows, and a highlighted total row.
| Period | New | Won | Total |
|---|---|---|---|
| Q1 | 142 | 88 | 230 |
| Q2 | 156 | 94 | 250 |
| Q3 | 171 | 101 | 272 |
| Total | 469 | 283 | 752 |
Digital design principles
- Colours are applied through semantic roles (background, action, link, border) rather than standalone hex values. Every surface then updates when the palette changes.
- All text and background combinations must meet WCAG 2.1 AA — website combinations are checked automatically.
- Motion is restrained and purposeful, such as the logo's 180° rotation, and always respects reduced motion preferences.
Content elements
Content blocks available to editors for articles and pages, rendered with the same components as the live website.
CMS content blocks
Here are the content blocks available to editors writing articles and pages, displayed using the same components as the live website.
Links
The four link types — internal, external, email and telephone — as text and buttons, plus standalone links without surrounding paragraphs.
Read more at external link for details about Sanity.
Email us at post@prosesspilotene.no at any time.
Call us on +47 954 60 000 during opening hours.
See the design manual for the complete brand guidelines.
As a button: external link
As a button: post@prosesspilotene.no
As a button: +47 954 60 000
As a button: the design manual
external linkpost@prosesspilotene.no+47 954 60 000the design manualthe design manualText styles
The nine text styles available in Studio. Rendered headings move down one level: Heading 1 becomes <h2>, Heading 2 becomes <h3>, through Heading 6 at <h6>, so body content never competes with the page heading.
Normal — body text without special formatting.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead — introductory text that stands apart from the body.
Quote — a block quote with a marker line on the left.
Lists
The three list types: bullets, numbers and checklists. A checklist renders as a numbered list with a fixed ✅ prefix on each item.
- Bullet list — first item
- Bullet list — second item
- Bullet list — third item
- Numbered list — step one
- Numbered list — step two
- ✅ Checklist — approved by the editor
- ✅ Checklist — published to the website
- ✅ Checklist — subscribers notified
Text formatting
Formatting for selected text within a paragraph — bold, italic, code, underline, strikethrough and highlight — plus an inline icon.
Strong: bold text
Emphasis: italic text
Code: code text
Underline: underlined text
Strike: struck-through text
Highlight: highlighted text
sendinline icon (material-symbols:send)
Content blocks
The remaining blocks: divider, spacer, table, progress bar, tabs, accordion, timeline, quote, Mermaid diagram, source code, combobox/listbox, standalone icon and multiple columns. Tabs render without the usual components, so only plain paragraphs appear there. The code example uses PowerShell to expose issue #1544, where the component reads lang while Studio stores language.
“Quality is not an act, it is a habit.”
Approval workflow
Get-Process | Where-Object { $_.CPU -gt 100 }Opening hours
| Day | Open |
|---|---|
| Monday | 08:00–16:00 |
| Tuesday | 08:00–16:00 |
Questions and answers
Content in the first tab — plain paragraph text.
Project timeline
Kick-off
The project began.
Launch
The solution went live.
Frequently asked questions
Two columns
Left column: body text in a multi-column section.
Common questions
Images and audio
An image, image carousel and audio player using a real Cloudinary image and an audio file from the dataset.
Carousel
Project managers' tips for project success
Not shown here
These blocks exist in the CMS but cannot be displayed here:
- accordionBlock
- Only available as a column variant in multiContentSection, never as a standalone body block.
- address
- A Google map that requires an API key and contacts a third party.
- contactCardsSection
- Loads contacts from the dataset.
- formSection
- Renders a form that can actually be submitted.
- reference
- Currently renders a raw JSON placeholder — a known defect rather than a recommended example.
- relatedContent
- Loads referenced documents from the dataset.
- socialMedia
- Requires embed scripts from Instagram, LinkedIn, TikTok or Facebook.
Requirements and recommendations for using the brand in print.
Print-ready logo files are coming
The colour chapter lists the official CMYK print values from the design system. Print vector files (EPS/PDF) will be published here when exported. Until then, the SVG downloads provide sufficient resolution for most print materials.
Technical requirements
- Colour profile: Coated FOGRA39 (ISO 12647-2) for coated paper, unless the printer specifies otherwise.
- Resolution: 300 dpi for images; always supply the logo as a vector.
- Minimum size: the logo mark must be at least 8 mm high; the horizontal logo at least 25 mm wide.
- Clear space: the same rule as on screen — at least ¼ of the mark's height on all sides.
- One colour: for single-colour printing, use the logo in black (or grey 900) on light surfaces and white on dark surfaces.
Downloads
Approved original files, ready to use.
Horizontal logo — positiveSVG 
Horizontal logo — negativePNG 
Logo mark — positiveSVG 
Logo mark — negativePNG 
Logo mark — social mediaPNG All downloads are served from Cloudinary. Use these links directly to stay on the current version. The negative and social media variants are generated from the same original using Cloudinary image transformations. Print PDF/EPS files will be added alongside the official print files from Figma. Contact us for other formats.