Recoxx AI
Brand Guidelines
The visual language and voice of Recoxx AI, built for consistency, clarity, and enterprise confidence.
Primary Wordmark
Brand Overview
Recoxx AI is an enterprise intelligence platform built for retail chains, F&B groups, and logistics operators. Our brand reflects what we build: a system that is precise, forward-looking, and trusted.
Every visual and written expression of the Recoxx brand communicates intelligence without complexity. Modern without being gimmicky, premium without being cold.
Brand Keywords
We are
- Clear and direct
- Technically credible
- Enterprise-grade
We are not
- Buzzword-heavy
- Over-designed
- Vague or generic
We sound like
- A trusted advisor
- A precision instrument
- A calm control room
Logo Usage
On Dark Canvas
On White Background
Icon Mark / Favicon
Clear Space Rule
Maintain a clear space around the logo equal to at least ¼ of the logo height on all sides. Never crowd it with other elements.
Do
- Use on dark canvas (#09090C)
- Use on white/light surfaces
- Maintain clear space
- Use SVG or PNG@2×
- Minimum 32px height
Don't
- Stretch or distort proportions
- Use on busy photographic backgrounds
- Recolour individual elements
- Add drop shadows or effects
- Use below 32px height
Colour Palette
Primary
Brand Primary
#3C3481
rgb(60, 52, 129)
--color-brand-primary
Primary Hover
#342D73
rgb(52, 45, 115)
--color-brand-primary-hover
Primary Light
#4A42A0
rgb(74, 66, 160)
--color-brand-light
Accent (Interactive)
Accent
#7B6EFA
rgb(123, 110, 250)
--color-accent
Accent Hi
#A598F8
rgb(165, 152, 248)
--color-accent-hi
Accent Lo
#3C3481
rgb(60, 52, 129)
--color-accent-lo
Secondary
Sky Blue
#71B2F8
rgb(113, 178, 248)
--color-brand-secondary
Sky Blue Hover
#59A6F2
rgb(89, 166, 242)
--color-brand-secondary-hover
Sky Blue Soft
#A3D7FC
rgb(163, 215, 252)
--color-brand-secondary-soft
Accents
Lavender
#D4B1FB
rgb(212, 177, 251)
--color-brand-lavender
Lavender Soft
#EDE4FD
rgb(237, 228, 253)
--color-brand-lavender-soft
Cyan Blend
#8FD9F0
rgb(143, 217, 240)
--color-brand-cyan
Semantic
Success
#10B981
rgb(16, 185, 129)
--color-ok
Warning
#F59E0B
rgb(245, 158, 11)
--color-warn
Error
#EF4444
rgb(239, 68, 68)
--color-bad
Brand Gradients
Hero Brand Gradient
Primary hero sections, key CTA emphasis.
Indigo to Sky
Charts, progress fills, data visualisations.
Lavender to Indigo
Card highlights, section dividers.
Pastel Subtle
Subtle backgrounds, badges, decorative bands.
Primary surface
Always #09090C (dark) or #FFFFFF (light). Never any other colour for large backgrounds.
Accent sparingly
#7B6EFA is for interactive elements, links, and key highlights only. Not for decoration.
Gradients on key moments
Use brand gradients for hero sections and banners only. Never on body text backgrounds.
Typography
Primary — UI & body
Aa Bb Cc 123
300–700 weight range. All UI, buttons, body copy, and labels.
Inter
Serif — Editorial
Aa Bb Cc 123
400 weight only. Used for emotional/editorial headline emphasis.
DM Serif Display
Mono — Code & metrics
Aa 00 123
400–500 weight. Numeric metrics, code blocks, API references.
JetBrains Mono
Proactive intelligence for every operation.
Recoxx turns passive data into a continuous stream of ranked, actionable recommendations, delivered before the decision window closes.
v2.0 · Enterprise · SG-HQ-001 · +12.4% YoY
Iconography
Recoxx uses the Lucide icon library (v1+). Icons are always rendered at 16px (sm), 20px (md), or 24px (lg). Use stroke-width="1.5" for all icons.
Analytics
Alerts
AI / Automation
Enterprise
Processing
Global / Multi-location
Dashboard / Control Tower
Platform layers
Integrations
Security / Compliance
Inventory
Configuration
Retail
Logistics
Growth / Forecasting
F&B
Speed / Real-time
CTA arrows
Success states
Navigation
Size system
16px in dense UI, 20px in cards and lists, 24px in hero sections and navigation.
Colour rule
Icons inherit text colour (text-ink-2 resting, text-accent on hover/active). Semantic icons use status colours.
Stroke weight
Always strokeWidth={1.5}. Never fill icons in line contexts. Filled variants only for status indicators.
UI Elements
Buttons
Badges
Cards
Standard Card
bg-panel + border-muted
Used for feature highlights and data-rich containers.
Elevated Card
bg-surface + shadow-elevated
Used for feature highlights and data-rich containers.
Accent Card
bg-accent-surface + border-accent/30
Used for feature highlights and data-rich containers.
Imagery Style
Recoxx imagery is clean, purposeful, and enterprise-professional. It should reinforce trust and precision, never decorative noise.
Photography
- Dark or neutral backgrounds (black, deep navy, or white)
- Professional headshots: business attire, clean composition
- Operations context: dashboards, warehouses, restaurant ops, boardrooms
- No stock-photo clichés (handshakes, lightbulbs, generic 'team' photos)
- Brand gradient overlay optional at 20–30% for hero images
Illustration & UI Panels
- Prefer animated SVG/CSS visuals over static raster illustrations
- Brand colours only: accent indigo, sky blue, lavender, brand primary
- Geometric and data-led: dashboards, charts, process flows, KPI panels
- Motion: Framer Motion with viewport triggers and staggered reveals
- Decorative elements: pointer-events-none, aria-hidden
Dark context
Primary product surface
Gradient hero
Hero banners & feature moments
Light surface
Secondary surfaces (light mode)
Design Principles
Nine principles that govern every interface, component, and experience decision in the Recoxx design system.
Semantic colour
All colours use CSS variables. Never hardcode raw hex in components. Use design tokens for theme consistency.
Typography clarity
Headlines use Inter semibold. Serif (DM Serif Display) is reserved for editorial emphasis. Mono for code and metrics.
Surface elevation
4 levels: Canvas → Surface → Panel → Overlay. Each level adds subtle border and shadow depth, never colour.
Motion first
Every entrance is viewport-triggered with Framer Motion. Use staggered reveals, never simultaneous pop-ins.
Grid discipline
6-column primary grid (Stripe-style). Components span 1–6 cols explicitly. No arbitrary widths.
Spacing with tokens
Use section spacing tokens: sm (4rem), md (6rem), lg (8rem), xl (10rem). Never arbitrary margin values.
Accessible contrast
All text at minimum WCAG AA (4.5:1). Interactive elements have focus rings. Decorative elements are aria-hidden.
Content-first
Visuals support content, not the other way around. No decorative complexity that distracts from the message.
Photography style
Dark or neutral backgrounds. Professional business context. Clean composition. Brand gradient overlays for consistency.
Brand Voice
“Recoxx closes the gap between your data and your next move, automatically.”
“Your inventory signal drops 48 hours before stockout. We surface it first.”
“One engine. Every location. Continuous intelligence.”
“Less data, more decisions.”
“Built for operators who move fast and can't afford to be wrong.”
Write this
- Surface the signal before the meeting.
- Your ops data, connected and ranked by impact.
- Recoxx detects the anomaly. You make the call.
- From signed contract to live AI in 21 days.
Not this
- Leverage synergistic AI-powered insights!
- Our cutting-edge ML solution drives ROI.
- Unlock actionable next-gen data intelligence.
- Transformative holistic platform ecosystem.
Brand in Use
Intelligence layer for enterprise ops.
Brand on dark: canvas #09090C, accent indigo buttons, muted borders.
Intelligence layer for enterprise ops.
Brand on light: surface #F3F5F9, indigo text, accent interactive elements.
Brand Hero Gradient
Lavender · Indigo · Sky Blue
Use for hero sections and feature banners only. Never for body text backgrounds or repeated decorative use.