브랜드 컬러 팔레트

Primary Gold

var(--color-accent)

Deep Navy

#0A0E1A

var(--color-primary-bg)

Steel Gray

#1A1F2E

var(--color-elevated)

Soft White

#E8E8E8

var(--color-primary)

Muted Blue

#6B7280

var(--color-muted)

Success

var(--color-success)

—

타이포그래피 스케일

H136px / 2.25rem · Bold 700Agent 8

H224px / 1.5rem · Bold 700섹션 타이틀

H318px / 1.125rem · SemiBold 600카드 제목

Body14px / 0.875rem · Regular 400본문 텍스트입니다

Caption11px / 0.6875rem · Medium 500보조 설명

컴포넌트 라이브러리

Glass Card

투명 유리 효과의 카드 컴포넌트

<div class="bg-glass border border-glass-border rounded-xl p-5 backdrop-blur-md">
  카드 콘텐츠
</div>

CTA Button

골드 그라데이션 액션 버튼

<button class="px-6 py-2.5 rounded-xl bg-accent text-primary-bg font-semibold hover:brightness-110 shadow-md shadow-accent/20">
  시작하기
</button>

Status Badge

상태 표시 배지

<span class="px-2 py-0.5 rounded-full bg-green-500/15 text-green-400 border border-green-500/20 text-[11px] font-semibold">
  운영 중
</span>

디자인 시안

라이브 목업

📊

📈

👥

⚙️

Agent8 Dashboard2026.02.21

💰 Revenue

₩2.4억

+18.7%

👥 Users

2,847

+23%

✅ Tasks

94.2%

완료율

📉 Savings

₩1,600만

/월 절감

Revenue Growth

AI Partner Usage

Recent Activity

다니마케팅 기획서 생성 완료10분 전완료

미소SEO 키워드 분석 리포트1시간 전완료

카이API 엔드포인트 코드 리뷰3시간 전진행 중

비즈니스 대시보드

데스크톱

KPI 카드 + 매출 Line Chart + AI 활용 Donut Chart + Activity Feed — Linear/Vercel 스타일

9:41

📶🔋

Good morning,

대표님

2월 21일 금요일

🔔

진행 중

완료

대기

내 AI 팀

앤드류

리더

다니

기획 파트너

유나

디자인 파트너

카이

개발 파트너

미소

마케팅 파트너

주노

영업 파트너

하나

비서 파트너

렉스

감사 파트너

💡 오늘의 인사이트

이번 주 AI 파트너 활용이 32% 증가했습니다. 미소의 마케팅 리포트가 가장 많이 사용되었습니다.

최근 산출물

📄

마케팅 주간 리포트

2분 전 · 미소

📊

경쟁사 SEO 분석

1시간 전 · 미소

📋

Q2 사업 전략 초안

3시간 전 · 앤드류

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

홈 화면

9:44

📶🔋

←

미소

● 온라인

⋯

이번 주 마케팅 리포트 작성해줘

9:42

미소

네, 이번 주 마케팅 리포트를 작성하겠습니다. 데이터를 분석 중이에요.

9:42

미소

완료했습니다! 주요 지표 요약: • 트래픽 +34% (12,400) • 키워드 TOP10 18개 진입 • CAC ₩32,000 (-18%) 상세 리포트를 공유할까요?

9:43

좋아! 슬랙으로 공유해줘

9:44

미소

✅ #marketing 채널에 리포트를 공유했습니다.

9:44

+메시지 입력...🎤

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

AI 파트너 채팅

9:41

📶🔋

산출물 관리

이번 주 진행 현황

+ 새 요청

전체

진행 중

완료

SEO 키워드 분석완료

미소

랜딩 페이지 디자인진행 중

유나

API 보안 감사진행 중

렉스

사업 전략 수립진행 중

앤드류

고객 이메일 캠페인대기

주노

DB 스키마 최적화대기

카이

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

산출물 관리

9:41

📶🔋

Good morning,

대표님

2월 21일 금요일

🔔

진행 중

완료

대기

내 AI 팀

앤드류

리더

다니

기획 파트너

유나

디자인 파트너

카이

개발 파트너

미소

마케팅 파트너

주노

영업 파트너

하나

비서 파트너

렉스

감사 파트너

💡 오늘의 인사이트

이번 주 AI 파트너 활용이 32% 증가했습니다. 미소의 마케팅 리포트가 가장 많이 사용되었습니다.

최근 산출물

📄

마케팅 주간 리포트

2분 전 · 미소

📊

경쟁사 SEO 분석

1시간 전 · 미소

📋

Q2 사업 전략 초안

3시간 전 · 앤드류

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

홈 화면

9:44

📶🔋

←

미소

● 온라인

⋯

이번 주 마케팅 리포트 작성해줘

9:42

미소

네, 이번 주 마케팅 리포트를 작성하겠습니다. 데이터를 분석 중이에요.

9:42

미소

완료했습니다! 주요 지표 요약: • 트래픽 +34% (12,400) • 키워드 TOP10 18개 진입 • CAC ₩32,000 (-18%) 상세 리포트를 공유할까요?

9:43

좋아! 슬랙으로 공유해줘

9:44

미소

✅ #marketing 채널에 리포트를 공유했습니다.

9:44

+메시지 입력...🎤

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

AI 파트너 채팅

9:41

📶🔋

산출물 관리

이번 주 진행 현황

+ 새 요청

전체

진행 중

완료

SEO 키워드 분석완료

미소

랜딩 페이지 디자인진행 중

유나

API 보안 감사진행 중

렉스

사업 전략 수립진행 중

앤드류

고객 이메일 캠페인대기

주노

DB 스키마 최적화대기

카이

🏠Home

👥Team

📋산출물

💬Chat

⚙️설정

산출물 관리

모바일 AI 팀 앱

모바일 · 3화면

홈(팀 그리드 + 통계) → 채팅(AI 대화) → 산출물(태스크 진행률) — iOS HIG 스타일 3화면 플로우

UI State Example

피드백 시스템 (UI/UX)

인터랙션 라이브

초기 렌더링 시 스켈레톤 노출로 체감 시간 단축 및 시각적으로 일관된 토스트 메시지

Agent8 Design
System

Foundation

Colors

Typography

Spacing

Components

Buttons

Cards

Badges

Color System

Brand palette and usage guidelines

Primary

#08091A

--agent8-primary-navy

Accent

var(--color-accent)

--agent8-accent-gold

Semantic Colors

var(--color-success)

--agent8-semantic-success

var(--color-warning)

--agent8-semantic-warning

#EF4444

--agent8-semantic-error

var(--color-info)

--agent8-semantic-info

Typography

Heading 1 / 32px

Heading 2 / 24px

Body / 14px / Regular

Caption / 11px / Medium

Components

디자인 시스템 문서

데스크톱

컬러 팔레트 · 타이포그래피 · 컴포넌트 프리뷰 — Radix/Tailwind 문서 스타일

디자인 원칙

🌌

Dark First

어두운 배경에서 골드 악센트가 최대 효과

🪟

Glassmorphism

투명 유리 효과로 깊이감과 고급감

✨

Micro Motion

호버, 전환 시 미세 애니메이션으로 생동감

Partner Commentary

유나디자인 파트너

"다크 모드 + 글라스모피즘 + 골드 악센트 조합은 현재 SaaS 트렌드와 정확히 일치합니다. 핵심은 계층 구조의 명확성입니다 — 배경(Deep Navy), 표면(Steel Gray), 콘텐츠(Soft White), 강조(Gold)의 4계층이 시각적 피로를 줄이고 정보 가독성을 극대화합니다."

카이개발 파트너

"모든 목업이 실제 React 컴포넌트로 구현되어 있어, 정적 이미지와 달리 반응형으로 동작합니다. SVG 기반 차트, CSS Grid 레이아웃, Tailwind 유틸리티를 활용하여 프로덕션 코드로의 전환이 즉시 가능합니다."

앤드류리더

"디자인 시안을 라이브 목업으로 전환한 것은 단순한 비주얼을 넘어 '실제로 작동하는' 프로토타입의 가치를 보여줍니다. 클라이언트 검토 시 정적 이미지 대비 이해도와 피드백 품질이 크게 향상됩니다."

컴포넌트 라이브러리

Glass Card

투명 유리 효과의 카드 컴포넌트

<div class="bg-glass border border-glass-border rounded-xl p-5 backdrop-blur-md">
  카드 콘텐츠
</div>

CTA Button

골드 그라데이션 액션 버튼

<button class="px-6 py-2.5 rounded-xl bg-accent text-primary-bg font-semibold hover:brightness-110 shadow-md shadow-accent/20">
  시작하기
</button>

Status Badge

상태 표시 배지

<span class="px-2 py-0.5 rounded-full bg-green-500/15 text-green-400 border border-green-500/20 text-[11px] font-semibold">
  운영 중
</span>

Partner Commentary

유나디자인 파트너

카이개발 파트너

앤드류리더