|
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

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. Six 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 — Sub 24px 700 1.3 Memory & context
H4 — Card 18px 700 1.4 Email management
Body Large 18px 400 1.6 Built for action, not chat.
Body 16px 400 1.6 Your AI that actually works.
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

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

The standalone symbol is used where the full wordmark cannot be displayed — favicons, app icons, social media avatars, and small-format contexts.

Nolen icon — charcoal Charcoal Icon — on Light icon.svg · PNG at 16/32/60/110 px
Nolen icon — white White Icon — on Dark icon-white.svg · PNG at 16/32/60/110 px
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
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. Used at page bottom or between content sections. Full-width gradient background, centered copy, Nolen Teal button. Border-radius: 20px. Padding: 64px 56px desktop · 40px 24px mobile. 4 approved gradient variants.

Teal → Violet

Ready to supercharge YOUR organization?

Stop copy-pasting. Stop context-switching. Let Nolen handle the operational load — so you can focus on what matters.

Get started free
#00CCAA → #7B61FF

Charcoal → Violet

Ready to supercharge YOUR organization?

Stop copy-pasting. Stop context-switching. Let Nolen handle the operational load — so you can focus on what matters.

Get started free
#2B2B38 → #7B61FF

Charcoal → Teal

Ready to supercharge YOUR organization?

Stop copy-pasting. Stop context-switching. Let Nolen handle the operational load — so you can focus on what matters.

Get started free
#2B2B38 → #00CCAA

Violet → Coral

Ready to supercharge YOUR organization?

Stop copy-pasting. Stop context-switching. Let Nolen handle the operational load — so you can focus on what matters.

Get started free
#7B61FF → #FF6B6B
Border radius20px
Padding64px 56px (desktop) · 40px 24px (mobile ≤ 640px)
HeadlineNunito Bold 700 · 36px · #FFFFFF
SubtextNunito Regular 400 · 18px · rgba(255,255,255,0.80)
ButtonNolen Teal #00CCAA · White text #FFFFFF · Radius 12px · Padding 14px 28px · Arrow SVG · Centered
Gradient variantsTeal→Violet · Charcoal→Violet · Charcoal→Teal · Violet→Coral

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 900 exclusively for H1

✕ Don't

Apply weight 900 to H2 or smaller — it competes with H1

✓ 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.