A
Airy

Airy Guidelines

Design language for Airy-aligned product and brand work.

Airy / Lev Design Language

Airy is Lev's design system for product software, documents, presentations, and brand collateral. Use this guide when an AI needs to create something that should feel like Lev, not just use Lev tokens.

This file is intentionally written as design context for AI agents. It should be returned alongside the correct token data for the target surface.

Style Thesis

Airy is a calm, confident, gallery-quiet interface language. It feels like a well-lit architecture studio: precise, warm, high-trust, and operational. The system should look designed by someone who understands complex commercial real estate work and refuses to decorate around it.

Hierarchy comes from semantic color roles, type weight, spacing, and disciplined composition. Avoid spectacle. Avoid generic AI gloss. Every visual move should have a job.

Use these words as the north star:

  • Calm
  • Precise
  • Warm
  • Operational
  • High-trust
  • Architectural
  • Dense but readable
  • Confidently restrained

How AI Should Use This Guide

Airy adapts by surface.

| Surface | Primary format | What the AI should do | | -------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | Web app | Production code | Use Airy/shadcn components, semantic Tailwind classes, and airy.css tokens. | | Static HTML | HTML/CSS | Use semantic CSS variables and HTML/CSS references. | | PDF / print | Print-oriented HTML or document spec | Use resolved theme values, print-safe spacing, and document patterns. | | Presentation | Native slide-object spec | Build editable slide objects: text boxes, shapes, lines, images, charts. Use HTML/CSS previews only as reference. | | Figma | Design-tool spec | Use frames, text styles, fills, effects, and component-like layout guidance. | | Image / social | Single-frame spec | Use resolved values, composition patterns, and brand asset rules. | | Email | Email-safe HTML | Use resolved values, table-safe layout constraints, and conservative typography. |

For PowerPoint and presentation tools, do not treat React components or HTML snippets as the final object. Use them as visual references. The final deck should be built from native slide primitives: text boxes, rectangles, rounded rectangles, lines, pictures, charts, and groups.

Surface Rules

Web App / Production Code

Use semantic classes and installed Airy components:

  • Ground: bg-background
  • Text: text-foreground
  • Secondary text: text-muted-foreground
  • Borders: border-border
  • Primary actions: bg-primary text-primary-foreground
  • Cards: bg-card text-card-foreground border-border

Do not resolve colors to hex for normal web app implementation. The CSS variables are the design contract.

Presentation / Native PPTX

Use semantic roles plus resolved values from Airy theme context.

The AI should translate Airy into native slide objects:

  • Backgrounds become full-slide rectangles using the background role.
  • Cards become rounded rectangles using the card role, border stroke, and Airy radius values.
  • Buttons become rounded rectangles plus centered text boxes.
  • Headings, body copy, and captions become text boxes with resolved font families, sizes, weights, and colors.
  • Lev logos become SVG/PNG picture objects, never recreated with text.
  • Component HTML/CSS previews are reference material only unless the workflow explicitly uses an HTML-to-PPTX exporter.

HTML Intermediate / Reference

Claude Design-style HTML exports use the browser as the design-system interpreter:

  1. HTML and copied CSS build the slide or component reference.
  2. CSS variables resolve in the browser.
  3. An exporter reads computed styles.
  4. DOM nodes map to PowerPoint primitives or screenshots.

This is useful context, but it is not the default Airy presentation path. For direct PPTX generation, return native slide-object specs first and HTML previews second.

Theme Selection

Airy has distinct theme contexts. Choose the theme before choosing components.

| Theme | Selector / mode | Use for | | --------------- | ---------------------------------- | ------------------------------------------------------------------------------------ | | App light | :root, .app, .memo | Default signed-in product UI, dashboards, forms, tables, operational workflows. | | App dark | .dark, .app.dark, .dark .app | Product dark mode and app-like dark surfaces. | | Marketing light | .theme-marketing | Public surfaces that need warmth and lightness. Use sparingly. | | Marketing dark | .theme-marketing.dark | Canonical brand-forward marketing, presentation, and high-impact collateral surface. | | Memo | .memo | Document/note surfaces that need quiet neutral canvas behavior. |

Do not mix themes inside one screen or slide unless explicitly showing a product screenshot/mockup inside a marketing surface.

Token Roles

Use token roles by meaning. The MCP or consuming tool should provide the right token form for the surface: classes for web apps, resolved values for decks/images/PDFs, or CSS variables for HTML.

| Role | Meaning | Web app expression | Presentation / static expression | | ---------------------- | --------------------------------------------- | ------------------------------------ | ----------------------------------------- | | background | Page, slide, or document ground | bg-background | Resolved fill for full-canvas shape | | foreground | Primary text | text-foreground | Resolved text color | | muted-foreground | Captions, metadata, helper text | text-muted-foreground | Resolved secondary text color | | card | Raised or grouped content surface | bg-card | Resolved card fill on shape | | card-foreground | Text on cards | text-card-foreground | Resolved card text color | | border | Dividers, frames, strokes | border-border | 1px stroke color | | primary | Primary CTA, active state, key emphasis | bg-primary, text-primary | CTA fill, accent line, metric highlight | | primary-foreground | Text on primary | text-primary-foreground | Text color on primary-filled shapes | | secondary | Secondary surface | bg-secondary | Low-emphasis panel fill | | accent | Hover/active affordance, small emphasis | bg-accent | Small accent fill or interaction state | | muted | Quiet background, hover area, table alternate | bg-muted | Low-emphasis shape fill | | destructive | Irreversible/danger actions | text-destructive, bg-destructive | Error callout/accent only | | ring | Focus state | ring-ring | Rarely used in static output | | chart-1 to chart-5 | Ordered data palette | Chart config | Chart series colors | | levender-* | Special Lev brand moments | Semantic callouts | Reserved tint/accent for branded emphasis |

Theme Color Guidance

Airy uses OKLCH primitives and semantic tokens. Do not invent raw colors.

App Light

  • Primary ground: white / neutral light canvas.
  • Primary ink: neutral 900.
  • Primary action: deep, low-saturation Lev green.
  • Sidebar/chrome: warm mud/off-white.
  • Best for: product apps, admin surfaces, forms, dashboards, tables.

App Dark

  • Primary ground: terra deep neutral.
  • Cards/chrome: stepped terra surfaces.
  • Primary action: inverted light neutral.
  • Best for: product dark mode, app-like demos, dense workspaces.

Marketing Dark

  • Primary ground: abyss deep teal-black, never pure black.
  • Primary ink: neutral light.
  • Accent: brightened Lev green.
  • Best for: pitch decks, hero moments, public marketing, executive collateral.

Marketing Light

  • Primary ground: warm mud/off-white.
  • Cards: white or subtle warm surfaces.
  • Accent: Lev green.
  • Best for: lighter editorial pages or collateral where dark backgrounds feel too heavy.

Typography

Airy uses IBM Plex Sans as its main voice: humanist, precise, and warm. IBM Plex Mono handles code, metadata, tables, and technical labels. Caveat is reserved for rare handwritten annotations.

| Role | Size guidance | Weight | Use for | | --------------- | ------------: | ------: | -------------------------------------------------------- | | Micro label | 9-10px | 500-600 | Table labels, small metadata, uppercase technical labels | | Caption | 12px | 400-500 | Captions, helper text, chart labels | | Body small | 14px | 400 | Dense product UI and compact explanations | | Body | 16px | 400 | Default prose, slide supporting copy | | Emphasized body | 18-20px | 500 | Pullouts, short supporting statements | | Section heading | 24-32px | 600-700 | Product page titles, card group headings | | Display | 44-64px | 600-700 | Presentation and marketing headlines | | Hero display | 64-80px range | 700 | Rare full-bleed marketing moments |

Rules:

  • Use IBM Plex Sans for display and body.
  • Use IBM Plex Mono for numbers in dense data layouts.
  • Use Caveat only for editorial annotations or human callouts.
  • Do not use Inter. It reads as the AI default and dilutes the system.
  • Do not use generic serifs.
  • Use sentence case for headings, buttons, labels, and slide titles.
  • Use solid foreground color for major headlines. No gradient text.

Spacing, Radius, And Elevation

Airy uses a 4px spacing foundation. Surfaces should breathe without becoming empty.

| Role | Guidance | | --------------------- | ---------------------------------------------- | | Element gap | 8-12px | | Card internal padding | 16-24px app, 24-32px marketing/collateral | | Slide safe margin | 48-72px from edges | | Section gap | 64-96px in documents/slides, responsive in web | | Radius default | 10px (var(--radius)) | | Radius small | 6-8px for compact controls | | Radius large | 14-18px for modals or large panels | | Radius full | Pill buttons, tags, avatars |

Elevation is subtle. Prefer borders, tonal steps, and low shadows over dramatic depth.

  • Routine cards: 1px border plus subtle shadow.
  • Floating panels: .surface-glass for command palettes, popovers, and menus.
  • Avoid outer glows, neon blooms, and stacked translucent glass.

Components As Design References

For production web apps, use Airy components directly. For presentations, PDFs, images, and prototypes, use components as visual references and translate them into the target medium.

Button

Web app

  • Use Airy Button variants.
  • Primary: bg-primary text-primary-foreground.
  • Outline: transparent/ground fill, border.
  • Ghost: transparent until hover.
  • Destructive: destructive role only for irreversible actions.

Presentation native spec

Use for app-like slide UI, product mockups, and CTA moments.

  • Object: rounded rectangle plus centered text.
  • Height: 36-40px equivalent.
  • Width: content-fit; minimum 96px; typical 120-180px.
  • Corner radius: 10px for app-like buttons; full pill only for intentional marketing CTA style.
  • Fill: primary for primary, background or transparent for outline/ghost.
  • Text: primary-foreground on primary, foreground otherwise.
  • Stroke: none for primary; 1px border for outline.
  • Font: IBM Plex Sans, 14-16px, 500-600.
  • Padding: 10-16px horizontal.
  • Usage: one primary action per visual cluster.

HTML reference

Use button preview/spec HTML only to understand proportions, states, and CSS behavior. Do not embed HTML in a native PPTX unless the workflow explicitly renders HTML to an image.

Card

Presentation native spec

  • Object: rounded rectangle.
  • Fill: card.
  • Stroke: 1px border.
  • Radius: 10-16px depending on scale.
  • Padding: 20-32px.
  • Shadow: subtle only, or none if the card is already separated by color/stroke.
  • Text: foreground for title, muted-foreground for secondary.
  • Use cards when grouping is meaningful. Do not card every piece of content.

Input / Form Field

Presentation native spec

  • Object: rounded rectangle or underline-like frame depending on context.
  • Height: 36-40px equivalent.
  • Fill: background or card.
  • Stroke: 1px input or border.
  • Radius: 8-10px.
  • Label: above field, 12-14px medium, foreground.
  • Helper/error text: 12px, muted-foreground or destructive.

Table

Presentation native spec

  • Use table-like shapes only when the slide is about operational detail.
  • Header row: muted or card fill, medium text.
  • Body rows: background/card fill, 1px border dividers.
  • Numbers: IBM Plex Mono.
  • Keep 4-6 rows visible. For more, show a cropped product screenshot or summary instead.

Badge / Tag

Presentation native spec

  • Object: pill or small rounded rectangle.
  • Height: 22-28px.
  • Fill: muted, secondary, or semantic status background.
  • Text: 11-13px, medium.
  • Radius: full pill for status chips, 6-8px for dense tags.

Brand Assets

Use official Lev assets. Never recreate the mark or approximate it with text.

| Asset | Use for | Notes | | ---------------- | ------------------------------------------------------- | -------------------------------------------------------------------- | | LevLogo icon | Favicons, compact marks, small brand moments | Inherits current color in code. In slides, use the official SVG/PNG. | | LevLogo logo | Wordmark-only placements | Good for understated footer/chrome usage. | | LevLogo lockup | Title slides, closing slides, formal collateral | Preferred for decks and presentation open/close. | | LevToken | Brand motif, AI/credit/token concept, decorative accent | Use sparingly. It supports, never replaces, the logo. |

Presentation placement:

  • Title slide: lockup in lower-left, lower-right, or top-left depending on composition.
  • Section divider: small icon or wordmark with lots of negative space.
  • Footer: small wordmark only when needed; do not brand every slide aggressively.
  • Closing slide: lockup plus URL/contact.

Layout Principles

  • Use clean spatial zones. No overlaps.
  • Prefer asymmetric compositions over centered defaults for marketing/collateral.
  • Use cards and panels only when they create hierarchy.
  • Avoid generic 3-column equal feature grids.
  • Use one dominant idea per slide or section.
  • Use whitespace as structure, not as emptiness.
  • In product UI, favor sidebar + main canvas, clear headers, filters, tables, and cards.
  • In collateral, favor thesis-led layouts, controlled negative space, and restrained visual punctuation.

Presentation Guidance

Presentation output should default to native slide objects, not HTML. Use this guide to create editable decks.

Slide Defaults

  • Canvas: 16:9 widescreen.
  • Safe margins: 48-72px.
  • Primary background: background.
  • Primary text: foreground.
  • Secondary text: muted-foreground.
  • Accent: primary, used once per slide unless showing a chart.
  • Logo: official SVG/PNG asset.
  • Body text: 18-24px depending on density.
  • Slide headline: 44-64px for title slides, 32-44px for content slides.
  • Footer/caption: 10-12px.

Presentation Do

  • Use one main idea per slide.
  • Write headlines as claims, not labels.
  • Keep body copy short and operational.
  • Use large numbers only when data is real or explicitly marked as placeholder.
  • Use primary to focus attention, not decorate the page.
  • Build charts with the chart token order.
  • Use product UI previews as framed evidence, not wallpaper.

Presentation Don't

  • Do not recreate web hover/focus states in slides.
  • Do not use React/source/dependency details in a deck.
  • Do not use HTML snippets as final slide content unless the workflow renders HTML to an image.
  • Do not invent metrics.
  • Do not add AI gradients, neon glows, emoji, or generic SaaS blobs.
  • Do not make every slide a card grid.

Presentation Patterns

Use these as recipes. Adapt copy and scale to the deck.

Title Slide

Purpose: Open with a clear thesis and a restrained brand moment.

Objects:

  • Full-slide background rectangle using background.
  • Large headline text box using foreground.
  • Short supporting text box using muted-foreground.
  • Optional small LevLogo lockup or wordmark.
  • Optional primary CTA or date/contact line.

Layout:

  • Left-aligned or asymmetric.
  • Keep the headline to 1-3 lines.
  • Use 60/40 space distribution: content on one side, quiet negative space or subtle product visual on the other.

Multi-Line Thesis Slide

Purpose: Make one strategic point feel memorable.

Objects:

  • Large text box with 2-4 short lines.
  • Optional inline LevToken or product screenshot crop as visual punctuation.
  • Small caption or source note.

Rules:

  • Use display type.
  • Avoid bullets.
  • Use one accent highlight maximum.

Three-Part Explainer

Purpose: Explain three related ideas without dense bullets.

Objects:

  • Slide title.
  • Three content groups.
  • Each group has a short label, one-sentence description, and optional icon.

Style:

  • Labels: foreground, medium weight.
  • Descriptions: muted-foreground.
  • Group frames: none or subtle border.
  • Accent: primary for one key item only.

Four-Item Overview

Purpose: Show a complete set of steps, options, or categories.

Objects:

  • Title.
  • 2x2 grid or vertical list of four items.
  • Small numeric markers or mono labels.

Rules:

  • Avoid equal-card sameness when possible. Make one item slightly larger if there is a priority.
  • Keep each item to 1-2 lines.

Visual + Caption

Purpose: Let a product screenshot, chart, map, or diagram carry the slide.

Objects:

  • Main visual frame.
  • Caption below or beside the visual.
  • Optional label or source.

Style:

  • Visual frame: card fill, border stroke, subtle radius.
  • Caption: muted-foreground, 14-18px.
  • Do not over-annotate. One or two callouts maximum.

Header / Body Narrative

Purpose: Explain context with more prose than a normal slide.

Objects:

  • Small eyebrow or subtitle.
  • Main header.
  • Body text block.
  • Optional sidebar note or callout.

Rules:

  • Body max width: 55-70 characters.
  • Use paragraph rhythm, not dense bullets.
  • Good for setup, methodology, or executive explanation.

Quote / Testimonial

Purpose: Add human proof or executive emphasis.

Objects:

  • Large quote text.
  • Attribution line.
  • Optional logo or small headshot.

Style:

  • Quote: foreground, 28-40px.
  • Attribution: muted-foreground, 14-16px.
  • Avoid oversized quotation marks unless they are extremely subtle.

Labeled Visual

Purpose: Explain parts of an image, product UI, or system diagram.

Objects:

  • Main visual frame.
  • 3-5 labels connected with thin lines.
  • Optional legend.

Style:

  • Lines: border role.
  • Labels: card or background fill with border.
  • Keep labels concise.

Numbered Process

Purpose: Show a sequence, workflow, or phased approach.

Objects:

  • Title.
  • 3-5 numbered steps.
  • Optional timeline line or vertical stack.

Style:

  • Numbers: IBM Plex Mono, primary or muted-foreground.
  • Step title: foreground.
  • Description: muted-foreground.

Rules:

  • Avoid more than five steps on one slide.
  • Use a continuation slide for detailed processes.

Technical / Code Slide

Purpose: Show implementation detail, API shape, or technical proof.

Objects:

  • Title.
  • Code block or structured pseudo-code.
  • Optional notes column.

Style:

  • Code: IBM Plex Mono.
  • Code surface: card or secondary fill.
  • Border: border role.
  • Use syntax color sparingly; never rainbow.

Closing / Contact Slide

Purpose: End with a clear next step.

Objects:

  • Short closing headline.
  • Contact or URL line.
  • LevLogo lockup.
  • Optional primary CTA.

Style:

  • Keep it quiet.
  • Use generous whitespace.
  • Do not cram legal, contact, and CTA content into one corner.

PDF / Print Guidance

  • Use resolved theme values, not CSS variables, unless generating HTML first.
  • Keep backgrounds print-safe; avoid large low-contrast gradients.
  • Use 0.5-1px strokes for borders.
  • Avoid tiny captions below 9pt.
  • Ensure every chart remains legible in grayscale.
  • Prefer document patterns: title, executive summary, key facts, detail sections, appendix.

Static HTML Guidance

  • Load Airy token CSS first.
  • Use semantic variables.
  • Use component preview HTML/CSS as a reference library.
  • If exporting to PDF/PPTX through a renderer, the browser's computed styles become the source of truth.
  • Do not assume HTML remains editable after export.

Image / Social Guidance

  • Use one statement, one visual gesture, one brand mark.
  • Use resolved values.
  • Use generous safe margins.
  • Avoid dense UI unless showing a product proof.
  • Prefer dark marketing for high-impact pieces and light marketing for editorial/announcement pieces.

App UI Guidance

  • Use real Airy components.
  • Use registry/ui primitives only as installed/protected components.
  • Compose higher-level UI in blocks or app-specific wrappers.
  • Use semantic tokens. Never hardcode raw colors.
  • Prefer tables, cards, filters, sidebars, breadcrumbs, and command/menu patterns that reflect actual Lev product workflows.

Anti-Patterns

These patterns are forbidden in Airy output:

  • Emojis as icons or visual decoration.
  • Inter as primary font.
  • Generic serifs.
  • Pure black for Airy surfaces unless explicitly required by an external format.
  • Purple/blue AI gradients.
  • Neon glows or outer glows.
  • Gradient text.
  • Custom cursors.
  • Overlapping elements.
  • Generic 3-column equal feature rows.
  • Centered marketing hero compositions by default.
  • Fake metrics, fake uptime, fake user counts, fake benchmarks.
  • "SYSTEM // 2026" or similar pseudo-technical label typography.
  • Generic AI marketing words: "elevate", "seamless", "unleash", "next-gen", "cutting-edge", "revolutionary", "game-changer".
  • Placeholder names like "John Doe", "Acme Inc.", "Nexus", or "Lorem Industries".
  • Raw Tailwind colors or raw hex values in web code.
  • Alpha modifiers on semantic tokens unless specifically approved.
  • Glass-on-glass nesting.
  • h-screen; use min-h-[100dvh].
  • Animating layout properties.
  • Mixing App and Marketing themes without an embedded-product reason.

Copy Voice

Airy copy is plainspoken, factual, and operational. Lev sells to commercial real estate professionals; the voice should be clear and useful, not playful.

  • Sentence case for headlines, labels, and buttons.
  • Verb-first buttons: "Create deal", "Save changes", "Delete", "Continue".
  • No periods in headlines, buttons, or labels unless there are multiple sentences.
  • Use Oxford commas.
  • Avoid hype language.
  • Use real metrics or marked placeholders.
  • Explain errors and empty states plainly.

For full rules, see copy.md.

Agent Prompt Guide

Build A Presentation Title Slide

Create a 16:9 title slide using Airy marketing dark. Use the background role for the full-slide ground, foreground for a large left-aligned thesis headline, muted-foreground for one supporting sentence, and the LevLogo lockup as a small picture object in the lower corner. Keep one primary accent moment only.

Build A Product Evidence Slide

Create a slide with a large product UI screenshot or mockup framed as a card. Use card fill, border stroke, and subtle radius. Add one short headline above and one caption below. Do not add more than two callouts.

Build A Three-Part Explainer

Create a slide with a clear title and three content groups. Each group has a short label and one sentence. Use foreground for labels, muted-foreground for descriptions, and border only if grouping needs structure.

Build A Native PPTX Button

Create a primary Airy button as a rounded rectangle. Use primary fill, primary-foreground text, IBM Plex Sans 14-16px medium/semibold, 36-40px height, 10-16px horizontal padding, and 10px corner radius unless a pill CTA is specifically requested.

Build A Web App Settings Screen

Use Airy App light. Compose with real Airy components, semantic classes, and app layout patterns. Use card surfaces only where grouping is meaningful. Use labels above fields, helper text below, and one primary action.

Generation Checklist

Before finalizing an Airy output, verify:

  • The target surface is clear.
  • The target output format is clear: production code, native PPTX, HTML reference, print HTML, image spec, or design spec.
  • The theme is declared.
  • Semantic roles are used.
  • Resolved values are used for non-web surfaces.
  • design.md, copy.md, and visual-design.md guidance have been considered.
  • Brand marks use official assets.
  • Presentation outputs are editable native objects unless explicitly screenshot/image-based.
  • HTML previews are treated as reference unless an HTML export pipeline is explicitly in use.
  • No banned AI-design tells are present.