A bold, trustworthy ERP brand
VR-Inventa pairs a confident orange with a clean Bondi Blue and grounded dark blue. Orange leads action, blue carries information, and dark blue anchors structure. Use them consistently across product, marketing and partner surfaces.
Palette
Primary · CTAs, focus, brand moments
- HEX
- #F04923
- Token
- --primary
Secondary · Links, info, data viz
- HEX
- #058BBE
- Token
- --brand-blue
Ink · Headlines, dark surfaces, footer
- HEX
- #1C2B59
- Token
- --brand-ink
Usage rules
- • Use Orange for the single primary CTA per view.
- • Use Bondi Blue for links, info badges and data viz.
- • Use Dark Blue for headlines, footers and hero surfaces.
- • Pull colors from CSS tokens in
styles.css. - • Maintain ≥ 4.5:1 contrast for body text (WCAG AA).
- • Don't hardcode hex values in components — use tokens.
- • Don't place orange text on Bondi Blue (low contrast).
- • Don't tint orange with gradients to non-brand hues.
- • Don't use more than one primary CTA in the same view.
- • Don't recolor the logo with off-brand colors.
Accessibility & contrast
Target WCAG AA (4.5:1 for body, 3:1 for large/UI). Recommended pairings below have been measured against a white and dark-blue background. Avoid small Bondi Blue text on white — use it for large headings or icon accents only.
Rule of thumb: Orange and Bondi Blue need 18px+ bold or larger on white. For body copy on light backgrounds, use Dark Blue.
In application
Run your business on one ERP.
Use blue badges for neutral info, orange for action.
Engineering tokens
/* src/styles.css */ --primary: oklch(0.654 0.213 36); /* #F04923 Orange */ --brand-blue: oklch(0.612 0.122 232); /* #058BBE Bondi Blue */ --brand-ink: oklch(0.265 0.082 268); /* #1C2B59 Dark Blue */ /* Tailwind usage */ className="bg-primary text-primary-foreground" className="text-brand-blue" className="bg-brand-ink text-white"