AI agent? Read the instructions first: https://design.allgaia.team/AGENTS.md

llms.txt · tokens.json · design kit (.zip)

CVI 3.0 · Nov 2026
allGaia · Corporate visual identity 3.0

The design guide for allGaia and EVENRA.

One system for the website and for social posts. It is built from what is live on allgaia.com, with the social colours from the launch carousel brief, and written so that people and AI agents get the same result.

  • Public Sans
  • 8 surfaces, light & dark
  • 10 post templates
  • HTML → PNG renderer
01

Principles

Plain, calm, pharma-clean. The premium comes from restraint, photography and type, never from decoration. We spend on what's inside, not on the box.

1

One idea per panel

One headline, one supporting line, one action. Big quiet space around it.

2

The facts are the hero

Amounts, forms, lab tests and batch codes are the graphics. Print them plainly, with units.

3

Readable on any ground

Every design sits on a named surface. The surface decides the text colours, so contrast holds on cream and on night teal.

Do
  • Cream page, paper boxes, deep-teal dark cards
  • Regular-weight headlines with tight tracking
  • Rounded 24px boxes on a 24px gap
  • Photos softened (saturate .75) with grain and a teal or night shade
  • Pill buttons in capitals, sentence-case badges
Don't
  • Bright teal text on cream (it fails contrast)
  • Bold or ALL-CAPS headlines, more than one typeface
  • Gradients on light grounds, drop-shadowed text, glow effects
  • Stock photos of people, or recoloured or stretched logos
  • The ® mark, until the EVENRA trademark is granted
03

Colour

Every colour below is measured from allgaia.com or set in the carousel brief of 9 Nov 2026. These are the only hex values in the system; anything else is off-palette. Use them through surfaces (section 04), not one by one.

Light grounds & ink

Deep teals: dark grounds

Bright teals: accents on dark only

Warm accents: sparing, one per design

From CVI 2.0

What changed since the August 2026 CVI

The accepted design now lives on the site. When an old file uses a CVI 2.0 value, swap it for the CVI 3.0 value.

CVI 2.0Was used forCVI 3.0Note
Open Sauce One (titles) + Aileron (body)All typePublic Sans 400 / 600The site's face, self-hosted. One family only.
Charcoal #2B3333Titles, bodySlate #4E6466 (titles) · Ink #1D4249 (body)Teal-tinted, softer
Deep Tide #357575Buttons, linksGraphite #343739 buttons · Tide #1F5962 links/hover
Cream #F6F3EC · Paper #FBFAF6GroundsCream #FBF8F2 · Paper #F3F3EBThe site's values
Linen #DDD9CEBordersLinen #E3DDD3
Gaia Teal #2AA8A8Packaging, accentsKept for print/packaging. On screen: Sachet #2DB8CEPANTONE 2225 C, C75 M0 Y0 K34
Sage · Gaia Sun · Terracotta · EspressoSoft & warm accentsSun #C8642F · Clay #D39A6A · Berry #8B2F26From the site's ingredient cards
04

Surfaces & contrast

This is the core of the system. Put one surface class on a container, and headings, text, accents, lines, buttons and badges inside it switch to the right colours. The same markup works on cream and on night teal. Ratios are WCAG contrast against the ground (4.5:1 is the minimum for body text, 3:1 for large text).

Measured pairs

05

Typography

Public Sans (SIL OFL) is the only typeface, in 400 and 600. Headlines are set in regular 400 with tight tracking, as on the site. 600 is for emphasis only. Capitals only for eyebrows (0.14em) and buttons (0.06em).

Web scale · fluid
display · 38→68 / 1.06 / −0.025em

20 ingredients

h2 · 30→48 / 1.08 / −0.02em

Controlled quality

h3 · 22→32 / 1.15

Open one sachet

lead · 18→21 / 1.45

One evening sachet with dinner.

body · 17 / 1.5 · text-2

Magnesium contributes to the reduction of tiredness and fatigue. Plus creatine, amino acids and 15 more ingredients.

eyebrow · 13 / 600 / 0.14em capsEVENRA · Fuel for rest
Social scale · 1080 canvas px (shown at 40%)
h1 · 92 / 1.02

EVENRA is now available.

h2 · 72 / 1.06

Every batch, checked by Eurofins.

lead · 44 / 1.25 · ice #CEFFFF

20 ingredients.
Every one with a reason.

body · 36 / 1.42 · white

Stir the powder into water, a smoothie or yogurt. One glass every evening, with dinner.

row label · 36 / 600 · signal #51D1EC

Minerals

minimum body on a post: 28px

Units

A space before every unit: 18 g, 750 mg, 5 g, 30 days. Prices: €84 in English, 84 € in German.

Names

EVENRA in capitals. Company: the allGaia wordmark; "AllGaia" in running text. No ®.

Numbers

Use .ag-num (tabular, lining) in tables, prices and lab data so columns line up.

06

Components

Each component is shown on a light and a dark surface with the same markup. Only the surface class differs.

07

Light cards & dark cards

A card is .ag-card plus a surface. On the cream page, use paper or white for light cards and ink or deep for dark cards. Photo cards always carry a shade. Radius 24px, gap 24px (12px on phones).

On a light page

Light card · paperIngredients

20 ingredients, chosen for their form

Vitamins, minerals, amino acids, creatine, plant extracts and fibre. Every amount is printed on the box.

Dark card · inkLab results

Lab results

Batch 1 went to Eurofins for three tests: safety, contents and pesticides. Your box carries the same lot number.

Lot
EVN260827
Best before
26.08.2028
Lab
Eurofins
Lab results

Every batch is checked

Heavy metals, pesticides, microbiology and key ingredient amounts.

Light card · white

Fewer bottles, less measuring.

Kristjan Kann · Founder
Dark card · deep 30

sachets in a box. One every evening, with dinner.

Accent card · sachet

New evening supplement

Dark abyss text only. Use one per page at most.

On a dark page or post

Dark card on night
  • Vitamins

    C, E, B6, D3 from lichen and K2 as MK-7.

  • Creatine

    5 g of creatine monohydrate, vegan.

Light card on night

The strongest contrast in the system

Use a light card on a dark post when one block must jump out, like a price or a promise.

Outline card

The day is done.

Dinner is waiting, and so is your evening ritual.

08

Social posts

Posts are HTML pages at exact pixel size. render/render.sh turns them into PNGs with headless Chromium. The dark set is the EVENRA launch carousel from the brief of 9 Nov 2026, rebuilt in the system; the light set shows the same rules on cream. Click a post to open it at full size.

Formats
portrait1080 × 1350Feed and carousels (default)
square1080 × 1080Feed, LinkedIn
story1080 × 1920Stories, Reels covers
landscape1200 × 628Link posts
linkedin-banner1584 × 396Profile banner, centred
Layout rules
  • Margins 104px left/right, 120px top, 96px bottom. Key lines also inside the centre square.
  • Arrow bottom-right, thin, #51D1EC, on every carousel slide except the last.
  • Badge above the cover headline: #2DB8CE with #042832 text.
  • Headlines and body in white; light-teal lines #CEFFFF; row labels #51D1EC; dividers #467884.
  • Big decorative numbers: #78C8D2 at 25% opacity. Body copy at least 36px, never under 28px.
  • Stories: nothing important in the top 250px or bottom 300px.

Dark set · EVENRA launch carousel

Light set & other formats

Render
# every template → out/*.png
render/render.sh

# one post, 2× resolution (2160 × 2700)
SCALE=2 render/render.sh social/templates/dark-03-rows.html
09

For AI agents

The full rulebook is AGENTS.md, on the web at https://design.allgaia.team/AGENTS.md. An agent that can't read files from this repo can link the CSS straight from the web or download the whole kit. The short version:

On the web
/AGENTS.mdAgent instructions (Markdown). Also at /agents
/llms.txtIndex of every machine-readable file
/tokens/allgaia.tokens.jsonTokens as JSON. Also at /tokens.json
/allgaia-design-kit.zipCSS, fonts, logos, photos, templates and the renderer in one download
https://design.allgaia.team/css/allgaia-tokens.cssLink the CSS directly from a post (CORS is open, so the fonts load too)
The prompt to give an agent
Make an allGaia Instagram carousel.
Read https://design.allgaia.team/AGENTS.md first
(or AGENTS.md in the repo). Start from social/templates/, keep the classes,
change only copy and photos. Use the approved copy below word for word.
Render with render/render.sh and check every PNG against the
checklist in AGENTS.md §8.

COPY:
…
Files
AGENTS.mdRules, surfaces, checklist, copy you must not change
css/allgaia-tokens.cssPalette, type, radii, 8 surfaces
css/allgaia-components.cssCards, buttons, badges, rows, facts
css/allgaia-social.cssPost canvas, formats, post type scale
tokens/allgaia.tokens.jsonSame values, machine-readable
tailwind/allgaia.preset.jsTailwind preset (bg-ag-ink, text-heading, text-post-h1 …)
social/templates/*.html10 post templates
render/render.shHTML → PNG, exact size
Tailwind

Load css/allgaia-tokens.css together with the preset. The semantic colours (text-heading, text-accent, bg-surface, border-line) follow the surface class, so this card's markup works on .ag-dark unchanged:

<article class="ag-dark rounded-ag-card p-ag-card font-sans">
  <p class="text-accent uppercase tracking-eyebrow text-ag-micro font-strong">Lab tested</p>
  <h3 class="text-heading text-ag-h2 mt-2">Every batch, checked by Eurofins.</h3>
  <p class="text-text2 text-ag-body mt-4">Read every report yourself.</p>
</article>

Lab tested

Every batch, checked by Eurofins.

Read every report yourself.

Lab tested

Every batch, checked by Eurofins.

Read every report yourself.