# Arete AIOS Brandbook Version 1.11.0 · 2026-10-22 The shared visual standard for Arete AIOS websites, presentations and video. Source: https://areteaios.com/brandbook ## Give this to your AI Create Arete AIOS material using this Brandbook: https://areteaios.com/brandbook/brandbook.md Choose the web, slides or video profile for the actual deliverable. Use the approved logo assets, palette and type roles. Reuse accepted video assets where the format calls for them. Bundle slide fonts and assets locally. Keep any explicitly approved project variation clearly identified. Verify the final result at its real viewing size. ### How to use it with your AI 1. Link: paste this line into the prompt, brief or knowledge field: “For Arete AIOS work, read https://areteaios.com/brandbook/brandbook.md and follow it.” 2. Paste: if your AI cannot open links, select “Copy complete rules” and paste the text into the conversation or into a project or knowledge field. 3. Upload: download brandbook.md or unzip the complete kit and upload its Markdown and needed resources. Install the skill folder only in a tool that supports Agent Skills and its documented skills location. A generic chat may not unpack ZIPs or activate skills automatically. 4. Work: name the deliverable and choose the web, slides or video profile. Ask the AI to list the rules it applied and to check the result at its real viewing size. 5. Keep one release together: record the version you loaded, use its matching rules and resources, and do not replace it with an older online copy. If online files are newer and you want to update, replace the whole release before starting a new deliverable. A pinned project version stays pinned until explicitly updated. ## 1 · Brand colours Colours shift by surface, not by project. The dark values are the same hues, lifted for legibility on a dark ground. ```css /* On light surfaces */ --brand: #0B63B6; /* primary: buttons, links */ --brand-deep: #0A3D78; /* hover, deep fills */ --accent: #1699A8; /* teal: mono labels, small marks */ /* On dark surfaces */ --brand-dark: #0081FF; /* primary on dark */ --accent-dark: #009DB1; /* teal on dark */ /* 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: #0A121F; /* headings and primary text on light */ --muted: #5D646F; /* secondary text on light */ --line: #E3E8EF; /* hairlines and borders on light */ ``` Bright blue needs a dark ground or it glares; the deeper blue holds contrast on warm white. That is the whole reason for the split. For primary buttons with normal-sized text, use the existing --brand blue with white text by default (about 6.0:1); --brand-deep is the deeper alternative. Keep --gradient-primary for approved uses where any meaningful foreground passes contrast against its actual background. Do not put small white text on an unchecked gradient. ## 2 · Surfaces **Dark — hero bands, sticky navigation, full decks, AIOS** ```css --dark: #0A121F; --dark-text: #F9FAFC; /* headings on dark */ --dark-body: #C4CBD6; /* body text on dark */ --dark-line: rgba(255,255,255,.10); ``` **Light — everything below the hero** ```css --page: #FCFAF6; /* warm off-white. The default page background */ --card: #FFFFFF; --warm-sunken: #F3F0EA; /* warm alternating band */ --cool-band: #ECF3FA; /* cool alternating band */ ``` The warm off-white `#FCFAF6` is the single most recognisable thing in this system. Never replace it with pure white or a cool grey. ## 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. Weights 500–600, never 700. The big title reads large and light, like a person, not a product. Request it with its optical-size axis: `Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700`. - **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. | 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 These three came out of the AreteAIOS build and are now part of the system. **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. Everything below the hero returns to `--page`. 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` on dark, `#0B63B6` on light), 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 — mono here jumps out of the page (Egils, 2026-08-06). Card numbers get the same treatment. Reuse the section's existing name; do not invent one. Never teal, never JetBrains Mono. **Accessible CTA pill.** Primary buttons are pills filled with `--brand`, white text, and the existing soft blue glow shadow (`0 20px 50px -20px`, blue at 40%). White on `--brand` has about 6.0:1 contrast. The gradient token is unchanged but a gradient CTA is an optional treatment only after its actual text contrast is verified. This glow is the only shadow in the system. Secondary buttons are outline, flat, no shadow. **Icon chips.** Use a 36px rounded-xl chip with the approved blue or gradient; meaningful icon strokes must retain at least 3:1 against their actual background. A white icon over the gradient’s light end needs a contrast-safe treatment. On dark grounds, icons sit bare in the bright blue. Emoji never appear on a public page. **Hairline cards, no shadows.** Cards are `--card` with a 1px `--line` border and radius 14px. No shadow. To highlight one card, give it a teal border and a very pale teal tint — 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. This is the general web spacing scale. Explicitly accepted profile/pattern geometry takes precedence for that format; the 1920×1080 slide example intentionally uses 88/112px outer padding, 40px card padding and 80px gaps. These are profile values, not extra global tokens. 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 is outside this approved type system. - 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 ## Websites and tools - Use the dark Arete surface by default. Approved editorial light surfaces use the shared warm-white tokens. - Literata is for display headings; Inter carries body text and controls; JetBrains Mono is for code and machine data. - Use the existing symbol and wordmark. Keep blue as the main accent and status colours meaningful. ## Slides and presentations - Use the same palette, logo and type roles. Start from a 16:9 canvas unless the brief requires another format. - Keep one clear idea per slide and enough space for the message. Both dark and warm-white slide surfaces are accepted; use the matching blue and text tokens and keep each slide legible. - Bundle every font, framework and asset locally. Verify the actual offline deck and presenter view on the intended computer. ## Video and motion - Choose the approved format for the actual film. AIP7 and Masterclass are distinct profiles. - Use the approved full wordmark and complete frame. The accepted AIP7/Masterclass video profiles use Inter for prominent on-screen text and captions. - Reuse the selected voice, motion and intro/outro assets; preserve full spoken endings and check the final video at phone size. ## Approved assets - [Arete AIOS symbol](https://areteaios.com/brandbook/logo-areteaios.svg): Use the existing symbol unchanged; preserve its proportions and colours. - [Full Arete AIOS wordmark](https://areteaios.com/brandbook/wordmark.png): Use the complete approved wordmark in video; do not crop its lettering. - [Approved AIP7 intro](https://areteaios.com/brandbook/arete-intro.mp4): Existing AIP7 format example, with the approved English voice and motion. - [Four-slide HTML example](https://areteaios.com/brandbook/slides.html): Self-contained 16:9 title, light content, dark diagram and editorial statement. Toggle each slide between dark and light; fonts and logo are embedded. Sample copy, not a finished event talk. - [Dark/light HTML website example](https://areteaios.com/brandbook/web.html): Self-contained responsive page demonstrating the same design system, with dark/light switching. Adapt through the accepted publishing route for the real site. - [Egils with five graphic layers · 5 seconds](https://areteaios.com/brandbook/egils-brand-demo-5s.mp4): Real recorded h4 excerpt with approved full logo, topic tabs, speaker label, one key idea and timed keyword chips. Original voice and completed first phrase retained; a design example, not a universal intro. - [Egils video sample poster](https://areteaios.com/brandbook/egils-brand-poster.jpg): Actual frame from the on-camera sample; use as the sample player poster. ## Voice and motion Public partner: Arete. English voice: Sarah. Latvian voice: Miriam. Reuse the approved voice assets for the selected language and format. A new text or paid generation is a separate production choice. R05: Use the approved infinity presence and speech-responsive motion. Keep resting periods and a reduced-motion alternative. Product work states must reflect actual work. ## Video openings and endings Choose intro and outro by format. Reuse the accepted assets; a five-second human sample is a visual example, not a universal intro. AIP7 uses its prepared Arete/Sarah R05 intro and outro. The published autumn 2026 Masterclass uses the selected Egils h4 opening and d5 dated ending. Its evergreen ending is still to be selected. If a new format needs its own opening or ending, create or choose them during that actual video delivery and record the accepted text, language, source assets, timing and CTA expiry in the project. ## Graphic layers over real footage On-camera graphics are layers over real footage. Keep the full approved wordmark visible, set every on-screen word in Inter, build panels on the dark canvas at about 94% opacity with the 1 px light hairline and 14 px radius, and use blue only for the active tab, the speaker rule and the key-idea line. Keep the face and eye line clear, stay inside a 64 px safe margin at 1080p, time keyword chips to the spoken words, and caption in the spoken language with an optional translated track. The reference demo has one explicit placement exception: its approved full-wordmark container is x=16 px, y=0 px. The 64 px safe margin applies to generated text and panels; use 64 px for a new logo placement unless deliberately reproducing that accepted demo. This exception does not change general logo clear-space rules, which remain an open design item. - Full wordmark, top left - Topic tabs, top right, one active in blue - Speaker label with a blue rule, bottom left - One key idea with an eyebrow and a blue line, right - Timed keyword chips, bottom right Intro and outro are chosen per format (see bookends). The five-layer sample is a format demonstration, not a requirement for every film. Reference geometry at 1920×1080 from the accepted sample: wordmark container 560×261 px at x=16 px, y=0 px (the accepted demo exception, not the default safe margin); topic tabs panel 64 px from top and right, tab text Inter 600 28 px, active tab filled bright blue; speaker panel 510 px wide at 64 px left and 160 px up from the bottom with a 5 px blue left rule, name 38 px, role 27 px; key-idea panel 500 px wide at 64 px right and 365 px down, eyebrow 22 px with 0.12em tracking, idea 58 px, 4 px blue line; keyword chips at 64 px right and 160 px up, 27 px text, one chip filled deep blue; panels rgba(10,18,31,.94) with 1 px white at 22% and 14 px radius; the wordmark is visible from frame 0 through the last frame; topic tabs enter at 0.25 s, the speaker label at 0.55 s, the key idea at 1.85 s and keyword chips at 2.8 s. These four layers use a 0.22 s fade with a 16 px rise and fade out over the last 0.18 s; the wordmark stays visible. ## Two ways to use this Brandbook **Making Arete AIOS material.** Use this Brandbook as it is: the Arete name, logo, wordmark, palette, type roles and profiles. Do not restyle the logo, add another accent colour or a fourth typeface. Name any explicitly approved project variation in that project. **Building your own Brandbook.** Keep the method, replace the identity. Start with my-brandbook.template.md and the other brand’s approved name, logo, palette, fonts and production profiles. Arete tokens and assets are examples for understanding the method, not defaults for that brand. If its values are missing, request them or label a proposal as a draft; do not silently use the Arete identity. Review and replace any Arete identity embedded in an adapted HTML example before publishing it. ## Rights and licences - Fonts: Inter, Literata and JetBrains Mono are licensed under the SIL Open Font License 1.1. You may use, embed, bundle and redistribute them under that licence, also in your own brandbook; the licence text ships in the kit. - Arete identity: the Arete AIOS name, infinity symbol and wordmark belong to Arete AIOS / Egils Boitmanis. Use them unchanged and only in material about or for Arete AIOS; they may not become part of another brand. - Egils footage: the five-second clip and poster are a personal recording published as a design example. Reuse them only in Arete AIOS material; do not re-edit, re-voice or redistribute them separately. - Arete intro: the AI in Practice intro uses an AI-generated voice and the approved motion. It is an example of the Arete format; reuse is limited to Arete productions. - Templates and method: you may copy, adapt and share the method text, identity template, CSS/JSON/DTCG token files and HTML template code for work on your own brand. Keep this rights notice and the bundled font notices with redistributed copies. Replace Arete identity in adapted outputs. This permission does not grant rights to use Arete trademarks, Egils footage or AI voices as another brand. Attribution to areteaios.com/brandbook is appreciated. Not yet determined by the owner: - A standard open-licence identifier such as MIT or CC BY has not been selected. The explicit templates-and-method permission above applies; do not label this whole mixed-asset kit MIT, CC BY or unrestricted. - Redistribution of the AI-generated intro voice outside Arete material. ## Accessibility The guide and both HTML examples are checked with automated WCAG 2.2 AA rules in Latvian and English, dark and light. Normal primary buttons use white on --brand, about 6.0:1. This is a checked community reference, not a full WCAG conformance claim: automated checks, keyboard/zoom checks and a human screen-reader evaluation are different evidence. - Text on dark passes AA: light text 17.9:1, body text 11.5:1 and blue 5.0:1 on the dark canvas. - Text on light passes AA: ink 18:1, muted 5.7:1 and blue 5.8:1 on warm paper. Teal on warm paper is 3.3:1, so use teal only for large text (24 px, or 19 px bold) or non-text marks, never for small text. - Primary buttons use white text on --brand (about 6.0:1) by default; --brand-deep is the approved deeper alternative. The unchanged gradient has about 2.5:1 at its light end and bright blue has about 3.8:1 against white: neither is a default for small white text. A text-bearing gradient variant needs contrast measured against the actual background behind every character and in each interaction state. - Status colours on light surfaces are below 3:1: always pair them with a text label and never use colour as the only signal. - Hairlines at about 1.2:1 are decorative. Give form fields and other controls a boundary of at least 3:1, for example --muted on light surfaces. Known gaps: - Human screen-reader evaluation and a full WCAG 2.2 AA conformance assessment are not complete. - Video audio-description requirements must be assessed against the important visual information not already in the soundtrack; captions and written descriptions alone do not establish AA. ## Versions and updates Keep a release together: the version and date in brandbook.md, brandbook.json and the ZIP manifest identify the rules and matching resources. Record the version used. Never downgrade a newer local kit because the website differs. For an explicitly pinned project use that version; otherwise update the whole kit only to a newer release before starting work. Compare numeric version components, not string order. Rules change in the owner's canonical source first. Every public file is then regenerated from it together, checked in a real browser and published through the website's accepted code route; each release carries a source checksum in brandbook.json. An unpublished local release may be newer than the website. Publication is accepted only after the website and downloads have been read back and compared with the release inventory. ## Clarifications from the blind test - Default surface: Arete AIOS pages and tools are dark by default. The warm paper described as the default page background in section 2 belongs to the shared system's light bodies; for Arete it is the approved light or editorial variant, as in the light mode of the web example. - Hero band: on a light Arete page the dark hero band of section 5 is one accepted pattern; a fully light editorial page, as in the web example's light mode, is the other. Choose one per page and do not mix them inside one page. - Eyebrow scale: 12.5 px with 0.18em tracking is the rule at 1440 px screens. On a 1920 px slide or video canvas the eyebrow is 22 px and the tracking drops to 0.12–0.14em so the caps stay readable; the web example uses 0.14em at its larger size for the same reason. - Secondary button: a pill with a 1 px border in the surface text colour at about 22% opacity, text in the surface text colour, no fill, no shadow; the border turns blue on hover. - Breakpoints: scale the type table proportionally below 1280 px; the examples switch layouts at 900 px and 650 px and keep a 16 px side gutter at 320 px. - Gradient fallback: where oklch() is unavailable, use the sRGB pair #0041B6 to #35A9FF at 135deg. - Fonts: the woff2 files embedded in the examples are the same OFL fonts as the Google Fonts request in section 4; either route is allowed, and a deck or video must embed them. - Primary button default: white text on the existing --brand blue, with a pill shape and the existing single soft glow. The gradient token is preserved for approved contrast-checked treatments; it is not mandatory under small text. - Spacing scope: the shared 8 px list is the general web scale. Explicitly approved profile and pattern dimensions override it: for example the 1920×1080 slide sample uses 88/112 px outer padding, 40 px card padding and 80 px gaps. Preserve those format-specific values without treating them as new general spacing tokens. tokens.css exports colours and radii; use the Markdown tables and tokens.dtcg.json for spacing, type and layout, and the selected profile for its exact geometry. Open design items: - Logo clear space and minimum size are not defined yet. - Caption typography for video (size, position, background) is not defined beyond Inter; the AIP7 and Masterclass projects hold their accepted values. - The ZIP does not bundle raw footage. Supply approved footage for a new overlay. The accepted clean five-second Arete camera plate is separately available at https://areteaios.com/brandbook/egils-face-5s.mp4 with captions at https://areteaios.com/brandbook/egils-face-5s.vtt; it remains subject to the Arete-only footage permission. ## Correct and incorrect | Correct | Incorrect | |---|---| | Blue is the one accent: buttons, links, eyebrows, one or two marks. | Teal on prices, numbers, labels or trust chips. | | Literata 500–600 for H1 and H2 only. | Literata 700, or Literata in body text and buttons. | | Warm paper #FCFAF6 as the light page surface. | Pure white or cool grey as a page background. | | Primary button: accessible blue pill with readable white text and the single soft glow. | Small white text over an unchecked gradient, shadows on cards, glass panels or extra gradients. | | Numbered Inter eyebrows in blue: 01 / SECTION NAME. | Monospace or teal eyebrows, invented section names. | | Full wordmark visible in video; captions in the spoken language. | Cropped lettering, emoji in public headings, motion that starts on its own. | ## Downloads - [Complete rules · Markdown](https://areteaios.com/brandbook/brandbook.md) - [Structured guide · JSON](https://areteaios.com/brandbook/brandbook.json) - [CSS tokens](https://areteaios.com/brandbook/tokens.css) - [Design tokens · DTCG JSON](https://areteaios.com/brandbook/tokens.dtcg.json) - [Identity template · Markdown](https://areteaios.com/brandbook/my-brandbook.template.md) - [Rights · Markdown](https://areteaios.com/brandbook/RIGHTS.md) - [Font licences · OFL](https://areteaios.com/brandbook/fonts-OFL.txt) - [Complete kit · ZIP](https://areteaios.com/brandbook/arete-brandbook-kit.zip)