Oliver-ai-bot_2.0/docs/OLIVER_BRAND_ADAPTATION.md

OLIVER Brand Adaptation for AI Hub Nexus

Source: OLIVER Brand Guidelines 2023

Brand Colors (Official)

Name	Hex	RGB	Usage
Black	#1A1A1A	26, 26, 26	Primary, backgrounds
White	#FFFFFF	255, 255, 255	Primary, backgrounds
Gold	#FFCB05	255, 203, 5	Main accent
Orange	#FF5C00	255, 92, 0	Secondary accent
Black 5%	~#F2F2F2		Subtle backgrounds
Black 10%	~#E6E6E6		Borders, dividers

Graph-only Colors

Name	Hex
Gold	#FFCB05
Orange	#FF5C00
Graph purple	#D960FF
Graph sky	#5DF5EA
Graph blue	#0487B6

Typography (Official)

• Primary font: Montserrat (Google Fonts, weights 100-900)
• System fallback: Arial Regular and Bold
• Left-align type wherever possible
• Avoid writing entire words in uppercase

Official Design Rules

• Square corners on diagrams
• Use gold and white as most prominent colors, followed by black
• Use icons where sensible
• Don't add boxes within boxes
• Don't use rounded corners on diagrams
• Graphs always on black background (gold/orange not accessible on white)
• Logo: "OLIVER" always uppercase, monochrome only

---

Adapted Design System for AI Hub Nexus

Approach

Не слепое копирование гайдлайнов, а адаптация под UI web-приложения. Бренд OLIVER узнаваем, но интерфейс остаётся удобным.

Color Tokens — Light Mode

:root {
  /* Backgrounds */
  --background: #FFFFFF;
  --card: #FFFFFF;
  --muted: #F2F2F2;          /* Black 5% */

  /* Text */
  --foreground: #1A1A1A;     /* OLIVER Black */
  --muted-foreground: #737373;

  /* Primary — Gold for main actions */
  --primary: #1A1A1A;         /* Buttons: black bg, white text */
  --primary-foreground: #FFFFFF;

  /* Accent — Gold for highlights, active states */
  --accent: #FFCB05;
  --accent-foreground: #1A1A1A;

  /* Secondary — subtle backgrounds */
  --secondary: #F2F2F2;
  --secondary-foreground: #1A1A1A;

  /* Destructive */
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;

  /* Borders */
  --border: #E6E6E6;          /* Black 10% */
  --input: #E6E6E6;
  --ring: #FFCB05;             /* Gold focus ring */

  /* Brand-specific */
  --brand-gold: #FFCB05;
  --brand-orange: #FF5C00;
  --brand-black: #1A1A1A;
}

Color Tokens — Dark Mode (primary mode for this app)

.dark {
  /* Backgrounds */
  --background: #1A1A1A;      /* OLIVER Black */
  --card: #242424;
  --muted: #2E2E2E;

  /* Text */
  --foreground: #FFFFFF;
  --muted-foreground: #A3A3A3;

  /* Primary — Gold buttons on dark */
  --primary: #FFCB05;
  --primary-foreground: #1A1A1A;

  /* Accent — Orange for secondary highlights */
  --accent: #FF5C00;
  --accent-foreground: #FFFFFF;

  /* Secondary */
  --secondary: #2E2E2E;
  --secondary-foreground: #FFFFFF;

  /* Destructive */
  --destructive: #991B1B;
  --destructive-foreground: #FFFFFF;

  /* Borders */
  --border: #333333;
  --input: #333333;
  --ring: #FFCB05;

  /* Brand-specific */
  --brand-gold: #FFCB05;
  --brand-orange: #FF5C00;
  --brand-black: #1A1A1A;
}

Chart Colors (both modes, on dark card backgrounds)

--chart-1: #FFCB05;  /* Gold */
--chart-2: #FF5C00;  /* Orange */
--chart-3: #D960FF;  /* Graph purple */
--chart-4: #5DF5EA;  /* Graph sky */
--chart-5: #0487B6;  /* Graph blue */

Typography

/* Replace Geist with Montserrat */
font-family: 'Montserrat', Arial, sans-serif;

/* Weight mapping:
   - Headings: 700 (Bold) or 800 (ExtraBold)
   - Body: 400 (Regular)
   - Labels/UI: 500 (Medium) or 600 (SemiBold)
   - Subtle/muted: 400 (Regular)
*/

Border Radius

/* Soft adaptation — not 0, not 12px */
--radius: 0.25rem;  /* 4px — subtle, professional */

/* This respects "square corners" spirit from brand guidelines
   while keeping UI elements (buttons, inputs, cards) usable */

Key Design Decisions

1. Dark mode as primary — Gold/Orange on black looks premium and matches brand identity
2. Buttons: Black bg on light mode, Gold bg on dark mode
3. Focus rings: Gold (#FFCB05) instead of blue
4. Links/active states: Gold on dark, Black on light
5. Mild border-radius (4px) — guidelines say "square corners" for diagrams, not all UI
6. Sidebar: Dark (#1A1A1A) in both modes for brand consistency
7. Logo: Replace lightning bolt with OLIVER wordmark + icon (circle + wedge)
8. Gradients: Remove blue→purple gradient, use solid Gold or Gold→Orange sparingly

Text Color Rules (from brand guidelines)

• White text on black: OK
• Gold text on black: OK
• Black text on white: OK
• Orange text on white: only at 15+pt
• Black text on gold: OK
• NO white text on gold
• NO gold text on white background

Files to Modify

1. frontend/src/app/globals.css — CSS variables
2. frontend/src/app/layout.tsx — Font (Geist → Montserrat via next/font/google)
3. frontend/tailwind.config.ts — radius, extended colors
4. Components with gradients/brand colors — search for text-gradient, brand-gradient
5. Sidebar/header components — logo replacement