Brand System

Vulpes
Design Language

The single source of truth for how Vulpes looks, speaks, and feels. Colors, type, components, and voice — all in one place.

Colors

Dark-first. Violet for intent. Cyan for energy. Three surface levels, three text levels. Every token has a job.

Primary

Violet is the primary brand color. Every CTA, active state, and primary accent runs through it.

Fox#7B68EE
--color-fox

CTA backgrounds, primary borders, active states

Fox Glow#A394FF
--color-fox-glow

Text accents, labels, icon fills

Fox Dim#5B4ACE
--color-fox-dim

Hover and pressed states

Accent

Cyan is the gradient endpoint. Energy, motion, data.

Cyan#22D3EE
--color-cyan

Gradient endpoint, data highlights

Cyan Soft#67E8F9
--color-cyan-soft

Gradient text endpoint

Backgrounds

Three levels of dark surface. Never white. Never grey.

Void#07070D
--color-void

Page background, deepest layer

Surface#0D0D18
--color-surface

Cards, elevated sections

Smoke#131322
--color-smoke

Nested surfaces, deep cards

Mist#1A1A2E
--color-mist

Hover states on dark surfaces

Text

Three text levels. Use exactly the right one — no improvising.

Frost#F1EFFF
--color-frost

Primary text, all headings

Silver#8C8AA8
--color-silver

Body text, descriptions, secondary

Ash#4E4C62
--color-ash

Metadata, disabled, tertiary text

State

Semantic colors. Use only for their stated purpose — never decoratively.

Error#F87171
--color-error

Form errors, destructive actions

Success#34D399
--color-success

Confirmations, positive states

Borders

All borders are semi-transparent white or violet overlays — never solid greys.

Subtle
rgba(255,255,255,.07)Default card borders
Medium
rgba(255,255,255,.13)Hover-state borders
Strong
rgba(255,255,255,.22)Focus rings, interactive elements
Violet
rgba(123,104,238,.22)Fox-accent glow borders

Typography

Space Grotesk for all headings and display text. Inter for body, UI, and labels. No exceptions.

Aa Bb Cc
Space Grotesk
Headings, display, numbers
var(--font-space-grotesk)
Aa Bb Cc
Inter
Body text, UI, labels
var(--font-inter)
Hero Display
Space Grotesk · 700
AI changes everything.
Heading XL
Space Grotesk · 700
Frontier AI for growing businesses.
Heading LG
Space Grotesk · 700
AI Transformation Sprint
Heading MD
Space Grotesk · 700
Core Services
Body LG
Inter · 400
We embed in your team for 4 weeks and leave the systems running when we go.
Body MD
Inter · 400
Vulpes serves SMBs worldwide — businesses with 10 to 200 employees ready to compete differently.
Body SM
Inter · 400
Starting at CHF 2,500 · No lock-in · Measurable outcomes guaranteed.
Label
Inter · 700
AI TRANSFORMATION
Gradient Text — .gt

Build. Deploy. Compound.

<span className="gt">text</span>

Components

Core UI building blocks. All use utility classes from globals.css. No Tailwind one-offs.

Buttons
btn btn-primary.btn btn-primaryGradient background — primary CTA only
btn btn-secondary.btn btn-secondaryTransparent with subtle border
btn btn-outline-fox.btn btn-outline-foxViolet tint — secondary violet actions
btn btn-lg / btn-sm.btn btn-lg / btn-smSize modifiers — combine with variant
Section Label
AI Transformation
.fox-bar + .label.fox-bar + span.labelOpens every section — always paired
Cards
Service

AI Transformation

Full strategic and operational AI overhaul. The flagship service.

Featured

AI Transformation

Violet-border variant for featured or highlighted content.

.card.cardStandard surface — dark bg, subtle border, hover lift
.card-featured.card-featuredViolet border — use for highlighted items
Badges & Tags
AI OperationsStrategyNewHospitality
Violet badgeinline styleViolet bg + border + fox-glow text
Metrics
80%
Manual task reduction
4×
Content output increase
< 2min
Average response time
.metric-value.metric-value + .metric-labelGradient text number + silver label
Dividers

.divider

.divider-fox

Ghost Number
01

Section with ghost number

Used on numbered sections. Positioned absolute, top-right.

Gradients & Effects

Gradients are used sparingly — for intent, not decoration. The violet→cyan axis is the only one.

Brand Gradient
--grad

Buttons, progress bars, fox-bar dividers

Text Gradient
--grad-text

Gradient text — .gt class

Horizontal Brand

Accent top-borders, horizontal bars

Ambient Glow

Hero section atmosphere, background ambience

Textures
.texture-dots + .texture-vignette
Ambient glow overlay

Voice & Tone

How Vulpes speaks. Every word is deliberate. No hedging, no filler, no buzzword soup.

Direct, not blunt
✓ Do

AI fixes this in 48 hours.

✗ Don't

Leverage transformative AI paradigms to address your operational challenges.

Ambitious, not arrogant
✓ Do

Vulpes builds systems that let 5-person teams compete with 50.

✗ Don't

We are the leading AI firm in the Swiss SMB market segment.

Specific, not vague
✓ Do

Reduces customer response time from 4 hours to under 2 minutes.

✗ Don't

Significantly improves customer experience metrics.

No buzzword soup
✓ Do

An AI agent that handles 80% of your inbound support — without headcount.

✗ Don't

A next-gen AI-native intelligent automation solution ecosystem.

Quick Rules
Short paragraphs

Air on the page. Never a wall of text.

Bold claims

If you can't prove it, don't write it.

SMB language

No Fortune 500 jargon. No consultant-speak.

Fox mindset

Strategic, adaptive, precise, a step ahead.

Vulpes Industries — Brand System
Internal reference. Not indexed.
← Main site