---
name: Aura Launch
version: "2.0"
theme: saas-app
kit: stacklift/aura-launch
colors:
  canvas:         "#FAF6EF"
  canvas-deep:    "#F1EAE0"
  void:           "#1A1D24"
  void-card:      "#242933"
  void-elevated:  "#2E3542"
  emerald:        "#0E9F6E"
  emerald-dark:   "#0B8259"
  emerald-soft:   "#15B884"
  ink:            "#1A1D24"
  ink-soft:       "#3A414D"
  muted:          "#70766B"
  light:          "#FAF8F2"
  light-soft:     "#C7CCC2"
  light-dim:      "#939890"
  line-light:     "rgba(26,29,36,0.10)"
  line-dark:      "rgba(255,255,255,0.10)"
  line-accent:    "rgba(14,159,110,0.30)"
fonts:
  display: "Syne"
  body:    "Albert Sans"
spacing:
  "1": "4px"
  "2": "8px"
  "3": "16px"
  "4": "24px"
  "5": "40px"
  "6": "64px"
  "7": "96px"
  "8": "144px"
radius:
  sm:   "4px"
  md:   "8px"
  lg:   "16px"
  xl:   "24px"
  full: "9999px"
type-scale:
  xs:   "0.7rem"
  sm:   "0.875rem"
  base: "1rem"
  lg:   "1.25rem"
  xl:   "1.75rem"
  2xl:  "2.5rem"
  3xl:  "3.5rem"
  hero: "clamp(2.5rem, 8vw, 5.5rem)"
typography:
  heading-font:       "Syne"
  heading-tracking:   "-0.03em"
  heading-leading:    "1.0"
  heading-weight:     "700"
  body-font:          "Albert Sans"
  body-weight:        "400"
  body-leading:       "1.7"
  eyebrow-tracking:   "0.12em"
  eyebrow-transform:  "uppercase"
gradient:
  primary: "linear-gradient(135deg, #0E9F6E 0%, #15B884 100%)"
  soft:    "linear-gradient(135deg, rgba(14,159,110,0.12) 0%, rgba(21,184,132,0.12) 100%)"
full-kit: "https://www.stacklift.design/kit/aura-launch"
---

# Aura Launch — Design System

## §1 Identity

Aura Launch is the aesthetic of an ambitious SaaS product or mobile app — in daylight. Warm ivory ground (`--canvas`), a deep-emerald accent (`--emerald`) and charcoal-ink dark sections (`--void`): a light, confident promo language that runs against the dark-purple gradient cliché of AI product sites. The kit alternates light and dark sections to build a narrative tension that walks the visitor toward conversion.

## §2 Colour roles

`--canvas` is the ground of light sections. `--void` is the ground of dark sections (stats, testimonials). `--emerald` is the primary action. `--emerald-soft` is the secondary tone and gradient terminal. The signature gradient `linear-gradient(135deg, var(--emerald), var(--emerald-soft))` is a *subtle* two-tone emerald — primary buttons, key figures, active badges. `--light` for all text on dark grounds.

## §3 Typography

Syne (`--font-display`) for all headings: `letter-spacing: -0.03em`, `font-weight: 700`. Singular, slightly arty, unmistakably non-template. Albert Sans (`--font-body`) for body copy: weight 400, line-height 1.7. Eyebrow pattern: Albert Sans, `--text-xs`, `letter-spacing: 0.12em`, uppercase, colour `--emerald`.

## §4 Components

- **Buttons**: `.btn-primary` (emerald gradient, white text). `.btn-outline` (emerald border and text, hover: gradient fill). `.btn-light` (white fill, `--void` text, on dark sections).
- **Light cards**: background `--canvas-deep`, `border: 1px solid var(--line-light)`. Radius `--radius-lg`.
- **Dark cards**: background `--void-card`, `border: 1px solid var(--line-dark)`. Radius `--radius-lg`.
- **Badges**: `.badge` (emerald/10 fill, emerald text). `.badge-grad` (gradient fill, white text).
- **Inputs**: background `--canvas`, border `var(--line-light)`. Focus: border `--emerald`.
- **Stat block**: gradient-text figure, `--light-dim` label on dark ground.

## §5 Layout

Container max-width 1200px (`.wrap`). Horizontal padding `--space-5` (40px). Light and dark sections share the same vertical padding `--space-7` (96px). Structured light/dark alternation: light hero → dark stats → light features → light how-it-works → dark testimonials → gradient CTA → dark footer.

## §6 Agent instructions

1. Respect the light/dark alternation: never two consecutive dark sections except the footer.
2. The gradient `linear-gradient(135deg, var(--emerald), var(--emerald-soft))` is reserved for critical action elements (primary buttons, stat figures, the CTA section).
3. Headings: Syne, `letter-spacing: -0.03em`. Never `text-transform: uppercase` on headings.
4. Body text on light grounds: `--muted`. Body on dark grounds: `--light-dim`.
5. Dark cards: always `background: var(--void-card)`, border `var(--line-dark)`. No box-shadow on dark grounds.
6. Use the `--space-*` and `--radius-*` variables, never hardcoded values.
7. Gradient text (figures, accents): `background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;`.
8. Never reach for violet, purple or pink — the emerald/ivory pairing IS the identity. No new hues.
9. On mobile (< 768px): hero stacks to one column, grids collapse to one column, padding `--space-3`.

> 💡 **Full implementation available** — This `design.md` ships with a complete HTML/CSS SaaS app-promo kit: hero, stats, features, how-it-works, testimonials, download CTA, and Design System. Images included.
> → [www.stacklift.design/kit/aura-launch](https://www.stacklift.design/kit/aura-launch)