claude-os/docs/design-guide.md

Claude OS Design Guide: Enhanced High-Contrast Palette

Concept

A dynamic, modern, and high-tech aesthetic, emphasizing extreme clarity and energetic innovation. The colors evoke digital craftsmanship and cutting-edge technology, with a deliberate focus on high contrast to ensure visual impact and accessibility.

Primary Color Palette

Here are the core colors that define the Claude OS brand, designed for maximum brightness and contrast:

1. Deep Night (Background)

   • Hex: #0A0E1A
   • RGB: (10, 14, 26)
   • Usage: The foundational dark background color. This deep, almost black, blue-grey provides a dramatic canvas, making the vibrant foreground elements pop with intensity. Use for primary backgrounds, dark mode interfaces, and large informational sections.

2. Electric Teal (Primary Accent)

   • Hex: #00FFFF (Pure Cyan)
   • RGB: (0, 255, 255)
   • Usage: The most prominent accent color. This intensely bright and pure cyan is used for key interactive elements, primary iconography, active states, glowing outlines, circuit patterns, and significant graphical components. Its high luminescence creates a striking contrast against "Deep Night."

3. Blaze Orange (Secondary Accent)

   • Hex: #FF8C00 (Dark Orange, but used at full saturation for brilliance)
   • RGB: (255, 140, 0)
   • Usage: A vibrant, saturated orange that provides a warm and energetic counterpoint to "Electric Teal." Use for call-to-action buttons, warning indicators, secondary highlights, "spark" effects, important data points, and to draw immediate attention.

4. Pure White (Text & UI)

   • Hex: #FFFFFF
   • RGB: (255, 255, 255)
   • Usage: The default color for primary text, headings, essential labels, and clean UI elements. Offers the highest possible readability and contrast against "Deep Night."

Secondary/Support Palette (Optional but Recommended)

These colors can be used for supplementary elements, gradients, or to add subtle depth without detracting from the primary palette's vibrancy.

1. Cool Blue (Subtle Glow/Gradient)

   • Hex: #4D94FF
   • RGB: (77, 148, 255)
   • Usage: For background gradients, subtle glowing effects, or to create depth behind "Electric Teal" elements. Use sparingly to enhance rather than compete with the primary accents.

2. Light Grey (Subtle Text/Dividers)

   • Hex: #C0C0C0
   • RGB: (192, 192, 192)
   • Usage: For less critical secondary text, disabled states, subtle dividers, borders, or backgrounds for minor information sections. Provides a softer, yet still clear, contrast to "Deep Night."

Accessibility & Contrast Ratios

The primary palette is engineered for optimal contrast to ensure excellent readability and accessibility.

• Deep Night vs. Electric Teal: Excellent contrast (WCAG AAA compliant).
• Deep Night vs. Blaze Orange: Excellent contrast (WCAG AAA compliant).
• Deep Night vs. Pure White: Maximum contrast (WCAG AAA compliant), ideal for primary text.

Usage Guidelines

• Backgrounds: Exclusively use "Deep Night" as the primary canvas to ensure maximum impact of the accent colors.
• Primary Elements & Interactivity: "Electric Teal" should highlight key interactive components, active states, and core branding visuals.
• Emphasis & Alerts: "Blaze Orange" is reserved for drawing immediate attention, warnings, confirmations, or energetic visual cues.
• Text Hierarchy: "Pure White" for main content and headings. "Light Grey" for supplementary information or less emphasized text.
• Glows & Effects: Embrace the vibrancy! Utilize subtle, expansive glows and light trails in "Electric Teal" and "Blaze Orange" to amplify the high-tech, energetic feel, similar to neon signage.
• Gradients: When used, gradients should smoothly transition between "Electric Teal" and "Cool Blue," or "Blaze Orange" for dramatic highlights, always respecting the high contrast against the "Deep Night" background.
• Iconography: Icons should primarily be "Electric Teal" or "Pure White" against "Deep Night," with "Blaze Orange" for special status icons.

---