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.
Hero sections
Every hero on the website and in the app shares one hierarchy, one type scale and one spacing scale. Three variants cover every page: detail (text and image side by side), overview (breadcrumb, title and lead) and landing (larger title with the image behind the text). The examples below are the production components with sample content.
Detail variant — solutions, products, employees, events
God kundeservice gir fornøyde kunder
Customer service and case management
Én løsning for hele kundereisen — fra første henvendelse til lukket sak.
Brukes av Høyskolen Kristiania
- 99,9 % oppetid
- Norsk support
Article variant — news, references, services
The data agent took a bigger role in analysis work
Access controls and source trails had to follow analysis and action through the workflow.
Overview variant — lists, topic pages, simple pages
Topics
Articles, events, projects and podcast episodes gathered by the topics we work with.
Scale and spacing
| Role | Treatment | Gap above |
|---|---|---|
| Breadcrumb | 14 px · 500 · 72 % foreground | — |
| Kicker | 14 px · 700 · uppercase · 0.08 em tracking | 32 px |
| Title | 2–3.5 rem fluid · Maison Neue Extended Bold · line-height 1.05 · max 24 characters | 12 px |
| Lead | 18–20 px · 400 · line-height 1.5 · max 60 characters · 85 % foreground | 20 px |
| Meta | 14 px · 500 · 72 % foreground | 24 px |
| Actions | Buttons and links from the component library | 32 px |
From Studio to hero
| Studio field | Role in the hero |
|---|---|
| Value proposition | Kicker |
| Page lead / “Which problems does the product solve?” | Lead |
| Hero media (image or video) | Image at its own aspect ratio; video always 16:9 |
| Trust statements | Meta group below the actions |
| Layout “Image centred, text over image” | Landing variant with the image behind the text |
| Hero variant “Title and breadcrumbs only” | Overview variant |
Rules
- The hierarchy is always breadcrumb → kicker → title → lead → meta → actions. The kicker stands out by weight and case, the title by size, the lead by one step above body text, the meta by colour.
- Spacing inside a group is always smaller than spacing between groups: 12 px from kicker to title, 20 px from title to lead, 24 px down to meta and 32 px down to actions.
- The image gets a frame at its own aspect ratio, clamped between 4:5 and 16:9, and scales into it. No cropping, no rounded corners, no shadow or tint overlay. Logos and SVGs sit on a transparent background.
- Height follows content. The hero has no minimum height, no stars and no curved panel edge.
- The title is hyphenated only when it must be: on narrow screens for words of 14 characters or more. From 640 px and up it breaks only between words.
- The colour surface comes from the theme's hero panel, so articles, solutions and overviews within one subject area read as a single identity.
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.
Cards
Every card on the website and in the app uses the same type scale and the same spacing scale. Three levels of hierarchy, expressed through size, weight and colour together.
Customer service | Article
The title is the first thing you see
How a card reads: the title first, the lead second, and taxonomy, metadata and call to action third.
- Level 3Kicker12 / 16Taksonomilinjen: tema | innholdstype. Versaler, sperret, 24 px ned til tittelen.
card-kicker - Level 1Title20 / 26The only element in the heading face. The largest thing on the card.
card-title - Level 2Lead16 / 24Brødtekststørrelse, dempet med farge — aldri under 16 px. Inntil tre linjer.
card-lead - Level 3Call to action14 / 20The “Read more” link. Smaller than the lead so it reads as a control.
card-cta - Level 3Metadata13 / 18Reading time, date, episode. Sits on the card foot, never above the title.
card-meta
- The title reads first, the lead second, and kicker, metadata and call to action third — in light and dark mode.
- Hierarchy is expressed through size, weight and colour together. Secondary text is de-emphasised with colour, not by shrinking it.
- Related elements sit closer: title and lead share 8 px, groups are separated by 16 px, and the padding around the content is 24 px.
- Cards rest on the shared card surface with a faint hint of the theme's pastel. The full theme colour appears on hover and keyboard focus.
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
Four fixed steps on an 8-point scale cover the spacing in and between cards. Related elements sit closer together than unrelated ones, and there is always more air between cards than inside them.
8px
Inside a group in the card
16px
Between groups in the card
24px
Fra kicker ned til tittel
24px
Padding around the card content
32px
Between cards in a section
Corner radius
Controls and dialogs use three fixed steps. Cards and sections have square corners; the image inside keeps the signature shape, with the bottom-right corner swept out to 48px.
0px
Cards and sections
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.