<!-- Generated by ExtractVibe — https://extractvibe.com/brand/abib.co.kr -->
<!-- Extracted: 2026-04-02T17:43:36.465Z | Schema: v1 | Quality: n/a/100 -->
---
version: alpha
name: "Abib Cosmetic - 아비브 코스메틱"
description: "Abib Cosmetic - 아비브 코스메틱 presents a professional web presence."
colors:
  primary: "#00ffff"
  tertiary: "#007aff"
  neutral: "#000000"
  surface: "#ffffff"
  on-surface: "#1e1e1e"
  on-surface-secondary: "#000000"
  link: "#ffffff"
typography:
  headline-lg:
    fontFamily: "Pretendard"
    fontSize: "27px"
    fontWeight: "500"
    lineHeight: "27px"
    letterSpacing: "0.6px"
  headline-sm:
    fontFamily: "Helvetica"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "13px"
  body-md:
    fontFamily: "Circular"
    fontSize: "11px"
    fontWeight: "400"
    lineHeight: "18px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#00ffff"
    textColor: "#2e2e2e"
    rounded: "0px"
    padding: "30px 50px 25px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#ffffff"
---

# Abib Cosmetic - 아비브 코스메틱 — Design System

## Overview

Abib Cosmetic - 아비브 코스메틱 establishes a professional digital presence. The design system prioritizes clarity and precision, aligning with the brand's commitment to high-quality skincare. This is not a playful or whimsical brand; its aesthetic is grounded in a sophisticated, minimalist approach that reflects efficacy and trustworthiness. The design avoids overt ornamentation or vibrant, attention-seeking colors, instead opting for a clean, almost clinical purity. The overall impression is one of understated elegance and scientific rigor, directly communicating reliability and a focus on product integrity rather than fleeting trends.

The professional archetype is reinforced through a deliberate restraint in visual elements. There is no room for ambiguity or visual noise. Every component serves a clear functional purpose, contributing to a seamless and intuitive user experience. The design avoids any visual cues that might suggest a mass-market or overly decorative brand. Instead, it projects an image of refined expertise, appealing to a discerning audience that values substance and results. The aesthetic is timeless, not trendy, ensuring longevity and consistent brand recognition.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The primary color, #00ffff (cyan), serves as a precise accent, signifying modernity and a subtle technological edge within a clean, professional framework. This choice avoids the warmth of traditional beauty brands, instead signaling a fresh, almost sterile purity. The dominant surface color, #ffffff (white), reinforces this clinical cleanliness, providing an expansive and uncluttered backdrop that allows products and content to stand out with clarity. The limited palette underscores a minimalist philosophy, ensuring focus remains on product efficacy and brand integrity.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#00ffff` | Cyan |
| accent / tertiary | `#007aff` | Dodger Blue |
| background | `#ffffff` | White |
| text | `#1e1e1e` | Near-Black |
| secondary text | `#000000` | Black |
| link | `#ffffff` | White |
| muted | `#000000` | Black |

## Typography

The type system employs a sophisticated blend of Circular, Pretendard, and Helvetica. Circular provides a contemporary, approachable yet professional voice for primary headings and key information. Pretendard offers a highly legible and versatile option for body text and UI elements, ensuring clarity across all digital interfaces. Helvetica, a timeless sans-serif, is reserved for specific functional elements or where absolute neutrality and authority are required. This hierarchy prioritizes readability and a consistent, professional tone, avoiding decorative fonts that might detract from the brand's serious and scientific undertones.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Circular | body | self-hosted | 400, 500 |
| Pretendard | heading | self-hosted | 500 |
| Helvetica | heading | system | 400 |
| Pretendard | body | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Pretendard | 27px | 500 | 27px | 0.6px |
| Heading 4 | Helvetica | 13px | 400 | 13px | — |
| Body | Circular | 11px | 400 | 18px | — |

### Conventions

- Heading case — lowercase
- Body line-height — 18px

## Layout

- Base spacing unit — `2px`

## Components

### Buttons

**Primary**

- Background — `#00ffff`
- Text — `#2e2e2e`
- Radius — `0px`
- Padding — `30px 50px 25px`
- Font size — `12px`
- Font weight — `500`
- Border — ` solid #ffffff`
- Sample copy — "전 제품"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/abib.co.kr/logo-0.ico) | 95% |
| primary | color | svg | [link](brands/abib.co.kr/logo-1.svg) | 85% |
| primary | color | svg | [link](brands/abib.co.kr/logo-2.svg) | 85% |
| primary | color | png | [link](brands/abib.co.kr/logo-3.png) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/abib.co.kr
- Raw JSON — https://extractvibe.com/api/brand/abib.co.kr
- DESIGN.md (this file) — https://extractvibe.com/api/brand/abib.co.kr/design.md
- Extracted — 2026-04-02T17:43:36.465Z
- Generator — ExtractVibe vv1