Living Style Guide

Nolen Brand Guidelines

The single source of truth for colors, typography, spacing, and components. All tokens are live — changes here reflect immediately on the website.

Warm Pop A4.4 Nunito Typeface v6.0
For coding agents Download CSS Download HTML starter

Brand Overview

Mission, vision, brand architecture, and naming conventions — the foundation that all visual and verbal decisions build on.

Mission

We supercharge organizations with trusted AI agents that work 24/7 — removing repetitive work, accelerating decisions, and creating better outcomes so your team can operate at a higher level.

Vision

Every mid-sized company has a trusted AI agent that elevates its performance — reliable, accountable, and always on.

Value Proposition

AI agents tailored to your organization that execute autonomously, work 24/7, and deliver measurable results — with guaranteed data sovereignty in Switzerland or the EU, and human oversight at every step. Not a chatbot. Not a copilot. Agents that work.

Brand Architecture

Company NameNolen AI
Product NameNolen
Domainnolen.ai
Brand DescriptorYour Trusted Agent.
TaglineWe supercharge YOUR organization.

Naming Hierarchy

NolenAgent / product context — conversations, UI, documentation
Nolen AICompany context — legal, press, investor materials
"AI"Conveyed through descriptor, tagline, and context — never in the wordmark

Brand Archetype

Core The Sage

Knowledgeable, assured, guiding. The trusted expert that sees patterns others miss.

Enabler The Caregiver

Supportive, helpful, at your service. The force that enables others to perform at their best.

Colors

Click any swatch to copy the hex value. The palette follows the Warm Pop / Hybrid direction — cream base, teal accents, no full dark mode.

Primary

Extended Teal

Violet — 15–20%

Coral — ~5%

Neutrals

Teal — primary Violet — 15–20% Coral — ~5% Neutrals

Gradients & Usage

Brand gradients are used selectively — hero sections, CTAs, and premium feature highlights. Never apply gradients to the logo or body text.

Brand Gradients

Teal → Violet Hero sections, feature highlights
Teal → Neon Teal Buttons, CTAs, interactive elements
Charcoal → Violet Dark hero sections, premium feel

Secondary Gradients

Violet → Coral Feature highlights, accent sections
Teal → Coral Warm accent transitions, alerts-to-success
Charcoal → Teal Footer transitions, dark-to-accent sections

Color Usage Guide

ROLECOLORWHEN TO USE
Primary CTA Nolen Teal #00CCAA Buttons, links, primary actions
Hover / Active Deep Teal #009980 Hover states, pressed buttons
Feature Accent Nolen Violet #7B61FF Badges, highlights, secondary accent (~15–20%)
Alert / Warm Signal Coral #FF6B6B Alerts, notifications, sparingly (~5%)
Page Background Cream White #F5F0E8 Card backgrounds, warm surfaces
Dark Sections Warm Charcoal #2B2B38 Hero blocks, footer, contrast sections
Body Text Warm Charcoal #2B2B38 All body copy on light backgrounds (14:1 on white, AAA)
Secondary Text Slate #475569 Captions, meta, secondary info (7.6:1 on white, AAA)

Typography

Nunito is the sole typeface across all touchpoints. Five weights are active — each with a specific role. Never mix typefaces.

700 Bold H1 headlines, H2 section titles & strong emphasis
Nolen AI
600 SemiBold Nav, labels, wordmark, UI text
Features · Pricing · Use Cases
400 Regular Body text, subtitles
Nolen connects to your tools, reads your emails, learns your preferences, and acts on your behalf — so you can focus on what matters.
300 Light Captions, helper text, large pull quotes
Updated 3 minutes ago · Version 6.0 · Europe/Zurich

Type Scale

RoleSizeWeightLine-heightPreview
H1 — Hero 48px / 32px mob 700 1.1 Nolen AI
H2 — Section 36px / 24px mob 700 1.2 How it works
H3 — Subline · Charcoal on light / White on dark 20px 300 1.5 Our agents work 24/7 for your team.
H4 — Card Title 18px 700 1.35 Email management
Body Regular · Charcoal #2B2B38 16px 400 1.6 Your AI that actually works.
Body Small 14px 700 1.5 Updated · 2 min ago
Small / UI 14px 600 1.5 Book a demo →
Caption 12px 300 1.5 Last updated · 2 min ago
Section Label 12px / UPPERCASE 700 1.5 HOW IT WORKS

TEAL ACCENT COLOUR RULE

Always use Nolen Teal #00CCAA for inline teal accents

Word and phrase highlights inside H1, H2, section labels, and CTA links must always use #00CCAA (Nolen Teal). Never use Deep Teal #009980 for typographic accents — Deep Teal is reserved exclusively for hover and active states on interactive elements.

✓ DO

H2 accent: color: var(--teal) → #00CCAA
Section label: color: #00CCAA
CTA link: color: var(--teal)
H1 teal line: color: #00CCAA

✕ DON'T

H2 accent: color: var(--teal-deep) → #009980
Section label: color: #009980
Deep Teal is for: hover states, icon backgrounds, active buttons only

Spacing & Radius

4px base grid. Border radius uses 12px (--radius) as the primary token — confirmed over the brand-spec 8px as the better visual choice.

Spacing Scale

4px 0.25rem
8px 0.50rem
12px 0.75rem
16px 1.00rem
20px 1.25rem
24px 1.50rem
32px 2.00rem
40px 2.50rem
48px 3.00rem
64px 4.00rem
80px 5.00rem
96px 6.00rem

Border Radius

Subtle 6px Nav pills, dropdown items
Input 8px Form inputs, small badges
Card 12px Cards, buttons, panels (--radius)
Modal 16px Modals, floating panels
Pill 999px Tags, status chips

Icon & Symbol

Standalone marks for favicons, app icons, social avatars, and small-format contexts. Same monochrome rule as the wordmark — Charcoal on White or White on Charcoal only, never cream. Click any asset to download the source PNG.

Icon — lowercase "n"

Nolen icon — charcoal n on white Charcoal on White nolen-icon-charcoal-on-white.png · download ↓ Nolen icon — white n on charcoal White on Charcoal nolen-icon-white-on-charcoal.png · download ↓

Symbol — uppercase "N"

Nolen symbol — charcoal N on white Charcoal on White nolen-symbol-charcoal-on-white.png · download ↓ Nolen symbol — white N on charcoal White on Charcoal nolen-symbol-white-on-charcoal.png · download ↓
Favicon32×32 px and 16×16 px
App iconiOS/Android — 1024×1024 master, auto-scaled
Social media avatarProfile images on LinkedIn, X, and other platforms
Chat widgetSmall-format agent avatar in the Nolen chat UI
Approved variantsCharcoal on White · White on Charcoal — only, never cream
RuleNever combine the icon and wordmark in the same lockup unless specifically designed as a lockup

Buttons

Three button variants. Font: Nunito SemiBold 600, 15–16px. Radius: 12px (--radius). No border on primary and ghost variants on dark BG.

PrimaryBG: #00CCAA · Text: #fff · Hover BG: #009980
SecondaryBorder: #00CCAA · Text: #00CCAA · Hover BG: #E6FAF7
GhostNo border · Text: #2B2B38 (light) or #fff (dark) · Underline on hover
Size — DefaultPadding: 12px 24px · Font: 600 15px
Size — SmallPadding: 8px 16px · Font: 600 14px
Radius12px (--radius)

Cards & Card Variants

Background rule: Pure White (#FFF) as page background + colored cards for visual warmth and variety. For multi-card layouts (3–6 cards), apply color rotation to avoid monotony. Reference: Langdock's "All-in-One" section.

6-Variant Color System

Teal

Teal Tint Card

Feature description or key benefit displayed here as body text.

Teal Tint
Violet

Violet Tint Card

Feature description or key benefit displayed here as body text.

Violet Tint
Coral

Coral Tint Card

Feature description or key benefit displayed here as body text.

Coral Tint
Sand

Sand Card

Feature description or key benefit displayed here as body text.

Sand
Dark

Charcoal Card

Feature description or key benefit displayed here as body text.

Charcoal
Cream

Cream Card

Feature description or key benefit displayed here as body text.

Cream
Rotation rule: For 6-card grids use all 6 variants in order. For 3-card grids use Teal, Violet, Sand. For 4-card grids use Teal, Violet, Coral, Sand. Always start with Teal.

Standard White Card

Memory & Context

Nolen remembers your preferences, recurring tasks, and key relationships — so you never repeat yourself.

Learn more →

Email Triage

Classifies, drafts replies, and files your inbox automatically — 4× per day, without lifting a finger.

Learn more →

Playbooks

Define once, run forever. Structured workflows that Nolen executes exactly as you would.

Learn more →

CTA Card

Full-width call-to-action card. Canonical implementation as deployed on nolen.ch and nolen.ai. Background: linear-gradient(125deg, #2B2B38 0%, #3A3550 55%, #4A3B7A 100%) with radial violet overlay. Border-radius: 24px. Padding: 68px 40px (desktop) · 40px 24px (mobile). Button: Nolen Teal #00CCAA · White text #FFFFFF · Bold 700 · 16px · 15px 36px padding · centered.

ALPHA ACCESS

Let's connect.

A few questions about your priorities. 5 minutes, promised. We follow up personally within 48 hours.

Take the 5-minute survey
Backgroundlinear-gradient(125deg, #2B2B38 0%, #3A3550 55%, #4A3B7A 100%)
Overlayradial-gradient violet 28% at 85% 90%
Border radius24px
Padding68px 40px (desktop) · 40px 24px (mobile)
Box shadow0 20px 50px -18px rgba(123,97,255,0.35)
Eyebrow12px · Bold 700 · uppercase · rgba(255,255,255,0.80)
HeadlineNunito Bold 700 · clamp(28px,4vw,36px) · #FFFFFF
SubtextNunito Regular 400 · 17px · rgba(255,255,255,0.80) · max-width 560px
Button bgNolen Teal #00CCAA
Button textWhite #FFFFFF · Bold 700 · 16px
Button padding15px 36px · border-radius 12px
Button iconArrow SVG 16×16 · stroke-width 2.5 · inline-flex centered

Chatbot UI

The signed-off reference build for the Nolen conversation interface. This is the single source of truth — documented sections 01–04: Dawn user-message bubble, Cream White canvas (#F5F0E8), progress indicator, and the full-page app mockup. The header sits on Warm Charcoal with the logo top-left; teal is reserved for the online indicator and real CTAs only — never the user-message bubble.

Open the styleguide full-screen ↗

Badges & Tags

Pill-shaped (border-radius: 999px). Nunito SemiBold 600, 12–13px. Used for categories, status indicators, and feature callouts. Violet at 15–20%, Coral at ~5%.

Teal — Primary Violet — Feature Coral — Alert Sand — Category Neutral Dark — New
Teal outline Violet outline Small Large badge
Teal badgeBG: #E6FAF7 · Text: #009980 · Font: 600 12px
Violet badgeBG: #EEF0FF · Text: #7B61FF · Font: 600 12px
Coral badgeBG: #FFF0F0 · Text: #FF6B6B · Font: 600 12px
Padding4px 10px (sm: 3px 8px · lg: 6px 14px)

Tone of Voice

Nolen speaks like a senior advisor — beside you, not above you. Direct without being blunt. Confident without being loud. Swiss precision meets Anglo-Saxon pragmatism.

We are

ConfidentDirectWarmExpertHelpfulPrecise

We are not

ArrogantBluntCasualCondescendingServilePedantic

Writing Guidelines

  • Lead with the benefit, not the feature.
  • Use active voice. "Nolen delivers reports" — not "Reports are delivered by Nolen."
  • Avoid superlatives unless backed by data.
  • One idea per sentence. Short paragraphs.
  • Address the reader as "you" / "your team."
  • Technical accuracy over marketing fluff — always.

Copy Examples

Website Hero
✓ DoYour trusted AI agent. Nolen executes, follows through, and delivers results.
✗ Don'tThe world's most advanced AI-powered autonomous agent platform revolutionizing enterprise operations!
Email Subject
✓ DoYour weekly performance summary is ready.
✗ Don'tWOW! Check out what our AI discovered this week!!!
Error Message
✓ DoI could not access your CRM. Please check the API credentials and I will retry.
✗ Don'tOops! Something went wrong. Error 403.
Feature Description
✓ DoNolen connects to your ERP, CRM, and project tools — no manual data transfer.
✗ Don'tLeveraging cutting-edge AI to synergize cross-platform data orchestration.

Do / Don't

Core rules for consistent brand application across all touchpoints.

✓ Do

Use Pure White (#FFF) as page background

✕ Don't

Use Cream White as full-page background — reserve it for cards

✓ Do

Use Nunito Bold 700 for all headings H1–H4 — consistent hierarchy

✕ Don't

Use weight 900 anywhere — it has been removed from the type system

✓ Do

Use Nolen Violet at 15–20% of accents

✕ Don't

Use Violet as the primary or dominant color

✓ Do

Use Signal Coral (~5%) for alerts/notifications only

✕ Don't

Use Coral for decorative purposes or large surfaces

✓ Do

Use Warm Charcoal (#2B2B38) for header & footer BG

✕ Don't

Use Dark Grey (#1E1E2A) for body text — it's the darkest background

✓ Do

Use the wordmark in charcoal or white only

✕ Don't

Recolor, stretch, rotate, or add effects to the logo

✓ Do

Use 12px radius for cards, buttons, and panels

✕ Don't

Mix radius values inconsistently across similar components

✓ Do

Use 16px (1rem) for nav link font size

✕ Don't

Use 14px for nav links — confirmed spec is 16px

Nolen Brand Guide v6.0 · 2026 · This is a living document — all specs are applied directly to the website.