Aquiva Brand Book

Aquiva UI Kit

The complete design system for Aquiva surfaces -- slides, marketing, and brand foundation -- in one place. Two surface kits share one set of brand tokens.

Reference deliverables (open these first)

The fully-populated reference files. Open one, fork it, rewrite the content.

• Aquiva Sample Deck -- a real 56-slide capabilities deck about Aquiva. Mission, AI POD methodology, RainFocus customer story, team pod, joint roadmap. Every layout in the system is exercised at least once. The easiest place to start a new deck.
• Aquiva Sample Page -- the full aquiva.com structure rebuilt with the marketing kit. Reference for what a complete site assembly looks like.
• Slide Library -- every slide layout, empty, with placeholder content. The designer's swatch book; pick a layout, copy its block out, fill it in.

Slides kit

Fixed-canvas presentation system, 1920x1080, scaled by <deck-stage>.

Marketing kit

Responsive marketing-site components. Designed at 1280-1600 width.

Brand foundation

Lives at the project root, used by both kits.

Brand rules

• Colors -- pink, blue, purple, deep purple, warm cream. One accent per surface, not all four. Never invent new ones; pull from colors_and_type.css.
• Type -- Lexend for display + headings, Open Sans for body, JetBrains Mono for code or labels. Never substitute Inter, Roboto, or system stacks.
• Layout -- slides are fixed 1920x1080 and scale via <deck-stage>; marketing pages are responsive but assume a 1280-1600 design width.
• Imagery -- placeholders are fine in drafts; swap in real photography and product screenshots before publishing. Don't draw "iconographic illustrations" in SVG.

Marketing UI Kit

Pixel-friendly recreation of Aquiva's marketing surface -- built from the brandbook's visual rules and the canonical aquiva.com structure.

Files

Components exported to window

Foundational (components.jsx)

• WebNavBar -- sticky top nav with logo, links, primary CTA
• WebHero -- gradient hero with optional right-side card (live agent log on the sample page)
• TaglineBand -- full-bleed display tagline
• PillarsFour -- 4-up numbered pillars (AI Native, Product Grade, Acceleration, Outcome Obsessed)
• TrustedBy -- logo strip
• ServicesSix -- 3x2 services grid
• WebFooter -- dark footer with columns

Composed sections (web-sections.jsx)

• EngagementTable -- pricing-style comparison with one column highlighted (AI POD)
• PipelineSection -- 5-stage horizontal pipeline with per-stage activities + stats foot
• IndustryGrid -- 4 industry cards + ISV gradient tile
• IsvStrip -- full-bleed dark band linking to ISV practice
• SapimSection -- sAPIm product callout with live-tailing terminal
• ProofCases -- 4-card customer proof grid
• TestimonialsRow -- 3-quote testimonial row
• PerspectivesGrid -- 3-card editorial / blog grid
• ClosingBand -- dark CTA band before footer

Caveats

• No codebase or Figma was shared; layout is inferred from the brandbook's "Who we are" core-values screenshot, the aquiva.com structure described in our intake, and general SaaS marketing conventions matched to brand rules.
• Service blurbs and customer proof are representative. Confirm copy with stakeholders before publishing.
• Customer logos in TrustedBy and ProofCases are placeholder marks -- swap in the real artwork when provided.

v1.1 — token alignment (April 2026)

After the v1 marketing site review, headline emphasis was migrated from <em style={{ fontStyle: 'italic', color: 'var(--aq-pink)' }}> to plain <em> — the colors_and_type.css rules now style the accent automatically (pink, weight 500, never italic). Two intentional non-pink emphases (the hero "AI-native" in light blue and the closing "Aquiva" in white) keep inline overrides with fontStyle: 'normal'.

Aquiva Slide Layouts

Comprehensive library of slide layouts derived from uploads/Aquiva - Slides Template _ 2026.pdf (163 slides).

All layouts are built as React JSX components targeting 1920x1080 slides, and use the shared brand tokens from colors_and_type.css.

Layout taxonomy

A. Cover & navigation

• CoverSlide -- title cover ("The AI-native partner for growth companies.")
• SectionDivider -- transition slide w/ left-aligned title and small all-caps subhead
• Agenda -- 1-10 numbered items + page numbers
• ThankYouSlide -- 1-3 presenters with name/title/email
• QuestionsSlide -- single big "Questions?" prompt

B. Hero stats / company overview

• GlobalReachSlide -- 5-stat row + region list + Salesforce/client logos
• BigNumberSlide -- single huge numeral with subhead
• StatsRow -- 2- or 3-column big stats with explainers
• StatPercent -- single big % statistic with citation
• StatPercentMulti -- 2- or 3-row big % statistics

C. Mission & values

• CoreFocusSlide -- short mission statement
• MissionSlide -- paired headline + body
• ValuesIntroSlide -- values intro

D. Content layouts

• BulletsTwoCol -- 2-column titled bullet groups
• BulletsFourCol -- 4-column titled bullet groups
• SixSectionGrid -- 6-section text grid (3x2)
• NumberedTextSlide -- large numeral + content
• TextHighlight -- body + 1 big highlight
• TextTwoHighlight -- body + 2 stacked highlights
• TextWithImage -- body + image (left or right)

E. People

• TeamIntroRow -- 5/6 person row with role/name/details
• TeamStructureOrg -- leader at top + reports tree
• TeamGrid -- 6/7 person grid (no leader)
• AnniversariesGrid -- celebration grid

F. Process & timeline

• WinsStepsSlide -- 1st/2nd/3rd step -> result
• ProcessFan -- step -> step -> branching results
• TimelinePhases -- horizontal phased timeline w/ weeks + activities
• SprintCycleSlide -- circular 4-phase sprint cycle
• ThreePhaseApproach -- 3-column phased approach
• MethodologySlide -- 5-stage methodology row

G. Quotes

• BigQuote -- full-bleed pull quote
• PersonQuote -- person photo + quote + attribution (leadership-testimonial style)

H. Customer & case study

• ChallengeSolutionAbout -- 3-column case study
• CustomerOverviewSlide -- Objective / Tech Stack / Desired State / Business Units
• ThreePillars -- 3 vertical text pillars
• RolesMatrix -- Functional / Technical role groupings

I. Product & capability

• SFProductsGrid -- Salesforce products icon grid
• CapabilitiesWheel -- radial capabilities map
• UseCaseColumns -- 3 use cases each with prompt/actions
• TwoLineCallouts -- 3 stacked stat callouts

J. Devices & screenshots

• FullScreenshotSlide -- full-bleed screenshot
• ScreenshotWithDetails -- single screen + details
• MultiScreenshotGrid -- 2x2 screenshot grid
• DeviceMockup -- laptop / desktop / tablet / mobile bezels with placeholder

K. Charts & data

• DonutChartSlide -- donut with legend
• BarChartSlide -- horizontal bar chart
• MindMapSlide -- radial mind map
• RoadmapNowNextLater -- 3-column roadmap
• KanbanSlide -- Backlog / In Design / In Progress / Completed
• GanttSlide -- feature lanes by month

L. Strategy frameworks

• WhyHowWhat -- Sinek-style 3 concentric questions
• ProductStrategyQuad -- 2x2 strategy quad

Files

• deck-stage.js -- slide deck shell (scaling, nav, speaker notes)
• slide-primitives.css -- base CSS for the 1920x1080 frame and shared elements
• layouts/primitives.jsx -- shared building blocks (Slide, SlideHeader, SlideFooter, SlideBody, Title, Subtitle, Eyebrow, Pill, NumBadge, PhotoPH, Wordmark, BulletList, Arrow, CornerGlow, Stat, ...)
• layouts/cover.jsx -- A. Cover & navigation
• layouts/stats.jsx -- B. Hero stats / company overview (incl. TwoLineCallouts)
• layouts/content.jsx -- C. Mission & values + D. Content layouts
• layouts/people.jsx -- E. People
• layouts/process.jsx -- F. Process & timeline + G. Quotes
• layouts/customer.jsx -- H. Customer & case study + product grid (SFProductsGrid, UseCaseColumns, CapabilitiesWheel)
• layouts/devices.jsx -- J. Devices & screenshots + K. Charts & data + L. Strategy frameworks

Usage

<link rel="stylesheet" href="../../colors_and_type.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
<script src="ui_kits/slides/deck-stage.js"></script>

<script type="text/babel" src="ui_kits/slides/layouts/primitives.jsx"></script>
<script type="text/babel" src="ui_kits/slides/layouts/cover.jsx"></script>
<!-- ...other layouts -->

<deck-stage>
  <section><div id="slide-1"></div></section>
  <!-- ... -->
</deck-stage>

<script type="text/babel">
  ReactDOM.createRoot(document.getElementById('slide-1')).render(<CoverSlide title="..." />);
</script>

Brand pill button — use for every call-to-action; pick the *-on-dark variants on dark hero/footer sections.

<Button variant="primary" size="md" onClick={save}>Talk to us</Button>
<Button variant="ghost">Explore</Button>
<Button variant="primary-on-dark" as="a" href="/contact">Start a conversation</Button>

Variants: primary (blue, darkens to purple on hover), ghost (outline), primary-on-dark (white fill), ghost-on-dark (white hairline). Sizes: sm · md · lg. Pass icon / iconRight for inline glyphs. One primary button per view; keep labels short and in sentence case.

Small pill badge / tag for statuses, categories, and metadata.

<Badge variant="blue">Salesforce</Badge>
<Badge variant="pink">New</Badge>
<Badge variant="neutral">Draft</Badge>

Variants: blue · purple · neutral (soft, everyday) and pink · solid (high-emphasis — use sparingly, pink stays within the 10–20% accent budget).

Surface card for grouping content — feature blocks, stats, list items.

<Card tone="surface" hover>
  <Eyebrow>Services</Eyebrow>
  <h3 className="aq-h3">Salesforce</h3>
  <p className="aq-p">Salesforce, end to end.</p>
</Card>

Tones: surface (white, default), violet / blue (soft feature backgrounds), cream (warm editorial). Shadows are always soft and purple-tinted — never a hard black or a colored left-border stripe. Set hover for the lift interaction.

All-caps overline label that sits above a heading or section title.

<Eyebrow>What we are</Eyebrow>
<h2 className="aq-h2">The AI-native partner for growth companies.</h2>

Uses the .aq-eyebrow recipe (Lexend Medium, 12px, tracked, muted gray). Keep it to 1–3 words.

Single-line text field with optional label and hint.

<Input label="Work email" type="email" placeholder="you@company.com" />
<Input label="Company" hint="As it appears on your contract" />

Focus shows the brand blue 3px outer glow (--shadow-focus). Pairs with Button for forms. Use sentence-case labels.

Signature stat block — lead with a big Lexend Black numeral, single-word label beneath.

<Stat value="1800+" label="Certifications" />
<Stat value="4.95/5" label="CSAT" color="pink" align="center" />
<Stat value="200+" label="Projects Delivered" color="white" />  {/* on dark */}

Use color="white" on dark surfaces. Keep labels to one word where possible. Numbers are factual and impressive — never invented filler.

aquiva-design-system v2026.6.2

"The AI-native partner for growth companies."

The brand system for Aquiva, the AI-native consulting and engineering partner for growth companies. The look is cool, calm, professional: cornflower blue and jackson purple with a cerise-red accent, geometric Lexend headlines over humanist Open Sans body text.

Use this system to produce well-branded artifacts — marketing pages, decks, prototypes, sales collateral — without re-deriving brand rules each time. It ships ready-to-use tokens, fonts, React components, and full kit surfaces as a Claude plugin: versioned in GitHub, reviewed via Pull Requests, and installable into Claude Code and Cowork. One version covers everything — the design system, the plugin, and the GitHub release.

Brand book site

The whole system is also published as a single-page brand book — a public, navigable site generated from this repo (tokens, preview cards, component docs, and the skill), with a client-side Download PDF. It is built by npm run build:site (output in site/, gitignored) and deployed on Vercel, which auto-deploys on every push to main, so the canonical URL never drifts from the repo. Nothing is authored twice — the book is regenerated from source.

Figma: designers pull these tokens into Figma with Tokens Studio, pointed at colors_and_type.css (the :root custom properties are the source of truth). The system does not ship a synced Figma file — colors_and_type.css is the contract.

What's in here

Aquiva Design System
├── README.md                  ← you are here: brand rules + how to use the system
├── styles.css                 ← root entry (imports tokens + slide primitives)
├── colors_and_type.css        ← all CSS tokens (:root) + semantic classes
├── fonts/                     ← Lexend, Open Sans, JetBrains Mono (variable .ttf)
├── assets/                    ← logos, icons, imagery
│   ├── logo-wordmark-indigo.svg         ← wordmark on light bg (deep indigo)
│   ├── logo-wordmark-monochrome.svg     ← wordmark, gray treatment
│   ├── logo-wordmark-gray-blue.svg      ← gray wordmark, blue underline
│   ├── logo-wordmark-white.svg          ← wordmark on dark bg
│   ├── logo-wordmark-xs.svg             ← small-size lockup (12–24 px)
│   ├── logo-color.svg / logo-color-no-bg.svg   ← A-sign mark
│   ├── icons/                           ← icons.jsx (Lucide-based set) + README
│   ├── customers/                       ← customer logos (used by the slides kit)
│   ├── partnership/                     ← partner badges (used by the slides kit)
│   └── salesforce.md                    ← how to fetch Salesforce brand assets (not vendored)
├── components/
│   └── core/                  ← React primitives: Button, Badge, Card, Stat, Eyebrow, Input
│       ├── <Name>.jsx + <Name>.d.ts + <Name>.prompt.md
│       └── core.card.html               ← live component specimen
├── ui_kits/
│   ├── index.html             ← kit index
│   ├── marketing/             ← marketing-site surfaces (components.jsx, web-sections.jsx)
│   └── slides/                ← 1920×1080 deck system (deck-stage.js, layouts/*.jsx)
├── skills/aquiva-design/      ← the Claude plugin skill (single source of truth)
└── claude_design/             ← everything the Claude.ai design project dictates:
    ├── preview/               ← 30+ specimen cards (the project's Design System tab)
    └── _ds_bundle.js / _ds_manifest.json   ← generated by the project, used by specimens

TODO: claude_design/ exists only because the Claude.ai design project dictates its layout and generated files. npm run build:design assembles its upload from the clean structure above. Long-term goal: retire the design-project dependency and delete this folder.

• Tokens & fonts — colors_and_type.css holds every CSS custom property (color, type, spacing, radii, shadows, motion) plus semantic classes. Three brand fonts self-host from fonts/.
• Components — six React primitives in components/core/, each with a props contract (.d.ts) and usage notes (.prompt.md).
• Preview cards — small specimens that populate the Design System tab; open claude_design/preview/index.html to browse every token group.
• UI kits — full marketing surfaces and a slide deck system you can fork.

Install in Claude Cowork

This repo is also a self-contained Claude Cowork plugin. Installing it gives Cowork (or Claude Code) the aquiva-design skill and all of its assets, so the brand shows up automatically when you build a deck, page, or prototype. Each version ships as a GitHub release with a ready-to-install zip attached.

Install it (Cowork desktop)

Install from the release zip, via Cowork's local upload. The Cowork desktop app's in-app marketplace can pin an older cached version and refuse to update, so the release zip is the reliable path.

1. Download the latest aquiva-design-system-<version>.zip from the Releases page. You need read access to this private repo and a GitHub login.
2. In Cowork, open Customize → Personal plugins → + to open the Directory.
3. Under Local uploads, add the zip you downloaded, then install it.
4. Make sure its toggle is on, and open it to confirm it lists Skills → aquiva-design.

The skill then activates on its own when you do branded design work, and you can invoke it by name. To move to a newer version, download the latest release zip and upload it again.

Claude Code (CLI) picks up plugin updates correctly, so there you can install from the marketplace directly: /plugin marketplace add aquivalabs/aquiva-design-system then /plugin install aquiva-design-system.

Share it with others

Sharing is one person at a time: grant someone read access to the repo, then point them at the Releases page to download the zip and add it through Local uploads in their own Cowork. It installs as a personal, user-scoped plugin in their environment. It is not pushed to everyone at the org level, and it needs no admin setup.

Access is bounded by the LICENSE: these materials are proprietary to Aquiva and shared with authorized partners only. Share only with people who fall under that license, and keep the repo private. This is not a public release.

For maintainers

The plugin is authored here in GitHub, the same place the rest of the system is authored (see "Source of truth & maintenance"). The two .claude-plugin/ manifests are additive, so the one-way GitHub to Claude.ai design sync is unaffected.

One version covers the design system, the plugin, and the GitHub release. It uses CalVer (YYYY.M.patch) and lives in .claude-plugin/plugin.json (with package.json kept identical). The full rules are in CLAUDE.md.

To ship a new version:

1. Bump version in .claude-plugin/plugin.json and package.json (same value), then run claude plugin validate ./.
2. Update the version badge in the first line of this README to match.
3. After merging, tag and release: gh release create vYYYY.M.patch — and attach the zip for Cowork local uploads: git archive --format=zip -o aquiva-design-system-vYYYY.M.patch.zip HEAD.

Using the system

1. Link the styles

Every artifact links one stylesheet. styles.css imports the tokens plus the slide primitives; or link colors_and_type.css directly for tokens only. The three brand fonts self-host from fonts/ via @font-face — no external font CDN needed.

<link rel="stylesheet" href="styles.css">         <!-- tokens + slide primitives -->
<!-- or, tokens only: -->
<link rel="stylesheet" href="colors_and_type.css">

Then style with the tokens and semantic classes — never raw hex:

<p class="aq-eyebrow">What we are</p>
<h1 class="aq-h1">The <em>AI-native</em> partner for growth companies</h1>
<p class="aq-lead">By the end of week one, you're usually clicking through a working prototype.</p>

Semantic classes: .aq-hero, .aq-h1….aq-h4, .aq-eyebrow, .aq-number, .aq-quote, .aq-lead, .aq-p, .aq-caption. Button recipes: .aq-btn + .aq-btn-primary / -ghost / -primary-on-dark / -ghost-on-dark.

2. Use the React components

components/core/ holds Button, Badge, Card, Stat, Eyebrow, Input — thin React wrappers over the brand recipes. They're bundled into claude_design/_ds_bundle.js and exposed on window.AquivaDesignSystem_b5493d. Load React + Babel, then the bundle, then pull components off the namespace:

<script src="claude_design/_ds_bundle.js"></script>
<script type="text/babel">
  const { Button, Stat, Card } = window.AquivaDesignSystem_b5493d;
  // <Button variant="primary">Talk to us →</Button>
  // <Stat value="1800+" label="Certifications" />
</script>

Each component's .prompt.md shows its variants and a usage example.

Namespace note: window.AquivaDesignSystem_b5493d is generated per project. If a component reads as undefined, re-check the namespace — the design-system compiler prints the current value.

3. Fork a kit surface

Whole sections and slides live in ui_kits/ as React JSX — the fastest way to assemble a deck or page:

• ui_kits/marketing/Aquiva Sample Page.html — a full marketing landing page.
• ui_kits/slides/Aquiva Sample Deck.html — a multi-slide capabilities deck.
• ui_kits/slides/Slide Library.html — every empty layout to copy from.
• ui_kits/index.html — the full kit index.

4. Lint for brand adherence (optional)

Three guardrails keep output on-brand:

npm install        # installs stylelint + oxlint
npm run lint       # copy regression gate (all surfaces) + changed-files CSS hex check
npm run lint:copy  # copy regression gate only — fails if a retired brand string returns
npm run lint:css   # changed-files "no raw hex" check only
npm run lint:js    # component / brand adherence (oxlint)
npm run lint:all   # full stylelint audit of every file

npm run lint always scans every copy surface for retired brand strings (the old tagline, stats, company name, and so on — see "Source of truth & maintenance"), and also runs the CSS hex check over the files you changed so the existing hex backlog never blocks a commit but new hardcoded colors can't land.

Content fundamentals

Copy is plain, concrete, and confident. We say what we ship and who it's for. We write in first person plural, prefer specifics to slogans, and never lean on rhythm or cleverness to carry a point.

Voice playbook: plain and concrete · first person plural · sentence-case titles with one pink <em> accent · Oxford commas · no em-dashes (replace them) · concrete enumeration over contrast · one real positioning contrast per section, no rhythm-only "X not Y" · "shipping/running" over "building" for live systems · no chiasmus, no "committed to," no "we take very seriously" · no emoji (arrows are fine) · direct human quotes preserved verbatim, even when they contain an em-dash.

Do / don't

• ✅ "We help enterprise teams, scaling technology companies, and ISVs turn their core applications into operational platforms."
• ❌ "We leverage synergies to drive transformative value."
• ✅ "inside your org with your data model, permissions, and audit trail." (concrete enumeration)
• ❌ "inside, not alongside." (rhythm-only contrast)
• ✅ "By the end of week one, you're usually clicking through a working prototype."
• ❌ "We don't just build software — we transform businesses." (em-dash + empty contrast)

Positioning & messaging

Tagline: "The AI-native partner for growth companies."

Positioning one-liner: "AI-native consulting and engineering partner for growth companies. Product Development, Custom Solution Development, Advisory, Data & Integrations, and Application Security across Salesforce, AWS, Azure, and GCP."

Canonical stats (the hero stat band; four items, no headcount): 10 Market Experience · 1800+ Certifications · 200+ Projects Delivered · 4.95/5 CSAT Rating. Write 1800+ with no comma; use 200+, never 250.

Services (the canonical six): Salesforce; Product Development; Advisory Services; Data & Integrations; Security, Risk and Compliance; Custom Solution Development.

Terminology: AI-native (hyphen, lowercase "native") in prose, "AI Native" only as a display tag. Agentforce, AppExchange, AgentExchange, Data Cloud, MuleSoft. sAPIm is our own Salesforce API monitoring tool (lowercase s, caps API, lowercase m); introduce it with a comma appositive. Use "Security, Risk and Compliance", not "Application Security." Company name is Aquiva; contact is connect@aquiva.com.

Pillars vs. values: keep them separate. Two distinct lists serve two purposes; don't blend them.

• The four homepage pillars are positioning (homepage): AI Native, Product Grade, Acceleration, Outcome Obsessed.
• The five about-page values are culture (about page): Proactive and Engaged, Passionate and Growth Minded, Focused on Results, We Win as a Team, Clear & Candid.

Source of truth & maintenance

• The website aquiva-website-v2 is canonical for copy. This design system mirrors the website's brand voice, tagline, stats, services, and positioning; it does not set them.
• This repo started as a Claude.ai design-project export. On a new re-export, re-apply this brand rather than accepting the old copy back. A stale export can reintroduce the previous Salesforce-era tagline, the old stat numbers, and the former company name. Run npm run lint (the copy-adherence guardrail) to catch a regression automatically.
• When the website changes a canonical stat, tagline, or service, re-pull it here so the two stay in sync.

Editing workflow: GitHub → Claude design

This repo is the surface we author. The Claude.ai design project mirrors it.

1. Edit in GitHub. Make changes here (branch + PR), not in the Claude.ai export. npm run lint must pass before merge.
2. Sync into Claude design. After merging, run npm run build:design — it assembles dist/ in the layout the design project expects (preview, bundle, manifest, and SKILL.md at the root) — and upload dist/ into the Claude.ai design project. The project ID matches the bundle namespace (AquivaDesignSystem_b5493d).
3. Keep the two in lockstep. Treat the GitHub edit and the Claude sync as one change, not two. The hazard is a future re-export from Claude.ai landing on top of an unsynced GitHub edit and reverting it. npm run lint catches the old-brand case on the way back in, but the discipline is to never let the two drift apart.

Direction is one-way: GitHub is authored, Claude design mirrors. Do not hand-edit the Claude export and expect it to flow back.

Visual foundations

Color

Core

Warm accents

Deep indigo & purple

Ratio rule: blue 50–60 : purple 40 : pink 10–20. Warm accents and deep indigo are out-of-ratio — use them for section-level color, not the primary ratio.

Gradients — canonical pairs: blue → purple, purple → pink, deep indigo → jackson purple (hero), peach → orange (warm illustrations).

Typography

Lexend + Open Sans is the operative pairing. Both are free Google Fonts and load locally — the system is fully self-contained.

Pair Lexend display (titles & numerals) with Open Sans body. JetBrains Mono is reserved for code, terminal, and agent surfaces — never display or body copy.

Numerals are light. Big stats use Lexend Light (.aq-number → weight 300), 72–96 pt, set large and airy — not heavy.

Headline emphasis is pink, not italic. Emphasis inside a headline is set in cerise pink at the same weight or one step lighter — never italic.

• Use <em> inside any heading (h1–h4, .aq-h1–h4, .aq-hero) — it's styled automatically — or apply .aq-h-accent to a span.
• One accented phrase per headline. Pink stays on its 10–20% budget.
• The accent stays pink on dark backgrounds — the contrast is intentional.

Layout & spacing

• 4-pixel base, 8-pixel grid (--s-1…--s-24)
• Generous whitespace — layouts should breathe
• Content cards sit on #F6F7F9 or white with soft shadows (never harsh black)
• Photos are either full-bleed edge-to-edge or isolated with removed backgrounds

Cards / surfaces

• White fill on #F6F7F9 page bg — or soft violet #E3E8FD for feature cards
• Radius 12–16 px (--r-md to --r-lg)
• Soft diffuse shadow tinted purple: 0 8px 24px rgba(53,38,148,0.10) — never pitch-black
• Border optional; when present, very subtle #E7E9EE
• No left-border-accent cards; no colored-stripe headers

Shadows

Three-step soft system, all tinted toward Jackson Purple — never neutral black — on light surfaces (--shadow-xs / -sm / -md / -lg). On dark surfaces purple shadows disappear, so use the dark exception (--shadow-dark-md / -lg) — deep neutral shadows.

Motion

Restrained by default:

• Standard ease cubic-bezier(0.2, 0.8, 0.2, 1), 150–360 ms
• Fades > slides > bounces. No bounce or overshoot.
• Hover: slight lift (translateY −1px) + shadow upgrade. No color shift beyond shade.
• Press: shrink to 0.98 scale, shadow collapses to shadow-xs.

Hover & press states

• Primary button hover: darken blue toward Jackson Purple
• Ghost hover: fill rises from transparent to --aq-violet-light
• Press: scale(0.98) + shadow collapse
• Focus: 3 px outer glow in rgba(90,153,230,0.35) (--shadow-focus)

Backgrounds

• Default: #F6F7F9 soft gray
• Secondary sections: #E3E8FD light violet or #CEE0F8 light blue — never pure white-on-white
• Hero / feature: brand gradient linear-gradient(135deg,#5A99E6,#352694), always with white or light-violet type
• Never use cerise pink as a background — accent-only

Dark surfaces

For hero, footer, and dark-section work, use the named tokens — don't re-derive opacity inline:

Code / terminal / agent surfaces

AI-themed sections get their own surface family — deeper than the dark hero, paired with JetBrains Mono. Recipes: .aq-terminal, .aq-agent-card; severity tags .aq-code-ok (blue), .aq-code-warn (pink), .aq-code-action, .aq-code-info. Surfaces --surface-code #0A0620, --surface-code-2 #060316.

Photography & imagery

• Well-lit, people-forward stock
• Unify with one of three treatments: opacity 60–80%, a blue filter, or a blue→purple gradient filter
• Backgrounds removed or neutral; full-bleed photos go edge to edge with no margin
• Warm-toned stock gets recolored to the cool brand palette

Illustrations

• Solid colors or gradients (blue→purple, purple→pink)
• Maintain the 50-60 : 40 : 10-20 ratio
• Icon clusters can hold more pink (up to 50% of the icons in a set)

Iconography

Core style: 2-pixel stroke line icons in brand blue, purple, or cerise pink. All outline-style (1 px for small sizes, 3 px for large) — no filled icons. The set spans general, contact, core values, people, time, team, strategy, global, creative, and AI categories.

Implementation: the system uses Lucide — closest free, CDN-available match to the brand style (2-px stroke, rounded caps, geometric silhouettes). See assets/icons/icons.jsx, or load via <script src="https://unpkg.com/lucide@latest"></script>. Apply the brand palette as CSS color; an icon cluster can go up to 50% pink, otherwise keep the blue/purple ratio.

No emoji. No unicode icon characters (no ⚡️, no ✓ outside actual form UI).

Logo

• Full wordmark: "AQUIVA" in a custom geometric face, with a horizontal underline beneath the "UI" letters
• Minimum size: 12 px high (digital) · 6 mm (print); clear space 1× logo height on all sides
• Variants: colorful (light bg), monochromatic gray (B&W materials), achromatic white (dark bg)
• Short variant: the A-sign (triangular A with base bar) for avatars, app icons, favicons. Don't stack the sign and the wordmark together.

Forbidden: don't change colors or proportions; don't swap the font; don't add or subtract elements; don't rotate freely (90° OK) or flip.

Files (SVG primary, PNG legacy fallback):

• assets/logo-wordmark-indigo.svg — deep indigo, for light backgrounds
• assets/logo-wordmark-monochrome.svg — gray for B&W
• assets/logo-wordmark-gray-blue.svg — gray with blue underline (--aq-blue)
• assets/logo-wordmark-white.svg — white for dark bg
• assets/logo-wordmark-xs.svg — small-size lockup (tuned for 12–24 px)
• assets/logo-color.svg / logo-color-no-bg.svg — A-sign mark

name: aquiva-design description: Use this skill to generate well-branded interfaces and assets for Aquiva, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

This skill packages the Aquiva Design System. The README, tokens, fonts, assets, components, and UI kits all live at the plugin root (${CLAUDE_PLUGIN_ROOT}/), not inside this skill folder. Read ${CLAUDE_PLUGIN_ROOT}/README.md first, then explore the other files.

Key files (all under ${CLAUDE_PLUGIN_ROOT}/):

• README.md — full brand overview, content fundamentals, visual foundations, iconography
• colors_and_type.css — CSS tokens (colors, type, spacing, shadows, motion) and semantic utility classes
• assets/ — logos (color, monochrome, white), icons, customer logos, and partner badges; assets/salesforce.md explains how to fetch Salesforce brand assets (not vendored)
• claude_design/preview/index.html — clickable hub linking 30+ preview cards (open this first to browse every token group)
• components/core/ — React primitives (Button, Badge, Card, Stat, Eyebrow, Input); each has a .jsx + .d.ts + .prompt.md. Compiled into claude_design/_ds_bundle.js, exposed on window.AquivaDesignSystem_b5493d
• ui_kits/index.html — index of both kits plus the sample deck/page to fork
• ui_kits/marketing/ — React component library for marketing surfaces (nav, hero, stats, values, services, quote, contact, footer)

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. Always import ${CLAUDE_PLUGIN_ROOT}/colors_and_type.css at the top — the whole system depends on those variables.

If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

Brand shorthand you must remember:

• Tagline: "The AI-native partner for growth companies." Company name is Aquiva; contact is connect@aquiva.com.
• Positioning: AI-native consulting and engineering partner for growth companies. Canonical stats: 10 (Market Experience) · 1800+ (Certifications) · 200+ (Projects Delivered) · 4.95/5 (CSAT Rating).
• Colors: Cornflower Blue #5A99E6 (primary, 50–60%), Jackson Purple #352694 (secondary, 40%), Cerise Red #E01F6F (accent, 10–20%, never bg)
• Type: Lexend for display (300/400 elegant titles, 500/600 UI headers, 900 hero numerals), Open Sans for body. JetBrains Mono for code/terminal surfaces only — never display.
• Voice: plain, concrete, confident, first person plural. Sentence-case titles with one pink <em> accent. Concrete enumeration over contrast; no rhythm-only "X not Y." No em-dashes (replace them). Oxford commas. No emoji (arrows → are fine).
• Radius: 12–16 px on cards, 999 px on buttons
• Shadows: always soft and purple-tinted, never harsh black
• Gradients: blue→purple (primary) or purple→pink (warm). Full tri-color gradient exists but use sparingly.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.