Brand Guidelines
Visual identity reference for the Private AI Solutions team and partners.
The PAIS Aperture Mark
A compact P-shaped aperture built around a warm private core. The mark is company-first: ownable at small sizes, grounded in local private compute, and intentionally not a lock, shield, cloud, atom, eye, or generic AI symbol. It uses optical-size variants: compact at 16-24px, display at larger sizes. In the display mark, blue carries AI capability, teal carries local execution, and amber marks the private core.
Default — light background
Bright core — light background
Default — dark background
Bright core — dark background
Size reference
16px
24px
32px
48px
64px
96px
The mark switches automatically by rendered size. At 16-24px it uses
the compact variant: a heavier P silhouette and warm core. At 32px
and above it uses the display variant with a split blue and teal
aperture path.
For the browser tab and any favicon context, the simplified
public/favicon.svg
is used so the mark still reads at 16px.
Wordmark
The full logo lockup: PAIS Aperture mark alongside "Private AI / Solutions" set in Outfit. Bold (700) primary navy for "Private AI", light (300) accent blue for "Solutions" — title case, softer than an all-caps wordmark.
Usage notes
- Use the default variant on white or light backgrounds.
- Use light on dark backgrounds (footer, dark hero sections).
- Use light + warm when the amber core adds appropriate warmth (footer).
- Maintain clear space around the wordmark equal to the height of the "AI" text.
- Do not stretch, rotate, or recolor individual elements of the mark.
Product Marks
Products in regulated categories carry a shield-framed variant — the company mark stays shield-less, while products like SafeHire AI (EU AI Act high-risk) earn the protective frame. See BRAND.md → Corporate vs product marks.
SafeHire AI — light background
SafeHire AI — dark background
Light variant — dark background
Lockup
Icon + wordmark. "SafeHire" in primary navy, "AI" in accent blue. Use the icon alone in tight spaces (page header chips, favicons); use the full lockup on product pages and marketing surfaces.
Color Palette
Nordic blues with warm amber highlights. All colors are defined as CSS custom properties and flow into Tailwind utilities automatically.
Primary
#143268 Headings, text emphasis, brand base
--color-primary
Primary Light
#214689 Hover states
--color-primary-light
Primary Dark
#0C1E42 Footer, dark sections
--color-primary-dark
Accent
#2D9CDB Links, secondary buttons, AI accents
--color-accent
Accent Light
#4FB3E8 Hover states
--color-accent-light
Signal
#34C5B4 Local runtime signal, lower aperture blade
--color-signal
Signal Light
#7ADFD4 Dark-background signal accents
--color-signal-light
Warm
#F2A51A Primary CTAs, amber core, highlights
--color-warm
Warm Light
#F7B947 Hover states
--color-warm-light
Surface
#edf2f8 Section backgrounds
--color-surface
Surface Alt
#dce5f0 Emphasis sections
--color-surface-alt
Blues for trust
Primary and accent blues form the base. They communicate professionalism, depth, and Finnish identity — lakes, sky, Nordic confidence.
Gold for action
Warm amber is reserved for the most important action on each page. If everything is gold, nothing is. Use it to guide the eye.
Surfaces for rhythm
Blue-tinted surfaces create visual rhythm when scrolling. Alternating white and surface sections keep content scannable.
Typography
Wordmark
Outfit Bold
Outfit Light
Geometric sans-serif. Used exclusively for the brand wordmark. Bold (700) for "Private AI", Light (300) for "Solutions". Self-hosted variable font.
Body
Inter Bold
Inter Regular
Screen-optimised sans-serif. Used for all headings, body text, and UI elements. Weights 400–700. Self-hosted for privacy.
Type scale
Body copy is 17px / 1.7 line-height (Inter 400). The
.lead
class renders intro paragraphs in Inter 300 at 18–20px — used on
hero descriptions and page subtitles.
Brand Voice
Direct, technically credible, privacy-first. Finnish pragmatism. Trust is built through specificity, not superlatives.
We say
- ✓ "Your data stays on your hardware"
- ✓ "No outbound network connections during analysis"
- ✓ "EU AI Act compliant — documentation included"
- ✓ "29,90 €/month" — transparent, specific pricing
We don't say
- × "Cutting-edge", "revolutionary", "game-changing"
- × "We take your privacy seriously"
- × Vague claims without architectural backing
- × US startup pitch language
Tagline
"Privacy by architecture, not by policy."
Not a slogan — a technical fact. Our products cannot send data externally because they have no network capability during inference.
Design System
Standardised components used across the site. All tokens and classes
live in src/styles/global.css.
Buttons
Primary and secondary buttons use subtle top-to-bottom gradients, colour-matched shadows, and a 1px lift on hover.
Badges
Pill-shaped tags for eyebrows, categories, and trust signals. Two variants — accent (default) and warm.
Cards
Standard cards now have a soft resting shadow and lift (2px translate + stronger shadow + accent border tint) on hover. Elevated cards carry a 2px brand-signature gradient top border.
Standard card
White bg, soft shadow, rounded-xl. Hover to see the lift and accent-tinted border.
Elevated card
Gradient accent line on top edge (brand signature), stronger default shadow, accent border. For highlighted items.
Icon containers
Subtle accent gradient fill, thin accent border, inner highlight — a more crafted feel than a flat tint.
3rem square, rounded-xl. Accent gradient + border.
Gradient divider
The .divider-accent
utility creates a thin fading accent-to-warm-to-accent line. Used on
page headers and hero sections as a brand signature.
Surface gradients
.surface-gradient and
.surface-alt-gradient
replace flat section backgrounds with soft top-to-bottom fades for
added depth without noise.
.surface-gradient
surface → white
.surface-alt-gradient
surface-alt → surface
Brand Signature
The gradient accent line at the top of the footer transitions from accent blue through warm gold and back. A small, consistent brand element that appears on every page.
Privacy by architecture, not by policy.