# Arete AIOS Design Guide

**One visual system for Arete AIOS materials.**
Public Arete AIOS edition · design specification 1.6 · updated 2026-10-05.
Public reference: https://eb-brand.wisdomblend.com/
Backup address for the same guide and files: https://wisdomblend-eb-brand.pages.dev/

This English specification is for designers, presentation authors and AI tools. It defines visual design. Preserve the content, language, technical meaning, author credits and verified sources of the material being adapted.

---

## How to use this

Read this file and the asset manifest before creating a material:

- Design guide: https://eb-brand.wisdomblend.com/
- English specification: https://eb-brand.wisdomblend.com/brand.md
- Original logo files and usage: https://eb-brand.wisdomblend.com/assets.json
- Machine-readable design values: https://eb-brand.wisdomblend.com/tokens.json
- CSS variables: https://eb-brand.wisdomblend.com/tokens.css

Paste the brief at the end of this file into the task prompt. Save the guide as project knowledge or persistent instructions when your tool supports this; use it again for each new project or conversation. Access to a public URL does not by itself make every AI tool remember the rules.

This public guide covers Arete AIOS: areteaios.com, working interfaces, presentations and learning materials. Arete AIOS websites, working interfaces and presentations use dark surfaces throughout. Use the same blue, three typefaces, spacing and shapes across these materials. Presentation-specific rules are in section 11.

---

## 1 · Brand colours

Use the approved colours for dark Arete AIOS surfaces.

```css
--brand:       #0081FF;  /* blue: links, emphasis and section labels */
--accent:      #009DB1;  /* teal: terminal prompts, checkmarks, one highlighted card */
--brand-dark:  #0081FF;  /* compatibility name for the same blue */
--accent-dark: #009DB1;  /* compatibility name for the same teal */

/* The brand gradient — primary CTAs and icon chips ONLY */
--gradient-primary: linear-gradient(135deg, oklch(0.42 0.2 258), oklch(0.72 0.18 250));

/* Text and lines */
--ink:         #F9FAFC;  /* headings and primary text */
--muted:       #C4CBD6;  /* body and secondary text */
--line:        rgba(255,255,255,.10);  /* hairlines and borders */
```

Blue is used sparingly on the dark ground. Primary CTA and icon-chip fills use the approved gradient rather than a flat blue swatch.

## 2 · Surfaces

**Dark throughout: websites, working interfaces and presentations**

```css
--dark:       #0A121F;
--dark-text:  #F9FAFC;  /* headings on dark */
--dark-body:  #C4CBD6;  /* body text on dark */
--dark-line:  rgba(255,255,255,.10);
--page:       #0A121F;
--card:       #0A121F;  /* separated by a hairline border, not a new fill colour */
```

Keep the page, hero and cards within the same approved dark system. Separate content with spacing and thin borders; do not introduce a light page body or substitute another palette.

## 3 · Status colours — functional, not brand

Only inside dashboards, logs and health indicators. **Never** decorative, never on a public page.

```css
--ok:      #3DBB63;  /* 🟢 active, healthy, done */
--warn:    #D9A63C;  /* 🟡 at risk, pending */
--danger:  #E35555;  /* 🔴 broken, failed */
--info:    #5899EB;  /* 🔵 note, neutral signal */
```

These carry meaning. Using them as brand colours destroys that meaning.

## 4 · Typography

Three faces, each with exactly one job.

- **Literata**: display **only**, H1 and H2, including slide titles. Weights 500–600, never 700. Request it with its optical-size axis: `Literata:opsz,wght@7..72,400;7..72,500;7..72,600`.
- **Inter** — everything else: H3, body, UI, buttons, navigation, stat numbers, **and the numbered section eyebrows**. Weights 400, 600, 700.
- **JetBrains Mono** — the machine's voice **only**: terminal blocks, code, live data readouts. Never marketing labels, never body text.

All from Google Fonts.

Use Literata for Latvian and English titles. Do not use Fraunces in this system. Inspect the exported file, including `ā ē ī ū č ģ ķ ļ ņ š ž`, rather than relying only on font-file coverage. Embed fonts in presentation exports whenever possible.

| Element | Size at 1440px+ | Face |
|---|---|---|
| H1 / display | 76px, letter-spacing −0.02em, line-height 1.02 | Literata 500 |
| H2 / section heading | 40px, letter-spacing −0.02em, line-height 1.1 | Literata 600 |
| H3 / card heading | 18px, letter-spacing −0.02em | Inter 600 |
| Large stat number | 96px | Inter 700 |
| Body | 17px, line-height 1.6 | Inter 400 |
| Small / caption | 15px | Inter 400 |
| Eyebrow "01 / LABEL" | 12.5px, uppercase, 0.18em tracking | Inter 600 |
| Terminal / data readout | 13–14px | JetBrains Mono 400 |
| Button | 16px | Inter 600 |

Scale down proportionally below 1280px. Body text never wider than 68 characters.

## 5 · Approved patterns

Use the following patterns consistently.

**Dark hero band.** A full-bleed `--dark` band at the top of the page, with a sticky `--dark` navigation bar above it. Very faint grid lines across it: 1px `rgba(255,255,255,.04)` on a 64px grid. Texture, not pattern. The page below the hero stays dark. A portrait in the hero gets a blurred blue-gradient glow and a thin light ring, never a teal ring.

**Numbered eyebrows.** Every section below the hero opens with an **Inter 600** label in **blue** (`#0081FF`), uppercase, 0.18em tracking, numbered in document order — `01 / WHO I HELP`, `02 / SERVICES`. The robotic feel comes from the caps, the tracking and the number, not from a monospace face. Card numbers get the same treatment. Reuse the section's existing name; do not invent one. Never teal, never JetBrains Mono.

**Gradient CTA pill.** Primary buttons are pills filled with `--gradient-primary`, white text, and a soft blue glow shadow (`0 20px 50px -20px`, blue at 40%). This glow is the only shadow in the system. Secondary buttons are outline, flat, no shadow.

**Icon chips.** White lucide icons on a 36px rounded-xl chip filled with `--gradient-primary`. On dark grounds, icons sit bare in the bright blue. Emoji never appear on a public page.

**Hairline cards, no shadows.** Cards are dark `--card` with a 1px `--line` border and radius 14px. No shadow. To highlight one card, give it a teal border and a faint teal tint over the dark surface, never a shadow.

## 6 · Shape and space

```css
--radius-card:  14px;
--radius-input: 10px;
--radius-pill:  999px;   /* all buttons are pills */
```

Spacing on an 8px base. Use only: 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128.
Section vertical padding: 96px desktop, 56px mobile. Max content width 1200px, or 720px for text-only pages.

## 7 · Tone of the visuals

- Calm and roomy. Whitespace is the point — do not fill it.
- Blue is punctuation, not paint. On a normal page, blue appears on buttons, links and one or two marks.
- **One accent per screen: the blue.** Teal is the machine's colour and lives only where the machine speaks: terminal prompts, ✓ checkmarks, the single highlighted card. Never on numbers, prices, trust chips or labels — there it reads cold and competes with the blue (Egils, 2026-08-06). When in doubt: blue.
- No stock photography of smiling people at laptops. Real photos of real sessions, or nothing.
- Icons only where they replace a word, never as decoration.

## 8 · Never

- Purple, violet, or any default shadcn / Tailwind palette colour
- Glassmorphism, neon glow, animated blobs, and **any gradient other than `--gradient-primary`**
- Pure white `#FFFFFF` as a page background
- Literata anywhere outside H1/H2 display use
- **Fraunces, in any project** — it cannot set Latvian (see §4)
- A fourth typeface — Literata, Inter and JetBrains Mono are the whole set
- Shadows on cards (the CTA glow from §5 is the single exception)
- Emoji in headings on public pages (fine in internal dashboards and status labels)
- Scroll-triggered animation, parallax, or anything that moves before the reader asks
- Status colours used decoratively on a public page

## 9 · Working interfaces

Arete AIOS stays dark throughout. In a working interface, density may be higher and spacing steps may drop one level. Status colours represent real states only. Mono is for terminals, code and data, not general text. The same visual rules apply to presentations and learning materials, with the larger slide text sizes in section 11.

## 10 · Logos

Use the supplied original Arete AIOS logos unchanged. Select the symbol or logo with its name, preserve its aspect ratio and leave enough clear space so it stays separate from text and other elements. Do not redraw, recolour, stretch, add shadows or ask an image generator to make a similar mark.

| Asset | Direct public URL | Usage |
|---|---|---|
| Arete AIOS symbol, SVG | https://eb-brand.wisdomblend.com/img/logo-areteaios.svg | Transparent vector; use for sharp scaling on light or dark surfaces |
| Arete AIOS symbol, PNG | https://eb-brand.wisdomblend.com/img/logo-areteaios.png | Transparent 1600 × 800 px export of the same symbol |
| Arete AIOS logo with name, PNG | https://eb-brand.wisdomblend.com/img/arete-aios-wordmark.png | Original 416 × 194 px badge with dark fill and transparent outside; use unchanged |

The Arete AIOS logo retains its original blue gradient and teal nodes. That is part of the existing logo artwork, not permission to add new UI gradients. Refer to https://eb-brand.wisdomblend.com/assets.json for asset dimensions and usage. No replacement logo or animated character is required for a presentation.

---

## 11 · Presentation rules

- Use 16:9 at 1920 × 1080 px. The entire deck is dark: `#0A121F` background on every slide, `#F9FAFC` headings, `#C4CBD6` body and `#0081FF` emphasis.
- Slide titles use Literata 500–600 at 76–96 px. Subtitles use Inter around 40 px. Body text is at least 34 px at this canvas size. Source/disclaimer text may be 17–18 px; monospace labels are at least 20 px.
- Keep one main idea and at most 45 words per slide. Split dense slides. Store detail in speaker notes rather than shrinking the body text.
- Numbered blue eyebrows use Inter 600 with uppercase and 0.18em tracking.
- Use the actual logo files from section 10, unchanged. Keep the technical content, original authors and verified sources.
- Use diagrams where they clarify the mechanism. Extra semantic diagram colours require Egils's explicit approval; the default is the blue system with functional teal.
- Motion must explain a process or argument. Avoid decorative transitions, flying text and perpetual animation.
- For HTML decks, provide a stable slide URL/hash for each slide and visible next/previous controls. Bundle the presentation engine, fonts and assets locally so the deck can run without venue Wi-Fi.
- In Latvian prose use MI for mākslīgais intelekts. Keep proper names and identifiers unchanged, including Arete AIOS, AIOS, AI Connect and product names. English prose uses AI.
- Inspect every rendered slide and the exported PDF for clipping, overlaps, missing assets, legibility and Latvian characters.
- Deliver an editable presentation source together with a PDF. Preserve a working offline copy and embed fonts when possible.

## 12 · Copy-ready brief for designers and AI tools

```text
Use the Arete AIOS visual system for this presentation and all future materials in this project.

First open https://eb-brand.wisdomblend.com/ and read https://eb-brand.wisdomblend.com/brand.md and https://eb-brand.wisdomblend.com/assets.json. Use the exact colours, fonts, spacing and logo files provided there.

If that domain is unavailable, use https://wisdomblend-eb-brand.pages.dev/ with the same file paths, including /brand.md, /assets.json and /img/ logo files.

For slides: 16:9, 1920 × 1080 px. Use #0A121F on every slide, #F9FAFC headings, #C4CBD6 body text and #0081FF for emphasis. Use Literata 500–600 for slide titles, Inter for other text, and JetBrains Mono only for code, terminals or data. Body text must be at least 34 px at this canvas size. Keep one main idea and at most 45 words per slide. Split dense slides; put details in speaker notes.

Download the actual Arete AIOS symbol from https://eb-brand.wisdomblend.com/img/logo-areteaios.svg or https://eb-brand.wisdomblend.com/img/logo-areteaios.png, or use the original logo with its name from https://eb-brand.wisdomblend.com/img/arete-aios-wordmark.png. Place the file unchanged. Do not redraw, recolour, stretch or generate a substitute logo.

Keep the original technical meaning, author credits and verified sources. Use calm spacing and clear diagrams. Avoid decorative gradients, card shadows, emoji headings, purple styling and decorative animation. Arete AIOS websites, working interfaces and presentations use dark surfaces throughout. Follow the guide for other materials.

Before delivery, inspect every exported slide for legibility, Latvian characters, clipping and missing assets. Deliver the editable presentation source together with the PDF. If you cannot fetch the guide or assets, ask me to attach brand.md, assets.json and the logo; do not guess the brand.
```

## Public edition history

- **2026-10-05**: Published the public design guide and original logo downloads, with presentation rules, a machine-readable asset inventory and a reusable English brief. Private project notes and identity deliberations are excluded.
- **2026-10-05, Arete AIOS edition**: Scoped this English public guide to Arete AIOS only. Dark surfaces are the active defaults throughout. The asset manifest contains only the three Arete AIOS downloads; original typography, slide rules and logo artwork are preserved.