oculus-branding-clarivate

Oculus Branding - Clarivate Theme

Preparing Oculus for public deployment with environment-variable-controlled theming.

Goals

Make theming controllable via environment variables
Create default Oculus theme
Create Clarivate branded theme
Document theme configuration

Clarivate Brand Guidelines

Brand Promise: "Think Forward"

Tone of Voice: Intelligent, Confident, Approachable

Color Palette

Color	Hex	Usage
Mint	`#7effa8`	Primary accent, success states
Warm Purple	`#b175e1`	Secondary accent, links
Light Purple	`#c9a0f0`	Softer links, readable text
Deep Purple	`#7c4ddb`	Emphasis, buttons
Pink-Purple	`#e090c0`	Tertiary accent (Dracula-inspired)
Citrus	`#f0d050`	Warnings, highlights (toned)
Deep Charcoal	`#1a1a1f`	Dark theme background
White	`#ffffff`	Light theme background
Pastel Purple	`#faf5ff`	Light theme secondary bg

Typography

Primary Font: Albert Sans (Google Fonts substitute for proprietary "Regular Clarivate")
Font Weights: 300 (light), 400 (regular), 600 (semibold), 700 (bold)
Google Fonts Spec: Albert+Sans:wght@300;400;600;700

Theme Configuration

Clarivate Dark Theme

Inspired by Dracula's effective use of purple/green, with softer backgrounds.

'clarivate-dark': {
    name: 'Clarivate Dark',
    brand: 'clarivate',
    colors: {
        '--nord0': '#1a1a1f',  // Deep charcoal - main background
        '--nord1': '#252528',  // Charcoal - secondary bg
        '--nord2': '#3a3a40',  // Elevated surfaces
        '--nord3': '#5f6368',  // Borders/muted elements
        '--nord4': '#a0a4a8',  // Muted text
        '--nord5': '#e0e2e4',  // Primary text
        '--nord6': '#ffffff',  // Headings
        '--nord7': '#7effa8',  // Bright mint - primary accent
        '--nord8': '#b175e1',  // Warm purple - secondary accent
        '--nord9': '#c9a0f0',  // Light purple - links
        '--nord10': '#7c4ddb', // Medium purple - emphasis
        '--nord11': '#ff6b6b', // Red - errors
        '--nord12': '#f0d050', // Toned citrus - warnings
        '--nord13': '#f0d050', // Toned citrus - highlights
        '--nord14': '#7effa8', // Bright mint - success
        '--nord15': '#e090c0'  // Pink-purple - accent
    }
}

Environment Variables

STUFFY_BRAND=clarivate
STUFFY_BRAND_NAME=Clarivate
STUFFY_LOGO_URL=/assets/logos/clarivate-white.svg
STUFFY_DEFAULT_THEME=clarivate-dark
STUFFY_FONT_FAMILY='Albert Sans', 'Arial', sans-serif
STUFFY_GOOGLE_FONTS=Albert+Sans:wght@300;400;600;700

Logo Assets

Located in stuffy/public/assets/logos/:

clarivate-white.svg - For dark backgrounds
clarivate-black.svg - For light backgrounds
clarivate-color.svg - Full color version

Implementation Notes

Files Modified

File	Changes
`stuffy/public/vendor/components/core/theme-manager.js`	Added `clarivate-dark` and `clarivate-light` themes, branding config support
`stuffy/stuffy-server.js`	Added `/api/branding` endpoint
`stuffy/.env.example`	Added branding configuration section
`stuffy/public/assets/logos/`	Added Clarivate logo SVGs

Design Decisions

Softer backgrounds - Changed from pure black (#000000) to deep charcoal (#1a1a1f) for reduced eye strain
Accent variety - Used purple on --nord8 instead of doubling mint, inspired by Dracula theme
Readable links - Light purple (#c9a0f0) is softer than warm purple for better readability
Pink-purple accent - Added #e090c0 for --nord15 to add visual interest (Dracula-inspired)
Toned citrus - Reduced yellow intensity to #f0d050 to be less harsh

Related Case

Detective Case: task-fd9ecb31-49e5-4366-b43d-4366afa896f1 (The Case of the Branded Oculus)