---

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

Cairn Design Skill

Cairn is a serene, naturally-inspired SaaS brand (a fictional AI-agent platform). The visual system is light-mode, nearly monochromatic, with abundant warm grays and a single warm-earth accent for primary actions. It is NOT dark, glassy, or gradient-heavy.

How to use this skill

1. Read README.md first. It contains the brand voice, every visual rule, content do's and don'ts, and the complete file index.
2. Then read colors_and_type.css. It defines every color, font, size, spacing, radius, and shadow token. Use these variables — do not invent new colors or sizes.
3. For visuals (slides, mocks, prototypes): create static HTML files. Link colors_and_type.css and copy any needed assets out of assets/ into your output folder. The cards in preview/ show every token in use.
4. For production code: lift the CSS variables from colors_and_type.css into your own theme file. Use Lucide icons from the CDN.
5. For UI patterns: open ui_kits/marketing/ and ui_kits/app/ — both have an index.html that demonstrates a typical screen, plus modular JSX components you can copy.

Non-negotiables

• Akkurat-substitute (Geist) for everything, Fragment Mono for eyebrow labels / IDs / code only.
• Tracking is -0.04em on every Hanken size. Mono is +0.02em.
• Amber Seed (#4a3212) is the only solid-filled button color, used for the single primary action per screen. Never two on one view.
• Valley Green (#203b14) is the accent for hover/active states and icons — never a giant filled surface.
• Border radius: 20px buttons & nav, 8px images & cards. Never 0px.
• No drop shadows. Use the single --shadow-subtle outline (a 1px Valley-Green tint) for "elevation."
• No emoji, no gradients, no glassmorphism, no bluish-purple, no exclamation marks.
• Spacing: sections separated by 48px (--space-7), cards padded 24px, micro-gaps 4px.

If the user invokes this skill with no further instructions

Ask: "What would you like to design — a marketing page, an in-product screen, a deck, or a one-off mock? And is there a specific screen or flow I should focus on?" Then ask 2–3 follow-up questions about scope, length, and whether they want variations. Once you have answers, deliver as static HTML in this project, linking colors_and_type.css and copying any needed assets.

Cairn — Design System

Stack the stones. Mark the path.

Cairn is a fictional brand created to demonstrate a modern SaaS design system inspired by the Adaline aesthetic — a calm, mist-shrouded valley with quiet authority, restrained color, and a single warm accent. Imagine Cairn as a platform for AI engineering teams: a single place to build, evaluate, observe, and ship language-model agents. The name evokes a stack of trail-marking stones — a quiet, hand-placed wayfinder for teams navigating uncertain terrain.

This project is a complete design system folder: tokens, fonts, brand assets, copy guidelines, and recreated UI kits for the marketing site and the product app.

Source materials

Source	Where it lives
Brand reference screenshot (Adaline-style hero)	uploads/af27cfe8-0362-4502-ab04-5be7519f4124.jpg → assets/hero-valley.jpg
Design token brief (colors, type, spacing, components)	Pasted in the kickoff prompt — distilled into colors_and_type.css and the cards in preview/
Codebase / Figma	None provided. Everything visual was derived from the brief + the single hero screenshot.

Because no source code or Figma file was attached, the UI kits below are honest recreations of an Adaline-style product, not pixel copies of a real app. They follow every token, component rule, and Do/Don't from the brief.

Index

README.md                  ← you are here
SKILL.md                   ← portable Agent-Skill entrypoint
colors_and_type.css        ← all design tokens as CSS custom properties
assets/                    ← logos, hero imagery, illustrations
preview/                   ← design-system tab cards (Type, Colors, Spacing, Components, Brand)
ui_kits/
  marketing/               ← Cairn marketing site recreation
    index.html             ← home / hero
    pricing.html           ← Stone / Cairn / Range tiers + FAQ
    blog.html              ← field notes index
    site.css               ← shared marketing styles
    site.js                ← demo-modal interactions
  app/                     ← Cairn product app recreation
    index.html             ← Overview dashboard
    runs.html              ← runs list with filters
    run-detail.html        ← single run trace + span inspector
    evaluations.html       ← eval suites grid
    settings.html          ← workspace settings
    app.css                ← shared product-app styles

---

Brand snapshot

• Name: Cairn
• Tagline: The single platform to build, evaluate, deploy, and observe AI agents.
• Personality: serene, exact, quietly authoritative, naturalist, never breathless
• Visual mood: misty valleys, soft greens, warm earth, abundant negative space
• One-line elevator: Cairn is the control plane for production AI agents — a calm place to ship loud systems.

---

CONTENT FUNDAMENTALS

Voice

Cairn writes like a thoughtful senior engineer who has stopped trying to sell you anything. Lines are short, declarative, and unhurried. Every sentence earns its place. There's no exclamation, no emoji, no "delight," no "magic" — that vocabulary belongs to a different brand.

Tone dials

Dial	Setting	Why
Formality	Mid-formal	We're professional but not corporate. Contractions are fine.
Warmth	Warm-neutral	We're not your best friend. We're not a vendor either.
Confidence	Quiet	We state, we don't sell. The product proves itself.
Humor	Almost none	Occasional dry observation. Never a joke.

Person & address

• You for the reader, always. ("You ship. We watch.")
• We for Cairn-the-company, sparingly. ("We built Cairn because…")
• It for the product. ("Cairn captures every span.")
• Avoid "us" and "our" in product copy; reserve for company-voice contexts (About, careers).

Casing

• Title Case for short headlines and section labels on the marketing site ("Trusted By", "Watch Demo").
• Sentence case for in-app headings, settings, and long-form prose ("Create a new evaluation").
• UPPERCASE only for: eyebrow labels (mono), nav items on marketing (PRODUCTS PRICING BLOG), and primary CTAs (START FOR FREE).
• No ALL CAPS for body copy or headings.

Punctuation

• Em-dashes with no spaces — like this. Used to extend a thought, not to shout.
• Single sentence periods. Never two. Never ...!
• No emoji. Anywhere. Including dev-docs.
• Smart quotes in marketing copy. Straight quotes in code.

Lexicon

Prefer	Avoid
Ship, run, evaluate, observe, trace	Unleash, supercharge, revolutionize
Agent, model, span, run, eval	Bot, AI, magic, brain, mind
Platform, control plane	Suite, ecosystem, solution
For teams that ship	For teams that move fast
Trusted by	Loved by

Headline examples (good)

• The single platform to iterate, evaluate, deploy, and monitor AI agents.
• Ship agents the way you ship code.
• Every run, every span, in one place.
• Built for the part of the loop nobody else owns.

Headline examples (bad — do not write like this)

• 🚀 Supercharge your AI workflows!
• Unleash the power of next-gen agents
• AI, simplified — finally.
• The ultimate all-in-one toolkit for builders

Microcopy

• Buttons: 1–3 words, Title Case. Start For Free, Watch Demo, Open Run, Add Eval.
• Empty states: a single declarative sentence + one action. "No runs yet. Trigger one from the SDK."
• Errors: name the thing, then the fix. "Run failed: model timed out. Retry, or increase the timeout in run settings."
• Toasts: pure status. "Eval queued." — no exclamation.

---

VISUAL FOUNDATIONS

Color philosophy

Cairn is nearly monochromatic. Canvas Ice (#fbfdf6) is the page; Adaline Ink (#0a1d08) is the type. Everything else is a whisper: misty grays, stone moss, the occasional forest-dew tint behind a selected nav item. Valley Green (#203b14) is the brand accent — used for icon fills, hover states, and ghost-button text — never as a giant filled surface. Amber Seed (#4a3212) is reserved with religious discipline: it is the only color allowed as a solid filled button background, and only on the single primary action of a screen. Never two amber buttons on one view.

Typography

• Display sets at 47–72px with -0.04em tracking and 1.3 line-height. Display copy is regular weight (400), not bold — the size carries the voice.
• Body at 18px / 1.43. Long-form prose stays at body, not body-sm.
• Mono (Fragment Mono) only for: eyebrow labels, run IDs, timestamps, code, table cells with technical data.
• Tracking is always -0.04em for Hanken/Akkurat. The mono is +0.02em. Don't override these.

Spacing & rhythm

The system uses an 8px base with a generous scale that jumps quickly (8 → 16 → 24 → 32 → 40 → 48 → 64 → 128 → 160). Most layouts use --space-7 (48px) between sections and --space-4 (24px) for card padding. Element gap is a tiny 4px — for the space between an icon and its label, a number and its unit. Pages feel airy because we use the large values often; we don't try to fit more in.

Backgrounds

• Default: flat Canvas Ice. No gradient.
• Hero sections on marketing: full-bleed photographic landscape (assets/valley-full.jpg) — misty, warm-cool, low contrast, with copy floating above. The image always sits behind the content, never beside.
• App surfaces: flat Canvas Ice with hairline 1px borders in Stone Moss. No card shadows. Elevation is communicated by border, not depth.
• Never: bluish-purple gradients, marketing-y "mesh" backgrounds, glassmorphism, animated gradient blobs.

Animation

Motion is slow, short, and few. Default duration is 200ms with the gentle cubic-bezier(0.22, 1, 0.36, 1) ease-out. Fades and transforms only — no bounces, springs, or wobbles. Hover transitions touch color only; layout never reflows on hover. Loading states are a slow, low-contrast pulse, never a spinner-with-personality.

Interactive states

• Hover (filled button): background shifts to --action-hover (#5d4119). No scale, no shadow.
• Hover (ghost button): border and text shift from Adaline Ink → Valley Green.
• Hover (link): color → Valley Green, no underline added.
• Active / pressed: background darkens by ~8%. No scale.
• Focus: outline: 2px solid var(--focus-ring); outline-offset: 2px; — always visible, never outline: none.
• Selected (nav item): Forest Dew (#d7e8b5) background, full pill radius, Adaline Ink text.

Borders & dividers

• Card border: 1px Stone Moss (#e0e5d5).
• Strong divider: 1px Mist Gray (#c5ccb6).
• List separator: 1px Stone Moss, full bleed inside the container.
• No double borders, no inset rings.

Shadows

There is essentially one shadow in the system: --shadow-subtle — a 1px Valley-Green-tinted outline at 10% opacity. It reads as a border, not a drop shadow. We never use blurry y-offset shadows; Cairn does not "float."

Radii

• 8px for images, photos, illustration crops, code blocks.
• 20px for buttons, navigation pills, input pills.
• 16px for cards (rare — most use 8px).
• Never 0px (no hard corners). Never 9999px for anything except status dots and avatars.

Transparency & blur

Used only when an element sits on a photograph (the marketing hero). Then: white-with-alpha at 60–80% + 12–16px backdrop blur. Inside the product app, no glass, no transparency.

Imagery treatment

• Photography: warm, low-saturation, golden-hour misty. Slight sepia cast. Compositions favor wide horizons and quiet water.
• Illustrations: not used; the brand prefers photographic atmosphere.
• Product UI screenshots are framed with an 8px radius and a 1px Stone Moss border. No drop shadow.
• Logos in client strips are rendered in Blackest Night (#000) at small sizes — flat, no color.

Layout rules

• Marketing pages center content in a max-width of ~1200px, with generous top/bottom section gaps (--space-7 minimum, often --space-9).
• App pages use a fixed left sidebar (~240px) and a fluid content area.
• Footers are quiet and information-dense — small mono labels, no enormous newsletter sign-ups.

---

ICONOGRAPHY

Cairn does not ship its own icon font. The system uses Lucide (lucide.dev) for all UI icons, served from CDN. Lucide's open, geometric stroke style (1.5px, rounded caps and joins) matches the calm precision of the typography.

Conventions

• Stroke width: 1.5px (Lucide default). Never adjust per-icon.
• Size: 16px inline, 20px for buttons, 24px for nav items, 28px+ for empty states or feature highlights.
• Color: inherits currentColor. Active state shifts to --accent (Valley Green).
• Fill: stroke-only by default. Filled variants are reserved for active/selected states.
• No emoji as icons. No unicode glyphs (★, →, ✓) as icons — use the Lucide equivalent.
• For brand marks in client-logo strips, copy the real SVG into assets/logos/ and render in black. (None bundled here — they would be added per-customer.)

Files

• assets/logo-mark.svg — the cairn (stacked stones)
• assets/logo-wordmark.svg — mark + "Cairn"
• assets/hero-valley.jpg — the source reference
• assets/misty-valley.jpg — landscape-only crop, no overlay
• assets/valley-full.jpg — taller crop for full-bleed hero use

Substitution flag: Akkurat is a licensed Lineto typeface and isn't redistributable. We're shipping Geist (Google Fonts) as the closest open substitute — it's a neutral grotesk with a similar x-height and condensed feel. If you have the Akkurat license, drop the .woff2 files into fonts/ and change --font-sans in colors_and_type.css.

---

Use this design system

In any HTML file:

<link rel="stylesheet" href="../colors_and_type.css" />
<body class="cairn-body">
  <h1 class="cairn-display">The single platform to ship AI agents.</h1>
</body>

In React/JSX: import the CSS once at the root, then use the .cairn-* semantic classes or read the CSS variables directly with var(--accent) etc.