# Aster ✦ Brand Identity & Guidelines
**Version:** 2.3 — April 2026  
**Company:** AsterX B.V., Amsterdam  
**Website:** [aster.pro](https://aster.pro)  
**Stats:** 200+ brands served · 4.6 client CSAT · 20+ years expertise

> This document is the single source of truth for the Aster brand. It covers origin, strategy, color, typography, voice, messaging, components, motion, and illustration guidelines. It is machine-readable and intended to be used as context for LLMs, AI coding agents, and content tools working on the Aster codebase or brand assets.

---

## 00 / Brand Genesis

Every element of the Aster brand has a precise, mathematical, or natural root. Nothing is arbitrary.

### The Name
*Aster* derives from the ancient Greek word for **star**. Historically, navigators used the North Star (Polaris) — a fixed, unwavering point in a spinning sky — to traverse uncharted oceans and determine their exact latitude.

### The 53.3° Angle
The angle between the horizon line and the star in the Aster logo is exactly **53.3°**, derived from the **52.3676° latitude** of our origins in Amsterdam. This hidden mathematical truth roots the brand in physical reality and signals our commitment to precision and data.

### The Soft Purple
While the name looks to the stars, the signature soft purple palette is drawn from the **aster flower** — representing organic growth, adaptability, and the human element within technology. We are structural and mathematical, but fundamentally human-centric.

### The North Star Metaphor
In a complex, rapidly shifting enterprise technology landscape, **aster acts as that fixed point of reference**. We provide the guidance, precision, and clarity necessary for our clients to navigate transformation safely and rapidly. By measuring the angle between the horizon and the star, navigators found their place in the world. By partnering with aster, enterprise teams find their path forward.

---

## 01 / Brand Identity

**Company:** AsterX B.V. is an Amsterdam-based enterprise technology consultancy. Formerly known as IOVIO → Qualibrate → Copado, Aster has spent 20+ years transforming enterprise delivery across Europe and the US.

### Mission
To **accelerate enterprise delivery** with confidence and intelligence, helping teams ship with precision and speed.

### Vision
To be the **definitive navigational guide** for enterprise engineering teams transitioning into the autonomous, AI-driven era.

### Positioning
The bridge between **proven enterprise delivery** and **the autonomous future**. Neither legacy IT shop nor hype-driven AI startup.

### Mantra
> "Software only becomes valuable when you ship it to customers."

### Brand Personality
If aster were a person, they would be an **experienced, elite navigator**. They speak quietly but carry immense authority. They do not panic in a storm; they look at the instruments, calculate the math, and execute the manoeuvre.

---

## 01b / Dual-Track Strategy

AsterX operates on a unique dual-track narrative. The bridge between these two tracks is our core methodology: **Delivery Intelligence**.

### Track 1 — Proven Enterprise Delivery
A **20+ year track record** (IOVIO → Qualibrate → Copado → Aster) transforming SAP, Salesforce, DevOps, and Quality Engineering for blue-chip clients like Heineken, ING, Air France-KLM, and Fugro.

**Practice areas:** Quality Engineering · SAP Transformation · Salesforce DevSecOps · DevOps

### Track 2 — AI-First & AgentOps
We don't just advise on AI — we eat our own cooking. We operate on our own internal agentic framework. We help enterprises transition from traditional methodologies to **outcome-based, AgentOps delivery models**.

**Practice areas:** AI & AgentOps · Thought Leadership Engine · Autonomous Delivery

### The Bridge — Delivery Intelligence
`Human Expertise` + `Codified Knowledge` + `Best Practices` + `AI Agents` = **Better Outcomes**

---

## 02 / Color System

Built on HSL design tokens. All values live in `src/index.css` as CSS custom properties consumed via Tailwind's `hsl(var(--token))` pattern.

### Core Brand Palette

| Name | Token | HSL Value |
|------|-------|-----------|
| Aster Deep | `--aster-deep` | `hsl(251 19% 29%)` |
| Aster Purple | `--aster-purple` | `hsl(278 93% 69%)` |
| Aster Magenta | `--aster-magenta` | `hsl(310 50% 55%)` |
| Aster Blue | `--aster-blue` | `hsl(220 70% 55%)` |
| SAP practice blue | `--aster-sap-blue` | `hsl(215 58% 34%)` — SAP / enterprise navy accent |
| Salesforce practice blue | `--aster-salesforce-blue` | `hsl(199 100% 42%)` — cloud blue aligned with Salesforce brand |
| DevOps practice amber | `--aster-devops-amber` | `hsl(28 92% 42%)` — pipeline / tooling accent (stronger contrast than `yellow-01` on light UI) |
| Aster Surface | `--aster-surface` | `hsl(265 72% 89%)` |
| Aster Glass | `--aster-glass` | `hsl(265 72% 97%)` |

### Semantic Tailwind Tokens

| Role | Token | Default Value |
|------|-------|---------------|
| Background | `--background` | `hsl(0 0% 100%)` |
| Foreground | `--foreground` | `hsl(251 19% 29%)` |
| Secondary | `--secondary` | `hsl(265 72% 95%)` |
| Muted foreground | `--muted-foreground` | `hsl(251 14% 46%)` |
| Accent | `--accent` | `hsl(278 93% 69%)` |
| Accent foreground | `--accent-foreground` | `hsl(0 0% 9%)` — use on solid accent / `--aster-purple` fills (WCAG AA vs `--aster-deep` on the same fill) |
| Border | `--border` | `hsl(265 56% 88%)` |
| Destructive | `--destructive` | `hsl(0 84% 60%)` |

### Extended Palette
`green-01` hsl(152 24% 47%) · `green-02` hsl(132 43% 68%) · `green-03` hsl(178 43% 22%) · `green-04` hsl(105 23% 76%) · `green-05` hsl(79 36% 84%) · `yellow-01` hsl(43 95% 64%) · `yellow-02` hsl(47 91% 70%) · `purple-01` hsl(236 24% 37%) · `red-01` hsl(13 86% 20%) · `red-02` hsl(8 58% 38%) · **`sap-blue`** hsl(215 58% 34%) · **`salesforce-blue`** hsl(199 100% 42%) · **`devops-amber`** hsl(28 92% 42%)

### Service & solution accent colors (`colorToken`)

Each **service** and each **solution** maps to exactly one approved palette token via `colorToken` in content modules (`src/content/services.ts`, `src/content/solutions.ts`). Tokens must be **unique per service** and **unique per solution** (see project validation: `npm run content:check`).

**Services page (`/services`)** — Hero uses a soft **`bg-gradient-to-br from-purple-50 to-violet-50`** band (aligned with solution-detail hero treatment). Intro copy is **centered**; **in-page anchor pills** (one per service, `href="#<id>"`) sit **below** the intro in the same hero, **centered** (`flex-wrap` + `justify-center`), with token-tinted borders and light **`bg-background/70`** + **`backdrop-blur-sm`** on pills.

**Current service → token mapping (website visuals):**

| Service | `colorToken` |
|---------|----------------|
| Quality Engineering | `--aster-green-01` |
| SAP Transformation | `--aster-sap-blue` |
| Salesforce DevSecOps | `--aster-salesforce-blue` |
| DevOps Consulting | `--aster-devops-amber` |
| AI & AgentOps | `--aster-magenta` |

**Current solution → token mapping (website visuals):**

| Solution | `colorToken` | Notes |
|----------|----------------|--------|
| IFS Evergreen Assurance | `--aster-purple` | IFS brand purple |
| Salesforce Org QuickScan | `--aster-salesforce-blue` | Salesforce cloud blue (`--aster-salesforce-blue`) |
| QA Maturity Scan | `--aster-green-01` | Aster green (no single vendor brand) |
| AgentOps Readiness Scan | `--aster-red-02` | Darker rust red for **readability** on light cards/nav; distinct from **AI & AgentOps** service (`--aster-magenta`) |

Solution **glyphs**: optional **`brandLogo`** (`ifs` \| `salesforce` in `src/content/solutions.ts`) renders vendor marks through **`SolutionBrandMark`** — token-tinted border + light surface (same family as partner cards). **Salesforce** uses inline **`SalesforceCloudLogo`** (`src/components/brand/SalesforceCloudLogo.tsx`); **IFS** uses **`/partners/ifs.png`**. Other solutions use **lucide-react** via `iconName` in `src/lib/solutionsData.ts`.

UI bindings must stay token-driven (no ad-hoc hex in components).

### Homepage hero night sky

The home hero canvas starfield samples **`--aster-deep`**, **`--aster-purple-01`**, **`--aster-magenta`**, **`--aster-purple`**, and **`--aster-glass`** from **`:root`** at runtime (`getComputedStyle`) for a **dark violet** vertical gradient, **`screen`-blend** magenta/purple radial accent, constellation lines, star tint, and Polaris glow. A looping dotted **sight line** animates from the bottom right up to Polaris at exactly **53.3°**, mirroring the brand logo; disabled when **`prefers-reduced-motion`**. The map is **north-facing equirectangular**; equatorial→horizontal math uses real **J2000** coordinates and mean sidereal time with deliberate simplifications (see **`src/lib/celestialAmsterdam.ts`** file header), not a full planetarium pipeline. Contains a **multi-layered parallax** effect triggered by mouse movement where background faint stars move slower than foreground constellations. **`Hero`** night layout is **bottom-weighted** with **left-aligned** copy and a **transparent-to-deep** overlay so the upper sky (Polaris) stays readable. The hero eyebrow uses a restrained glass pill (no extra bloom halo), and the primary hero CTA on night-sky runs as a high-contrast white pill with `--aster-deep` text. Helpers: **`src/lib/rootHslTokens.ts`** (`adjustS`, `darkenL`, …); components: **`HeroNightSky.tsx`**, **`Hero.tsx`**. The **`/about`** hero uses **`HeroNightSky`** **full-bleed** (no max-width card) with the same overlay and gradient headline, **without** the home hero eyebrow or primary/secondary CTAs (`src/pages/About.tsx`). If a token cannot be parsed, values fall back to the §02 catalog numbers.

**Interactive sky lab:** SPA route **`/brand-identity/sky-lab`** (`src/pages/BrandIdentitySkyLab.tsx`) renders the same **`HeroNightSky`** canvas with optional **`HeroNightSkySimulation`** props: **`referenceTime`** (observer clock for initial mean LST at Amsterdam longitude), **`lstOffsetDeg`** (rotates the whole field), **`motionMultiplier`** (sidereal drift scale; production hero defaults to ~**150** when motion is allowed), **`parallaxEnabled`**. The human reference **`public/brand-identity.html`** embeds this route in an **iframe** under **#hero-night-sky-lab**; the iframe only loads when the HTML is served from the **same origin** as the built SPA (e.g. Cloudflare Pages or `npm run preview`), not from `file://`. Use **“Open sky lab in a new tab”** in that section if the embed is empty.

### Dark Mode / `.section-dark`
In dark sections, token values are overridden at the CSS layer:
- `--background` → `hsl(251 19% 29%)`
- `--foreground` → `hsl(0 0% 95%)`
- `--accent` / `--primary` swap so that the lavender purple leads on dark
- Marketing CTA/footer shell (`CtaFooterStarfieldShell`) layers a deeper near-black-to-deep gradient under the starfield for stronger footer contrast while preserving token-driven text/colors.

**Rule:** Never use hardcoded `hsl()` arbitrary values in Tailwind classes. Always use semantic tokens (e.g. `bg-foreground`, `text-background`, `text-foreground/60`).

---

## 03 / Typography

Three Google Fonts form a clear hierarchy. On the marketing site they load via **`@fontsource/*`** imports in **`src/main.tsx`** (self-hosted; do not add Google Fonts `<link>`s to root `index.html`). This standalone **`brand-identity.html`** document still loads the same families from Google Fonts for portability.

### Manrope — Headings (`font-heading`)
- **Tailwind class:** `font-heading`
- **Weights:** 300–800
- **Usage:** All `h1`–`h6`, hero headlines, section titles
- **Size range:** `text-4xl` to `text-7xl` for heroes; `text-3xl` to `text-5xl` for sections
- **Tracking:** `tracking-tight`
- **Leading:** `leading-[1.05]` to `leading-[1.15]`

### Inter — Body / UI (`font-sans`)
- **Tailwind class:** `font-sans`
- **Weights:** 300–600
- **Usage:** Body copy, navigation, buttons, descriptions
- **Size range:** `text-sm` to `text-lg`
- **Leading:** `leading-relaxed` (1.6–1.7)

### DM Mono — Labels / Code (`font-mono`)
- **Tailwind class:** `font-mono`
- **Weights:** 300–500
- **Usage:** Eyebrow labels, stat labels, category tags, code
- **Size range:** `text-xs` to `text-sm`
- **Tracking:** `tracking-[0.15em]` to `tracking-[0.30em]`
- **Transform:** `uppercase`
- **Pattern:** `font-mono text-xs tracking-[0.3em] uppercase text-accent`

---

## 04 / Logo & Mark

- **File:** `src/components/AsterLogo.tsx`
- **Format:** Inline SVG wordmark, `viewBox="0 0 199 83"`, rendered in `currentColor`
- **Animation:** Lottie JSON (`/public/logo-animation.json`) at 1.75× speed, loop, autoplay
- **Fallback:** Static SVG with stroke-dashoffset trace animation on mount (1.2s ease-out, staggered per path)
- **Star mark:** 4-pointed star (✦) with `star-pulse` keyframe (opacity 0.6→1, scale 1→1.15, 3s ease-in-out infinite). The fill path is defined once in **`src/lib/asterLogoStarMark.ts`** (`ASTER_LOGO_STAR_PATH`) and reused by **`AsterLogo`** and the homepage **`HeroNightSky`** Polaris so the mark matches exactly.

### Logo Usage Contexts
| Context | foreground color |
|---------|-----------------|
| On light | `--aster-deep` (currentColor) |
| On dark | white (currentColor) |
| Lavender on gradient | `--aster-purple` |
| On glass | `--aster-deep` |

### Favicons, touch icon & web manifest

Shipped as static files under `public/` and linked from the root [`index.html`](../index.html) at the project root:

| Asset | Path | Notes |
|-------|------|--------|
| ICO favicon | `/favicon.ico` | Legacy + Windows tab icon |
| SVG favicon | `/favicon.svg` | Four-point star on **`--aster-deep`** rounded tile (hex **`#413c58`**, same as `hsl(251 19% 29%)`) |
| Apple touch icon | `/apple-touch-icon.png` | **180×180** PNG, deep background + white star |
| Organization schema logo | `/organization-logo.png` | **256×256** PNG (export of the primary favicon art) referenced as `logo` in sitewide `Organization` JSON-LD |
| Web app manifest | `/site.webmanifest` | **`theme_color`** / **`background_color`**: **`#413c58`** |

---

## 05 / Brand Voice & Tone

Aster communicates like a confident, senior delivery partner — not a software vendor. Technical without being jargony, ambitious without being hyperbolic.

### Voice Attributes

| Attribute | Description |
|-----------|-------------|
| **Confident** | Declarative statements. No hedging. "We help enterprise teams ship software with precision, speed, and confidence." Not "we try to" or "we aim to". |
| **Precise** | Numbers anchor every claim. CSAT 4.6, 200+ brands, 20+ years. Specificity signals accountability. |
| **Transformative** | Language moves from old to new: "From test automation to autonomous agents." |
| **Purposeful** | Emphasises measurable impact — reduction in regression time, CSAT, programme velocity. |
| **Partner-like** | "Let's talk." CTAs feel like an invitation from a peer, not a sales push. |
| **Ambitious but Grounded** | Balanced by heritage and named enterprise logos as credibility anchors. |

### The Aster Way ✓
- "Enterprise delivery, reimagined with intelligence."
- "We reduce SAP regression cycles from 2.5 months to 5 days."
- "We build automated deployment pipelines that ship code 10× faster."
- "We built AI agents to run our own firm. Now we help you do the same."
- "Book a discovery call."

### The Generic Way ✗ — Never Use
- "We leverage industry-leading AI to optimize your testing journeys."
- "Aster provides best-in-class, robust DevOps transformation services."
- "We are an innovative agency at the forefront of AI consulting."
- Exclamation marks in headlines
- Passive voice, hedging ("we try to", "we aim to")

### 4 Copywriting Rules

1. **Lead with the Answer** — Most critical information first. Crucial for AI/Answer Engine Optimization. No build-up, no preamble.
2. **Show, Don't Tell** — Never claim "best" or "innovative." Use numbers to prove it.
3. **Active Voice Only** — "We reduce cycle time" not "Cycle time is reduced by our team."
4. **Kill the Buzzwords** — Banned words: `synergize` · `leverage` · `cutting-edge` · `world-class` · `robust` · `seamless` · `innovative` · `best-in-class`

---

## 06 / Core Messaging

| Layer | Content |
|-------|---------|
| **Page Title / SEO** | Aster ✦ Enterprise Delivery, Reimagined with Intelligence |
| **Hero Badge (DM Mono)** | Innovate with Precision. Transform with Purpose. |
| **Hero Headline (Manrope 800)** | Enterprise delivery, reimagined with intelligence |
| **Hero Sub-copy** | From test automation to autonomous agents. We help enterprise teams ship software with precision, speed, and confidence. |
| **Mission Statement** | We're building a benchmark agency to make enterprise delivery even more intelligent. |
| **Social Proof** | Trusted by 200+ enterprise teams across Europe and the US. |
| **CTA Section** | Ready to build what's next? / Let's talk. → Book a discovery call; marketing pages use **`CtaFooterStarfieldShell`** so one **starfield** + **`.section-dark`** spans **bottom CTA and footer** (North Star metaphor) |
| **Meta Description** | Aster delivers enterprise technology consulting across QA, SAP, Salesforce, and AI-driven delivery. Trusted by 200+ brands across Europe and the US. |
| **Prior work (site section)** | Lead with measurable outcomes and named contexts. Frame heritage (IOVIO / Qualibrate) as field experience, not legal disclaimers. Never reference internal decks or “defensibility” in customer-facing copy; offer depth on calls instead. |

---

## 06b / Partners page (Technology Partners grid)

- **Content:** `src/content/partners.ts` — each partner row includes **`colorToken`** (same approved Aster palette union as **`priorWorkClientColorToken`**) plus **`logoSrc`** under **`public/partners/`**.
- **Visual treatment:** Matches prior-work card chrome: **top accent border** `hsl(var(--token))`, **radial header strip** and **relationship chip** using `hsl(var(--token) / …)` tints (no raw hex in components).
- **Logos:** SAP, Salesforce, and UiPath marks render as **inline SVG in React** (`src/components/partners/PartnerLogoMark.tsx`) with **embedded brand hex fills** (`#0070F2`, `#00A1E0`, `#FA4616`) so colour is reliable (external SVG in `<img>` was still resolving black in some cases). Copies remain under `public/partners/` for reference. Other partners use **raster favicon exports** in `public/partners/` (trademark: display-only identification alongside written partner names).
- **Interaction:** Cards are **not** links — static presentation (no hover border lift).

---

## 07 / UI Components

Built on shadcn/ui + Radix primitives + CVA. Source: `src/components/ui/`.

### Buttons
| Variant | Style |
|---------|-------|
| Primary | `bg-foreground text-background` rounded-full |
| Accent | `bg-accent text-foreground` rounded-full |
| Outline | `border border-border text-foreground` rounded-full |
| Ghost | `text-muted-foreground` no background |
| On dark (CTA) | `bg-foreground text-background hover:bg-foreground/90` rounded-full |
| Hero primary (night sky) | `bg-white text-aster-deep` with restrained neutral shadow |

### Badges
- Purple: `bg-accent/10 text-foreground border border-accent/35`
- Magenta: `bg-aster-magenta/10 text-aster-magenta border border-aster-magenta/25`
- Surface: `bg-secondary text-foreground border border-border`

### Border Radius Scale
- Base `--radius`: `0.75rem`
- `rounded-lg`: 0.75rem · `rounded-md`: 0.625rem · `rounded-sm`: 0.5rem · Pills/CTAs: `rounded-full` (999px)

### Navigation
- Fixed top bar with `backdrop-blur` + border on scroll
- Mega-menu for Solutions (grid layout + lucide icons, Framer Motion AnimatePresence)
- Mobile: slide-in drawer
- "Book a call" desktop arrow chip uses a lighter accent treatment (`bg-accent/85` + white icon) for cleaner contrast.

### Footer (`src/components/Footer.tsx`)
- **Columns:** Company (About, Partners, Careers → `https://jobs.aster.pro`), Work (Services, Solutions, AI & AgentOps), Subscribe (Insights), Connect (Contact, LinkedIn, X), Legal (Privacy, Cookie Policy, Terms, Cookie settings → `openCookiePreferences()`).
- **Social (LinkedIn, X):** Inline SVG icons (`aria-hidden`) beside labels; each sits on a **token-driven** light chip — `bg-popover` + `text-popover-foreground` on the icon — so contrast stays correct inside `.section-dark` without hardcoded hex.
- **Cookie UI:** CMP typography tweaks live in `src/styles/cookie-consent-overrides.css`, imported from `src/bootstrap/cookieConsent.ts` after the vendor stylesheet.

### Logo strip cohesion (`/`)
- Client logos in the ticker and reduced-motion rows use Tailwind **`grayscale`**, **`brightness-75`**, **`contrast-125`**, and **`opacity-70`** on the `<img>` tags (`src/components/sections/LogoStrip.tsx`) so mixed vendor artwork reads as one dark monochrome band.

### Icons
All icons: **lucide-react** — stroke-based, 24px grid, consistent 1.5px stroke weight.

---

## 08 / Motion & Animation

Motion is purposeful and restrained. Entrance animations reveal content; continuous animations signal life without distracting.

| Animation | Implementation |
|-----------|----------------|
| **Page Transitions** | framer-motion route animations via `PageTransition` wrapper |
| **Hero Entrance** | fade-up: `translateY(30px)→0`, 0.6s ease-out, staggered children |
| **Mega Menu** | framer-motion `AnimatePresence`, eased open/close |
| **Logo Star (star-pulse)** | CSS `@keyframes`: opacity 0.6→1, scale 1→1.15, 3s ease-in-out infinite |
| **CTA starfield** | **`CtaFooterStarfieldShell`** (`src/components/CtaFooterStarfieldShell.tsx`): `.section-dark` + **`CtaFooterStarfieldBackdrop`** (~96 Halton 2×3 dots) + **`Footer tone="continuation"`** on home, services, solutions (+ detail), about, AI, partners, insights index, and article pages; `cta-star-twinkle` uses opacity + `translate(-50%,-50%) scale` only; lavender via `--primary`; static under `prefers-reduced-motion` |
| **Logo Lottie** | Lottie JSON at 1.75× speed, loop, autoplay |
| **Logo SVG Trace** | `stroke-dasharray` / `stroke-dashoffset` 0→full length, 1.2s ease-out, staggered per path on mount |
| **Magnetic CTA** | Framer Motion `useSpring` on clamped offset (`MagneticButton`: default **±5px** cap, `strength` ~0.11, stiffness **220** / damping **32**) |
| **Logo Ticker** | CSS `scroll-left`: `translateX(0→-50%)`, 30s linear infinite |
| **Accordion** | `accordion-down/up`: height 0↔radix variable, 0.2s ease-out |
| **Scroll reveal** | `ScrollReveal` component: fade + translateY, triggered by IntersectionObserver |
| **Service aura background** | token-driven layered aura via `.service-aura-layer` + `.service-aura-layer-shift` in `src/index.css`; **static by default**, continuous motion only when a parent has `.aura-animated` (performance policy) |

---

## 09b / Precision Atmosphere (UI Design Language)

The digital experience of aster must feel like looking through a high-end optical instrument. It relies on depth, light, and geometry.

### Glassmorphism — **Active on site**
Used for cards, nav panels, and icon chips.
```css
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
/* Tailwind utility class: .glass-card */
/* hover: border-color rgba(255,255,255,0.22), box-shadow 0 8px 32px rgba(0,0,0,0.12) */
```

### Dot-Grid Overlay — **Active on site**
Structural rhythm on section backgrounds.
```css
background-image: radial-gradient(rgba(200, 154, 245, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
/* Tailwind utility class: .dot-grid */
```

### Service Aura Background — **Active on site**
Service and selected home visuals use a consistent layered aura system:

```css
/* base: dark surface (e.g. bg-foreground on light pages, bg-aster-deep in .section-dark where needed) */
/* layer 1: .service-aura-layer — token tint via --service-aura-color: hsl(var(--aster-* token)) */
/* layer 2: .service-aura-layer-shift — soft highlight pass */
/* optional: .aura-animated on container — enables continuous aura motion (opt-in) */
```

Rules:
- Colors must come from each item’s `colorToken` (services: `src/content/services.ts`).
- **Default:** aura layers are **static** (no continuous animation) to limit GPU use.
- **Opt-in motion:** add class `.aura-animated` on the visual container only when continuous motion is required.
- Prefer **transform/opacity** for any motion; avoid animating gradient position/size on every frame.
- Respect `prefers-reduced-motion`: non-essential aura animations off.
- On smaller viewports, continuous aura animation is disabled in CSS even if `.aura-animated` were present (performance guard).

### Home page link cards (`DualTrack`)

Home “dual track” cards reuse the same aura stack + **icometric** foreground art as Services. Continuous aura pulse is **not** required on Home; interaction relies on **hover** (token bloom, scale, glow). Implementation: `src/components/sections/DualTrack.tsx`.

### Insights articles (listing, preview, article hero)

**Insights** use the same **aura + icometric color-pop** treatment as Services and DualTrack. The visual is **not** per-article photography: it is driven by the MDX **`category`** field, mapped in **`src/lib/insightVisuals.ts`** to a **`colorToken`** and one SVG under **`public/icometric/`**. **Listing and home preview cards** use a **split layout** (graphic on top, body copy on a standard `background` text panel). When adding a new insight in an existing category, **no new illustration** is required. For a **new category**, authors must register the category in `insightVisuals.ts` and supply or reuse icometric art following **`.cursor/rules/service-illustration-generation.mdc`** and **`.cursor/rules/insights-visual-authoring.mdc`**.

### Illustration color-pop (in-app)

Foreground SVGs (icometric library) keep their **original linework**. Color is applied in the UI with a **token-driven three-tone** tint (light / base / dark via `color-mix(...)`), plus `mix-blend-mode: color` and controlled `filter: saturate()` / `contrast()` on the illustration stack. Mask URLs for CSS `mask-image` must be **quoted and percent-encoded** when filenames contain spaces — use `cssMaskUrlFromPublicPath()` from `src/lib/svgMaskUrl.ts`.

### Icometric asset library

- **Location:** `public/icometric/` (large reusable SVG set).
- **Authoring rule:** prefer an existing icometric asset before generating a new SVG; new art must match the icometric **flat geometric** family (see `.cursor/rules/service-illustration-generation.mdc`).
- **Helper:** `npm run illustrations:check` lists mappings, suggestions, and unused SVGs, and **writes** `public/icometric-manifest.json` (sorted list of all `/icometric/*.svg` paths) for tooling and the brand gallery.
- **Full visual catalogue:** open `public/brand-identity.html` in the browser (section **15 / Icometric library**, nav **Icometric**) for a searchable grid of every asset; **click any thumbnail to download** the corresponding SVG. The page loads `public/icometric-manifest.json`; use the dev server (`npm run dev` → `/brand-identity.html`) or any host that serves `public/` so the JSON request succeeds.


### Noisy Gradient — Reference (not currently implemented)
```css
background: linear-gradient(#1a1528, #413C58);
/* + SVG feTurbulence noise at 4–5% opacity, blend-mode: soft-light */
```

### Liquid Blob — Reference (not currently implemented)
```css
/* Large SVG path, #C89AF5 at 20% opacity */
filter: blur(500px);
/* @keyframes blob-drift, 30s ease-in-out infinite */
```

---

## 09 / Layout & Spacing

Tailwind default scale, constrained to a 1400px max-width container.

| System | Value |
|--------|-------|
| Container max-width | 1400px (`max-w-screen-2xl`) |
| Container padding | `px-6 lg:px-8` |
| Hero vertical padding | `pt-32 pb-16 lg:pt-40 lg:pb-24` |
| Section padding (standard) | `py-24 lg:py-32` |
| Section padding (compact) | `py-20 lg:py-28` |
| Grid — logo strip | `md:grid-cols-7` |
| Grid — proof points | `grid-cols-2 md:grid-cols-4` |
| Grid — services | `grid-cols-1 lg:grid-cols-2` |
| Grid — dual-track | `md:grid-cols-2` |

---

## 10 / Target Audience

Enterprise technology leaders across Europe and the US, primarily in regulated or operationally complex industries.

| Persona | Description |
|---------|-------------|
| **QA & Engineering Leads** | Heads of Engineering and QA Directors seeking test automation, CI/CD maturity, and regression risk reduction. |
| **SAP Programme Owners** | CIOs and SAP CoE leads running S/4HANA transformations who need experienced implementation partners. |
| **Salesforce Platform Teams** | Salesforce Architects and DevSecOps leads who need sustainable release velocity without quality trade-offs. |
| **AI / Innovation Leads** | CTOs and digital transformation officers piloting autonomous agents and AI-driven delivery workflows. |
| **Geography** | Primary: Netherlands, Western Europe. Secondary: US enterprise. Sectors: finance, travel, CPG, retail, defence. |
| **Company Size** | Mid-large enterprises (500+ employees). |

**Named clients:** Heineken · ING · Air France-KLM · SAP · AkzoNobel · Nouryon · Amadeus · Calvin Klein · Delaware · Ministerie van Defensie

---

## 11 / Service Lines

Five practice areas, each with dedicated pages, solution detail pages, and case studies.

| Service | Headline stat |
|---------|--------------|
| **Quality Engineering** | 340% coverage increase; 2.5 months → 5 days regression cycles |
| **SAP Transformation** | 50+ SAP programmes delivered |
| **Salesforce DevSecOps** | 85% faster releases |
| **DevOps Consulting** | 10× deployment frequency |
| **AI & AgentOps** | 3× productivity gains; 70% reduction in manual testing effort |

**Proof points:** 4.6 Client CSAT · 200+ brands served · 20+ years expertise

---

## 14 / Illustration & Iconography

### Service & marketing foreground illustrations (icometric)

**On the website**, service and home card visuals use SVGs from **`public/icometric/`** (or bespoke `public/service-illustration-*.svg` when no icometric match exists). These files are **flat 2D geometric** construction — **not isometric**. Inside the SVG: flat fills, strong outlines, limited detail density, no gradients or photo textures (see `.cursor/rules/service-illustration-generation.mdc`).

**Insights** use the same library and the same in-app treatment; art is chosen per **`category`** via `src/lib/insightVisuals.ts`, not per-article `heroImage` (see §09b — Insights articles).

**In the UI**, color is not baked as a single flat purple: the live treatment applies each service’s **`colorToken`** via layered **aura** + **color-pop overlay** on top of the preserved artwork (see §09b above).

### Iconography (UI chrome)

- **Library:** `lucide-react` — stroke-based, 24px grid, consistent 1.5px stroke weight
- **53.3° Motif:** Where appropriate, icons can incorporate the 53.3° angle as slanted cuts on standard shapes
- **Custom icons:** Flat 2D vector construction; colors from tokens

### Photography Ban
**Strictly prohibited:** Stock photos of people in suits looking at laptops, shaking hands, or standing in generic offices. Replace with geometric illustrations or abstract UI.

### AI generation prompt (new SVGs, icometric-aligned)

Use the template in `.cursor/rules/service-illustration-generation.mdc` — **flat 2D**, not isometric, monochromatic palette derived from the target **`colorToken`**, white accents, no gradients inside the object.

---

## 15 / Icometric library (full catalogue)

- **Manifest:** `public/icometric-manifest.json` — JSON list of every `/icometric/*.svg` path; **regenerated** when you run `npm run illustrations:check`.
- **Visual browser:** `public/brand-identity.html` includes section **15 / Icometric library** (nav link **Icometric**): searchable thumbnail grid of all assets; each thumbnail is a download link for its SVG. Open via the dev server (e.g. `npm run dev` → `/brand-identity.html`) or any deployment that serves `public/` so `GET /icometric-manifest.json` succeeds.

---

## 16 / Design System (Figma)

**File:** [Aster — Design System](https://www.figma.com/design/AvBBl54w2DqZqWngclUiR8/Aster-%E2%80%94-Design-System)  
**Status:** V1.0 — May 2026  
**Purpose:** Canonical visual reference for designers working alongside the `aster-remix` codebase. Tokens, typography, and components mirror what ships in `src/index.css` + `tailwind.config.ts`.

### What it contains

| Category | Count | Notes |
|----------|-------|-------|
| Design tokens (variables) | 91 | Split across 4 variable collections |
| Variable collections | 4 | Primitives, Semantic, Typography, Radius & Spacing |
| Text styles | 21 | Matching Tailwind typography scale |
| Component variants | 30+ | Button, Input, Card, Badge, Toast, Dialog, Drawer, Tabs, and more |
| Pages | 34 | Cover, Getting Started, Foundations (4), component pages (28), Brand Identity |

### Variable collections

- **Primitives** — raw palette values (deep, purple-01 through purple-08, magenta, glass, etc.)
- **Semantic** — intent-mapped tokens (background, foreground, accent, muted, border, card, popover, sidebar, destructive)
- **Typography** — font-family, size, line-height, letter-spacing, weight values
- **Radius & Spacing** — border-radius scale + spacing scale (matching Tailwind config)

### Usage for agents and designers

- Tokens in this file are the design-side representation of the CSS variables defined in `src/index.css`. When adding a new token to the codebase, add the corresponding variable to the Figma Primitives or Semantic collection.
- Component pages use auto-layout with hug-contents sizing. Do not set fixed heights on container frames — let content determine height.
- Each component page follows the pattern: `ComponentSet` at top → variant frames below → usage examples to the right.

---

## Technical Stack Reference

| Layer | Technology |
|-------|-----------|
| Framework | Vite + React Router |
| Styling | Tailwind CSS (HSL token system) |
| UI primitives | shadcn/ui + Radix UI + CVA |
| Typography | Google Fonts: Manrope, Inter, DM Mono |
| Animation | Framer Motion, Lottie, CSS @keyframes |
| Icons | lucide-react |
| Color tokens | CSS custom properties in `src/index.css` |
| Content | `src/content/*.ts` (TypeScript content modules) |
| Logo | `src/components/AsterLogo.tsx` + `public/logo-animation.json` |
| SVG mask helper | `src/lib/svgMaskUrl.ts` (safe `mask-image` URLs for paths with spaces) |
| Icometric report + manifest | `npm run illustrations:check` → `scripts/icometric-helper.ts` (also writes `public/icometric-manifest.json`) |

---

*Aster ✦ Brand Identity Document — Version 2.3 — April 2026 — AsterX B.V.*  
*Source files: `src/index.css` · `tailwind.config.ts` · `src/content/services.ts` · `src/content/home.ts` · `public/brand-identity.html`*