Ati Robotics — Design System

01 — Voice

Identity & Voice

Ati Robotics is an enterprise-grade industrial robotics brand. The voice is confident, specific, and direct. Authoritative without academic; accessible without dumbing things down.

Brand Name

Always render the company name as Ati Robotics in mixed case. Never use "ATI" in all caps.

Correct: Ati Robotics, Ati Copilot, Ati Fleet Manager, Sherpa 10K

Wrong: ATI Robotics, ATI, ATI ROBOTICS

Headline Capitalization

Every headline uses AP/Chicago title case.

Correct: "Where the World Builds Vehicles. We Keep the Parts Moving."

Wrong: "Where the world builds vehicles. We keep the parts moving."

Capitalize all words except articles (a, an, the), short prepositions (for, in, on, of, to, at, by, with), and coordinating conjunctions (and, but, or). First and last words always capitalized.

Anchor Text

Use descriptive anchor text that names the destination.

Correct: "Explore Automotive," "Fleet Manager details," "Tire plant site assessment"

Avoid: "Learn More," "Click here," "Read more"

02 — Logo

Logo

Two versions of the Ati Robotics wordmark. Use the dark version on light backgrounds and the light version on dark backgrounds. Maintain clear space and minimum sizing for legibility.

Wordmarks

Files

Variant	Filename	Use
For light backgrounds	`Ati-Robotics-Light-version-02.png`	Dark-colored wordmark. Use on White, Apple Grey, and other light surfaces. Default header state once user scrolls past the hero.
For dark backgrounds	`Ati-Robotics-dark-version-02.png`	Light-colored wordmark. Use on Ink, dark hero overlays, and dark imagery. Default header state above the fold.

File naming note: The filename suffix (dark-version / Light-version) refers to the background the wordmark is designed for, not the color of the wordmark itself. The dark-version file contains the light-colored marks for use on dark surfaces.

Usage Rules

Clear space — preserve at least the height of the wordmark's "A" on every side. No text, lines, or other elements should encroach.
Minimum size — 120px wide for digital, 1 inch wide for print. Below this the wordmark loses legibility.
Color — use the supplied dark or light PNG. Do not recolor, gradient-fill, or apply effects.
Backgrounds — only use the wordmark on solid backgrounds with sufficient contrast, or over photography with a dark overlay.
Lock-up — do not pair with other marks, taglines, or product names unless approved. The "Ati Robotics" wordmark stands alone.

Brand evolution note: Legacy "Ati Motors" assets are still in use for the contact email (info@atimotors.com). Do not introduce new "Ati Motors" branding in new deliverables — use "Ati Robotics" everywhere except where the legacy email is referenced.

03 — Color

Color Palette

Tokenized via CSS variables in main.css. Use semantic names (e.g., var(--ink)), not hex values, when extending the site.

Core Palette

Ink

Ink (Primary)

--ink

#1D1D1F

Primary text on light backgrounds. Dark section backgrounds. Buttons (dark variant).

Ink 2

Ink 2 (Hover)

--ink-2

#3A3A3C

Hover state for dark buttons and Ink backgrounds.

Teal

Teal (Brand Accent)

--teal

#00B49A

Primary CTA button. Accent only on DARK backgrounds. Fails contrast on white.

Teal Dark

--teal-dark

#009B85

Hover state for teal CTAs.

Teal Text

Teal Text (AA on white)

--teal-text

#007A6A

Body links and eyebrows on white. 5.2:1 contrast on white — WCAG AA.

Teal Faint

--teal-faint

#EEF9F7

Section backgrounds, callout boxes.

Neutrals

White

--white

#FFFFFF

Default page background.

Apple Grey

--apple-grey

#F5F5F7

Light section backgrounds. Alternating page sections.

Grey 2

--grey-2

#6E6E73

Body text on light backgrounds. Secondary copy.

Grey 3

--grey-3

#AEAEB2

Tertiary text, labels on dark backgrounds.

Grey 4

--grey-4

#D1D1D6

Borders, dividers, disabled states.

Color usage rule: The brand teal (#00B49A) fails WCAG contrast on white backgrounds. Use it only on dark surfaces (Ink, gradient overlays). For body links and eyebrows on white, use Teal Text (#007A6A).

04 — Typography

Type System

DM Sans for everything visible. DM Mono for technical labels, eyebrows, and code. Both via Google Fonts. Weights used: 300, 400, 500, 600, 700, 900.

Type Scale

H1 / Hero font-size: 52px
weight: 600
letter-spacing: -0.02em
line-height: 1.05

Where the World Builds Vehicles.

H2 / Section font-size: 36px
weight: 700
letter-spacing: -0.02em
line-height: 1.15

Built for How Automotive Plants Run

H3 / Subsection font-size: 24px
weight: 700
letter-spacing: -0.01em
line-height: 1.25

Pallet and Heavy Component Transport

H4 / Card title font-size: 18px
weight: 700
line-height: 1.3

Sherpa 10K Product Brochure

Body font-size: 16px
weight: 400
line-height: 1.6
color: --grey-2

Automotive plants run on takt time. Every late delivery at line side has a downstream cost. Ati Robotics replaces unpredictable manual material handling with autonomous, orchestrated flow.

Body Small font-size: 14px
weight: 400
line-height: 1.55
color: --grey-2

Sequenced kits delivered from supermarket to assembly station on takt time — triggered by schedule or sensor.

Eyebrow (Mono) font-family: DM Mono
font-size: 12px
weight: 500
letter-spacing: 0.16em
color: --teal-text

Industries — Automotive

Mono / Code font-family: DM Mono
font-size: 14px
weight: 400

--ink: #1D1D1F;

Heading scale uses clamp() for fluid sizing. On the live site, hero H1 scales from 40px on mobile up to 64px on wide desktop. Section H2 scales 32-52px. Refer to main.css for exact responsive values.

05 — Iconography

Iconography

Stroke-style line icons in the Lucide visual family. 2px stroke, rounded line caps and joins, inheriting currentColor so they recolor with their parent context.

Style Specifications

Property	Value	Rationale
Stroke width	2px	Heavy enough to read at small sizes, light enough to feel modern.
Stroke linecap	round	Softer feel, brand-aligned with Apple-style aesthetic.
Stroke linejoin	round	Smooth corners on all icon paths.
Fill	none	Outline-style; lets the background show through.
ViewBox	0 0 24 24	Standard Lucide/Heroicons grid.
Color	currentColor	Inherits text color, so icons match surrounding type automatically.
Size	16-24px typical	Inline next to text. Larger sizes for hero/feature use.
aria-hidden	"true"	For decorative icons. Always pair functional icons with accessible labels.

Examples

Shield Check

Certification, safety, ISO compliance

Clock

Deployment time, response time

Activity Pulse

Real-time data, fleet status

Module / Component

Hardware, integration, modularity

Network / Fleet

Multi-robot coordination, infrastructure

Lightning / Speed

Throughput, performance, AI

Pattern Reference

<!-- Decorative icon next to text -->
<svg width="16" height="16" viewBox="0 0 24 24"
     fill="none" stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true">
  <path d="..."/>
</svg>

Source: Pull icons from Lucide or Heroicons (outline variant). Both libraries use the same 24×24 grid and stroke-style baseline that match the Ati Robotics aesthetic. Never use filled or three-dimensional icons.

06 — Buttons

Buttons

Four primary button styles. All buttons use 11px / 22px vertical / horizontal padding, 14px / 600 weight type, and -0.01em letter-spacing.

Light Background

Dark Background

Hierarchy

Variant	Class	Background	Text	Use
Primary (Teal)	`.btn-primary`	Teal	Ink	Highest-priority CTA. One per section maximum.
Dark	`.btn-dark`	Ink	White	Secondary CTA on light backgrounds.
Secondary	`.btn-secondary`	Transparent + outline	Ink	Tertiary CTA. Lower-priority actions.
Secondary Light	`.btn-secondary-light`	Transparent + white outline	White	Use only on dark/image backgrounds.

07 — Forms

Form Elements

All site forms use Netlify Forms with inline thank-you states. Labels live above inputs, never as placeholders alone. UTM hidden inputs sit at the bottom of every form.

Full Name *

Work Email *

We respond within one business day.

Tell us about your project

Form pattern reference: See src/static/landing-page-forms.md in the repository for the full Netlify Forms pattern, including UTM tracking and inline thank-you state implementation.

08 — Components

Cards & Stat Strips

Card grids and stat strips repeat across most page templates. Standard sizes shown below.

Stat Strip

70+

Plants Deployed

99%

Mission Success

<6mo

Avg Payback (US)

4wk

Avg Deployment

Card Grid

Kitted Parts Delivery

Sequenced kits delivered from supermarket to assembly station on takt time — triggered by schedule or sensor.

Pallet Transport

Stamped parts, body panels, and sub-assemblies move between press shop, body shop, and paint on autonomous routes.

Dock-to-Floor Movement

Inbound materials travel from receiving dock to point of use autonomously — eliminating manual trips.

09 — Layout

Spacing & Layout

Fluid section gaps, fixed container widths. All values scale at the standard breakpoints.

Token	Default	≤ 900px	≤ 768px	Use
`--container-max`	1200px	1200px	1200px	Page content maximum width
`--container-pad`	64px	40px	24px	Horizontal padding inside containers
`--section-gap`	110px	80px	64px	Vertical gap between page sections

Standard Breakpoints

Breakpoint	Target	Behavior
1024px	Mobile nav, tablet landscape	Mobile nav activates. Major grid collapses (5→3, 4→2, 3→2).
900px	Tablet portrait	Section gap and container padding shrink.
640px	Wide phone	3-col grids collapse to 1-col. CTA pairs stack.
480px	Phone portrait	Final single-column collapse.

10 — Photography

Photography Direction

Industrial, documentary, on-the-ground in real factories. Show robots doing real work in real environments. Avoid renders, simulations, or stock photography.

Examples — Industry Photography

Automotive

Assembly line context, real plant environment

Pharmaceutical

Clean room, controlled, sterile production

Heavy Equipment

Large-frame production, outdoor-rated capability

Examples — Product Photography

Sherpa AMR indoor and outdoor capability

Indoor / Outdoor Transition

Demonstrates real-world capability

Operational Context

Robot at work in its intended environment

Hero / Full-bleed

Wide landscape, atmospheric, sets the scene

Direction

Authentic environments — shoot in real factories, real warehouses, real industrial settings. No staged sets or studio backdrops.
Robot in context — show the AMR doing the actual work (towing trolleys, lifting pallets, navigating aisles) rather than glamour shots in isolation.
Atmospheric lighting — industrial natural light, warm overhead facility lights, slight haze. Avoid harsh flash, oversaturated color grading, or HDR effects.
Color palette — earthy industrial tones (grays, concrete, machine yellow, brand teal accents). Photography should feel honest, not retouched.
Composition — wide landscape orientation for hero/full-bleed. Leave breathing room on one side for text overlay (typically left side).
People when present — operators or engineers shown as context, not as subjects. Avoid identifiable faces unless the person is a named team member (e.g., leadership headshots).
Avoid — 3D renders, simulations, "futuristic" sci-fi imagery, stock photography of generic robots, conveyor-belt clichés, AI-generated images.

Specs by Use Case

Use Case	Dimensions	Format	Max Size	Notes
Hero / Full-bleed	2400 × 1350 px	JPG / WebP	500 KB	16:9 landscape. Compressed for web.
Section background	1920 × 1080 px	JPG / WebP	400 KB	Often rendered at 18% opacity behind text overlay.
Product photography	1200 × 800 px+	JPG	300 KB	Crisp, well-lit. Industrial or neutral background.
Card / thumbnail	800 × 600 px	JPG / WebP	200 KB	Cropped to 4:3 or 3:2.
Social share (og:image)	1200 × 630 px	JPG	500 KB	Exact size required for LinkedIn / Twitter / Facebook cards.
Favicon	16, 32, 180 px	PNG / ICO	—	Already deployed at `/assets/favicon/`.

Alt text convention: Every image requires descriptive alt text under 125 characters. Describe what the image shows, not its role on the page. Decorative-only images (pure backgrounds) may use empty alt + aria-hidden="true" per WCAG.

11 — Motion

Motion & Animation

Animation is purposeful, technical, and restrained. Movement should communicate function (data flowing, signals pulsing, status changing) rather than decorate. The brand teal is the universal "active" / "live" indicator across all motion.

Principles

Purposeful — every animation should illustrate a real concept (data flowing, fleet coordination, status changes). Avoid motion-for-motion's sake.
Subtle pace — most animations loop on 2-5 second cycles. Long enough to feel deliberate, short enough to feel alive.
Brand color = active state — teal indicates "live," "moving," "active." Neutrals indicate "idle" or "background."
Continuous loops — SVG animations use repeatCount="indefinite". No start/stop interaction; they run silently in the background.
Reduced motion — respect prefers-reduced-motion on critical motion (currently CSS-driven; SVG animations are inline and considered decorative).
Easing — use natural cubic-bezier easing (0.4, 0, 0.2, 1) for UI transitions. SVG path animations run on linear timing for predictable cycle pacing.

Live Animation Examples

These four SVG patterns are used across the homepage "One Platform" section. Each illustrates a layer of Ati's stack: Physical Control, Data & Sensing, AI Orchestration, and System of Record.

Physical Control

AMR nodes with a signal pulse traveling along the active connection. Used to illustrate fleet coordination.

Data & Sensing

Live waveform with a pulsing dot tracing the data path. Illustrates real-time IoT, ERP, and MES data flow.

AI Orchestration

Central AI hub receiving staggered input pulses from three sources. Illustrates decision-making at the platform layer.

System of Record

Component tracking table with status pills cycling through states in sequence. Illustrates real-time inventory visibility.

Animation Reference Specs

Pattern	Duration	Implementation	Notes
Signal pulse along path	2-3.2s	`<animateMotion>`	Use for data flow, signal travel between nodes.
Status state cycle	4.5s loop	`<animate attr="opacity">` + keyTimes	Three states cycle in 1/3 segments. Each state holds for ~1.5s.
Live indicator pulse	2s	opacity 1→0.2→1	Used on "LIVE" dots, status indicators, real-time markers.
Hover lift / button	0.15-0.2s	CSS transition	`transform: translateY(-1px)` + background change.
Card image zoom	0.4s	CSS transition on transform	Image scales 1.0 → 1.05 on card hover.
Drawer / accordion	0.22-0.35s	CSS transition	Use cubic-bezier(0.4, 0, 0.2, 1) for natural deceleration.
Scroll fade-in	0.55s	IntersectionObserver + class toggle	Translate 24px up + opacity 0→1. Stagger across siblings.

Pattern: Signal Pulse Along Path

<!-- Reusable pattern for any "data flowing between nodes" visual -->
<svg viewBox="0 0 200 80">
  <!-- Static path (the "wire") -->
  <line x1="32" y1="40" x2="168" y2="40"
        stroke="#00B49A"
        stroke-dasharray="4,3"
        opacity="0.6"/>

  <!-- Animated pulse following the path -->
  <circle r="3" fill="#00B49A">
    <animateMotion dur="2s"
                   repeatCount="indefinite"
                   path="M32,40 L168,40"/>
  </circle>
</svg>

When to use motion: on schematic diagrams illustrating concepts (data flow, fleet coordination, AI processing). Avoid animating brand elements, headlines, or product photography. Static imagery is fine; movement should add meaning, not decoration.

12 — Accessibility

Accessibility Standards

WCAG 2.2 AA is non-negotiable. Every component on the site is built to meet AA from first commit.

Contrast Ratios

Combination	Ratio	WCAG AA	Use
Ink on White	16.0:1	✓ AAA	Body text, headings
Grey 2 on White	5.6:1	✓ AA	Secondary text
Teal Text on White	5.2:1	✓ AA	Body links
Teal on Ink	8.4:1	✓ AAA	CTA on dark
White on Ink	16.0:1	✓ AAA	Hero copy
Teal on White	2.6:1	✗ FAIL	Do not use teal text on white

Standards

Semantic HTML — correct element for the job
Descriptive alt attributes on every meaningful image
Keyboard-navigable interactive elements with visible focus states
Associated <label> elements for every form input (no placeholder-only labels)
Logical heading hierarchy (no skipping levels)
No information conveyed solely through color
ARIA only when semantic HTML is not sufficient

13 — Implementation

CSS Tokens

All design tokens are declared as CSS variables in src/assets/css/main.css. Pull from these names, not hex values, when extending the site.

/* Brand colors */
--ink:           #1D1D1F;
--ink-2:         #3A3A3C;
--teal:          #00B49A;
--teal-dark:     #009B85;
--teal-text:     #007A6A;  /* AA on white */
--teal-faint:    #EEF9F7;

/* Neutrals */
--white:         #FFFFFF;
--apple-grey:    #F5F5F7;
--grey-2:        #6E6E73;
--grey-3:        #AEAEB2;
--grey-4:        #D1D1D6;
--border:        rgba(0,0,0,0.06);
--border-med:    rgba(0,0,0,0.10);

/* Type */
--font:          'DM Sans', sans-serif;
--mono:          'DM Mono', monospace;

/* Spacing */
--container-max: 1200px;
--container-pad: 64px;
--section-gap:   110px;

Repo Reference

For full source: github.com/bftrepo/ati-robotics-website. The canonical source of truth for tokens and patterns is src/assets/css/main.css and the project's CLAUDE.md.