Skip to content
DesignMunkDesignMunk Submit a site

Auxia

auxia.io
The agentic marketing platform delivering 1:1 personalized experiences.
AI Software Webflow Homepage PP Neue Montreal
Share Visit site
auxia.io DESKTOP · 1440
Auxia

AI Breakdown

Design export

---
version: alpha
name: Auxia
description: The agentic marketing platform delivering 1:1 personalized experiences.
colors:
  primary: "#232323"
  tertiary: "#0b4fff"
  neutral: "#f0efe3"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: PP Neue Montreal
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: PP Neue Montreal
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: PP Neue Montreal
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
  headline-xs:
    fontFamily: PP Neue Montreal
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: PP Neue Montreal
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 2px
  sm: 16px
  md: 20px
  lg: 40px
  xl: 56px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 53px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 53px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fefdf5"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 16px
---

# Auxia: Off-white Canvas with a Blue Workflow Rail

## Overview

Auxia's UI is enterprise-calm and product-forward: a warm off-white surface, high-contrast graphite text, and a single electric blue accent. The tone is confident and instructional—aimed at B2B marketing teams evaluating AI automation. Layouts are spacious with large, medium-weight headlines and restrained ornamentation; blue is reserved for wayfinding and emphasis. When no token applies, prefer clarity, minimal chrome, and whitespace over decoration.

## Colors

- Primary (#232323): Core ink for headlines, body text, and icons.
- Tertiary (#0b4fff): Accent for highlights, key links, and high-attention UI moments.
- Neutral (#f0efe3): Warm parchment base for page backgrounds and neutral containers.
- Surface ({colors.neutral} → #f0efe3): Default canvas for sections.
- On-surface ({colors.primary} → #232323): Text and icon color when placed on the surface.

## Typography

PP Neue Montreal is the single family across headings and body, set at weight 500 for a confident, modern grotesk feel. Headline tiers scale from 64px (lg) to 18px (xs) with tight tracking on large sizes (-0.03em) to keep big type compact. Body uses body-md at 16px/1.5, also at 500 for consistent tone.
Availability: PP Neue Montreal is self-hosted/custom in this system, so agents may not be able to fetch it directly. Suitable, obtainable substitutes: Inter (Google) for a neutral grotesk rhythm; IBM Plex Sans (Google) for a professional B2B voice; Plus Jakarta Sans (Google) for slightly wider counters at similar x-height.
Usage notes: Keep headings at weight 500; do not add extra bolds. Apply the provided letter-spacing to headline-lg/md only; other sizes track normally.

## Layout

Spacing runs on a practical scale with key steps at 16px (sm), 20px (md), 40px (lg), and 56px (xl). Use 16–20px for internal control padding and small gaps; 40px for grid gutters and section content spacing; 56px for section top/bottom rhythm on wide viewports. Structure content on a simple 12-column grid; keep hero and key sections left-aligned with generous whitespace. Avoid micro-increments outside the scale except for the 2px xs utility.

## Elevation & Depth

Depth is minimal. A single soft shadow (rgba(0,0,0,0.1) 0 2px 20px) is available for floating elements like demo tiles or chat bubbles. Most hierarchy is handled through tonal separation (surface #f0efe3 vs. white #ffffff vs. card tint #fefdf5), scale, and spacing. Borders are optional; prefer shadow-sm or tone shifts over outlines.

## Shapes

Two radii define the language: 8px (sm) for interactive controls, pills, and small badges; 12px (md) for cards and larger containers. Keep shapes consistent within a section—mixing radii should signal a change in component scale or role. Avoid fully rounded buttons; this system reads modern-square with softened corners.

## Components

Buttons
- Primary button: Background #ffffff, text #f0efe3, 53px height, 8px radius, 8px×16px internal padding. Use for high-priority CTAs placed on the neutral surface.
- Secondary button: Background #f0efe3, text #232323, 53px height, 8px radius; the quiet option when a CTA is present but not primary.
- Link button: Text-only, #232323, no radius; reserve for tertiary actions.

Card
- Background #fefdf5, text #232323, 12px radius, 12px×16px padding. Optional shadow-sm for lifted demos.

### Announcement Bar
Full-width strip using Signal Blue (#0b4fff) with compact 16px type and a right arrow link. Sits above the nav, anchored to the page edges with 16px vertical padding.

### Top Navigation with Language Switcher
Neutral surface (#f0efe3) background, graphite links (#232323), and a right-aligned CTA. Items spaced at 16–20px; hover states use underline or subtle opacity rather than borders.

### Hero Workflow Rail
A horizontal "agent workflow" line with labeled nodes (Ask Agent → Agent Workflow → AI Decisioning → Personalized Variant). Badges use 8px corners, 16px text, and can adopt shadow-sm to appear floating. Place a demo card at the end using the card token.

### Client Logo Strip
Monochrome logos on the neutral surface, center-aligned with 40px row spacing. Keep each logo within a consistent max height and equal left/right padding.

### Two-up Product Sections
"Auxia Agent Studio" and "Auxia Decisioning" present as adjacent or stacked panels. Use headline-md (48px) for titles, body-md (16px) for copy, and a quiet CTA (secondary or link). Section padding: 56px top/bottom, 40px internal gaps.

### Event Triggers Wall
Dense grid of pill labels (e.g., SUBSCRIBED TO SMS, PRICE ALERT PUSH). Pills use 8px radius, 16px type, and 16px gaps; keep rows evenly wrapped.

### Customer Stories Grid
Cards or rows pairing a logo with a single large metric (e.g., 100M+). Use the card token for background and 12px radius; headline-sm (24px) for the stat, body-md for the caption.

### Security & Trust Panel
Three-column list of trust markers (SOC 2 Type II, Private by Design, GDPR). Use headline-sm (24px) for titles and body-md below; maintain 40px column gaps.

## Do's and Don'ts

- Do use #0b4fff sparingly for navigation highlights, workflow accents, or key links; keep most surfaces neutral #f0efe3.
- Do set headline-lg at 64px/1.2 with -0.03em tracking; keep weight at 500 throughout.
- Do reserve shadow-sm (0 2px 20px @10%) for floating demos or bubbles; keep most containers flat.
- Don't mix 8px and 12px radii on the same component; 8px = controls, 12px = cards.
- Don't introduce new greys; text should be #232323 on the neutral surface.
- Don't overuse borders; prefer tone steps (#ffffff and #fefdf5) for separation.

## Agent Prompt Guide

Quick color reference
- Text: #232323
- Background: #f0efe3
- Border: #232323 (use sparingly)
- Accent: #0b4fff
- Elevated card: #fefdf5; Floating white: #ffffff

1) Hero with workflow rail and two actions
- Canvas: background #f0efe3; max-width 1200px; section padding 56px top/bottom, 40px sides.
- H1: font-family 'PP Neue Montreal'; 64px, weight 500, line-height 1.2, letter-spacing -0.03em; color #232323; max-width ~12–14 words.
- Body: 16px/1.5, weight 500; color #232323; margin-top 16px.
- Primary action: 53px-tall button, bg #ffffff, text #f0efe3, radius 8px, padding 8px 16px.
- Secondary action: link-style in #232323, 16px; place 20px to the right of primary.
- Workflow rail: horizontal line with 8px-corner badges (16px text) labeled Ask Agent → Agent Workflow → AI Decisioning → Personalized Variant; apply shadow rgba(0,0,0,0.1) 0 2px 20px to the final demo card (bg #fefdf5, radius 12px, padding 12px 16px).

2) Two-up product section (Agent Studio & Decisioning)
- Section bg: #f0efe3; outer padding 56px; grid gap 40px (stack on mobile).
- Each panel: title 48px/1.21, weight 500; copy 16px/1.5; CTA uses secondary button (bg #f0efe3, text #232323, 53px, radius 8px).
- Optional callouts use the card token (#fefdf5, radius 12px, padding 12px 16px).

3) Customer stories grid
- Grid: 3 columns, gap 40px, section padding 56px.
- Card: bg #fefdf5; radius 12px; padding 12px 16px; optional shadow-sm.
- Stat: 24px/1.2 weight 500; Caption: 16px/1.5; Text color #232323.

4) Security & trust panel
- Three columns with 40px gaps on #f0efe3 background; padding 56px.
- Headings: 24px/1.2 weight 500; Body: 16px/1.5; Icons or badges sit in a white (#ffffff) circle or square with 8px radius; keep color usage to #232323 and #0b4fff only.

## Similar Brands

- Twilio Segment: Similar off-white canvas with a single blue accent; Segment leans more technical in diagrams, Auxia is more narrative with a workflow rail.
- Retool: Neutral grotesk typography and restrained color; Retool's UI is denser and more app-like, Auxia leaves more breathing room on the marketing site.
- Klaviyo: Marketing automation focus and enterprise trust markers; Klaviyo uses darker surfaces and more green accents, Auxia stays lighter with blue.
- Jasper: Bold headings and simple palette; Jasper pushes gradients and illustrations more, while Auxia prioritizes product process visuals.
- Algolia: Clean blue-accent enterprise site; Algolia relies on cooler whites and more components with borders, Auxia favors tonal blocks over outlines.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 43 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 43 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago