Skip to content

Brand Story

A calm, precise interface for humans and AI working together.

Brand Essence

SageOx exists at the intersection of human intuition and AI capability. The design system reflects this partnership: grounded enough to feel trustworthy, warm enough to feel human, precise enough to feel technical.

Core Adjectives

Adjective Expression
Calm Sage-dominant surfaces, generous whitespace, no visual noise
Trustworthy Consistent patterns, predictable interactions, clear hierarchy
Technical Precise typography, tabular numerals, structured data
Human Warm cream surfaces, organic textures, breathing room

The Palette Story

Sage    →  The Brand Hue     →  Foundation + action; one hue, everywhere it matters
Silt    →  The Structure     →  Warm mid-grey text and borders that anchor without overwhelming
Dust    →  The Light Paper   →  Warm cream surfaces for light mode
Crater  →  The Green-Black   →  Deep surfaces for dark mode

Why These Colors?

Sage carries the brand alone — primary and action. It was chosen over pure neutrals (gray, slate) to bring organic calm: green tones are physiologically restful and suggest growth without being playful. We run one brand hue, not two competing accents — a single Sage reads more confident than a brand split between Sage and a premium second color. The premium-accent role now belongs to the functional Warning / earthed-gold ramp (#c6a23c).

Dust is the light surface — warm cream paper (#f7f5f2→#e5e2df), never stark white. True white feels clinical; cream feels like something made, not generated.

Crater is the dark surface — green-black (#111411→#0b0d0b), never pure black. True black (#000) feels harsh and digital; a green-cast near-black carries the brand into dark mode, with off-white text (dust-100 #f4f2ef) for warmth.

Visual Hierarchy

                    ┌─────────────────────────────────────┐
                    │                                     │
                    │       Sage: The restful default     │
                    │                                     │
    ┌───────────────┼─────────────────────────────────────┼───────────────┐
    │               │                                     │               │
    │     Silt      │     ● Sage fill: The action point   │     Silt      │
    │   Structure   │                                     │   Grounding   │
    │               │                                     │               │
    └───────────────┴─────────────────────────────────────┴───────────────┘

The Sage action fill never dominates. It appears at tension points where user action is expected: primary CTAs (white on deep sage-700 in light mode, a dark label on sage-400 in dark), active states, focus indicators.

Typography Philosophy

Voice Font Use
Human System sans (Inter-like) Body text, explanations, conversation
System Monospace Code, data, technical output
Brand Space Grotesk Bold Logo, never in UI

We use system fonts for performance and familiarity. The interface should feel like a native tool, not a branded experience.

Motion Philosophy

"Subtle fade + 2-4px Y-translate, no bouncy transitions"

Tier Duration Use
Instant 50ms State changes (active, checked)
Fast 150ms Hover, focus
Normal 250ms Panels, transitions
Slow 350ms Modals, complex animations

Timing: ease-out for exits (quick start, gentle landing). ease-spring reserved for moments of delight (rare).

Information Density

SageOx interfaces trend toward higher density:

  • Compact tables over card grids
  • Inline actions over dropdown menus
  • Visible data over collapsed accordions

This respects users' expertise. Power users scan; they don't read.