Tigris — design system & UI screens

Data · 1 screen · 11 sections · https://www.tigrisdata.com/

Dark landing; a gradient headline 'Bottomless object storage with zero egress fees', a Tigris Shell terminal, availability stats (99.99%, 1M+ buckets) and a logo wall (Fly.io, Railway, Beam).

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/tigris.

Decoded design system

Tigris's decoded design system: background #0A171E, text #ECECEE, accent #62FEB5, link #0A171E, primary #0B181E; type scale h1 70px / h2 40px / body 18px; 4px spacing base; 8px base radius. The single interactive/action color is #62FEB5 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0A171E`
surface	`#17232A`
border	`#2B363D`
text	`#ECECEE`
text_muted	`#969B9E`
primary	`#0B181E`
accent	`#62FEB5`
link	`#0A171E`
secondary	`#62FEB5`
button_bg	`#62FEB5`
button_text	`#050C0F`

Using these colors

Action color #62FEB5 — the single interactive color; only on things you click or must notice, never large fills.
primary #0B181E, link #0A171E are visually the same color (Δ2) — treat as one role (the action color).
accent, secondary, button_bg are all #62FEB5 — one role, not several (the action color).
accent #62FEB5 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

Heading: Geist Mono
Body: Geist Mono
Mono: Geist Mono
h1: 70px
h2: 40px
body: 18px

Spacing

base unit: 4px
scale: 3px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 20px, 24px

Radii

base: 8px
button: 12px

Shadows (elevation)

card: rgba(98, 254, 181, 0.45) 0px 0px 10px -2px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 3000ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease-in-out
animated properties: border-color, color, background-color, outline-color

Native design tokens

Token	Value
`--color-border-light`	`#2a404b`
`--color-bg-primary`	`#0a171e`
`--color-bg-card`	`#142229`
`--color-text-secondary`	`#8fa3b0`
`--color-gray-500`	`oklch(55.1% .027 264.364)`
`--color-accent-green`	`#62feb5`
`--color-red-400`	`oklch(70.4% .191 22.216)`
`--color-white`	`#fff`
`--color-red-500`	`oklch(63.7% .237 25.331)`
`--color-accent-green-dark`	`#050c0f`

…and 59 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1400px
nav: 79px fixed, backdrop blur(12px)

Motion choreography (measured)

Load order: span.gradient-text×4 → div.cursor-glow → div.animate-hero-fade-in → div.flex → div.relative → div.gradient-text

Scroll reveal: 7 elements rest at opacity 0, animate in over 0.6s cubic-bezier(0, 0, 0.2, 1).

Stagger: line ×4 — 350ms apart.

Stagger: g ×4 — 350ms apart.

Responsive (measured)

breakpoints: 400px · 500px · 640px · 750px · 768px · 1024px
mobile (390px): hero 32px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Tigris - The Storage Cloud for Devs & Agents