Color System Documentation
This document provides a comprehensive overview of all colors used in the AI Korean Translation Library project.
Table of Contents
- Global Color Variables
- Theme Colors
- Component-Specific Colors
- Dark Mode Implementation
- Color Usage by Component
Global Color Variables
Light Mode (Default)
/* Text Colors */
--ifm-font-color-base: #1a1a1a /* Main body text - very dark gray */
--ifm-font-color-secondary: #333333 /* Secondary text - dark gray */
--ifm-heading-color: #000000 /* All headings - pure black */
/* UI Elements */
--ifm-color-secondary: #525252 /* Lighter UI elements */
--ifm-color-secondary-dark: #424242 /* Medium UI elements */
--ifm-color-secondary-darker: #333333 /* Darker UI elements */
--ifm-color-secondary-darkest: #1a1a1a /* Darkest UI elements */
/* Code Highlighting */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1) /* 10% black overlay */
Dark Mode
/* Text Colors */
--ifm-font-color-base: #f0f0f0 /* Main body text - brighter light gray */
--ifm-font-color-secondary: #c8c8c8 /* Secondary text - brighter medium gray */
--ifm-heading-color: #ffffff /* All headings - pure white */
/* UI Elements */
--ifm-color-secondary: #c8c8c8 /* Lighter UI elements */
--ifm-color-secondary-dark: #b0b0b0 /* Medium UI elements */
--ifm-color-secondary-darker: #a0a0a0 /* Darker UI elements */
--ifm-color-secondary-darkest: #909090 /* Darkest UI elements */
/* Code Highlighting */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3) /* 30% black overlay */
Theme Colors
The site features 6 customizable color themes (defined in themes.css):
1. Info Blue (Default)
- Primary:
#2196F3 - Primary variations:
#1976D2,#1565C0,#0D47A1 - Light variations:
#42A5F5,#64B5F6,#90CAF9 - Surface:
#E3F2FD,#F3F9FF - Accent:
#03A9F4
2. Mint
- Primary:
#26A69A - Primary variations:
#00897B,#00796B,#00695C - Light variations:
#4DB6AC,#80CBC4,#B2DFDB - Surface:
#E0F2F1,#F1F8F7 - Accent:
#00BCD4
3. Lavender
- Primary:
#7C4DFF - Primary variations:
#651FFF,#6200EA,#4A148C - Light variations:
#9575CD,#B39DDB,#D1C4E9 - Surface:
#EDE7F6,#F3F0F8 - Accent:
#E040FB
4. Sage
- Primary:
#4CAF50 - Primary variations:
#388E3C,#2E7D32,#1B5E20 - Light variations:
#66BB6A,#81C784,#A5D6A7 - Surface:
#E8F5E9,#F1F8F4 - Accent:
#8BC34A
5. Coral
- Primary:
#FF6B6B - Primary variations:
#EE5A6F,#D64545,#C13232 - Light variations:
#FF8787,#FFA0A0,#FFB8B8 - Surface:
#FFE5E5,#FFF0F0 - Accent:
#FF7043
6. Ocean
- Primary:
#0288D1 - Primary variations:
#0277BD,#01579B,#014A7F - Light variations:
#03A9F4,#29B6F6,#4FC3F7 - Surface:
#E1F5FE,#F0FAFF - Accent:
#00ACC1
Component-Specific Colors
Hero Banner
- Text: Always
white - Background: Uses theme primary color
- Buttons:
- Primary CTA: White background, theme color text
- Secondary CTA: Transparent with white border
- Hover states:
#f5f5f5(primary),rgba(255, 255, 255, 0.1)(secondary)
Footer
- All text:
#ffffff(white) - Background: Dark (handled by Docusaurus)
Navigation
- Light mode:
#1a1a1a(very dark gray) - Dark mode:
#e0e0e0(light gray) - Hover: Theme primary color
CalloutBox Component
Each variant has specific colors for light/dark modes:
| Variant | Light Background | Dark Background | Nickname |
|---|---|---|---|
| default | #f5f5fa | #3d3d42 | Heather |
| tip | #e8f4fd | #1e3a5f | Sky |
| info | #e1f5fe | #1565C0 | Ocean |
| warning | #fff3e0 | #f57c00 | Sunset |
| purple | #e6e1f5 | #5e4b8c | Amethyst |
| mint | #c3e9d8 | #2e7d59 | Jade |
| peach | #f5d5c8 | #bf6952 | Salmon |
| lavender | #e8e3f5 | #6b5b95 | - |
| sage | #d4e8dc | #4a6b5d | - |
| coral | #ffd4cc | #d4756b | - |
| sand | #f5e6d3 | #5a5348 | - |
Topics Section Cards
- Card titles:
var(--ifm-heading-color) - Descriptions:
var(--ifm-color-secondary-darker) - Counts:
var(--ifm-color-secondary) - NEW badge:
#FF5722background with white text
Dark Mode Implementation
Forced Overrides
These elements use !important to ensure visibility in dark mode:
/* Documentation headings */
[data-theme='dark'] article h1,
[data-theme='dark'] article h2,
[data-theme='dark'] article h3,
[data-theme='dark'] article h4,
[data-theme='dark'] article h5,
[data-theme='dark'] article h6 {
color: #ffffff !important;
}
Component Dark Mode Colors
- CalloutBox titles:
#ffffff - CalloutBox descriptions:
#f0f0f0 - TopicsSection titles:
#ffffff - TopicsSection descriptions:
#c8c8c8 - HomepageFeatures headings:
#ffffff - HomepageFeatures paragraphs:
#f0f0f0
Color Usage by Component
1. Main Content (article)
- Light Mode: Black headings (#000000), dark gray text (#1a1a1a)
- Dark Mode: White headings (#ffffff), brighter light gray text (#f0f0f0)
2. Navigation (navbar & sidebar)
- Light Mode: Dark gray text (#1a1a1a)
- Dark Mode: Brighter light gray text (#f0f0f0)
- Hover: Theme primary color
3. Hero Section
- Text: Always white
- Background: Theme primary color
- Buttons: White/transparent with theme accents
4. Footer
- All modes: White text (#ffffff) on dark background
5. CalloutBox Components
- Title: Black (light) / White (dark)
- Description: Dark gray (light) / Light gray (dark)
- Background: Variant-specific colors with dark mode alternatives
6. Topics/Features Sections
- Headings: Black (light) / White (dark)
- Descriptions: Dark gray (light) / Medium gray (dark)
- Backgrounds: Theme-aware surface colors
Best Practices
- Always use CSS variables when possible for theme-aware colors
- Test in both light and dark modes when adding new components
- Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Use semantic color names in CSS variables rather than hex values
- Document any new color additions in this file
Color Contrast Guidelines
Light Mode Contrast Ratios
- Black text (#000000) on white background: 21:1 ✓
- Dark gray text (#1a1a1a) on white background: 17.5:1 ✓
- Secondary text (#333333) on white background: 12.6:1 ✓
Dark Mode Contrast Ratios
- White text (#ffffff) on dark background: Varies by component
- Brighter light gray text (#f0f0f0) on dark background: Typically 12:1+ ✓
- Brighter medium gray text (#c8c8c8) on dark background: Typically 9:1+ ✓