Brand Identity Document — v2.2 · April 2026
Enterprise delivery, reimagined with intelligence. A complete reference for brand origin, strategy, colors, typography, voice, and design language.
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
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 / 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.
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.
The Bridge — Delivery Intelligence
02 / Color Palette
Built on HSL design tokens. A cool purple-gray foundation with soft lavender and vivid accent hues. All values live in src/index.css as CSS custom properties.
The canvas starfield reads --aster-deep, --aster-purple-01, --aster-magenta, --aster-purple, and --aster-glass for a dark violet sky plus a screen-blended magenta accent. Stars use an equirectangular map; coordinates are illustrative J2000 + mean sidereal time (see celestialAmsterdam.ts). A looping dotted sight line runs from the bottom right up to Polaris at exactly 53.3°, mirroring the brand logo, along with a multi-layered parallax effect (off when prefers-reduced-motion). Hero copy is bottom-weighted and left-aligned so Polaris stays visible. The eyebrow keeps a restrained glass look (no bloom halo), and the primary night-sky CTA runs as a white pill with deep text for high contrast. The /about page hero uses HeroNightSky full-bleed with the same overlay and gradient headline, without the home eyebrow or hero CTAs (About.tsx). Code: HeroNightSky.tsx, Hero.tsx, rootHslTokens.ts.
Interactive lab — same React canvas with controls for reference time, LST offset, motion multiplier, and parallax (jump). The embed loads the SPA route /brand-identity/sky-lab; it only works when this HTML is served from the same origin as the app (e.g. production or npm run preview), not from file://.
Open sky lab in a new tab — if the iframe is blocked or empty, use this link.
Dark Mode / .section-dark
In dark sections the token values are overridden: background becomes hsl(251 19% 29%), foreground becomes hsl(0 0% 95%), and the accent/primary swap so that the lavender purple leads on dark. Marketing CTA/footer shells add a deeper near-black-to-deep gradient under the starfield to avoid flat purple bands.
03 / Typography
Three Google Fonts form a clear hierarchy: Manrope for impact, Inter for legibility, DM Mono for precision labels. On the live marketing app, the same families are self-hosted via @fontsource/* imports in src/main.tsx (this standalone page loads them from Google Fonts for portability).
04 / Logo
An inline SVG wordmark (viewBox="0 0 199 83") combining the Aster letterforms with a pulsing 4-pointed star mark on the left — rendered in currentColor for full flexibility. A Lottie animation (/logo-animation.json) plays at 1.75× speed on load.
Star Mark Behaviour
The 4-pointed star (✦) to the left of the wordmark animates with a star-pulse keyframe (opacity 0.6→1, scale 1→1.15, 3s ease-in-out infinite). Its fill path is shared from src/lib/asterLogoStarMark.ts with the homepage HeroNightSky Polaris so the mark matches exactly. The full logo uses a Lottie animation at 1.75× speed, falling back to the static SVG if the JSON cannot load.
src/lib/asterLogoStarMark.ts
src/components/AsterLogo.tsx
public/logo-animation.json
Favicons & manifest
Static assets under public/, linked from the repo index.html: /favicon.ico, /favicon.svg (four-point star on #413c58 / --aster-deep), /apple-touch-icon.png (180×180), /organization-logo.png (256×256; Organization JSON-LD logo), and /site.webmanifest with theme_color / background_color #413c58.
05 / Brand Voice
Aster communicates like a confident, senior delivery partner — not a software vendor. Technical without being jargony, ambitious without being hyperbolic.
Aster makes declarative statements. No hedging. "We help enterprise teams ship software with precision, speed, and confidence." Not "we try to" or "we aim to".
Numbers anchor every claim. CSAT 4.6, 200+ brands, 20+ years. Specificity signals accountability. Vague superlatives are avoided in favour of verifiable metrics.
The language moves from old to new: "From test automation to autonomous agents." Aster frames itself as a catalyst, not just a service provider.
"Innovate with Precision. Transform with Purpose." Every project has outcomes. Language emphasises measurable impact — reduction in regression time, CSAT, programme velocity.
"Let's talk." "Ready to build what's next?" CTAs feel like an invitation from a peer, not a sales push. Relationship-first.
"Benchmark agency" is an aspirational self-description, yet it is balanced by heritage (20+ years), proof points, and named enterprise logos — credibility anchors ambition.
The Aster Way
The Generic Way — Never Use
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. Specificity signals accountability.
3. Active Voice Only
Write with forward momentum. "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
From a clear page title down to individual CTAs, Aster's messaging is layered — each level sharpening the one above it.
src/content/partners.ts. Each card uses the same token-only accent pattern as prior-work (top border + radial header + tinted chip). SAP / Salesforce / UiPath use inline SVG in PartnerLogoMark.tsx (brand hex fills); other logos use rasters under public/partners/. Cards are not links.07 / UI Components
Built on shadcn + Radix + CVA. Border radius: 0.75rem (lg). Pill shapes (rounded-full) for CTAs and badges.
Buttons
Badges
Partners (Technology Partners)
The /partners grid uses token-driven top borders and radial header strips (same pattern as prior-work case cards). Logos are stored under public/partners/; relationship labels use tinted chip styling. Static cards — not clickable.
UI Card (shadcn)
Navigation
Footer
Marketing footer in Footer.tsx: Company includes Partners and Careers (jobs.aster.pro); Connect lists Contact, LinkedIn, and X. External LinkedIn/X rows use a small popover-token chip (bg-popover + text-popover-foreground on the SVG) so chips stay legible on .section-dark. Cookie banner type scale is tuned via cookie-consent-overrides.css.
Home logo strip treatment
Ticker and reduced-motion logo rows apply Tailwind grayscale, brightness-75, contrast-125, and opacity-70 on each <img> (LogoStrip.tsx) so mixed vendor marks read as one dark monochrome band.
Icon Library
All icons are sourced from lucide-react. Used in navigation, hero section, solution tiles, and interactive components. Stroke-based, consistent 24px grid.
08 / Motion & Animation
Motion is purposeful and restrained. Entrance animations reveal content; continuous animations signal life without distracting.
09b / 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. The current site implements glassmorphism, dot-grid, token-driven service/home visuals (aura + icometric art), and a twinkling starfield across the bottom CTA and footer on marketing pages (CtaFooterStarfieldShell + cta-star-twinkle). Reference patterns below remain available for further hero experiments.
Glassmorphism — Active
Used for cards, nav panels, and icon chips.
backdrop-filter: blur(16px);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
/* hover: border opacity ↑, subtle shadow */
Dot-Grid Overlay — Active
Structural rhythm on section backgrounds.
background-image: radial-gradient(
rgba(200,154,245,0.08) 1px, transparent 1px
);
background-size: 24px 24px;
Noisy Gradient — Reference
Hero/CTA dark backgrounds. Not currently implemented.
background: linear-gradient(
#1a1528, #413C58
);
/* + SVG feTurbulence noise at 4-5% opacity,
blend-mode: soft-light */
Liquid Blob — Reference
Large organic decorative element. Not currently implemented.
/* Large SVG path, #C89AF5 at 20% opacity */
filter: blur(500px);
/* @keyframes blob-drift, 30s ease-in-out ∞ */
Service, home & Insights visuals — Active
Services (/services), home link cards (DualTrack), and Insights (article hero, featured strip, split listing cards) use a dark base plus layered .service-aura-layer and .service-aura-layer-shift, tinted by each item’s colorToken. Foreground art comes from public/icometric/ with an in-app token-driven color-pop overlay (mix-blend-mode: color, color-mix()). Insights grid and home preview use a split card (aura graphic on top, body copy on the normal page background). Map meta.category → art via src/lib/insightVisuals.ts; see .cursor/rules/insights-visual-authoring.mdc.
.aura-animated. Mobile / reduced-motion guards apply.cssMaskUrlFromPublicPath() for SVG paths with spaces.09 / Layout & Spacing
Tailwind's default scale, constrained to a 1400px max-width container with 2rem padding. Generous vertical rhythm signals premium positioning.
10 / Target Audience
Enterprise technology leaders across Europe and the US, primarily in regulated or operationally complex industries.
Heads of Engineering and QA Directors seeking test automation, CI/CD maturity, and regression risk reduction.
CIOs and SAP CoE leads running S/4HANA transformations who need experienced implementation partners.
Salesforce Architects and DevSecOps leads who need sustainable release velocity without quality trade-offs.
CTOs and digital transformation officers piloting autonomous agents and AI-driven delivery workflows.
Primary: Netherlands, Western Europe. Secondary: US enterprise. Sectors: finance, travel, CPG, retail, defence.
Mid-large enterprises (500+ employees). Logo strip clients include Heineken, ING, Air France-KLM, SAP, AkzoNobel, Nouryon, Amadeus, Calvin Klein.
11 / Service Lines
Five practice areas, each with dedicated pages, solution detail pages, and case studies.
Accent color (website)
Each service maps to one unique colorToken in src/content/services.ts for visuals and UI accents. The /services marketing hero uses a purple→violet gradient band; centered anchor pills for each practice area sit in that hero.
| Service | Token |
|---|---|
| Quality Engineering | --aster-green-01 |
| SAP Transformation | --aster-sap-blue |
| Salesforce DevSecOps | --aster-salesforce-blue |
| DevOps Consulting | --aster-devops-amber |
| AI & AgentOps | --aster-magenta |
Packaged solutions (website)
Each solution in src/content/solutions.ts has one unique colorToken (IFS → purple, Salesforce → --aster-salesforce-blue, QA → green, AgentOps → red-02).
| Solution | Token |
|---|---|
| IFS Evergreen Assurance | --aster-purple |
| Salesforce Org QuickScan | --aster-salesforce-blue |
| QA Maturity Scan | --aster-green-01 |
| AgentOps Readiness Scan | --aster-red-02 |
IFS & Salesforce packaged solutions use brandLogo + SolutionBrandMark (token border / surface); others use lucide-react via iconName.
Client Portfolio
14 / Illustration & Iconography
Marketing and product UI use a shared icometric SVG library (public/icometric/): flat 2D geometric art, not isometric. On the site, color is applied per-service via colorToken (aura + color-pop overlay). Insights use the same library; art is chosen per article category in insightVisuals.ts (see .cursor/rules/insights-visual-authoring.mdc). No stock “people in suits” photography.
Illustration Style (source files)
colorToken in the app.public/icometric/; run npm run illustrations:check when adding assets.Iconography
AI Generation Prompt (new SVGs)
Follow the template in .cursor/rules/service-illustration-generation.mdc — flat 2D, icometric family, monochromatic palette per token, white accents, no gradients inside the object.
"A simple, minimalist geometric vector illustration of [item], matching the visual language used in public/icometric/. Use clean flat 2D construction (not isometric). Build from basic geometric shapes with clear hierarchy. Match stroke weight, rounded corners, and limited detail density. Monochromatic palette derived from the service color token: light tint for primary surfaces, medium for secondary, darker for outlines; include small white accents. Flat solid fills only; no gradients."
15 / Icometric library
Browse every SVG under public/icometric/. Click a thumbnail to download that file. The list is generated into public/icometric-manifest.json when you run npm run illustrations:check. Open this page via the dev server (e.g. npm run dev → /brand-identity.html) or a deployed build so the manifest can load.
16 / Design System (Figma)
The canonical Figma file covering all tokens, typography, and components. The visual source of truth for designers working alongside the aster-remix codebase.
| Collection | What it covers | Code counterpart |
|---|---|---|
| Primitives | Raw palette values — deep, purple-01…08, magenta, glass | src/index.css — :root variables |
| Semantic | Intent-mapped tokens — background, foreground, accent, muted, border, card, popover, sidebar, destructive | tailwind.config.ts — color mapping |
| Typography | Font family, size, line-height, letter-spacing, weight values | tailwind.config.ts — fontSize / fontFamily |
| Radius & Spacing | Border-radius scale + spacing scale | tailwind.config.ts — borderRadius / spacing |
Version V1.0 · May 2026. When adding a new token to the codebase, add the corresponding variable to the Figma Primitives or Semantic collection so the file stays in sync. Component pages use auto-layout with hug-contents sizing — do not set fixed heights on container frames.