# OurDigital Brand Color Palette

Complete color system for OurDigital visual identity.

## Primary Colors

| Token | Name | HEX | RGB | Usage |
|-------|------|-----|-----|-------|
| `--d-black` | D.Black | #221814 | rgb(34, 24, 20) | Footer, dark backgrounds |
| `--d-olive` | D.Olive | #cedc00 | rgb(206, 220, 0) | Primary accent, CTA buttons |
| `--d-green` | D.Green | #287379 | rgb(40, 115, 121) | Links hover, secondary accent |
| `--d-blue` | D.Blue | #0075c0 | rgb(0, 117, 192) | Links |
| `--d-beige` | D.Beige | #f2f2de | rgb(242, 242, 222) | Light text on dark backgrounds |
| `--d-gray` | D.Gray | #ebebeb | rgb(235, 235, 235) | Alt backgrounds |
| `--d-border` | Border | #cdcac8 | rgb(205, 202, 200) | Border lines |

## D.HIVE Colors (Secondary)

| Token | Name | HEX | Usage |
|-------|------|-----|-------|
| `--d-hive-yellow` | D.HIVE Yellow | #ffe100 | Highlight accent |
| `--d-hive-orange` | D.HIVE Orange | #f1a615 | Warning, attention |
| `--d-hive-skyblue` | D.HIVE Sky Blue | #21a8bc | Info, secondary links |

## Text Colors

| Token | HEX | Usage |
|-------|-----|-------|
| `--color-text-black` | #000000 | Primary text |
| `--color-text-gray` | #7a7a7b | Secondary/dimmed text |
| `--color-text-white` | #ffffff | Text on dark backgrounds |

## Semantic Mappings

| Token | Maps To | Usage |
|-------|---------|-------|
| `--color-accent` | #cedc00 (D.Olive) | Primary accent |
| `--color-dark` | #221814 (D.Black) | Dark elements |
| `--color-text-main` | #000000 | Main text |
| `--color-text-dim` | #7a7a7b | Dim text |
| `--color-link` | #0075c0 (D.Blue) | Links |
| `--color-link-hover` | #287379 (D.Green) | Link hover |
| `--color-bg` | #ffffff | Background |
| `--color-bg-alt` | #ebebeb (D.Gray) | Alt background |
| `--color-border` | #cdcac8 | Borders |

## CSS Variables

```css
:root {
  /* D.intelligence Primary Colors */
  --d-black: #221814;
  --d-olive: #cedc00;
  --d-green: #287379;
  --d-blue: #0075c0;
  --d-beige: #f2f2de;
  --d-gray: #ebebeb;
  --d-border: #cdcac8;

  /* D.HIVE Colors */
  --d-hive-yellow: #ffe100;
  --d-hive-orange: #f1a615;
  --d-hive-skyblue: #21a8bc;

  /* Text Colors */
  --color-text-black: #000000;
  --color-text-gray: #7a7a7b;
  --color-text-white: #ffffff;

  /* Semantic Mappings */
  --color-accent: #cedc00;
  --color-dark: #221814;
  --color-text-main: #000000;
  --color-text-dim: #7a7a7b;
  --color-link: #0075c0;
  --color-link-hover: #287379;
  --color-bg: #ffffff;
  --color-bg-alt: #ebebeb;
  --color-border: #cdcac8;
}
```

## Typography

| Purpose | Font Family |
|---------|-------------|
| Korean | Noto Sans KR |
| English Primary | Noto Sans |
| English Emphasis | Inter |
| Annotations | Helvetica Neue |

### Font Stack

```css
--font-primary: "Inter", "Noto Sans KR", system-ui, -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--text-size-body: 16px;
```

## Grid System

- **Columns**: 12-column responsive layout
- **Breakpoints**: Standard responsive breakpoints

## Color Usage by Component

| Component | Background | Text | Accent |
|-----------|------------|------|--------|
| Header | White | D.Black | D.Olive |
| Footer | D.Black | D.Beige | D.Olive |
| CTA Button | D.Olive | D.Black | - |
| Links | - | D.Blue | D.Green (hover) |
| Cards | White/D.Gray | D.Black | D.Olive |
| Forms | White | D.Black | D.Blue (focus) |

## Accessibility Notes

- Ensure sufficient contrast ratios (WCAG 2.1 AA minimum)
- D.Olive (#cedc00) on D.Black (#221814) passes contrast
- D.Blue (#0075c0) on white passes contrast for links
- Use D.Black for primary text to ensure readability
