---

name: plume-design description: Use this skill to generate well-branded interfaces and assets for Plume, 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

Read the README.md file within this skill, and explore the other available files.

Quick orientation

• Plume is a SaaS product-analytics platform: AI agents that read user sessions, find friction, and write a weekly "ship-this-next" memo.
• The look is a digital canvas with violet bloom — pristine white/off-white surfaces, one loud #592eff accent, hand-drawn outline doodles (clouds, birds, sparks), Bricolage Grotesque for display + Plus Jakarta Sans for body, signature 26px card radius, no shadows, no gradients.
• All tokens live in colors_and_type.css as CSS custom properties.

Files

Path	Purpose
README.md	Full brand context, content fundamentals, visual foundations, iconography
colors_and_type.css	Drop-in stylesheet with all tokens + base classes + component recipes
assets/	Logo, mark, outline illustration set (cloud, bird, spark)
preview/	Static cards used to render the design-system overview
ui_kits/marketing/	Marketing site — nav, hero, features, accent blocks, CTA, footer
ui_kits/app/	In-product app — sidebar, journey canvas, sessions, insights inbox, home dashboard

Working with Plume

If creating visual artifacts (slides, mocks, throwaway prototypes), copy the assets you need out of assets/ and the styles out of colors_and_type.css, then build static HTML. If working on production code, lift the token names verbatim and read the component recipes in colors_and_type.css for the canonical button / card / badge styles.

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

House rules to follow (full version in README, summary here):

• One loud accent. #592eff is for primary CTAs, the brand mark, and active states — nothing else.
• Verb-first copy. Present tense. No hedging. No emoji.
• Tight tracking everywhere (-0.02em minimum, -0.035em on display).
• 26px card radius. 12px button radius. 200px badge radius. Never shadow.
• Outline doodles for personality. Outlined Lucide-style icons only. Never multi-color or filled icons.
• Pastels (#bcf2ff, #dfff9d, #ffaae6) are card-fills only. Never button backgrounds.
• Neons (#f843c2, #2ed6ff, #a2ea13) are badge text + product-screenshot pops only.

Plume — Design System

Digital canvas with violet bloom. A pristine workspace where key actions pop with vibrant, focused energy.

Plume is a SaaS product analytics platform — it maps every step of your product experience, deploys AI agents that scan user sessions for friction, and tells your team what to ship next. The brand is built for the kind of product team that prefers a quiet canvas and one loud, decisive accent over noise and gradients.

This design system captures Plume's visual language so any agent (or human) can produce on-brand work — slides, marketing pages, in-product screens, internal tools — without re-deriving the rules each time.

---

Sources

This system was derived from:

• Style reference (provided as a structured spec): full color palette, type scale, spacing, components, surfaces, and imagery guidance for the Adora style this brand is based on.
• One reference screenshot of the Adora marketing hero — used to confirm pill nav, off-white page surface, oversized PolySans headline, and the hand-drawn cloud/bird outline motif.

The product line, brand name (Plume), wordmark, logo mark, and supporting illustrations were created in this project — the aesthetic mirrors the reference but the marks themselves are original.

---

Quick Index

File / folder	What's inside
README.md	This file — brand context, content, visual, iconography, index
colors_and_type.css	All design tokens (colors, type, spacing, radii, motion) + base classes + component recipes
SKILL.md	Cross-compatible skill manifest for use in Claude Code
assets/	Logo, mark, abstract outline illustrations (cloud, bird, spark, pin)
preview/	Cards rendered into the Design System tab — colors, type, spacing, components
ui_kits/marketing/	Marketing site UI kit — split by section: nav.html, hero.html, features.html, accent-block.html, cta-footer.html, plus index.html for the assembled page
ui_kits/app/	In-product app UI kit — split by screen: index.html (Journeys), home.html, sessions.html, insights.html

---

Content Fundamentals

Plume's copy sits at the intersection of precise and warm. It speaks to product builders who are tired of busywork and want a quiet tool that does the right thing.

Voice characteristics

• Second person, present tense. "You ship what matters." Not "we help you ship..."
• Verbs first. Headlines lead with action: Know what to ship next. See every step. Catch friction the moment it appears.
• No hedging. Avoid might, can help, may, sometimes. Plume tells you what it does, not what it could do.
• Specific over abstract. "Maps every step of onboarding" beats "improves your funnel".
• Short. Marketing headlines are 4–7 words. Body sentences rarely exceed 18 words.

Casing

• Sentence case everywhere except the wordmark itself (which is lowercase: plume).
• Buttons, nav, badges all sentence case: Get started, Watch 1min, New feature.
• No ALL CAPS except in decorative agent name pills inside product screenshots (e.g. SOFIA, CARLOS) — those are a deliberate visual hit, not a copy device.

Tone examples

Use	Don't
Know what to ship next.	Discover insights to drive better product decisions.
Plume maps your entire product experience, deploys agents that scan user sessions for friction, and prioritizes what to ship next.	Plume is an AI-powered analytics solution that empowers teams to leverage user data.
Get started	Sign up for free today!
Watch 1min	Watch our demo video
New feature	Just launched 🎉

Emoji & decoration

• No emoji in product, marketing, or docs copy. The brand uses outlined doodles (clouds, birds, sparks) and tinted pill labels for visual personality instead.
• No exclamation points except in error toasts and celebration moments — and even then, prefer a period.
• Unicode arrows (→, ↗) are allowed sparingly in nav and link CTAs.

The vibe

A senior product designer who has shipped a lot of things, knows what works, and doesn't need to oversell. Confident. A little playful in the imagery (the doodles), entirely straight-faced in the words.

---

Visual Foundations

Color

• Background is #f6f4ef — a warm off-white page surface. Components sit on #ffffff canvas-white cards.
• One loud accent. #592eff Action Violet is reserved for primary CTAs, active states, and the brand mark. If everything is violet, nothing is.
• Rich Violet #21164c is the headline / brand-display color. Body text uses #353241 Slate Text.
• Soft pastels (Air Blue, Lush Green, Sunset Pink) appear ONLY on decorative accent cards and outline doodles — never on buttons, never as UI fills.
• Neon accents (Neon Pink, Aqua Blue, Electric Green) appear ONLY as small badge text or as the bold pop colors inside product screenshots (e.g. agent name pills). Never as primary UI.

Type

• Display uses Bricolage Grotesque (Bold 700) as a substitute for PolySans. Tight -0.02em tracking. Sizes 28 / 38 / 58 / 68.
• Body & UI uses Plus Jakarta Sans (Regular 400, Medium 500, SemiBold 600). Same tight tracking. Sizes 14 / 16 / 18 / 20 / 32.
• Tight tracking is fundamental. Never use default tracking — letter-spacing: -0.02em lives on body for a reason.
• Line heights are tight (1.10–1.20) on display and headings. Body copy gets 1.60.

Spacing

• Base unit: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 60 / 100.
• Section gap: 30px between vertical sections in a layout.
• Card padding: 40px for feature cards. Accent cards get 48px.
• Element gap: 5px for inline groups (icon + text, label + value).
• Density: comfortable. Generous whitespace; never let two elements touch unless they intentionally read as one unit.

Radius

• Buttons: 12px — soft rectangle, not pill.
• Cards: 26px — Plume's signature curve, instantly recognizable.
• Accent cards: 64px — the big decorative washes.
• Badges: 200px — full pill.
• Nav pill: 800px — the floating top-bar.

Backgrounds

• No gradients in UI. Backgrounds are flat color or, in product screens, a subtle dotted grid (16px radial pattern).
• Hand-drawn outline doodles float behind hero sections — clouds, birds, sparks — in pastel strokes (Air Blue, Sunset Pink). They never sit on top of content, only behind.
• Product screenshots appear large, often with slight perspective, full-bleed below the hero text. They are the only place vivid neon decorations (pink/green pill labels with floating arrows) appear.

Borders

• Cloud Mist #e0e0db, 1px for cards, buttons, and dividers.
• Slate Text #353241, 1px for the rare outline-nav button style.
• No thick borders. Never go above 1px in UI; 3px stroke is reserved for illustration outlines.

Elevation & shadows

• Avoid shadows. Plume looks flat by default. Cards have a 1px border, not a shadow.
• One exception: the floating nav pill uses a very soft shadow 0 6px 30px rgba(33, 22, 76, 0.06).
• No inner shadows. No glow effects. A focused input shows a 4px rgba violet ring instead.

Hover / press states

• Buttons: primary darkens (#4a22e0 hover, #3d18c2 press). Ghost buttons gain a #ffffff fill on hover (rising off the page tint). Press uses translateY(1px) — a tiny tap, no scale.
• Links: no underline by default. On hover: underline with 3px underline-offset.
• Cards: no hover lift. If interactive, swap border to #c9c9c2 and the title color to Action Violet.

Animation

• Easing: cubic-bezier(0.22, 0.61, 0.36, 1) ("ease-out") for entrances; cubic-bezier(0.65, 0, 0.35, 1) for state changes.
• Durations: 120ms (micro), 200ms (state), 320ms (entrance). Nothing slower.
• Fades and translates only. No bounces, no springs, no scale-on-hover, no parallax.

Transparency & blur

• Transparency is rare. The nav pill has none — it's solid white. Focus rings are rgba(89, 46, 255, 0.12).
• No backdrop-blur in marketing. In-product overlays may use a subtle 8px blur on modals only.

Imagery

• Hand-drawn outline illustrations (cloud, bird, leaf, spark) in Air Blue or Sunset Pink, 3px stroke, never filled.
• Vivid filled sparks in Action Violet or Electric Green appear inside product screenshots as decorative hits.
• Product screenshots dominate hero areas — clean UI, slight perspective tilt allowed, real-feeling but always Plume-styled. No stock photography. No people. No 3D renders.
• Color vibe of imagery: cool, bright, neutral — warm tones live in the page background, not in imagery.

Layout

• Contained centered layouts, ~1180px max-width for marketing.
• Vertical rhythm: 30px section gaps for tight blocks, 100px between major sections.
• Multi-column feature grids (3-up most common). Alternating text-heavy and image-heavy blocks.
• Floating top nav in a pill, sitting ~24px from the top edge.

---

Iconography

Plume uses a single outlined icon family at 24×24, 1.5px stroke, rounded caps & joins.

Source: Lucide via CDN — https://unpkg.com/lucide@latest/dist/lucide.js

This is a deliberate substitution. The reference brand (Adora) uses a similar outlined-mono icon style; Lucide is the closest open-source match with identical stroke weight and rounded geometry. If you have the production icon set, drop the SVGs into assets/icons/ and update references; otherwise Lucide is the canonical fallback.

Color rules

• Default icon color: currentColor — so they inherit text color.
• In primary buttons: #ffffff.
• In violet brand-mark contexts: #592eff.
• Active/selected nav icons: #592eff. Inactive: #353241.

Sizing

• 16px — inside small badges and chip rows.
• 20px — inline with body text.
• 24px — standard nav, buttons, list items.
• 32px — feature cards and section headers.

What's NOT used

• ❌ Emoji as icons. Never in product or marketing.
• ❌ Unicode glyphs as icons (except →/↗ in CTA links).
• ❌ Filled icons. Plume is outlined-only.
• ❌ Multi-color icons. Mono-tone, single color.
• ❌ Custom hand-drawn SVG icons — those are reserved for decorative illustrations (assets/illo-*.svg), not interactive UI.

Logo & mark

• assets/logo-plume.svg — full wordmark + mark. Use in marketing nav and footers.
• assets/logo-mark.svg — just the mark. Use in favicons, app sidebar, social avatars.
• Both marks lock to Action Violet #592eff. The wordmark uses Rich Violet #21164c. Never recolor for any other reason.

---

Font substitution notice

⚠️ PolySans is a paid type family that wasn't provided. This system substitutes Bricolage Grotesque (Google Fonts) for display headlines — Bricolage is a humanist geometric sans in the same lineage as PolySans, with the same rounded terminals, single-story a, and friendly-but-precise character. It's the closest free match. If you have access to PolySans, drop the .woff2 files into fonts/ and update --font-display in colors_and_type.css.

Plus Jakarta Sans is free and loaded from Google Fonts as-specified.

---

Quick start

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="colors_and_type.css">
</head>
<body>
  <h1 class="display-lg">Know what to ship next</h1>
  <p class="body-lg">Plume maps every step of your product experience.</p>
  <button class="btn btn-primary">Get started</button>
</body>
</html>