brand.auton.sa/guide

How to use the Auton brand

Directions for the marketing team, the development team and anyone using AI tools. Every file you need is linked from here.

Marketing

Development

AI tools

Resources

Marketing

Everything public-facing — posts, ads, flyers, decks, videos, emails — uses the same five things: the logo files, the colours, Auton Round, Auton Symbols and the writing rules. Download the brand kit and install the font before you start.

1. Set up once

Download the brand kit and unzip it.
Install the five Auton Round fonts from font/desktop (Mac: double-click → Install; Windows: right-click → Install for all users). In Canva, upload them under Brand Kit → Fonts.
Save the logo files (logos/) and the colour hex values in your design tool's brand library.
Bookmark brand.auton.sa/symbols for symbols (search in English or Arabic).

2. Sizes and formats

Format	Size	How
Instagram post	1080×1350	64px margins, one idea, one photo or symbol, logo small in a bottom corner
Story, Reels cover, TikTok	1080×1920	Keep 250px at top and bottom clear of app buttons
LinkedIn / X	1200×1200 or 1200×627	One hero number or one photo plus a short headline
Presentation	1920×1080	Dark for launches and pitches, bright for reports and anything printed
Email	600px wide	Short, one button
Print	A4 / A5 at 300 dpi	Use SVG logos; black logo for one-colour print

3. Logo

DoFull colour on light backgrounds. White on dark, navy and photos. Keep clear space equal to the mark's height. On slides: title and closing slide only, about 54px tall.

Don'tStretch, rotate, outline, add shadows, change colours, put it on a busy photo without a dark overlay, or type "auton" in any font.

4. Colour

Use white, off-white or black backgrounds with navy text. Use Auton green #01B75C for one thing per design: the button, the charging state or the key number. For green text on white use #00874A. Teal and blue are for states only. No other colours, no gradient backgrounds.

5. Writing

Every block follows the same order: eyebrow (the topic) → headline (2–7 words, may be clever) → body (1–3 plain sentences) → proof (a real number).

Sentence case. No exclamation marks. No emoji.
Buttons are plain verbs: "Book installation", "Get a quote", "Shop chargers".
Prices: "SAR 4,299 incl. 15% VAT". Units with a space: 22 kW, 3-year warranty.
Every claim needs a basis: "up to" + what it is compared with. Never invent numbers; ask.
Avoid: revolutionary, game-changer, seamless, next-level, save the planet.

6. Arabic

Write Arabic first for Saudi audiences; don't machine-translate.
Headlines are rewritten in Arabic (3–6 words, rhythm or wordplay); body text is translated plainly.
Western digits always: 22 كيلوواط · 3,599 ر.س.
Product names stay in Latin with an Arabic word before them: شاحن Voltie.
Mirror layouts right-to-left; the logo stays as is.

7. Photos and video

Real Auton work first: Saudi homes, garages, compounds, chargers at dusk, technicians at work. One strong image beats four average ones. Text on photos sits on a 40–60% dark overlay. Video intros use the logo reveal (MP4 or GIF).

8. Before you publish

Correct logo file, with space around it.
Only brand colours; green used once.
Auton Round (or Comfortaa + Baloo Bhaijaan 2 where custom fonts aren't possible).
Every number, price and date checked in English and Arabic.
Symbols from Auton Symbols only.
Spelling checked; one clear call to action.

كل ما يظهر للجمهور — المنشورات والإعلانات والمطبوعات والعروض والفيديو والبريد — يستخدم نفس العناصر الخمسة: ملفات الشعار والألوان وخط Auton Round ورموز أوتون وقواعد الكتابة. نزّل حزمة الهوية وثبّت الخط قبل أن تبدأ.

1. الإعداد لمرة واحدة

نزّل حزمة الهوية وفك الضغط.
ثبّت خطوط Auton Round الخمسة من مجلد font/desktop (ماك: نقر مزدوج ثم تثبيت، ويندوز: زر أيمن ثم تثبيت لكل المستخدمين). في Canva ارفعها من Brand Kit ← Fonts.
احفظ ملفات الشعار وقيم الألوان في مكتبة الهوية في أداة التصميم.
احفظ رابط مكتبة الرموز وابحث فيها بالعربية أو الإنجليزية.

2. المقاسات

الصيغة	المقاس	الطريقة
منشور إنستغرام	1080×1350	هوامش 64 بكسل، فكرة واحدة، صورة أو رمز واحد، الشعار صغيرًا في زاوية سفلية
ستوري وريلز وتيك توك	1080×1920	اترك 250 بكسل أعلى وأسفل خالية من النص
لينكدإن وإكس	1200×1200 أو 1200×627	رقم بارز واحد أو صورة واحدة مع عنوان قصير
العروض	1920×1080	داكن للإطلاقات والعروض، فاتح للتقارير والمطبوعات
البريد	عرض 600 بكسل	قصير وبزر واحد
المطبوعات	A4 / A5 بدقة 300	استخدم شعار SVG، والأسود للطباعة بلون واحد

3. الشعار

افعلالشعار الملون على الخلفيات الفاتحة، والأبيض على الداكن والكحلي والصور. اترك مساحة بارتفاع العلامة. في العروض: شريحة العنوان والختام فقط.

لا تفعللا تمدّه ولا تدوّره ولا تضف إطارًا أو ظلًا ولا تغيّر ألوانه، ولا تضعه على صورة مزدحمة بلا طبقة داكنة، ولا تكتب "auton" بأي خط.

4. الألوان

خلفيات بيضاء أو فاتحة أو سوداء مع نص كحلي. استخدم أخضر أوتون ‎#01B75C لعنصر واحد فقط في التصميم: الزر أو حالة الشحن أو الرقم الأهم. للنص الأخضر على الأبيض استخدم ‎#00874A. الفيروزي والأزرق للحالات فقط. لا ألوان أخرى ولا خلفيات متدرجة.

5. الكتابة

كل جزء بنفس الترتيب: تمهيد (الموضوع) ← عنوان (2–7 كلمات) ← نص (1–3 جمل واضحة) ← دليل (رقم حقيقي).

لا علامات تعجب ولا رموز تعبيرية.
الأزرار أفعال واضحة: «احجز التركيب»، «اطلب عرض سعر»، «تسوّق الشواحن».
الأسعار: «3,599 ر.س شامل الضريبة». الوحدات بعد الرقم: 22 كيلوواط.
كل ادعاء يحتاج أساسًا واضحًا. لا تخترع أرقامًا؛ اسأل.
تجنّب: ثوري، غير مسبوق، نقلة نوعية.

6. العربية

اكتب بالعربية أولًا للجمهور السعودي، ولا تعتمد على الترجمة الآلية.
العناوين تُعاد صياغتها بالعربية (3–6 كلمات بإيقاع أو جناس)، والنص يُترجم بوضوح.
الأرقام الغربية دائمًا: 22 كيلوواط · 3,599 ر.س.
أسماء المنتجات تبقى باللاتينية وقبلها كلمة عربية: شاحن Voltie.
اعكس التخطيط من اليمين لليسار، والشعار يبقى كما هو.

7. الصور والفيديو

أعمال أوتون الحقيقية أولًا: منازل وكراجات ومجمعات سعودية، شواحن وقت الغروب، فنيون أثناء العمل. صورة قوية واحدة أفضل من أربع متوسطة. النص على الصور فوق طبقة داكنة 40–60%. مقدمات الفيديو تستخدم ظهور الشعار.

8. قبل النشر

ملف الشعار الصحيح مع مساحة حوله.
ألوان الهوية فقط، والأخضر مرة واحدة.
خط Auton Round (أو Comfortaa وBaloo Bhaijaan 2 عند تعذّر الخطوط المخصصة).
كل رقم وسعر وتاريخ مراجع بالعربية والإنجليزية.
الرموز من رموز أوتون فقط.
التدقيق الإملائي ودعوة واحدة واضحة لاتخاذ إجراء.

Development

Use the tokens and assets as a dependency; never copy hex values or redraw icons. The design system download holds everything below in one folder.

1. Install

<!-- Font + tokens (light and dark) -->
<link rel="preload" href="/fonts/AutonRound[wght].woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/tokens.css">

<!-- Auton Symbols -->
<link rel="stylesheet" href="/symbols/auton-symbols.css">
<script src="/symbols/auton-symbols.js" data-src="/symbols/auton-symbols.json"></script>

<!-- Motion (optional) -->
<link rel="stylesheet" href="/motion/auton-motion.css">

body {
  font-family: var(--font-text);            /* "Auton Round", Comfortaa, "Baloo Bhaijaan 2", system-ui */
  background: var(--surface-page);
  color: var(--ink-body);
}
.btn-primary { background: var(--auton-green); color: #03200F; border-radius: 6px; min-height: 44px; }
.card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }

Tailwind: copy tailwind.preset.js and add it as a preset; classes like bg-auton-green, text-ink-muted, rounded-card, ease-auton become available.

// tailwind.config.js
module.exports = {
  presets: [require('./tailwind.preset.js')],
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
};

2. Symbols

Three ways, same artwork. Browse names at /symbols.

<!-- Web component: any weight, variant, mode or effect -->
<auton-symbol name="wallbox" weight="medium" variant="badge.check" mode="multicolor" size="24" label="Charger installed"></auton-symbol>

<!-- Sprite: lightweight, Regular weight -->
<svg width="24" height="24"><use href="/symbols/auton-symbols-sprite.svg#as-ccs2"></use></svg>

<!-- Plain SVG files: svg/<weight>/<name>.svg from the symbols download (stroke = currentColor) -->
<img src="/icons/regular/station.svg" alt="" width="24" height="24">

// React wrapper
export function Symbol({ name, weight = 'regular', variant, mode, size = 24, label }) {
  return <auton-symbol name={name} weight={weight} variant={variant} mode={mode} size={size} label={label} />;
}
// React Native / Flutter: use the SVG files (svg/<weight>/<name>.svg) with react-native-svg or flutter_svg.

Attribute	Values
weight	light · regular · medium · semibold · bold (match the text next to it)
variant	circle · circle.fill · square · square.fill · slash · badge.check · badge.alert · badge.xmark · badge.plus · badge.bolt · badge.clock
mode	mono · hierarchical · palette (+ colors="#2A4558,#01B75C") · multicolor
effect	bounce · pulse · variable · wiggle · rotate · breathe · draw · appear

3. Components

Component	Spec
Primary button	Green fill, text #03200F, radius 6px, height ≥ 44px, sentence-case verb. One per view.
Secondary button	Surface fill, 1px hairline, ink text, radius 6px.
Card	surface-card, 1px hairline, radius 14px, padding 24px; hover: green border or shadow-md.
Input	Height 44px, radius 6px, 1px hairline, label above, helper below, error in status-fault with a symbol.
Bento tile	Radius 34px, gutter 16px, no shadow, one fact per tile.
States	Focus: 3px ring rgba(70,156,206,.45) offset 2px · Disabled: 40% · Selected: 2px navy border
Charging states	charging green · available blue · scheduled teal · warning amber · fault red · offline grey — always with a label or symbol

4. Motion

Token	Value	Use
--dur-press	100ms	press feedback (scale .98)
--dur-fast	120ms	hover, colour
--dur-base	200ms	menus, toggles
--dur-slow	360ms	sheets, entrances, success
--dur-brand	900ms	logo and hero only
--ease	cubic-bezier(.2,0,0,1)	default, no bounce

<button class="btn-primary a-press">Book installation</button>
<ul><li class="a-reveal" style="--i:0">…</li><li class="a-reveal" style="--i:1">…</li></ul>
<!-- Loader: motion/auton-loader.svg · Logo intro: logos/auton-logo-animated.svg -->

5. Arabic, RTL and dark mode

Set <html lang="ar" dir="rtl"> for Arabic pages; Auton Round covers both scripts in one file.
Use logical CSS: margin-inline-start, padding-inline, inset-inline-end, text-align: start.
Mirror directional symbols (arrows, chevrons) in RTL: [dir=rtl] .flip { transform: scaleX(-1) }.
Arabic body text one step larger (18px vs 16px) with line-height 1.8.
Dark mode is automatic from tokens.css (system setting), or force it with data-theme="dark" on <html>.

Text contrast ≥ 4.5:1 (green text on white uses #00874A).
Visible focus ring on every interactive element.
Touch targets ≥ 44×44px.
Labels for every input; alt text for every image; label on meaningful symbols.
State never shown by colour alone.
prefers-reduced-motion respected (the motion CSS does this).

AI tools

Download Design system for AI and give the AI the file DESIGN.md before you ask for anything. It tells the AI exactly which colours, fonts, symbols, layouts and words to use, and to write [TBD] instead of inventing numbers.

Design system for AI · 589 KB DESIGN.md AGENTS.md llms.txt

1. Load it into your tool

Tool	Set up once
Claude	Create a Project → add `DESIGN.md` to project knowledge. Or upload the folder `claude-skill/auton-brand` as a skill so Claude uses it automatically.
Claude Code	Put `DESIGN.md` and `AGENTS.md` in the repo root; copy `claude-skill/auton-brand` into `.claude/skills/`.
ChatGPT	Create a Project or custom GPT → upload `DESIGN.md` and `tokens.json`; paste section 0 of DESIGN.md into the instructions.
Gemini	Create a Gem → upload `DESIGN.md`.
Cursor	Copy `.cursor/rules/auton-brand.mdc`, `DESIGN.md` and `AGENTS.md` into the project.
Codex and other agents	`AGENTS.md` + `DESIGN.md` in the repo root.
v0, Lovable, Bolt	Paste DESIGN.md sections 3–8 into project instructions; add `tokens.css` and `tailwind.preset.js`.
Figma, Figma Make	Install Auton Round, import SVG symbols, attach `DESIGN.md` as context.
Any tool that reads links	Point it to `https://brand.auton.sa/DESIGN.md` or `/llms.txt`.

2. Ready prompts

Instagram post (Arabic first)

Using the Auton design system, write an Instagram post (1080×1350) about [topic]. Give me: Arabic headline (3–6 words), Arabic body (max 2 sentences), English version, one CTA, and a layout description with background, photo or symbol, and logo position. Facts: [facts].

Ad variations

Create 3 ad variations for [product] for [audience] following DESIGN.md: headline (2–7 words), one plain supporting line, CTA, and which Auton Symbol to use. Facts: [price incl. VAT, warranty, kW].

Presentation

Outline a [10]-slide [bright/dark] Auton deck about [topic] following DESIGN.md §11: one idea per slide, ≤ 25 words each, with title, visual and presenter notes. Mark missing numbers [TBD].

Web page or app screen

Build [page] for Auton in [React + Tailwind]. Follow DESIGN.md and AGENTS.md: tokens.css, Auton Round, <auton-symbol>, light and dark, RTL-ready, 44px targets, reduced motion. Content: [content].

Design review

Review this design or code against DESIGN.md and list every issue (colour, type, radius, symbols, copy, Arabic, accessibility) with the fix.

Resources

Resource	What it is
Brand kit	Guidelines, font, logos, symbols, motion, tokens, DESIGN.md	4.4 MB
Design system for AI	DESIGN.md, AGENTS.md, Claude skill, Cursor rules, prompts, Tailwind preset	589 KB
Auton Round font	Desktop .ttf + web .woff2, OFL licence	946 KB
Auton Symbols	1,127 symbols × 5 weights, sprite, web component	2.7 MB
Logos	SVG + transparent PNG, app icons, animated logo	375 KB
Motion	Logo reveal MP4/WebM/GIF, loader, motion CSS	260 KB
Design tokens	CSS variables (light + dark) and JSON	CSS JSON
Symbol library	Search, customise and download single symbols	Open
Fallback fonts	For tools without custom fonts (Google Slides, Docs)	Comfortaa Baloo Bhaijaan 2
Font licence	SIL Open Font License 1.1	openfontlicense.org
Questions	Brand approvals and missing assets	`info@auton.sa` · 920 032 620

How to use the Auton brand

Marketing

1. Set up once

2. Sizes and formats

3. Logo

4. Colour

5. Writing

6. Arabic

7. Photos and video

8. Before you publish

1. الإعداد لمرة واحدة

2. المقاسات

3. الشعار

4. الألوان

5. الكتابة

6. العربية

7. الصور والفيديو

8. قبل النشر

Development

1. Install

2. Symbols

3. Components

4. Motion

5. Arabic, RTL and dark mode

6. Accessibility checklist

AI tools

1. Load it into your tool

2. Ready prompts

Resources