Avalara Brand Design

Avalara Brand Design

Build websites indistinguishable from Avalara's in-house work. This skill encodes the visual identity, Skylab design system, component patterns, and page architecture used across avalara.com and Avalara product UIs.

Quick Decision Guide

Brand Foundation

Identity

• Wordmark: Two-color sans-serif — blue letterforms with orange checkmark accent
• Tagline: "Making tax compliance less taxing"
• Values: Optimism, Passion, Adaptability, Humility, Fun, Ownership, Curiosity, Urgency, Simplicity (OPAH FOCUS)
• Tone: Professional yet accessible — serves enterprise and SMB equally

Color System

:root {
  /* Primary brand */
  --avalara-orange: #fc6600;
  --avalara-blue: #059bd2;
  --avalara-teal: #025979;

  /* Neutrals */
  --avalara-white: #ffffff;
  --avalara-black: #1a1a1a;
  --avalara-gray-light: #f5f5f5;
  --avalara-gray-medium: #6b7280;
  --avalara-gray-border: #e5e7eb;

  /* Status */
  --avalara-success: var(--color-green-medium);
  --avalara-warning: var(--color-yellow-medium);
  --avalara-error: var(--color-red-medium);
  --avalara-info: var(--color-blue-medium);

  /* Section theming */
  --context-theme-color: var(--avalara-white);
  --context-theme-contrast: var(--avalara-black);
}

Rules:

• Orange for CTAs, energy, accent — never for error states
• Blue for trust signals, links, primary actions, authority
• Teal (#025979) for dark section backgrounds with white text
• Alternate white and colored sections for visual rhythm
• Keep it restrained — color marks intent, not decoration

Typography

:root {
  --font-primary: 'Proxima Nova', 'Source Sans Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 0.75rem;    /* 12px — labels, fine print */
  --text-sm: 0.875rem;   /* 14px — secondary text */
  --text-md: 1rem;        /* 16px — body (base) */
  --text-lg: 1.25rem;    /* 20px — section intros */
  --text-xl: 1.5rem;     /* 24px — H3 */
  --text-xxl: 2rem;       /* 32px — H2 */
  --text-hero: 2.75rem;  /* 44px — H1 hero */

  /* Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-semibold: 600;
  --font-bold: 700;
}

Rules:

• Type ramp is independent of HTML heading tags (H1–H6 are for SEO, visual size is separate)
• Headlines: semibold or bold, tight line-height (1.1–1.2)
• Body: normal weight, comfortable line-height (1.5–1.7)
• Links: always underlined (required by Avalara UX)
• Labels: uppercase with letter-spacing for form labels and category tags

Layout & Spacing

:root {
  /* 6px base spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-xxl: 72px;
  --space-section: 96px;
}

Grid: 12-column responsive

At sm and below, columns expand to full width unless a sm span is explicitly set.

Page Architecture

Marketing Site Structure

Every Avalara marketing page follows this skeleton:

┌──────────────────────────────────────┐
│ Header: Logo + Nav + "Request demo"  │
├──────────────────────────────────────┤
│ Hero: H1 + subhead + CTA            │
├──────────────────────────────────────┤
│ Stats bar: 43K+ customers, 1400+    │
│ integrations, 6M+ returns           │
├──────────────────────────────────────┤
│ Feature section (light bg)           │
├──────────────────────────────────────┤
│ Feature section (teal/dark bg)       │
├──────────────────────────────────────┤
│ Social proof: logos + testimonials   │
├──────────────────────────────────────┤
│ CTA section                          │
├──────────────────────────────────────┤
│ Footer: 5 columns + legal + locale   │
└──────────────────────────────────────┘

Section Theming

Alternate between light and dark sections. Dark sections use --avalara-teal background with white text. Light sections use white or --avalara-gray-light.

.section-dark {
  background: var(--avalara-teal);
  color: var(--avalara-white);
}
.section-light {
  background: var(--avalara-white);
  color: var(--avalara-black);
}
.section-subtle {
  background: var(--avalara-gray-light);
  color: var(--avalara-black);
}

Navigation

• Mega menu: Products, Solutions, Integrations, Resources, About, Partners
• Primary CTA in nav: "Request a demo" (orange button, always visible)
• Search: Integrated in header
• Mobile: Hamburger collapse, full-width dropdown

Footer

• 4–5 columns: About, Products & Services, Integrations, Resources, Contact
• Legal row: Terms, Privacy, Corporate compliance, Cookies, Privacy Rights
• Locale/region selector dropdown
• Phone: display prominently with hours

Components

Buttons

.btn-primary {
  background: var(--avalara-orange);
  color: var(--avalara-white);
  border: none;
  border-radius: 4px;
  font-weight: var(--font-semibold);
  padding: 12px 24px;
  cursor: pointer;
  transition: background 200ms ease;
}
.btn-primary:hover { background: #e55d00; }

.btn-secondary {
  background: var(--avalara-white);
  color: var(--avalara-blue);
  border: 1px solid var(--avalara-blue);
  border-radius: 4px;
  font-weight: var(--font-semibold);
  padding: 12px 24px;
}

.btn-ghost {
  background: transparent;
  color: var(--avalara-blue);
  border: none;
  padding: 12px 24px;
  text-decoration: underline;
}

• Primary CTA: orange background, white text
• Secondary: white/transparent with blue border
• Ghost: text-only with underline
• Icon buttons require aria-label and paired tooltip

Cards

.card-product {
  background: var(--avalara-white);
  border: 1px solid var(--avalara-gray-border);
  border-radius: 4px;
  padding: var(--space-lg);
}
.card-product h3 { margin-bottom: var(--space-sm); }
.card-product .card-link {
  color: var(--avalara-blue);
  text-decoration: underline;
  font-weight: var(--font-semibold);
}

• Product cards: title (H3), 1–2 sentence description, "Read more" link
• Resource cards: uppercase category label (BLOG, REPORT), headline, excerpt, CTA link
• Pricing cards: business-size tier, product list, pricing hint

Stats Block

.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: var(--text-hero);
  font-weight: var(--font-bold);
  color: var(--avalara-orange);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--avalara-gray-medium);
  margin-top: var(--space-xs);
}

Use real stats: "43,000+ customers", "1,400+ integrations", "6M+ returns", "31M+ documents"

Alerts

Four status variants: error, warning, success, info. Include dismiss button unless nodismiss. Always provide a clear, actionable message.

Forms

• Headline: benefit-oriented (e.g., "Let's solve your tax compliance challenges together")
• Short forms — minimize fields
• Validation: inline messages below inputs with status colors
• Submit button: primary orange
• Post-submit: explain next steps ("We'll review…", "A specialist will contact…")

Gradients

.gradient-blue { background: linear-gradient(135deg, #059bd2, #025979); }
.gradient-teal { background: linear-gradient(135deg, #025979, #013d52); }
.gradient-gold { background: linear-gradient(135deg, #fc6600, #e5a100); }
.gradient-purple { background: linear-gradient(135deg, #6b21a8, #4c1d95); }

Use sparingly — gradients are accents, not backgrounds for large sections.

Copy & Messaging

Headlines

Write benefit-focused, not feature-focused:

• "Purpose-built for the systems you use — today and tomorrow"
• "Doing tax manually in a digital world? There's a better way."
• "Ready to see what Avalara can do?"

CTA Copy

Tone Rules

• Professional but not stiff — approachable but not casual
• Lead with customer benefit, not Avalara feature
• Quantify claims when possible (stats, percentages, customer counts)
• Avoid jargon — explain compliance concepts plainly

Anti-Patterns

Avoid these when building Avalara-style pages:

• Gradient blobs or glassmorphism — Avalara uses flat, clean surfaces
• Dark mode as default — Avalara is light-first with dark section accents
• Rounded cards with shadows — use subtle borders, minimal radius
• Dense developer-tool aesthetic — Avalara serves business users, keep it airy
• Orange for errors — orange is brand accent only, red is for errors
• Missing underlines on links — Avalara UX requires underlined inline links
• Generic stock photos — prefer product screenshots, data visualizations, or clean illustrations

Brand Assets

The assets/ directory contains official Avalara brand files sourced from avalara.com and developer.avalara.com. Use these directly — do not recreate logos from scratch.

Usage

<!-- Favicon setup -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#059bd2">

<!-- Header logo -->
<a href="/" aria-label="Avalara home">
  <img src="avalara-logo.svg" alt="Avalara" height="32">
</a>

Additional assets (require Avalara SSO)

PowerPoint templates (25+), brand guide PDF, illustrations, photography, and campaign assets are available on Brandfolder at brandfolder.com/portals/avalara. Contact dickson.bueno@avalara.com for access. Partner assets at brandfolder.com/avalara-partners.

References

For detailed implementation patterns:

• references/design-tokens.md — Complete CSS custom properties, color families, spacing scale, gradient definitions
• references/components.md — Full component library with HTML/CSS for every Skylab component pattern
• references/page-patterns.md — Complete page templates for marketing, product, pricing, and developer portal pages