Brand Guidelines

Customer-consented, SKU-level purchase data infrastructure.

ariodata.com v2.2 June 2026
Color

Color Palette

A restrained palette built around one strong blue. The blue carries all accent duties: dots, links, buttons, and highlights.

Primary
Blue
#2B5CFF
Accent, dots, buttons, links
Blue Deep
#1A4AE6
Hover states
Blue Pale
#EEF2FF
Light backgrounds, tags
Neutrals
Ink
#111111
Body text, logo letterforms
Ink Soft
#2A2A2A
Secondary text
Ink Muted
#555555
Descriptions, captions
Ink Faint
#777777
Metadata, labels
Paper
#F7F7F5
Page and card backgrounds
Rule
#E0E0E0
Dividers, borders
Dark
#0A0A0A
Dark backgrounds, nav
Surfaces & Gradients

Surfaces & Gradients

Soft, blue-led gradients give Ario depth without going sterile. Blue (#2B5CFF) is the anchor — gradients lean bluish, with violet as a secondary lift and peach used only sparingly. They live on section backdrops, card panels, and product “stages,” never under dense text. A hero gradient may bleed past its section divider and fade to white down the page, rather than stopping at a hard rule. The restrained typographic base stays; gradients add life, not clutter, and never sit on full-dark sections.

Soft gradient family — blue-led, violet & peach as accents
Blue tint
#EBF1FF → #CBDDFF
Cards, panels (cool)
Violet tint
#F1ECFB → #F4E6EF
Cards, panels (warm-violet)
Hero backdrop (fade)
#CADCFF → transparent
Page top — bleeds past divider, fades to white over ~90vh
Fresh stage
#F6ECD2 · #DFE3F7 · #CEDCFB
Product visual stages
CTA panel
#D2E1FF · #E3E7FC
Closing CTA frame (blue-led)
Accent text
#2B5CFF → #7C4DFF → #B05CFF
One hero accent word (clip:text)
Pattern — framed window card
A white window on a gradient panel.

Traffic-light dots, left-aligned content, dark pill + outline buttons. Used for the closing CTA and product mocks.

Do

Keep gradients soft, light, and blue-led so dark text stays legible and the brand reads as Ario blue. Use them on panels, stages, and section backdrops. Let a hero backdrop bleed past its divider and fade to white down the page instead of stopping at a hard rule. Limit gradient text to a single hero accent word. Subtle motion only (slow gradient shimmer, scroll-driven reveals).

Don't

No gradients behind dense body copy. No full-dark sections on the public site. No more than one accent-text gradient per view. No eyebrows, numbered index labels, italics, or bold-for-emphasis. Gradients are the only “decoration.”

Typography

Typography

Two typefaces, each with a clear role. Satoshi for everything verbal, JetBrains Mono for labels and code.

Satoshi
Headings · Body · 400-900 · Fontshare
900 — Black
Customer-consented purchase data infrastructure
700 — Bold
Cross-retailer visibility into real consumer behavior
600 — Semi-Bold
See what consumers actually buy
400 — Regular
Ario provides customer-consented, SKU-level purchase data across major retailers. Every transaction is real, permissioned, and resolved to the product level.
JetBrains Mono
Labels · Code · 400-500 · Uppercase
500 — Medium
Purchase Intelligence · SKU-Level · Cross-Retailer
400 — Regular
const retailers = ["amazon", "kroger", "instacart", "target"];
Voice

Voice & Tone

Ario speaks plainly about what it does. No hype, no hedging. The data speaks for itself.

"We don't predict — we show you what already happened."
Vocabulary
customer-consented
SKU-level
cross-retailer
purchase intelligence
ground truth
revealed preference
consent-based
transaction-level