A10 Brand

A10 Networks Brand Skill

This skill ensures every visual output for A10 Networks looks like it belongs to the same family — whether it's a React dashboard, an HTML landing page, a PDF report, or a data visualization.

The goal is not robotic compliance with a checklist. The goal is to internalize the brand's personality — confident, bold, clean, engineered — and express it naturally across every medium.

Brand Spirit

A10's visual identity communicates: "We are serious engineers who build elegant solutions."

The feeling: Precision without coldness. Confidence without arrogance. Technical depth presented with clarity. Think: the cockpit of a fighter jet — every element has purpose, nothing is decorative for its own sake, but the overall effect is striking.

Design principles:

• Bold, not busy — Strong visual hierarchy. One focal point per section. Generous whitespace.
• Diagonal energy — A10's signature is the diagonal split (white/navy). Use clip-paths and

angled dividers to create dynamism without chaos.

• Sharp edges — Square corners on EVERYTHING. Buttons, cards, inputs, images, badges. This is

the single most recognizable A10 brand element. border-radius: 0 is law.

• Engineered typography — Rubik Light (300) for headlines creates an elegant, modern feel.

Headlines should feel lightweight and spacious, not heavy and shouty.

• Purposeful color — Blues dominate. Magenta punctuates. Accents inform. Every color choice

should have a reason.

---

Critical Rules (Non-Negotiable)

These are the rules that, if violated, make something instantly "not A10":

1. Square corners everywhere — border-radius: 0 on buttons, cards, inputs, badges, images, modals, tooltips, everything. No exceptions. No "just a little rounding." Zero.

2. Rubik font family — Load from Google Fonts. Fallback to Calibri for Office contexts.

   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet">

3. Headline weight is Light (300) — This is counterintuitive and the #1 mistake. H1-H4 use Rubik Light 300, NOT bold. Bold headlines are off-brand. Medium (500) for H5-H6 and buttons.

4. On-brand colors only — Use the brand palette. Off-brand colors are not forbidden but should be rare and justified. When in doubt, use A10 Blue #0057B7.

5. Logo in approved colors only — A10 Blue, Navy, White, or Black. Never magenta, never on accent backgrounds, never with effects.

6. WCAG 2.1 AA contrast — 4.5:1 minimum for text. No light-on-light or dark-on-dark.

---

Color System

Proportions (This Is the Key)

Think of color usage like a pyramid. The visual weight should roughly follow:

PRIMARY (dominant ~80% of all color)
├── Navy Blue    #001E62  — 35% — Dark backgrounds, headers, primary text on light
├── A10 Blue     #0057B7  — 25% — CTAs, links, primary brand moments
└── White        #FFFFFF  — 20% — Light backgrounds, text on dark

SECONDARY (supporting ~15%)
├── Sky Blue     #529EEC  — Dark-theme links, secondary accents, lighter chart elements
├── Magenta      #D62598  — THE dramatic accent. Badges, highlight CTAs, key moments. Sparingly.
└── Black        #000000  — Dark backgrounds, body text alternative

ACCENT (data & status only ~5%)
├── Purple       #440099  — Charts, illustrations
├── Cloud Blue   #5E8AB4  — Charts, alternative to gray
├── Orange       #E35205  — Warnings, emphasis, data viz
├── Green        #00B140  — Success states, positive KPIs
└── Red          #EF3340  — Error states, negative KPIs, danger

Accent color rules: Purple, Cloud Blue, Orange, Green, and Red are reserved for functional use — data visualization series, status badges, KPI values, table cell highlights, alert states. They should NOT be used for backgrounds, large UI areas, or decorative elements.

Magenta rules: Magenta is the "spice." Use it for one or two high-impact moments per page — a primary CTA button, a featured badge, a key metric highlight. Never as a background color. Never dominant. If you squint at the page and magenta is the first thing you see everywhere, you've used too much.

Full Palette Reference

For the complete palette with tints, shades, UI neutrals, hover states, and CSS custom properties, read references/color-system.md.

---

Typography

Rules: Ragged-right alignment (never justified). No hyphenation. No ALL-CAPS except eyebrows and small labels. Keep "A10 Networks" on the same line (use white-space: nowrap on brand names).

---

Themes

When to Use Which

• Light theme — Corporate marketing, external-facing content, documentation, landing pages,

white papers, blog posts

• Dark theme — Product UI, dashboards, security tools, demos, internal platform interfaces,

anything for Signal Horizon / Synapse / ThreatX Labs / The Crows

If context doesn't make it obvious, default to light for documents/marketing, dark for product/technical UI.

Light Theme

Dark Theme

Signal Horizon uses a charcoal/zinc-based dark mode for better data contrast in dense dashboard views. This is the approved product dark theme — not a brand violation.

Note: For marketing/corporate dark contexts, a navy-based palette (#00174A, #0A1A3A) is also acceptable. The charcoal approach is preferred for product UIs with dense data.

---

Buttons

Shape: Rectangular. border-radius: 0. Always. No exceptions. No slanted/angled edges. Labels: Title Case ("Learn More" not "LEARN MORE" or "learn more").

---

Charts & Data Visualization

Charts are a critical brand surface. Read references/chart-standards.md for the complete chart component reference with gradient formulas, but here are the essentials:

Series color priority (use in this order): 1. A10 Blue #0057B7 (primary series) 2. Sky Blue #529EEC (secondary series) 3. Green #00B140 (success/positive) 4. Orange #E35205 (warning/caution) 5. Red #EF3340 (danger/error) 6. Magenta #D62598 (accent, if needed) 7. Cloud Blue #5E8AB4 (additional series) 8. Purple #440099 (additional series)

Chart rules:

• Value labels on every bar/data point
• Dashed grid lines at opacity 0.3
• Rubik font throughout (Light 300 for chart titles, Regular 400 for labels)
• Subtitle with context below every chart title
• Hover states for interactivity
• Subtle gradients on bars (not flat fills) — vertical: lighten+30 top → darken-20 bottom
• No rounded corners on bars
• Dark theme default: cards on #0A1A3A background
• Left/top highlight edge on bars: rgba(255,255,255,0.12)
• Base opacity 0.9, hover opacity 1.0

The assets/chart-reference.jsx file contains production-ready React components for vertical bar, horizontal bar, stacked horizontal, and grouped vertical charts. Use these as templates when building chart components.

---

Logos

Logo SVG assets are available in assets/ for both light and dark themes:

Logo rules:

• Use -dark variants on dark/navy backgrounds, -light on white/light backgrounds
• Preferred placement: top-left. Acceptable: top-right, bottom-left. Avoid bottom-right.
• Clear space around logo = height of the white triangle inside the "A" in A10's mark
• Minimum size: 50px on screen
• Never distort, add shadows, rotate, recolor, or place on busy backgrounds
• When embedding SVGs inline, preserve viewBox and aspect ratio

---

Layout Patterns

Section alternation: Cycle backgrounds — White → Light Gray #F0F4F8 → Navy #001E62 → A10 Blue #0057B7 — to create rhythm without borders.

Diagonal split (signature A10 treatment):

.hero-diagonal::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: #FFFFFF;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

Cards: No borders, no rounded corners. Use subtle box-shadow:

• Light: box-shadow: 0 2px 8px rgba(0, 30, 98, 0.1)
• Dark: box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)

Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64px

---

Review Mode

When asked to review or audit existing work against A10 brand guidelines, perform a structured pass through these categories. Report findings grouped by severity.

Critical (Must Fix — instantly off-brand)

• [ ] Rounded corners anywhere (buttons, cards, inputs, images, badges)
• [ ] Wrong font (not Rubik, or Rubik not loaded)
• [ ] Bold headlines instead of Light 300
• [ ] Off-brand colors used prominently (not from palette, or accents used as primary)
• [ ] Logo in wrong colors or on wrong background
• [ ] Magenta used as background or dominant color
• [ ] Poor contrast (failing WCAG AA)

Major (Should Fix — noticeably off)

• [ ] Wrong button heights or padding
• [ ] Missing or wrong hover states
• [ ] Incorrect font weights for element types
• [ ] Color proportions wrong (too much accent, not enough navy/blue)
• [ ] Charts without value labels or using flat fills
• [ ] Typography: justified text, ALL-CAPS body text, bold where light expected
• [ ] Missing Rubik font import (falling back to system fonts)
• [ ] Accent colors used for non-functional purposes (backgrounds, decorative)

Minor (Polish — good to great)

• [ ] Inconsistent spacing (not using the 4/8/16/24/32/48/64 scale)
• [ ] Section backgrounds not alternating
• [ ] Icon sizing inconsistent
• [ ] Missing diagonal split opportunity on hero sections
• [ ] Links missing SemiBold weight or hover color change
• [ ] Charts missing subtitle context line
• [ ] Eyebrow text not using letter-spacing 0.1em

Spirit Check (brand personality)

• [ ] Does it feel confident and clean, or cluttered and uncertain?
• [ ] Is there a clear visual hierarchy with one focal point per section?
• [ ] Is whitespace generous or cramped?
• [ ] Would this look at home next to a10networks.com?
• [ ] Is magenta used as a deliberate accent or scattered randomly?
• [ ] Do the blues dominate the color landscape as they should?

When reporting, lead with the most impactful issues. Provide specific fixes with exact hex codes, font weights, and CSS properties. Don't just say "wrong color" — say "Header background is #2563EB (Tailwind blue-600), should be #0057B7 (A10 Blue)."

---

Reference Files

For detailed specifications beyond what's in this file:

---

CSS Quick-Start

For any new A10 artifact, start with this foundation:

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }
button, input, select, textarea, .card, .btn { border-radius: 0; }

:root {
  --a10-blue: #0057B7;
  --a10-navy: #001E62;
  --a10-white: #FFFFFF;
  --a10-sky: #529EEC;
  --a10-magenta: #D62598;
  --a10-black: #000000;
  --font: 'Rubik', 'Calibri', sans-serif;
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--a10-navy);
}

h1, h2, h3, h4 { font-weight: 300; }
h5, h6 { font-weight: 500; }

React Quick-Start

For JSX/React artifacts, apply the same principles. Use inline styles or a style object:

const a10 = {
  blue: '#0057B7', navy: '#001E62', white: '#FFFFFF',
  sky: '#529EEC', magenta: '#D62598', black: '#000000',
  green: '#00B140', orange: '#E35205', red: '#EF3340',
  purple: '#440099', cloudBlue: '#5E8AB4',
  grayLight: '#F0F4F8', grayMedium: '#DFE8F0',
  grayDark: '#404040', grayMid: '#7F7F7F',
  cardDark: '#0A1A3A', navyDark: '#00174A',
  blueDark: '#004189', blueLight: '#7CBAFF',
  skyLight: '#BEDDFF', magentaDark: '#A01B72',
};

// Always include Rubik font link
// Always set border-radius: 0 on all interactive/container elements
// Always use fontWeight: 300 for h1-h4, 500 for h5-h6

A10 Chart Standards — Complete Reference

Series Color Assignment

Always assign data series colors in this priority order:

For semantic data (success/failure, allowed/blocked), use the semantic mapping:

• Success/Allowed/Positive: Green or A10 Blue
• Warning/Caution: Orange
• Error/Blocked/Negative: Red
• Informational: Sky Blue or Cloud Blue

Gradient Formula

Bars should use subtle gradients, never flat fills. This adds depth and polish.

Vertical bars: Lighten +30 at top → Darken -20 at bottom

<linearGradient id="bar-v" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stopColor={lighten(baseColor, 30)} />
  <stop offset="100%" stopColor={darken(baseColor, 20)} />
</linearGradient>

Horizontal bars: Darken -20 at left → Lighten +30 at right

<linearGradient id="bar-h" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0%" stopColor={darken(baseColor, 20)} />
  <stop offset="100%" stopColor={lighten(baseColor, 30)} />
</linearGradient>

Lighten/darken helper:

const lighten = (hex, amt) => {
  const num = parseInt(hex.replace('#', ''), 16);
  const r = Math.min(255, ((num >> 16) & 0xff) + amt);
  const g = Math.min(255, ((num >> 8) & 0xff) + amt);
  const b = Math.min(255, (num & 0xff) + amt);
  return `rgb(${r},${g},${b})`;
};
const darken = (hex, amt) => lighten(hex, -amt);

Bar Styling

• Highlight edge: Left edge (vertical) or top edge (horizontal) with rgba(255,255,255,0.12), 1.5-2px wide
• Base opacity: 0.9
• Hover opacity: 1.0
• Transition: opacity 0.15s ease
• Corner radius: 0 (never round bar corners)
• Gap ratio: ~0.3 between bars in a group

Grid Lines

• Style: Dashed (strokeDasharray="4,4")
• Color: Navy #001E62 on dark backgrounds
• Opacity: 0.3 for grid lines, 0.8 for baseline (x-axis)
• Baseline: Solid, slightly more visible than grid

Labels

• Chart title: Rubik Light 300, 20px, #F0F4F8 (dark) or #001E62 (light)
• Subtitle: Rubik Regular 400, 14px, #7F7F7F (Mid Gray), immediately below title
• Axis labels: Rubik Regular 400, 12px, #7F7F7F
• Value labels: Rubik Medium 500, 13px, #F0F4F8 (dark) or #001E62 (light)
• Legend labels: Rubik Regular 400, 12px, #7F7F7F
• Legend markers: 12x12px squares (not circles, not rounded), filled with series color

Value formatting:

• Values ≥ 1000: Format as X.Xk (e.g., 42.5k)
• Values ≥ 10000: Format as XXk (e.g., 42k) — drop decimal
• Always show value labels on bars (above for vertical, right of for horizontal)

Chart Container

Dark theme (default for data viz):

.chart-container {
  background: #0A1A3A;  /* Card Dark */
  padding: 24px;
  margin-bottom: 24px;
  /* No border-radius */
}

Light theme:

.chart-container {
  background: #FFFFFF;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 30, 98, 0.1);
}

Chart Types Available

Production-ready React components in assets/chart-reference.jsx:

1. VerticalBarChart — Single-series vertical bars with individual colors per bar 2. HorizontalBarChart — Single-series horizontal bars 3. StackedHorizontalBar — Multi-series stacked horizontal bars with legend 4. GroupedVerticalBar — Multi-series grouped vertical bars with legend

Each component accepts: data, title, subtitle, optional height, showValues, and series-specific props. All follow the gradient, labeling, and interaction patterns above.

Recharts Integration

When using the recharts library in React artifacts:

const A10_CHART_COLORS = [
  '#0057B7', '#529EEC', '#00B140', '#E35205',
  '#EF3340', '#D62598', '#5E8AB4', '#440099'
];

// Apply to recharts
<BarChart>
  <CartesianGrid strokeDasharray="4 4" stroke="#001E62" opacity={0.3} />
  <XAxis tick={{ fill: '#7F7F7F', fontFamily: 'Rubik', fontSize: 12 }} />
  <YAxis tick={{ fill: '#7F7F7F', fontFamily: 'Rubik', fontSize: 12 }} />
  <Bar dataKey="value" fill="#0057B7" radius={0} /> {/* radius={0} critical */}
</BarChart>

"Do / Don't" Summary

Always:

• Value labels on every data point
• Dashed grid lines (opacity 0.3)
• Rubik font (Light 300 titles, Regular 400 labels, Medium 500 values)
• Subtitle with temporal/contextual info
• Hover states with opacity change
• Gradient fills (not flat)
• Square legend markers

Never:

• Flat solid fills (use subtle gradient)
• Missing value labels
• Overlapping axis text
• Rounded corners on bars
• Colors outside brand palette
• 3D effects or shadows on data elements
• Pie charts with too many segments (max 6-8)

A10 Color System — Complete Reference

Primary Colors

Secondary Colors

Accent Colors (Data & Status Only)

Tints & Shades

UI Neutrals

Hover States

Gradients (Approved)

Contrast Rules

• White text safe on: #001E62, #000000, #00174A, #0A1A3A, #0057B7, #D62598, #440099
• Dark text safe on: #FFFFFF, #F0F4F8, #DFE8F0, #BEDDFF, #7CBAFF
• Magenta: Accent only — never dominant, never behind body text
• Logo: Never on accent color backgrounds
• Minimum contrast: WCAG 2.1 AA — 4.5:1 for normal text, 3:1 for large text (≥24px or ≥18.66px bold)

Usage Proportions

Visual weight targets across any A10-branded surface:

Magenta specifically should be ≤8% of total color presence. If magenta is the first thing you notice on every screen, reduce it.

CSS Custom Properties

:root {
  /* Primary */
  --a10-blue: #0057B7;
  --a10-navy: #001E62;
  --a10-white: #FFFFFF;

  /* Secondary */
  --a10-sky-blue: #529EEC;
  --a10-magenta: #D62598;
  --a10-black: #000000;

  /* Accent */
  --a10-purple: #440099;
  --a10-orange: #E35205;
  --a10-cloud-blue: #5E8AB4;
  --a10-green: #00B140;
  --a10-red: #EF3340;

  /* Neutrals */
  --a10-gray-light: #F0F4F8;
  --a10-gray-medium: #DFE8F0;
  --a10-gray-dark: #404040;
  --a10-gray-mid: #7F7F7F;
  --a10-card-dark: #0A1A3A;

  /* Tints & Shades */
  --a10-blue-light: #7CBAFF;
  --a10-blue-dark: #004189;
  --a10-blue-darker: #00174A;
  --a10-sky-light: #BEDDFF;
  --a10-sky-dark: #3D77B1;
  --a10-magenta-light: #E979C2;
  --a10-magenta-dark: #A01B72;

  /* Hover */
  --a10-hover-light: #003EC8;
  --a10-hover-dark: #7CBAFF;
}

A10 Components — Complete Reference

Buttons

Critical: border-radius: 0 on ALL buttons. No exceptions.

Primary Button (Large) — A10 Blue

.btn-primary {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 16px;
  height: 56px;
  padding: 0 32px;
  background-color: #0057B7;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-primary:hover { background-color: #004189; }

Primary Button — Magenta Variant

Use sparingly for the single most important CTA on a page.

.btn-primary-magenta {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 16px;
  height: 56px;
  padding: 0 32px;
  background-color: #D62598;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-primary-magenta:hover { background-color: #A01B72; }

Outlined Button (Medium)

.btn-outlined {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 14px;
  height: 48px;
  padding: 0 24px;
  background-color: transparent;
  color: #0057B7;
  border: 2px solid #0057B7;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-outlined:hover {
  background-color: #D62598;
  border-color: #D62598;
  color: #FFFFFF;
}

Secondary Button (Small)

.btn-secondary {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 12px;
  height: 40px;
  padding: 0 20px;
  background-color: #001E62;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-secondary:hover { background-color: #00174A; }

Dark Theme Buttons

/* Primary - Dark */
.dark .btn-primary {
  background-color: #529EEC;
}
.dark .btn-primary:hover { background-color: #7CBAFF; }

/* Outlined - Dark */
.dark .btn-outlined {
  color: #F0F4F8;
  border-color: #F0F4F8;
}
.dark .btn-outlined:hover {
  background-color: #003EC8;
  border-color: #003EC8;
  color: #FFFFFF;
}

Links

.link {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0057B7;
  text-decoration: none;
  transition: color 0.15s ease;
}
.link::after { content: ' >'; }
.link:hover { color: #003EC8; }

.dark .link { color: #529EEC; }
.dark .link:hover { color: #7CBAFF; }

Cards

.card {
  background: #FFFFFF;
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 30, 98, 0.1);
  padding: 24px;
}

.dark .card {
  background: #0A1A3A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

Card variants from brand guide:

• Dark Card: Navy bg #0A1A3A, light text, for product/dashboard contexts
• Light Card: White bg, navy text, subtle shadow
• Status Card: Card with colored left border (3px) indicating status
• Alert Card: Card with colored top accent and icon

Alert Styles

.alert {
  padding: 16px 20px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
}

.alert-success {
  background: rgba(0, 177, 64, 0.1);
  border-left: 3px solid #00B140;
  color: #001E62;
}
.alert-warning {
  background: rgba(227, 82, 5, 0.1);
  border-left: 3px solid #E35205;
  color: #001E62;
}
.alert-error {
  background: rgba(239, 51, 64, 0.1);
  border-left: 3px solid #EF3340;
  color: #001E62;
}
.alert-info {
  background: rgba(0, 87, 183, 0.1);
  border-left: 3px solid #0057B7;
  color: #001E62;
}

Status Badges

.badge {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 0; /* Square badges */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-success { background: #00B140; color: #FFFFFF; }
.badge-warning { background: #E35205; color: #FFFFFF; }
.badge-error   { background: #EF3340; color: #FFFFFF; }
.badge-info    { background: #0057B7; color: #FFFFFF; }
.badge-accent  { background: #D62598; color: #FFFFFF; }
.badge-new     { background: #529EEC; color: #FFFFFF; }

Layout: Diagonal Split Hero

.hero {
  position: relative;
  background: #001E62;
  min-height: 500px;
  overflow: hidden;
  padding: 80px 48px;
}

.hero-diagonal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #FFFFFF;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

Layout: Section Alternation

Cycle through these backgrounds in order to create visual rhythm:

1. White #FFFFFF 2. Light Gray #F0F4F8 3. Navy #001E62 (with white text) 4. A10 Blue #0057B7 (with white text)

Use padding 48px 0 or 64px 0 for section spacing. No visible borders between sections — the color change creates the separation.

Layout: Spacing Scale

Form Inputs

input, select, textarea {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 16px;
  padding: 12px 16px;
  border: 2px solid #DFE8F0;
  border-radius: 0;
  background: #FFFFFF;
  color: #001E62;
  transition: border-color 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: #0057B7;
  outline: none;
}

.dark input, .dark select, .dark textarea {
  background: #0A1A3A;
  border-color: #003EC8;
  color: #F0F4F8;
}
.dark input:focus { border-color: #529EEC; }

Tables

table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Rubik', sans-serif;
}

th {
  background: #001E62;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 14px;
  padding: 12px 16px;
  text-align: left;
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid #DFE8F0;
  font-size: 14px;
  color: #001E62;
}

tr:hover td { background: #F0F4F8; }

/* Dark theme */
.dark th { background: #00174A; }
.dark td {
  color: #F0F4F8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.dark tr:hover td { background: rgba(255, 255, 255, 0.04); }

Global Resets

Apply to every A10 project:

button, .btn, .card, input, select, textarea,
.badge, .alert, .tooltip, .modal, img.framed {
  border-radius: 0;
}

A10 Brand Review Checklist — Expanded

Use this checklist when auditing any visual output for A10 brand compliance. Work through each section and report findings grouped by severity.

---

Critical (Must Fix)

These violations make the output instantly recognizable as "not A10." Fix before shipping.

Shape & Geometry

• [ ] No rounded corners on buttons (border-radius: 0)
• [ ] No rounded corners on cards
• [ ] No rounded corners on form inputs
• [ ] No rounded corners on badges/tags
• [ ] No rounded corners on images/containers
• [ ] No rounded corners on tooltips/modals
• [ ] No slanted/angled button edges
• [ ] No pill-shaped elements

Typography

• [ ] Rubik font loaded via Google Fonts
• [ ] Rubik actually rendering (not falling back to system font)
• [ ] H1-H4 using Light weight (300), NOT Bold or Regular
• [ ] No Bold headlines (only Light 300 for H1-H4)
• [ ] No Comic Sans, Papyrus, or novelty fonts (obviously)

Color

• [ ] All prominent colors from A10 brand palette
• [ ] No off-brand blues (watch for Tailwind blue-500/600, Bootstrap blue, Material blue)
• [ ] Magenta NOT used as a background color
• [ ] Magenta NOT dominant (should be ≤8% of color presence)
• [ ] Logo displayed in approved colors only (A10 Blue, Navy, White, or Black)
• [ ] Logo NOT on accent-colored backgrounds

Accessibility

• [ ] Text contrast meets WCAG 2.1 AA (4.5:1 normal, 3:1 large)
• [ ] No light text on light backgrounds
• [ ] No dark text on dark backgrounds
• [ ] Interactive elements have visible focus states

---

Major (Should Fix)

These issues are noticeable to someone familiar with the brand. Fix for polish.

Buttons

• [ ] Primary button height: 56px
• [ ] Outlined button height: 48px
• [ ] Secondary button height: 40px
• [ ] Correct padding per size (32px / 24px / 20px horizontal)
• [ ] Title Case labels ("Learn More" not "LEARN MORE")
• [ ] Hover states present and using correct dark/light variants
• [ ] Blue button hover: #004189 (light) or #7CBAFF (dark)
• [ ] Magenta button hover: #A01B72

Font Weights

• [ ] Body text: Regular 400
• [ ] Buttons/navigation: Medium 500
• [ ] Links: SemiBold 600
• [ ] Eyebrows: Bold 700, ALL-CAPS, letter-spacing 0.1em
• [ ] No Bold (700) used for headlines or body

Color Proportions

• [ ] Blues (Navy + A10 Blue) dominate the color landscape
• [ ] White used appropriately (backgrounds, text on dark)
• [ ] Accent colors (Purple, Orange, Cloud Blue, Green, Red) limited to data/status
• [ ] Accent colors NOT used for backgrounds or large decorative areas
• [ ] Sky Blue used as secondary, not competing with A10 Blue for primary
• [ ] Overall proportion feels: 80% primary / 15% secondary / 5% accent

Charts & Data Viz

• [ ] Value labels on every bar/data point
• [ ] Grid lines dashed (not solid) at low opacity
• [ ] Gradient fills (not flat solid fills) on bars
• [ ] No rounded corners on chart bars
• [ ] Series colors follow priority order (Blue → Sky → Green → Orange → Red...)
• [ ] Chart title in Light 300 with subtitle in Regular 400
• [ ] Rubik font used for all chart text

Typography Rules

• [ ] Ragged-right alignment (no justified text)
• [ ] No ALL-CAPS except eyebrows/small labels
• [ ] No hyphenation
• [ ] "A10 Networks" kept on same line (not breaking across lines)
• [ ] Body line-height: 24px (1.5)
• [ ] Reasonable line length (60-80 characters)

Theme Consistency

• [ ] Light theme: white/gray backgrounds with navy text
• [ ] Dark theme: navy/black backgrounds with light text and sky-blue links
• [ ] Not mixing light and dark theme elements inconsistently
• [ ] Links using correct theme color (#0057B7 light, #529EEC dark)

---

Minor (Polish)

These are the details that separate good from great.

Spacing

• [ ] Using the scale: 4 / 8 / 16 / 24 / 32 / 48 / 64px
• [ ] Consistent padding across similar elements
• [ ] Generous whitespace (not cramped)
• [ ] Card padding: 24px
• [ ] Section padding: 48-64px vertical

Layout

• [ ] Section backgrounds alternating (White → Light Gray → Navy → Blue)
• [ ] No visible borders between sections (color change = separation)
• [ ] Cards using subtle box-shadow (not borders)
• [ ] Hero section has diagonal split opportunity utilized

Icons

• [ ] Consistent sizing across icon set
• [ ] Colored with brand palette only
• [ ] Clean lines, no drop shadows
• [ ] No gradients unless from approved gradient set

Links

• [ ] SemiBold 600 weight
• [ ] Correct color per theme
• [ ] Hover color change present
• [ ] Arrow suffix (" >") where appropriate

Charts (Detail)

• [ ] Subtitle with temporal/contextual info
• [ ] Hover states with opacity transition
• [ ] Legend markers are squares (not circles)
• [ ] Value labels formatted (X.Xk for thousands)
• [ ] Left/top highlight edge on bars (rgba white 0.12)
• [ ] Base opacity 0.9, hover 1.0

Eyebrows

• [ ] Letter-spacing: 0.1em
• [ ] Font-size: 16px
• [ ] Bold 700 weight
• [ ] ALL-CAPS

---

Spirit Check

Beyond mechanical compliance, does the output embody the A10 brand personality?

Confidence

• [ ] Clear visual hierarchy — one focal point per section
• [ ] Decisive color choices (not timid or washed out)
• [ ] Headlines feel authoritative yet elegant (Light 300 does this)
• [ ] CTAs are prominent and unambiguous

Cleanliness

• [ ] Whitespace is generous, not cramped
• [ ] No visual clutter or competing focal points
• [ ] Information density is appropriate for the medium
• [ ] Grid alignment is consistent

Engineering Aesthetic

• [ ] Feels precise and intentional
• [ ] Every element serves a purpose
• [ ] No decorative elements without function
• [ ] Data presentation is clear and well-labeled

Brand Cohesion

• [ ] Would this look at home next to a10networks.com?
• [ ] Color balance feels like "a page from the same book" as other A10 materials
• [ ] Typography creates the signature "lightweight elegance"
• [ ] The diagonal energy / sharp-edge identity is present where appropriate

Common Off-Brand Patterns to Watch For

• [ ] Tailwind defaults — rounded-lg, blue-500, gray-200 backgrounds
• [ ] Bootstrap defaults — rounded buttons, card-body padding, #007bff blue
• [ ] Material defaults — rounded corners, elevation shadows, Roboto font
• [ ] Generic "AI slop" — purple gradients, Inter font, excessive rounded corners
• [ ] Stock photography clichés — handshakes, puzzle pieces, hooded hackers

---

Reporting Format

When reporting audit results, structure as:

🔴 Critical Issues (X found)

For each: what's wrong, where, exact fix (with hex codes, CSS props, font weights)

🟡 Major Issues (X found)

For each: what's wrong, where, recommended fix

🔵 Minor Issues (X found)

For each: what could be improved, suggested approach

✅ Brand Spirit Assessment

2-3 sentences on overall brand alignment, calling out what works well and what feels off.

A10 Typography — Complete Reference

Font Family

Primary: Rubik (Google Font)

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Office fallback: Calibri System fallback: -apple-system, BlinkMacSystemFont, sans-serif

Full stack: 'Rubik', 'Calibri', -apple-system, BlinkMacSystemFont, sans-serif

Font Weights

The most common mistake is using Bold for headlines. A10 headlines use Light 300 — this creates the brand's distinctive elegant, modern feel. Bold is reserved almost exclusively for small uppercase eyebrow labels.

Type Scale

Typography Rules

• Alignment: Ragged-right (left-aligned). Never justified text.
• Kerning: Optical kerning enabled (font-kerning: normal; text-rendering: optimizeLegibility;)
• Hyphenation: Never. (hyphens: none;)
• ALL-CAPS: Only for eyebrows and small labels. Never for body text or headlines.
• Quotes: Smart quotes (" ") for dialogue; straight quotes (") for measurements/code.
• Brand names: Keep "A10 Networks" and product names on the same line (white-space: nowrap).
• Line length: Aim for 60-80 characters per line for body text readability.

CSS Implementation

/* Base typography */
body {
  font-family: 'Rubik', 'Calibri', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  hyphens: none;
}

/* Headlines — Light 300 */
h1 { font-size: 3rem; line-height: 56px; font-weight: 300; }
h2 { font-size: 2rem; line-height: 40px; font-weight: 300; }
h3 { font-size: 1.75rem; line-height: 36px; font-weight: 300; }
h4 { font-size: 1.5rem; line-height: 32px; font-weight: 300; }

/* Sub-headlines — Medium 500 */
h5 { font-size: 1.25rem; line-height: 28px; font-weight: 500; }
h6 { font-size: 1rem; line-height: 24px; font-weight: 500; }

/* Eyebrow */
.eyebrow {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/* Links */
a {
  font-weight: 600;
  text-decoration: none;
}

Office / Print Context

When Rubik is unavailable (PowerPoint, Word, print):

• Use Calibri as the primary font
• Maintain the same weight relationships (Light for headlines, Regular for body)
• Print minimum: 10pt body, 8pt captions
• Ensure 300 DPI for print output