# Kakaoenterprise Design System

> Achromatic precision meets high-contrast utility, anchored by the technical weight of Gilroy and KakaoBig on a sterile light-gray canvas.

**Source:** https://kakaoenterprise.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kakaoenterprise utilizes a strict monochrome foundation where #191919 (near-black) and #ffffff (pure white) define the primary interactive and structural boundaries. The system is built on a light-gray floor (#f8f8f8), creating a "dev-tools" atmosphere that prioritizes clarity over decoration. Typography is split between the geometric Gilroy for high-impact display and KakaoBig for dense, readable body content. UI elements favor extreme corner radii (97px or 50% "circle" buttons) or absolute sharp edges (0px), avoiding mid-range softening.

## Signature DNA
1. **Achromatic High-Contrast** (The interface is strictly #191919 and #ffffff on a #f8f8f8 canvas; saturated accents like #ffb500 are reserved for rare text highlights or sub-brand signals.)
2. **Extreme Radii** (Interactive elements use either 0px sharp corners for structural containers or 97px/pill shapes for action triggers and tags, creating a distinct "technical vs. organic" contrast.)
3. **Dual-Type Architecture** (Gilroy 600 weight provides the geometric display voice, while KakaoBig handles the semantic hierarchy and dense information sets.)

## Family Map
*No sub-brands captured in current topology.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#191919` | Primary text, button backgrounds, borders | 113 | 0.8 | Computed Style |
| `{color.canvas}` | `#f8f8f8` | Primary page background | 54 | 0.8 | Computed Style |
| `{color.paper}` | `#ffffff` | Surface backgrounds, button text | 26 | 0.8 | Computed Style |
| `{color.ash}` | `#666666` | Secondary body text | 97 | 0.8 | Computed Style |
| `{color.smoke}` | `#eeeeee` | Subtle borders, secondary button backgrounds | 11 | 0.8 | Computed Style |
| `{color.void}` | `#000000` | Deep surface backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.gold}` | `#ffb500` | Text accent (decorative_only) | 3 | 0.6 | Computed Style |
| `{color.silver}` | `#aaaaaa` | Tertiary text | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Gilroy | 400, 600 | Display, Headings | Spartan MB | Licensed |
| KakaoBig | 400, 600, 700 | Body, UI Labels | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 53px | 63.05px | normal | 600 | Hero headlines | `b` |
| `{type.h3}` | 20px | 31.06px | normal | 600 | List titles | `h3.ke-isotope-list__title` |
| `{type.body-lg}` | 19px | 29.58px | normal | 600 | Lead paragraphs | `p` |
| `{type.body-md}` | 18px | 29.07px | normal | 400 | Standard body | `p` |
| `{type.ui-label}` | 16px | 15.57px | -0.16px | 600 | Button labels | `a.ke-btn__basic` |
| `{type.label-sm}` | 16px | 29.11px | -0.16px | 600 | Category labels | `span.main-business__label` |
| `{type.body-sm}` | 15px | 14.59px | -0.15px | 400 | Secondary buttons | `a.ke-btn__point` |
| `{type.caption}` | 14px | 25.20px | -0.14px | 400 | Footer links | `a:nth-of-type(1)` |
| `{type.tag}` | 13px | 22.26px | -0.13px | 400 | Isotope filters | `a.ke-isotope-list__type` |

### Principles
1. **Negative Tracking on UI** (Small labels at 16px and below use negative letter-spacing (-0.14px to -0.16px) to maintain density.)
2. **Geometric Display** (All display-tier copy uses Gilroy to establish a modern, architectural tone.)
3. **Weight Pairing** (Headings consistently use 600 weight; body copy alternates between 400 for reading and 600 for semantic emphasis.)

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 2px | 87 |
| `{space.xs}` | 8px | 50 (derived) |
| `{space.sm}` | 16px | 50 |
| `{space.md}` | 20px | 9 |
| `{space.lg}` | 40px | 7 |
| `{space.xl}` | 68px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Structural containers, inputs | 181 occurrences |
| `{radius.card}` | 19px | Standard content surfaces | `radius: 19.4595px` |
| `{radius.pill}` | 97px | Tags, load more buttons | `radius: 97.2973px` |
| `{radius.circle}` | 50% | Icon buttons, avatars | `radius: 50%` |

## Elevation
*Not captured in source. The system appears flat, utilizing borders and background shifts (#f8f8f8 vs #ffffff) for depth.*

## Components

### Tier 1: Foundational

#### Primary Action (Stroke)
**Role:** High-visibility triggers on dark backgrounds.
**Pages observed:** Homepage, About.
**Spec:** Background transparent / Text #ffffff / Border 2px #ffffff / Radius 29px / Padding 15px 38px / Typography {type.ui-label}
**States observed:** Default | Hover: captured

#### Tag / Filter
**Role:** Content categorization.
**Pages observed:** Homepage, Pricing.
**Spec:** Background #f4f4f4 / Text #666666 / Border 0px / Radius 97px / Padding 2px 16px / Typography {type.tag}
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Load More Trigger
**Role:** Pagination and list expansion.
**Pages observed:** Homepage.
**Spec:** Background #191919 / Text #ffffff / Border 0px / Radius 50% / Padding 0px / Typography {type.ui-label}
**States observed:** Default | Hover: captured

#### Section Label
**Role:** Content hierarchy marking.
**Pages observed:** Homepage, About.
**Spec:** Background transparent / Text #191919 / Border 0px / Radius 0px / Typography {type.label-sm}
**States observed:** Default

### Tier 3: Surface-specific

#### Content Surface (Standard)
**Role:** Grouping related information.
**Pages observed:** Homepage, About.
**Spec:** Background transparent / Text #191919 / Border 1px #eeeeee / Radius 0px / Padding 70px 0px 0px
**States observed:** Default

#### Content Card (Rounded)
**Role:** Feature highlighting.
**Pages observed:** Homepage.
**Spec:** Background transparent / Text #191919 / Border 0px / Radius 19px / Typography {type.ui-label}
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Gutter | 70px |
| Grid Type | 12-column fluid |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px. |
| Desktop | 1440px | Full horizontal navigation; 12-column grid active. |

## Imagery & decoration
Kakaoenterprise uses high-resolution architectural and technology photography. Decorative elements are limited to 3D abstract shapes (spheres/discs) in sub-brand colors (Yellow/Blue) used as background accents in hero sections.

## Do's
*   Use #191919 for all primary interactive text to ensure 19:1 contrast.
*   Apply 97px radius to all metadata tags and category filters.
*   Set display headings in Gilroy 600 with "normal" letter spacing.
*   Use #f8f8f8 as the default section background to separate white cards.
*   Maintain 70px vertical spacing between major content sections.

## Don'ts
*   **Wrong:** Using #ffb500 for a primary button background. **Right:** Use #191919. **Reason:** Saturated colors are for sub-brand signals, not parent-tier actions.
*   **Wrong:** Applying a 4px or 8px radius to cards. **Right:** Use 0px or 19px. **Reason:** The system avoids "soft" mid-range radii.
*   **Wrong:** Using Gilroy for long-form body text. **Right:** Use KakaoBig. **Reason:** KakaoBig is optimized for dense readability.
*   Do not use drop shadows for elevation; use background color shifts.
*   Do not use letter-spacing on display headings.

## Similar brands
*   Vercel (Achromatic, geometric type)
*   Linear (Technical, high-contrast)
*   Scale AI (Enterprise tech, monochrome foundation)

## Quick start

### CSS Custom Properties
```css
:root {
  --ke-color-ink: #191919;
  --ke-color-canvas: #f8f8f8;
  --ke-color-paper: #ffffff;
  --ke-color-ash: #666666;
  --ke-font-display: 'gilroy', sans-serif;
  --ke-font-body: 'KakaoBig', sans-serif;
  --ke-radius-pill: 97px;
  --ke-radius-card: 19px;
}
```

## Agent prompt examples
*   "Create a primary CTA button using #191919 background, #ffffff text, and a 97px border radius with 16px Gilroy 600 type."
*   "Generate a content section with a #f8f8f8 background and a 12-column grid containing cards with 19px radius."
*   "Design a tag component with #f4f4f4 background, #666666 text, and 13px KakaoBig 400 font."

## Known gaps
*   Shadow tokens were not detected in the computed styles, suggesting a flat design approach.
*   Success/Error semantic colors were not captured in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Page | https://kakaoenterprise.com | 1440x900 | 2026-06-06 |
| About | https://kakaoenterprise.com/about | 1440x900 | 2026-06-06 |
| Pricing | https://kakaoenterprise.com/pricing | 1440x900 | 2026-06-06 |