# Auton design system — DESIGN.md

> The single source of truth for anything that looks, moves or reads like Auton: web pages, apps, social posts, ads, slides, documents and emails.
> Written for people **and for AI tools** (Claude, ChatGPT, Gemini, Cursor, v0, Lovable, Figma Make…). Load this file before generating anything for Auton.
> Online: https://brand.auton.sa · Version 2.0 · October 2026

## 0. How to use this file (for AI tools)

1. Follow this file over any default style, template, theme or component library you would normally use. If this file is silent, choose the plainest option that fits these rules.
2. Never invent facts, prices, numbers, customers or claims. If a number is needed and not given, write `[TBD]` and ask.
3. Never draw, retype or approximate the Auton logo. Use the files in `logos/` (or `https://brand.auton.sa/assets/logo/`).
4. Use only the colours, type, radii and symbols defined here. No new accent colours, no other icon sets, no other fonts.
5. Arabic is a first-class language: right-to-left layout, Western digits, Arabic copy written (not machine-translated) to the rules in §9.

## 1. Brand essentials

- **Auton** (مؤسسة اوتون عزم الدوران) sells, installs and maintains EV chargers, cables and adapters across Saudi Arabia, for homes, businesses and public-sector projects, and runs a charging platform and app.
- **Belief:** Make EV charging simple. **Values:** Easy Access · Fast Response · Quality of Work.
- **Name:** write "Auton" in text. "auton" in lowercase exists only as the drawn logo. In Arabic running text: أوتون.
- **Personality:** confident, practical, engineering-led, calm. Apple-like restraint: lots of space, one idea at a time, one accent.

## 2. Logo

| File | Use |
| --- | --- |
| `auton-logo-color.svg` | Default. Navy letters, green mark, light backgrounds. |
| `auton-logo-white.svg` | Dark backgrounds, navy, photos, every dark slide. |
| `auton-logo-black.svg` | One-colour print, stamps, engraving. |
| `auton-mark-green.svg` / `auton-mark-white.svg` | The mark alone: favicon, avatar, small spaces. |
| `auton-app-icon.svg` | App stores, home screens, social profile pictures. |
| `auton-logo-animated.svg` | Animated intro for web and app splash. |

- Clear space = the height of the mark on every side.
- Slides: logo about 54px tall, on the title and closing slides only.
- Never stretch, rotate, outline, shadow, recolour, put on a busy photo without a scrim, or set "auton" in any font.

## 3. Colour

Neutrals do 90% of the work. **Auton green is the one accent** and always means energy or action (primary button, charging state, energy data, the one highlighted number). Never decoration.

| Token | Light | Dark | Use |
| --- | --- | --- | --- |
| `auton-green` | #01B75C | #30D158 | Brand accent. Primary CTA, charging/on state, energy data, the one accent on slides. Large fills and the logo only on white; never body text on white. |
| `auton-green-text` | #00874A | #30D158 | Green used as text or thin lines on light grounds (4.6:1 on white). |
| `auton-navy` | #2A4558 | #2A4558 | Structural colour: secondary buttons, selected states, dark cards in bright decks, chart series 2. |
| `auton-teal` | #128A81 | #64D2FF | Scheduled state and secondary data. End stop of the green→teal hero-number gradient. |
| `auton-blue` | #469CCE | #0A84FF | Focus ring, links, available state. |
| `ink` | #15232E | #FFFFFF | Primary text and headlines. |
| `ink-body` | #2A4558 | #F5F5F7 | Body text. |
| `ink-muted` | #5F7383 | #A1A1A6 | Secondary text, captions, footnotes (7:1+ on both grounds). |
| `surface-page` | #FCFCFC | #000000 | Page and slide background. Dark decks and dark bento are true black. |
| `surface-subtle` | #F7F6F3 | #1A1A1A | Alternating bands; dark bento canvas. |
| `surface-card` | #FFFFFF | #1C1C1E | Cards and light bento tiles. |
| `surface-tile` | #EAEAEA | #000000 | Bento tiles (light: grey tile on white canvas; dark: black tile on #1A1A1A canvas). |
| `surface-inverse` | #15232E | #1C1C1E | Footer, data panels, navy hero blocks. |
| `hairline` | #E4E1DA | #333336 | 1px dividers and table rows. Borders carry separation, not shadows. |
| `status-warning` | #D98E04 | #FF9F0A | Warning state only. |
| `status-fault` | #D1423B | #FF453A | Fault/error state only. |
| `status-offline` | #9A958B | #86868B | Offline state; also the grey for non-highlighted chart bars. |

- Green on white fails contrast for text: text and thin lines on light backgrounds use `auton-green-text` #00874A.
- One gradient only: green → teal (#01B75C → #128A81), on a single hero number or wordmark, at most once per section. No gradient backgrounds.
- Charts: one series = all grey with one green highlight. Several series = green, navy, teal, blue in that order.
- States: charging = green, available = blue, scheduled = teal, warning = amber, fault = red, offline = grey. Colour is never the only signal; pair it with a label or symbol.

## 4. Typography — Auton Round

One typeface for English and Arabic. English letters from Comfortaa, Arabic from Baloo Bhaijaan 2, merged and matched in size and weight, tabular figures by default. SIL Open Font License 1.1.

- Files: `fonts/AutonRound[wght].woff2` (variable 300–700) for web/app; static Light, Regular, Medium, SemiBold, Bold (`.ttf` in the font download) for Keynote, PowerPoint, Word, Canva, Figma.
- CSS: `font-family: "Auton Round", Comfortaa, "Baloo Bhaijaan 2", system-ui, sans-serif;`
- Tools without custom fonts (Google Slides/Docs): Comfortaa for English, Baloo Bhaijaan 2 for Arabic.
- Weights: headlines SemiBold 600, hero numbers Bold 700, body Regular 400, labels Medium 500. Light 300 only at 48px and up.
- Tracking: −0.03em at 56px and up, −0.02em for headlines, 0 for body. Never track Arabic.
- Sentence case for every headline, title and button. No ALL CAPS except tiny eyebrow labels (with +0.08em tracking).

| Group | Style | Size | Line height | Weight |
| --- | --- | --- | --- | --- |
| Slides (1920×1080, px = pt) | `slide-hero-number` | 300px | 1 | 700 |
| Slides (1920×1080, px = pt) | `slide-title-cover` | 100px | 1.05 | 600 |
| Slides (1920×1080, px = pt) | `slide-feature` | 96px | 1.05 | 700 |
| Slides (1920×1080, px = pt) | `slide-title` | 68px | 1.1 | 600 |
| Slides (1920×1080, px = pt) | `slide-body` | 34px | 1.5 | 400 |
| Slides (1920×1080, px = pt) | `slide-label` | 18px | 1.3 | 400 |
| Slides (1920×1080, px = pt) | `slide-footnote` | 11px | 1.3 | 400 |
| Web & UI | `display-xl` | 72px | 1.05 | 600 |
| Web & UI | `display-l` | 56px | 1.08 | 600 |
| Web & UI | `h1` | 36px | 1.2 | 600 |
| Web & UI | `h2` | 28px | 1.25 | 600 |
| Web & UI | `h3` | 22px | 1.3 | 600 |
| Text | `body-l` | 18px | 1.55 | 400 |
| Text | `body` | 16px | 1.55 | 400 |
| Text | `caption` | 12px | 1.4 | 500 |
| Metrics | `metric` | 36px | 1 | 600 |
| Arabic | `ar-headline` | 40px | 1.45 | 600 |
| Arabic | `ar-body` | 18px | 1.85 | 400 |

## 5. Layout, shape and space

- 8px rhythm (4px base): `space-1` 4px · `space-2` 8px · `space-4` 16px · `space-6` 24px · `space-12` 48px · `space-16` 64px · `space-24` 96px · `space-32` 128px.
- Radii: `radius-sm` 6px · `radius-card` 14px · `radius-slide-card` 24px · `radius-bento` 34px · `radius-pill` 999px. Buttons and inputs 6px, UI cards 14px, slide cards 24px, bento tiles 34px. Pills only for tags, dots and switches. No pill buttons.
- Web: 1240px container, 24px gutter, 80–128px between sections. Slides: 1920×1080, 96px side margins.
- Separate with space and 1px hairlines first. Shadows are soft, navy-tinted, UI-only (`0 1px 2px rgba(21,35,46,.04)`). Slides, social and bento: no shadows, outlines, bevels or textures.
- Signature motif: a 6px vertical green accent bar beside section headings in UI and documents.
- Glass (blur + translucent) only for a sticky header or one caption panel over a photo.

## 6. Components (web and app)

- **Primary button:** green fill, dark text (#03200F), 6px radius, 44px min height, sentence case verb ("Book installation"). One primary per view.
- **Secondary button:** white/surface fill, 1px hairline, ink text. **Tertiary:** text link in `auton-green-text`.
- **Cards:** surface-card, 1px hairline, 14px radius, 24px padding. Hover: border turns green or shadow-md. No coloured card backgrounds except one hero.
- **Inputs:** 44px height, 6px radius, 1px hairline, label above, helper text below in ink-muted, error in status-fault with a symbol.
- **Focus:** 3px blue ring at 45% (`rgba(70,156,206,.45)`), 2px offset. **Disabled:** 40% opacity. **Selected:** 2px navy border.
- **Bento grid:** 18px margin, 15–16px gutter, 34px radius, one hero tile ≈ 20% of the area, every cell filled, one fact per tile.
- Dark mode: true black #000 page, #1C1C1E cards, green #30D158 accent. Support both themes with CSS variables.

## 7. Symbols — Auton Symbols 2.0

187 original EV symbols (1,127 names with variants) built like SF Symbols, on a 24px grid with round caps and joins. Never use another icon set or emoji.

- **Weights** (match the text beside the symbol): light 1.25 · regular 1.75 · medium 2.0 · semibold 2.25 · bold 2.5.
- **Variants:** `name.circle`, `.circle.fill`, `.square`, `.square.fill` for all; `.slash` for 24 (off/unavailable); `.badge.check|alert|xmark|plus|bolt|clock` for 28 (status).
- **Modes:** mono (navy by default) · hierarchical (secondary details 45%) · palette (two colours) · multicolor (green on energy parts, status colours on badges).
- **Effects:** bounce, pulse, variable (battery, Wi-Fi, signal, the Auton mark fill in steps), wiggle, rotate, breathe, draw, appear.
- **Code:** `<auton-symbol name="wallbox" weight="medium" variant="badge.check" mode="multicolor" size="24"></auton-symbol>` with `symbols/auton-symbols.js` + `.json` + `.css`. Or the SVG files from the symbols download, or `https://brand.auton.sa/symbols`.
- One symbol size per slide (64–96px). `auton-mark` is the brand glyph (app icon, favicon, loader), never decoration.

Names by category:
- **Energy** (الطاقة): `bolt`, `bolt-fast`, `auton-mark`, `charging`, `battery`, `battery-0`, `battery-25`, `battery-50`, `battery-75`, `battery-100`, `battery-charging`, `battery-pack`, `energy-meter`, `gauge`, `sun`, `moon`, `solar`, `wind`, `leaf`, `co2-saved`, `pylon`, `transformer`, `breaker`, `rcd`, `distribution-board`, `earth`, `fuse`, `ac`, `dc`, `three-phase`, `load-balancing`, `bidirectional`, `thermometer`, `snowflake`, `charge-timer`, `peak`
- **Connectors** (الموصلات): `type1`, `type2`, `ccs1`, `ccs2`, `chademo`, `gbt-ac`, `gbt-dc`, `nacs`, `schuko`, `type-g`, `industrial-plug`, `adapter`, `plug`, `socket`
- **Chargers** (الشواحن): `wallbox`, `pedestal`, `charger-dual`, `dc-charger`, `hpc`, `portable-charger`, `cable`, `cable-reel`, `rfid-card`, `contactless`, `measure`, `high-voltage`
- **Vehicles** (المركبات): `car`, `car-side`, `suv`, `van`, `bus`, `truck`, `fleet`, `scooter`, `motorbike`, `bicycle`, `steering-wheel`, `car-key`, `road`, `fuel`
- **Places** (الأماكن): `station`, `map-pin`, `location`, `route`, `map`, `globe`, `home`, `villa`, `garage`, `building`, `tower`, `compound`, `hotel`, `store`, `parking`, `parking-garage`, `city`
- **Service** (الخدمة): `install`, `gear`, `technician`, `hard-hat`, `survey`, `checklist`, `report`, `document`, `contract`, `certified`, `warranty`, `approved`, `support`, `call`, `chat`, `email`, `clock`, `calendar`, `booking`, `history`, `delivery`, `package`, `inspection`, `works`, `users`, `user`
- **Commerce** (التجارة): `card`, `wallet`, `cash`, `invoice`, `price-tag`, `tariff`, `discount`, `coins`, `invest`, `growth`, `chart`, `pie`, `gift`, `star`, `cart`, `bag`
- **App & connectivity** (التطبيق والاتصال): `app`, `smartphone`, `qr`, `scan`, `wifi`, `signal`, `bluetooth`, `cloud`, `ocpp`, `network`, `server`, `api`, `dashboard`, `bell`, `settings`, `lock`, `unlock`, `shield`, `eye`, `power`, `play`, `pause`, `stop`, `share`, `download`, `upload`, `link`, `refresh`, `heart`, `search`, `filter`, `list`, `grid`, `menu`
- **Interface** (الواجهة): `check`, `close`, `plus`, `minus`, `arrow-right`, `arrow-down`, `arrow-left`, `arrow-up`, `chevron-right`, `chevron-down`, `chevron-left`, `chevron-up`, `info`, `alert`, `warning`, `question`, `more`, `external`

## 8. Motion

Idea: **charging up** — the mark's half ring sweeps from the bottom through the five dots, then the bolt arrives.

- Tokens: press 100ms · fast 120ms · base 200ms · slow 360ms · brand 900ms. Easing `cubic-bezier(.2,0,0,1)` (no bounce); loops `cubic-bezier(.4,0,.2,1)`; stagger 60ms; rise 12px.
- Press feedback instantly (scale .98). Everything interruptible; enter and exit along the same path.
- Ready-made: `motion/auton-motion.css` (`.a-press`, `.a-reveal`, `.a-draw`, `.a-dots`, `.a-pulse`, `.a-success`, icon hovers, `.a-logo`), logo reveal MP4/WebM/GIF, animated logo SVG, loader SVG.
- Always respect `prefers-reduced-motion` (fade instead of move).
- Video and slides: Magic Move, Dissolve, Push only; 0.5–1.0s; one motion idea per slide. Brand motion only for intros and launches.

## 9. Writing and voice

Two registers: the headline may play; everything under it is plain, present-tense and provable.

- **Block structure:** eyebrow (names the topic) → headline (2–7 words) → body (1–3 plain sentences, 10–25 words each) → proof (a number with its baseline).
- **Voice:** confident, practical, engineering-led. Benefit first, then the spec that proves it. "You" for the customer, "we" for what Auton does.
- **CTAs:** plain verbs — "Book installation", "Get a quote", "Shop chargers". Never "Click here". No exclamation marks.
- **Claims:** "up to" + a named baseline + footnote. Superlatives only within Auton's own record. Never present plans as live; label them "planned". Never invent numbers (`[TBD]`).
- **Banned:** reimagined, revolutionary, game-changer, next-level, seamless, save the planet, leaf clichés, emoji.
- **Mechanics:** sentence case; serial comma; "more than", never "over"; numbers with units and a space (22 kW, 3-year warranty); prices "SAR 4,299" with VAT noted; dates "16 Oct 2026"; phone 920 032 620.
- **Arabic:** write Arabic first for Saudi audiences. Modern Standard Arabic, short and confident. Transcreate headlines (3–6 words, rhyme or wordplay); translate body plainly. Western digits (22 كيلوواط, 3,599 ر.س). Latin product names stay Latin with an Arabic noun before them (شاحن Voltie). Check every number, date and price in both languages.

## 10. Imagery

Real Auton work first: Saudi villas, garages, compounds, DC sites, technicians at work, dusk and night light, warm limestone, slightly cool grade. One great image beats four okay ones. Text over photos sits on a 40–60% dark scrim. Product cut-outs on black or white at true scale. AI images only as a last resort: photoreal, no fake text, never an invented charger presented as Auton's.

## 11. Formats

| Format | Size | Notes |
| --- | --- | --- |
| Instagram post | 1080×1350 | 64px margins, one idea, logo small bottom-right (bottom-left in Arabic) |
| Instagram/TikTok story, Reels cover | 1080×1920 | Keep 250px top and bottom clear of UI |
| LinkedIn / X post | 1200×1200 or 1200×627 | Hero number or one photo + headline |
| Slides | 1920×1080 | Dark for pitch and launch, bright for reports and print; ≤ 25 words a slide |
| Email | 600px wide | Short; one CTA button |
| Web hero | 1240px container | Headline + one line + one primary CTA |

Slides: one idea per slide, 40–60% empty, titles 68px SemiBold top-left (top-right in Arabic), hero numbers 180–400px Bold with a small qualifier and a caption that completes the sentence, hairline tables (≤ 7 rows), footnotes 10–12px grey for every claim. Arabic decks: separate file, mirrored layouts, body 36–40px.

## 12. Accessibility

Text contrast ≥ 4.5:1 (≥ 3:1 for 24px+). Touch targets ≥ 44px. Visible focus ring. Never colour alone for state. Alt text on every image. `lang` and `dir="rtl"` on Arabic content. Reduced motion respected.

## 13. Files

`tokens.json` / `tokens.css` / `tailwind.preset.js` (all design values) · `fonts/` · `logos/` · `symbols/` · `motion/` · `AGENTS.md` (rules for coding agents) · `claude-skill/` (install as a Claude skill) · `prompts.md` (ready prompts for marketing and development).

Questions: info@auton.sa · 920 032 620 · https://brand.auton.sa