---
name: "Aura"
description: "Clean, modern AI landing page platform aesthetic with crisp typography, subtle elevated surfaces, dark floating toolbars, and high-contrast template showcase cards."
version: "1.0"
colors:
  canvas: "#ffffff"
  ink: "#171717"
  ink-strong: "#050505"
  on-primary: "#ffffff"
  body: "#737373"
  body-muted: "#a3a3a3"
  primary: "#3b82f6"
  primary-strong: "#2563eb"
  primary-deep: "#1d4ed8"
  surface-soft: "#f5f5f5"
  surface-muted: "#fafafa"
  surface-dark: "#171717"
  hairline: "#e5e5e5"
  hairline-soft: "rgba(0, 0, 0, 0.05)"
  overlay: "rgba(5, 5, 5, 0.8)"
  success: "#22c55e"
  warning: "#f59e0b"
  destructive: "#ef4444"
  accent-violet: "#9333ea"
  accent-sky: "#60a5fa"
typography:
  heading-xl:
    fontFamily: "Inter, sans-serif"
    fontSize: "60px"
    fontWeight: "500"
    lineHeight: "1.0"
    letterSpacing: "-0.05em"
  heading-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "1.55"
    letterSpacing: "-0.025em"
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: "18px"
    fontWeight: "100"
    lineHeight: "1.55"
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "-0.01em"
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.42"
    letterSpacing: "-0.01em"
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.33"
    letterSpacing: "-0.01em"
  subcaption:
    fontFamily: "Inter, sans-serif"
    fontSize: "10px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "-0.01em"
rounded:
  badge: "6px"
  button: "8px"
  control: "12px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "32px"
  section: "64px"
  hero-padding: "192px"
  container: "1152px"
components:
  header-nav:
    background: "transparent"
    color: "{colors.ink}"
    padding: "16px 48px"
    position: "fixed"
  promo-badge:
    background: "{colors.surface-soft}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.pill}"
    padding: "6px 12px"
  prompt-input:
    background: "{colors.canvas}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.card}"
    boxShadow: "0px 6px 6px -3px rgba(0, 0, 0, 0.06), 0px 12px 12px -6px rgba(0, 0, 0, 0.06)"
  floating-action-button:
    background: "{colors.overlay}"
    color: "{colors.on-primary}"
    border: "1px solid rgba(255, 255, 255, 0.2)"
    borderRadius: "{rounded.pill}"
    padding: "0px 12px"
    gap: "6px"
  category-filter-button:
    background: "{colors.canvas}"
    color: "{colors.ink}"
    border: "1px solid rgba(0, 0, 0, 0)"
    borderRadius: "{rounded.button}"
    boxShadow: "0px 2px 3px -1px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(25, 28, 33, 0.08)"
    padding: "4px 8px"
  template-card:
    background: "{colors.canvas}"
    borderRadius: "{rounded.card}"
    border: "0px solid transparent"
  icon-button:
    background: "{colors.surface-soft}"
    color: "{colors.body}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.control}"
    padding: "8px"
  footer-container:
    background: "{colors.surface-muted}"
    color: "{colors.ink}"
    border: "1px solid {colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "64px 0px"
source: "https://www.aura.build/"
captured: "2026-09-02T16:53:10.521Z"
---

# DESIGN.md: Aura

## Source

- URL: https://www.aura.build/
- Captured: 2026-09-02T16:53:10.521Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Aura](./screenshot.png)

## Design Summary

Aura uses a minimal light mode base centered around Inter typography, generous top whitespace, high-contrast visual preview cards, and pill-shaped interactive floating toolbars with translucent dark overlays.

## Visual Language

- Use solid white canvas backgrounds (#FFFFFF) paired with neutral light gray surfaces (#FAFafa and #F5F5F5) for distinct container hierarchy.
- Apply layered subtle drop shadows with hairline borders (rgba(0,0,0,0.06) with 1px border) to elevate key interactive elements such as prompt inputs and category controls.
- Use high-contrast dark overlay badges (rgba(5,5,5,0.8) with pill radii) for floating actionable prompt chips on template preview thumbnails.
- Keep navigation light and horizontal with uppercase section tags and pill-shaped sub-navigation states.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed, lightweight header with split layout: brand logo on left, primary link bar in center, utility and sign-in actions on right.
- Hero area with high vertical top padding (192px), centered hero headline, subtitle, and prominent floating prompt box.
- Multi-column template gallery grids featuring 3 columns with thumbnail previews, title badges, author metadata, and action triggers.
- Rounded full-width enclosure card for footer with multi-column link navigation and social/theme utility controls.

## Components

- Promotional banners employ pill shapes (9999px) with light gray fills (#F5F5F5) and fine neutral borders (#E5E5E5).
- Prompt builder textareas feature rounded-xl (16px) borders with inline bottom controls for model selection, design system toggles, and send actions.
- Secondary utility controls (e.g. theme toggle, scroll-to-top) utilize 12px rounded square buttons with 1px borders.
- Template cards use dark overlay controls with crisp white text for high legibility over variable template screenshots.

## Content Style

- Clean, direct headline copy centered on creation and AI landing page design capabilities.
- Uppercase micro-copy for header navigation links (e.g., CREATE, TEMPLATES, COMPONENTS, DESIGN.MD).
- Pro and pricing indicators highlighted with minimalist badges alongside view and remix counter stats.

## Agent Build Instructions

- Use Tailwind CSS with custom border-radius values: 6px (badge), 8px (button), 12px (control), 16px (card), 9999px (pill).
- Configure Inter font stack as primary font family with letter-spacing defaults set to tight (-0.01em to -0.05em for headers).
- Implement shadow-beautiful-md as layered box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.06), 0px 1px 1px -0.5px rgba(0,0,0,0.06), 0px 3px 3px -1.5px rgba(0,0,0,0.06), 0px 6px 6px -3px rgba(0,0,0,0.06), 0px 12px 12px -6px rgba(0,0,0,0.06).
- Ensure dark floating toolbars adopt backdrop-blur and rgba(5,5,5,0.8) fill for high contrast over media elements.

## Evidence And Confidence

- Observed: Header navbar uses fixed position at top with 16px 48px padding.
- Observed: Main hero headline 'Create beautiful designs' renders at 60px Inter font size with -3px letter-spacing.
- Observed: Central prompt input textarea has 16px border-radius, 1px border (#E5E5E5), and custom multi-layer shadow.
- Observed: Overlay action buttons on template thumbnails use rgba(5,5,5,0.8) dark background with 9999px pill border radius.
- Inferred: Primary accent blue gradient stops (#3b82f6 to #2563eb) reserved for interactive CTA hover and focus states.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.aura.build/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.