Brand Guidelines

The Auva brand identity is built on precision, clarity, and warmth. Every product in the ecosystem follows these guidelines to maintain a unified visual language.

Brand Values

Value	Expression
Precision	Clean layouts, sharp typography, intentional spacing
Warmth	Inviting color palette, approachable tone, subtle animations
Confidence	Bold headlines, decisive UI patterns, no unnecessary clutter
Consistency	Every product feels like it belongs to the same family

Color Palette

Primary Colors

Name	Hex	Usage
Background	`#f8fafc`	Page backgrounds
Surface	`#ffffff`	Cards, modals, elevated surfaces
Foreground	`#0f172a`	Primary text, headings
Muted	`#64748b`	Secondary text, captions
Border	`#e2e8f0`	Dividers, card borders

Accent Colors

Name	Hex	Usage
Accent	`#2563eb`	Links, buttons, interactive elements
Accent Hover	`#1d4ed8`	Hover states
Accent Light	`#dbeafe`	Accent backgrounds, badges
Accent Dark	`#1e40af`	Active states, pressed buttons

Usage Rules

Use Accent (#2563eb) sparingly: it should draw attention, not overwhelm
Foreground (#0f172a) is the primary text color. Never use pure black (#000000)
Borders should always use var(--color-border): never hardcode gray values
Glassmorphism effects use backdrop-blur-xl with bg-opacity-80

Logo

The Auva logo is the word "Auva" set in Fraunces (semibold, tracking-tight). No icon, no symbol: the wordmark is the brand.

Usage

text

<span class="font-display text-2xl font-semibold tracking-tight">
  Auva
</span>

Rules

Always use the Fraunces font for the logo
Minimum size: 16px
The logo should always be in --color-foreground or --color-accent
Never stretch, rotate, or add effects to the logo
When used on dark backgrounds, use white (#ffffff)

Iconography

Auva does not use a custom icon set. We use inline SVGs with consistent properties:

text

<svg
  width="14"
  height="14"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  strokeWidth="2"
  strokeLinecap="round"
  strokeLinejoin="round"
>
  {/* Path data */}
</svg>

Icons inherit color from currentColor
Default size: 14�14 for inline, 20�20 for standalone
Always use strokeLinecap="round" and strokeLinejoin="round"

Spacing System

Auva uses Tailwind CSS v4's default spacing scale. Key values:

Token	Value	Usage
`px-6`	24px	Page gutters (mobile)
`px-8`	32px	Page gutters (tablet)
`lg:px-12`	48px	Page gutters (desktop)
`max-w-[90rem]`	1440px	Maximum content width
`max-w-6xl`	1152px	Content sections
`gap-6`	24px	Card grid gaps

Use CSS custom properties (var(--color-*)) instead of hardcoded values. This ensures all products stay in sync when the design system evolves.