---
name: ai6labs Human Intent
description: A cinematic, human-first editorial system. Human intent made tangible — one continuous story from a film-frame hero to a point of action.
logo:
  full: "/brand/logo/ai6labs-logo.svg"          # gradient ai6 + navy Labs, on light
  on-dark: "/brand/logo/ai6labs-logo-on-dark.svg"
  mono-ink: "/brand/logo/ai6labs-logo-mono-ink.svg"
  mono-white: "/brand/logo/ai6labs-logo-mono-white.svg"
  mark: "/brand/logo/ai6labs-mark.svg"
  icon: "/brand/icons/ai6labs-icon.svg"          # gradient mark on an ink tile
  gradient: ["#62a7db", "#65c5e5", "#8fd3cf"]    # logo only
  labs-navy: "#353856"
colors:
  paper: "#f2efea"          # light canvas (--paper); dark #0f0e0d
  paper-raised: "#f8f6f2"   # dark #171614
  stone-pale: "#e4e0d9"     # image panes, raised fills; dark #22201d
  ink: "#161514"            # text; dark #f2efe9
  slate: "#57534e"          # secondary text; dark #c4bfb7
  faint: "#66615b"          # labels; dark #a19b92
  contrast: "#1c1b19"       # primary button fill; dark #ece8e1
  signal: "#35686c"         # the one accent; dark #8cc4c2
  error: "#9a2a1d"          # dark #f0a091
  hero-bg: "#12100e"        # the hero frame, dark in both themes
  hero-ink: "#f6f3ee"
  intent: "#9fc9c6"         # the intent line over the hero film
typography:
  family: "Poppins 400/500/600 (headings and text); Geist Mono 400/500 (labels, data)"
  display: "Poppins 500, clamp(52px, 6.2vw + 10px, 124px) (phones clamp(30px, 12.8vw, 76px)), 0.93 line-height, -0.04em"
  chapter: "Poppins 500, clamp(34px, 3vw + 10px, 68px), 1.02 line-height, -0.04em"
  closing: "Poppins 500, clamp(46px, 5vw + 16px, 88px), 0.95 line-height, -0.045em"
  body: "Poppins 400, 16px (lead 18px), 1.55–1.6 line-height"
  data: "Geist Mono 500, 13px, uppercase, +0.08em for chapter marks and stage labels"
spacing:
  gutter: "clamp(20px, 3.5vw, 56px)"
  section: "clamp(32px, 3.5vw, 56px)"
  wrap: "1320px"
radius:
  pill: "100px"
  card: "16px"
  control: "12px"
  field: "10px"
---

# ai6labs — DESIGN.md

The design system of www.ai6labs.com, for designers, developers and AI agents. Every value is read from the code:
colours, sizes and spacing from `src/app/globals.css`, fonts from `src/app/layout.tsx`, brand files from
`public/brand/`. If this file and the code disagree, the code wins and this file is out of date.

Machine-readable copies: [`/brand/tokens.json`](https://www.ai6labs.com/brand/tokens.json),
[`/brand/tokens.css`](https://www.ai6labs.com/brand/tokens.css) and this file at
[`/brand/DESIGN.md`](https://www.ai6labs.com/brand/DESIGN.md), all generated at build by `src/lib/brand-kit.ts`.
The public brand page is [`/brand`](https://www.ai6labs.com/brand).

## 1. Brand essence

- **Who:** ai6labs is the innovation studio of Wearable Devices Ltd. (Nasdaq: WLDS). Experienced people and AI agents
  turn real human needs into working products. It is a commercial innovation studio, not a robotics, neural-sensing
  or hardware-only company.
- **Tagline:** "Technology, in service of human intent." **Closing line:** "Human insight. Working products. Real impact."
- **Stance:** signal-agnostic. The studio starts from the person and their intent, not from a sensor or a device.
- **Voice:** plain, calm, confident. Short sentences, concrete nouns, no hype. Only claims the site can show; status
  stated honestly. Approved copy changes only with Ron's approval.
- **Name** (approved by Ron, 29 October 2026): write **ai6labs** in running text, as one lowercase word, also at the
  start of a sentence and in headings. "ai6 Labs" is the drawn wordmark; use it only where the wordmark itself is
  shown (the logo, the team-orbit title). Never "AI6Labs", "AI6 Labs", "Ai6Labs" or "ai6Labs". Parent: "Wearable
  Devices Ltd. (Nasdaq: WLDS)".

### North star

Human intent, made tangible. The site opens on a film frame — the moment before a command — and follows one story
through people, signals, questions and method until it arrives at a point of action. People, real work, paper, wood
and daylight carry the story; technology is present as precision: a line, a node, a lens opening at the right moment.

### Narrative rhythm

1. **Intent** — full-viewport film frame; the film fills the right of the frame and feathers into the dark, the promise
   in live type on the dark left side.
2. **The story** (People, Approach, Signals, Questions) — on desktop a pinned split screen where each scene's halves
   slide in opposite directions; on phones a stacked sequence.
3. **Method** — five steps on one line that lights with scroll.
4. **Studio** — what ai6labs is, the proof row, and the team orbit.
5. **Partnership** — the invitation and the contact dialog.

Chapter marks (`01 People`…) repeat navigation words only and are hidden from assistive technology.

## 2. Logo

The wordmark is "ai6" in a blue-to-mint gradient with a raised "Labs", drawn as vector paths. Never set it in a font.

| Version | File | Use |
| --- | --- | --- |
| Colour, on light | `public/brand/logo/ai6labs-logo.svg` | Default on paper and white. "Labs" in navy #353856. |
| Colour, on dark | `public/brand/logo/ai6labs-logo-on-dark.svg` | Dark theme, the hero, dark slides. "Labs" in white. |
| One colour, ink | `public/brand/logo/ai6labs-logo-mono-ink.svg` | Print, single-colour use, busy light backgrounds. |
| One colour, white | `public/brand/logo/ai6labs-logo-mono-white.svg` | Photos and busy dark backgrounds. |
| Mark | `public/brand/logo/ai6labs-mark.svg` (+ `-mono-ink`, `-mono-white`) | Where "Labs" would be too small. |
| App icon | `public/brand/icons/ai6labs-icon.svg` | Favicon, home screens, avatars: the gradient mark on an ink tile. |

PNG exports at 1200 and 2400 px wide sit next to each SVG (`-1200.png`, `-2400.png`). Icons: `favicon.ico` (16, 32,
48), `icon-16/32/48/192/512.png`, `icon-maskable-512.png`, `apple-touch-icon.png` (180), wired through
`src/lib/site.ts` and `src/app/manifest.ts`.

- **Gradient:** #62A7DB → #65C5E5 (55%) → #8FD3CF, left to right with a slight rise. Used only inside the logo.
- **Clear space:** at least the height of the "a" on every side.
- **Minimum size:** 72 px wide on screen for the full logo, 24 px for the mark. Below 24 px use the app icon.
- **On the site:** header 91 px wide (77 px below 701 px), footer 28 px tall.
- **Don't:** recolour, stretch, rotate, outline, add shadows or effects, place the colour logo on busy imagery, or
  crop the "6". Icons keep the whole mark inside the tile with padding, so no platform mask cuts it.

## 3. Colour

One continuous canvas per theme, no alternating bands. Light is warm paper; dark is warm cinema black, and the site
opens in dark. The hero is graded dark in both themes. Colour comes from photography; a muted teal (`--signal`,
`--intent`) is reserved for the intent line, progress, focus and interaction feedback. Colours are CSS custom
properties on `:root` in `src/app/globals.css`, each with a light and a dark value; components use role tokens
(`--bg`, `--surface`, `--action`, `--focus`).

| Token | Light | Dark | Use |
| --- | --- | --- | --- |
| `--paper` | #F2EFEA | #0F0E0D | Page background (`--bg`) |
| `--paper-raised` | #F8F6F2 | #171614 | Raised surfaces, dialogs (`--surface`) |
| `--stone-pale` | #E4E0D9 | #22201D | Image panes, hover fills (`--raised`) |
| `--ink` | #161514 | #F2EFE9 | Text |
| `--slate` | #57534E | #C4BFB7 | Secondary text |
| `--faint` | #66615B | #A19B92 | Labels, meta |
| `--stone` | #7A766E | #A19B92 | Quiet marks and icons |
| `--stone-light` | #B8B4AC | #B3AEA6 | Subtle strokes |
| `--contrast` | #1C1B19 | #ECE8E1 | Primary button fill (`--action`) |
| `--contrast-deep` | #121110 | #0E0D0C | Deep surfaces |
| `--cream` | #F6F4EF | #F2EFE9 | Text on the primary button (`--on-action`) |
| `--walnut` | #6E5643 | #B09379 | Reserved warm accent (defined, not used today) |
| `--signal` | #35686C | #8CC4C2 | The one accent: links, active nav, chapter numbers, focus ring |
| `--error` | #9A2A1D | #F0A091 | Form errors only |
| `--hairline` / `--line2` / `--line-strong` | ink at 14 / 26 / 55% | cream at 16 / 28 / 50% | Rules and borders |

Fixed in both themes: `--hero-bg` #12100E, `--hero-ink` #F6F3EE, `--intent` #9FC9C6, `--photo-white` #FEFEFE (the
Questions illustration's own white). Logo-only: blue #62A7DB, cyan #65C5E5, mint #8FD3CF, navy #353856.

**Contrast** (WCAG, on paper): ink 15.9:1 light / 16.8:1 dark; slate 6.7 / 10.6; faint 5.3 / 7.0; signal 5.5 / 9.9;
error 6.7; cream on the primary button 15.7. Every text colour passes AA.

## 4. Typography

One family set, loaded once in `src/app/layout.tsx`, self-hosted Latin subsets, no third-party requests:

- **Poppins** 400, 500, 600 — headings and text. The Wearable Devices family. SIL Open Font License
  (`public/assets/fonts/poppins-OFL.txt`).
- **Geist Mono** 400, 500 — chapter marks, stage labels, indices, footer legal lines. SIL Open Font License.

Weights: 400 text and nav (`font-menu`), 500 headings (`font-strong`), buttons and form labels (`font-field`), 600
small emphasis. Nothing else is loaded; don't ask for 700. Body copy stays 36–65ch.

Type scale (`@theme` in globals.css; `clamp()` on viewport width so it holds from 320 to 1920 px):

| Token | Value | Use |
| --- | --- | --- |
| `--text-hero` / `--text-hero-phone` | clamp(52px, 6.2vw + 10px, 124px) / clamp(30px, 12.8vw, 76px) | Hero headline, always three lines |
| `--text-cta` / `--text-cta-phone` | clamp(46px, 5vw + 16px, 88px) / clamp(44px, 12vw, 64px) | Closing partnership headline |
| `--text-orbit-title` / `-phone` | clamp(44px, 6cqw, 104px) / clamp(36px, 10cqw, 52px) | "ai6 Labs" in the team orbit |
| `--text-latest` | clamp(38px, 3.6vw + 20px, 72px) | Latest-work heading |
| `--text-scene` | clamp(34px, 3vw + 10px, 68px) | Chapter headings |
| `--text-reading` | clamp(40px, 2.2vw + 33px, 64px) | Page titles (Privacy, Brand) |
| `--text-proof` | clamp(24px, 1.2vw + 14px, 36px) | Studio proof figures |
| `--text-dialog` | clamp(28px, 1vw + 22px, 36px) | Contact dialog title |
| `--text-stage`, `--text-signal-title`, `--text-entry` | 20–28 px | Card and list titles |
| `--text-question` | clamp(18px, 0.6vw + 13px, 24px) | Questions list |
| `--text-kicker` | clamp(18px, 0.4vw + 16px, 22px) | Hero kicker |
| `--fs-lead` / `--fs-body` | 18 / 16 px | Lead and body text (never below 16 px) |
| `--text-step`, `--text-callout`, `--text-note` | 15–20 px | Method steps, callouts, captions |
| `--fs-label` | 13 px | Mono labels, the smallest text |

Line heights: `--leading-title` 1.02, `--leading-copy` 1.55, `--leading-body` 1.6. Letter spacing: headings −0.035
to −0.045em (`--tracking-display`, `-title`, `-cta`), mono labels +0.06 to +0.08em.

## 5. Layout, spacing, radii, shadows

- **Container:** `--wrap` 1320 px; side gutter `--gutter` clamp(20px, 3.5vw, 56px); text axis `--axis`.
- **Composition:** asymmetric editorial grids; photographs bleed to one edge and alternate sides. No card grids.
- **Sections:** `--section` clamp(32px, 3.5vw, 56px) (28 px below 701 px); reading pages use
  `--spacing-reading-top` / `-bottom`; story scenes use `--spacing-scene-*`.
- **Breakpoints:** 481, 561, 701 (`md`), 861 (menu), 900 (story stage), 981 (`lg`), 1360 px.
- **Radii:** pill (`rounded-pill`, `rounded-full`) for buttons, chips and icon buttons; 16 px for image and brand
  cards; 12 px (`--r-ctl`) for controls; 10 px (`--radius-field`) for form fields.
- **Shadows:** soft and low, only on lifted objects: `--shadow-lift` (buttons on hover), `--shadow-orbit`
  (portraits), `--shadow-node`. No shadows on text or flat cards.

## 6. Components

- **Navigation:** fixed bar, clear over the hero and glass once scrolled (`is-compact`); the partnership action appears
  only after the hero. Links are uppercase Poppins with `--tracking-meta`; the current section is underlined. A theme
  toggle sits on the right. The mobile menu keeps Escape dismissal and focus return.
- **Buttons:** primary buttons at least 48 px tall: `--action` fill, `--on-action` text, lift 2 px on hover.
  Secondary: outlined with `--line-strong`. Arrow icons move 3 px on hover. Pills only for compact actions.
- **Links:** `--signal` or ink, underline offset 3 px.
- **Chapter marks:** a short rule, a two-digit number in `--signal`, the chapter name in mono caps.
- **Lists:** separated by hairlines rather than boxes; icon + title + one line of text.
- **Contact dialog:** fields with a 10 px radius, 44 px tall, label above, errors in `--error` with a "!". It says
  truthfully what happens to the message and restores focus to its opener.
- **Footer:** logo, closing line, link columns (Explore, Connect, Legal) and two mono legal lines.
- **Brand page:** `/brand`, built from the same components (`content/brand.body.html`).

## 7. Imagery and icons

- Warm, natural light; real materials and people at work; one subject per frame; restrained warm grade.
  Black-and-white is allowed for studio scenes.
- Use each approved team photograph once, in story order. Natural expressions, hands and working context. Never
  clone, composite or synthesize team members.
- The hero film is conceptual brand storytelling ("The Moment Before a Command"), never a product claim. Phones get a
  portrait cut; the still poster shows until it plays.
- Icons are line icons from one sprite, 1.75 px stroke (`--stroke-width-icon`), round caps, `currentColor`.

## 8. Motion

Motion explains the story; it never gates reading.

- **Hero entrance** (about 2.5 s): a dark veil lifts off the film frame (1.7 s), the logo and links settle in, the
  headline rises line by line out of a 12 px blur (1.2 s each, 130 ms apart), the supporting line follows. Phones use
  shorter travel, less blur and slightly tighter timing.
- **Scroll reveals:** content fades up 36 px out of a 10 px blur over 1.15 s, once (22 px, 6 px, .95 s on phones),
  in reading order. Content the reader has already passed is shown, not revealed.
- **Hero recede:** the film frame drifts as the visitor leaves it (`--hero-p`).
- **Aperture:** on phones, story photographs open from an inset, rounded frame to full as they arrive (`--p`).
- **Stage lighting:** impact stages and method steps light one at a time along the line (`--progress`).
- One curve for all choreography: `cubic-bezier(.22, 1, .36, 1)` (`--smooth`). Interface transitions run 150–300 ms.
  Scroll-linked values update in one `requestAnimationFrame` loop from cached geometry.
- **Reduced motion:** every frame settles in its final state, every aperture opens, every stage lights, the story is
  stacked instead of pinned and video never loads. Save-Data and 2G keep the poster instead of the film.

## 9. Accessibility

- Text contrast meets WCAG AA in both themes. Focus is always visible: a 2 px `--focus` outline with a 3 px offset.
- Controls are at least 44 px. Everything works by keyboard; the dialog closes on Escape and returns focus.
- Images have alt text; decorative ones have empty alt and `aria-hidden`. Content never depends on JavaScript or
  animation to be visible.

## 10. Machine readability

- `/llms.txt` (who we are and what is where) and `/llms-full.txt` (the same plus the full text of every page).
- Every page: title, description, canonical, Open Graph and Twitter card (1200×630), JSON-LD Organization (logo,
  parent Wearable Devices Ltd. with ticker WLDS, sameAs) and WebSite.
- `/robots.txt`, `/sitemap.xml`, `/manifest.webmanifest`, an SVG favicon and the full icon set.
- Brand files at stable URLs under `/brand/`: logos, icons, `tokens.json`, `tokens.css`, `DESIGN.md`,
  `BRAND-ASSETS.md` (the asset map), `README.md` and `ai6labs-brand-kit.zip`.

## 11. Relationship to Wearable Devices and Tally

- **Wearable Devices Ltd.** is the parent. ai6labs shares its type family (Poppins) and always names it as "Wearable
  Devices Ltd. (Nasdaq: WLDS)". The logo and colours are ai6labs' own.
- **Tally** is a product built by ai6labs. It shares the studio's principles (clarity, product truth, people first,
  honest status labels) but keeps its own colours, type and logo. The attribution line connects it to the studio.

## 12. Presentations

The template is `public/brand/presentation/ai6labs-slides-template.pptx` (16:9), built by
`scripts/brand/slides-template.py`, with PNG previews next to it. It is a standard PowerPoint file; the Canva
import was checked (four pages, Poppins kept).

- **Title:** night background (`--hero-bg` #12100E), logo on dark, mono eyebrow in `--intent`, Poppins Medium title
  (two lines), the hero poster on the right half.
- **Section divider:** paper background, chapter mark (rule, number in `--signal`, name in mono caps), Poppins Medium
  heading at 54 pt.
- **Content:** paper background, chapter mark, heading 34 pt, text 16 pt in slate, a short hairline list, one photo
  bleeding to the right edge.
- **Closing:** night background, logo, the tagline in mono, "Human insight. Working products. Real impact.", contact.
- One idea per slide; headings two lines at most; photos from the approved set (`public/brand/images/IMAGES.md`).
- The board deck of 28 October 2026 used DM Sans and a navy, teal and orange palette. That look is not part of the
  brand; the template above replaces it (approved 29 October 2026).

## 13. Do not

- Use circuitry, HUDs, glowing brains, neon gradients, particle clouds or generic AI imagery. (The approach image of
  a human hand meeting a robotic hand is the one existing exception; don't add more robot imagery.)
- Put the headline inside video pixels, or make the page wait for video.
- Repeat a photograph or person in the same narrative.
- Depend on JavaScript or animation for content visibility.
- Introduce metrics, clients, awards, case studies or product claims without supplied evidence.
- Change approved copy without Ron's approval.