01 - Philosophy

The Name

Odysee is a respelling of Odyssey - the long journey home. The original is Homer's. The respelling is ours.

Removing the second 'y' separates the product from the literary reference and grants the name its own visual identity. It reads quietly - not a brand demanding attention, but a word that suggests motion and patience. The kind of name that earns its meaning over time, the way a well-worn passport does.

02 - Philosophy

The Mark

A circle, two lenses, two points of attention. The circle is Tico. The pupils look out at the world - with you, not at you.

The face is one outer circle and two lenses, with two pupils that always sit in Tico Orange. The pupils point outward - at the world you're moving through - never inward at the person using it. A mouth appears only when Tico speaks; the rest of the time the face is simply present and attentive. This settles a tension that runs through the project: a companion is not an oracle. The face shows Tico's own state and looks out at the world. It senses lightly, and refuses to read inward.

The wordmark replaces the 'O' of Odysee with the face itself. The mark and the word are not separate elements that sit beside each other - they share a glyph. There is no version of the name without the face.

03 - Philosophy

The Palette

Navy. Tico Orange. Sand. A cool night sky, one warm point of life, and the warm paper that holds them both.

The contrast is older than design - it's how almost every culture has rendered the difference between the technological and the human. Navy is the system: precise, dark, cool. Tico Orange is the companion's voice: warm, human, alive - the single point of attention on the page. Sand is the surface that lets both speak.

Around these three sit a warm family of Sand neutrals (50→400) for surfaces and text, two travel accents - teal and sun - for wayfinding moments, and a functional signal layer: green for success, amber for warnings, a distinct red for errors - defined as semantic tokens outside the brand palette. Purple is retired; orange now carries the warmth it used to hint at. The signals appear sparingly. The brand is the three.

04 - Philosophy

The Voice - Tico

Tico - the persona of Odysee - speaks like a friend who has traveled a lot. Not like a search engine. Not like a call center.

Five attributes define the tone. Each is a constraint, not a flavor. If a sentence violates any of them, it's not Tico - even if it's technically correct.

05 - Philosophy

Design Principles

Five rules that drive every decision in the system. They exist so we can move fast without re-deciding the basics.

06 - Storybook

Logo & Brand Mark

The brand mark is the Tico face - one outer circle, two lenses, two pupils. Construction specs (viewBox 1000): three structural strokes at stroke-width=50, pupils r=48 at (725,399) and (300,399). Structural strokes are navy on light, sand-white on dark; pupils are always Tico Orange. A mouth ellipse appears only in the speaking state.

Wordmark

The face replaces the 'O' of Odysee. Sora 800, letter-spacing −0.035em. Always lockup - never separated.

Mark-only

Use the face alone where the wordmark would compete or wouldn't fit - favicons, avatars, app icons, watermarks at small sizes.

07 - Storybook

Colors

Brand foundation, warm Sand neutrals (five steps), travel accents, and the project-tracker status overlay. Click any swatch to copy hex.

Warm neutral scale for surfaces, borders, and text hierarchy across both themes. Source: odysee-tokens.css.

Teal and Sun - for wayfinding, maps, and live-AI moments. Used sparingly, never as body or primary action.

Tracker and agent-board status colours, borrowing the accent hues as a code. The product's semantic signals (success / warning / error) live in the Tokens reference. Purple is retired in V5 - Design moves to Sun, Docs to Navy 500.

08 - Storybook

Typography

Two families, plus one technical face. Sora for Latin display, UI, headings, and body. Heebo for all Hebrew. JetBrains Mono for code, hex values, and technical labels - not a brand text family. The minimal count is itself a statement.

Latin Scale · Sora

Hebrew Scale · Heebo

09 - Storybook

Spacing

All spacing derives from an 8-pixel base unit. Every gap, padding, and margin is a multiple of 8 - or of 4 for the half-step.

Radius Tokens

Max content width: 1100 px, centered. No drop shadows anywhere - depth comes from contrast and 1px borders.

10 - Storybook

Motion

Motion is an information device, not a decoration. Hover any tile to test.

Rule: If removing an animation doesn't hurt comprehension, the animation doesn't belong.

11 - Storybook

UI Components

The working library - buttons, badges, cards, inputs, tables, and notifications.

Buttons

Four variants × three sizes. Tico Orange primary; transparent or ghost for everything secondary.

Status Pills

Used in the project plan, agent dashboard, and spec documents. Labels stay in English even on Hebrew pages - they are codes, not copy.

Cards

Base layout unit. 1px border, 12px radius, no shadows. Border lifts to Tico Orange on hover.

Inputs

Minimal. Border on focus lifts to Tico Orange. Errors get a red border and a hint below.

Tables

Dark navy header. Alternating rows. Monospace + teal for technical fields (hex, ID, version).

Notifications

Left-border accent. Four semantic states - info, success, warning, error - mapped to the semantic tokens. "AI processing" is a motion state (see Motion), never a notification colour.

12 - Storybook

Status System

Consistent across the project plan, agent dashboard, and spec documents.

13 - Storybook

Icons

Inline SVG only. 22×22 default, stroke 1.5. Color via currentColor.

14 - Storybook

CSS Tokens Reference

Complete variable list. Imported via brand/odysee-tokens.css on every page.

/* ── odysee-tokens.css · :root (light by default) ── */
:root {
  /* Primary */
  --od-navy:     #1D3D60;  /* primary brand ink */
  --od-orange:   #E5763C;  /* Tico Orange - accent, pupils, CTAs, voice */

  /* Navy scale (deep → light) */
  --od-navy-900: #12273E;
  --od-navy-800: #173352;
  --od-navy-700: #1D3D60;  /* == --od-navy */
  --od-navy-500: #3A5D83;
  --od-navy-300: #8499B3;
  --od-navy-100: #DDE4ED;
  --od-navy-50:  #EEF2F7;

  /* Orange scale */
  --od-orange-900:#A4481D;
  --od-orange-700:#C75D29;
  --od-orange-500:#E5763C;  /* == --od-orange */
  --od-orange-300:#F0A575;
  --od-orange-100:#FBE3D3;
  --od-orange-50:#FDF2EA;

  /* Sand neutrals (warm) */
  --od-sand-50:  #FAF6F0;  /* default light bg */
  --od-sand-100: #F4EFE7;
  --od-sand-200: #E9E0D2;
  --od-sand-300: #D6CAB4;
  --od-sand-400: #B6A78C;

  /* Travel accents */
  --od-teal:     #2F8F93;
  --od-teal-deep:#1C6B6F;
  --od-teal-light:#9CCCCD;
  --od-sun:      #F2C14E;
  --od-sun-light:#F8DD96;

  /* Semantic signals */
  --od-success:  #3F9D6B;
  --od-warning:  #E5A13C;
  --od-error:    #D2553F;

  /* Base */
  --od-white:    #FFFFFF;
  --od-ink:      #1D3D60;

  /* Signature gradient - Sunset */
  --od-gradient-sunset:linear-gradient(90deg, #12273E 0%, #1D3D60 38%, #E5763C 100%);

  /* Typography - two families + mono */
  --od-font-display:'Sora', system-ui, sans-serif;
  --od-font-body:'Sora', system-ui, sans-serif;
  --od-font-hebrew:'Heebo', system-ui, sans-serif;
  --od-font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Spacing - 8pt grid */
  --od-s-1: 4px;   --od-s-2: 8px;   --od-s-3: 12px;
  --od-s-4: 16px;  --od-s-5: 24px;  --od-s-6: 32px;
  --od-s-7: 48px;  --od-s-8: 64px;  --od-s-9: 96px;

  /* Radius */
  --od-r-md:   10px;
  --od-r-lg:   16px;
  --od-r-pill: 999px;

  /* Motion - Tico */
  --od-ease-tico:cubic-bezier(.34, 1.56, .64, 1);
  --od-dur-idle: 4s;
  --od-dur-think:1.5s;

  /* Semantic surface aliases (light = default) */
  --od-bg:         var(--od-sand-50);
  --od-surface:    var(--od-white);
  --od-text:       var(--od-navy-900);
  --od-text-muted: var(--od-navy-500);
  --od-border:     var(--od-sand-200);
}

/* Dark / navy surfaces - site hero, footer, exhibition */
[data-theme="dark"] {
  --od-bg:         var(--od-navy-900);
  --od-surface:    var(--od-navy-800);
  --od-text:       var(--od-sand-50);
  --od-text-muted: var(--od-navy-300);
  --od-border:     var(--od-navy-700);
}

This block mirrors brand/odysee-tokens.css, the single source of truth. The Status System's pill colours reuse the travel accents (teal, sun) together with navy-500, warning, and error as a project-management code - a convention layered on the palette, not separate brand tokens.