Upstage (업스테이지)

가로 막대를 층층이 쌓은 단색 로고와 블루바이올렛 #5B52FF 한 색, 라임 #D2FF95 하이라이트

한국AI엔터프라이즈개발 도구차가운modern-minimal고딕comfortablesoftsubtle라이트다크한글 지원출시 2022개정 2024

Brand DNA

브랜드 DNA

브랜드명: Upstage (업스테이지)
한 줄 정체성: 거대언어모델 「Solar」와 문서 처리 엔진(Document Parse·Information Extract)으로 보험·금융·의료·제조의 문서 업무를 자동화하는 한국 기업용 AI 회사
공식 디자인 철학: 공식 슬로건은 "Building intelligence for the future of work"(upstage.ai 메타·구조화 데이터). 2022년 3개월간의 브랜드 시스템 구축에서 미션 "Making AI Beneficial", 핵심 키워드 Harmony · Barrierless · Frontier, 브랜드 원형(archetype) Creator를 정했고, 이후 "Smart"와 "Frontier"를 가장 앞세우는 가치로 좁혔다(공식 블로그 「Upstage brand system building Part 2」).
시그니처 요소 1개: 비스듬히 기운 가로 막대를 층층이 쌓은 심볼·워드마크 + 블루바이올렛 #5B52FF 단일 강조색. 여기에 차트·하이라이트용 라임 #D2FF95가 보조로 붙는다. 로고 자체는 단색(currentColor)이라 밝은 면에서는 먹색 #0D1320, 어두운 히어로에서는 흰색으로 바뀐다.

> 참고: 위키미디어 공용에 올라온 보라 로고(#805CFB)는 예전 표기이고, 현행 upstage.ai·console.upstage.ai 헤더는 단색 로고에 #5B52FF를 행동색으로 쓴다. 심볼 가로 막대의 뜻을 공식 문서에서 찾지 못했다 — "단(stage)을 한 칸씩 올라가는 형상"이라는 해석은 (추정)이다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 신뢰감, 정밀함, 선구적
무드 설명: 흰 바탕과 슬레이트 회색 위계 위에서 블루바이올렛 한 색이 버튼·링크·포커스·선택 상태를 모두 맡는다. 마케팅 사이트 첫 화면만 먹색 #0A0D14 캔버스에 흰 로고를 얹어 "프런티어" 인상을 주고, 스크롤하면 흰 내비로 돌아온다. 규제 산업 고객을 향한 B2B 톤이라 장식보다 정확한 수치·출처 표시(페이지 번호 하이라이트)가 강조점이다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 개발자 콘솔은 사이드바·툴바·표가 촘촘하지만 14px 본문과 8px 격자로 숨 쉴 틈을 둔다.
모서리 성향: Soft (기본 8px --radius: .5rem, 작은 칩 4px, 큰 카드 12~16px, 알약형 버튼은 999px)
평면성: Subtle — 테두리 1px #E2E8F0로 구획하고, 그림자는 hsl(220 30% 10% / .08) 수준의 옅은 한 겹만 쓴다.

Color System

컬러 시스템 (CSS 변수)

upstage.ai Webflow 공유 CSS의 --_primitives_color---color--brand--* 원색과 console.upstage.ai :root(HSL 토큰, shadcn 구조) 실측을 합쳤다. 브랜드 9단계는 양쪽이 같은 값이고(콘솔은 HSL로 반올림), 중립색은 콘솔 제품 UI가 쓰는 슬레이트 계열 기준이다(마케팅 사이트는 zinc 계열 #FAFAFC~#18181B).

:root {
  /* Primary - Upstage Brand (upstage.ai brand--50~900, console --color-brand-*) */
  --color-primary-50:  #EBEFFF;  /* brand-50 — 선택 행·accent 배경 */
  --color-primary-100: #DBE2FF;  /* brand-100 — 텍스트 선택 영역 */
  --color-primary-200: #C2CBFF;  /* brand-200 — 내비 강조 면 */
  --color-primary-300: #99A5FF;  /* brand-300 — accent 테두리, 다크 강조 텍스트 */
  --color-primary-400: #7578FF;  /* brand-400 — 다크 모드 링크 hover */
  --color-primary-500: #5B52FF;  /* brand-500 — primary 버튼·링크·포커스 링·슬라이더 */
  --color-primary-600: #4D34F4;  /* brand-600 — 버튼 hover */
  --color-primary-700: #442AD8;  /* brand-700 — pressed */
  --color-primary-800: #3725AD;  /* brand-800 — accent 글자, 링크 hover */
  --color-primary-900: #322790;  /* brand-900 */
  --color-primary-950: #1E1650;  /* brand-950 — 다크 accent 면 */

  /* Secondary - Green-yellow (console --secondary, 차트 2번색) */
  --color-secondary-200: #F3FF99;
  --color-secondary-500: #D2FF95;  /* green-yellow-400 — 하이라이트·보조 버튼 면 */
  --color-secondary-900: #226B00;

  /* Neutral - Slate (console --color-neutral-*) */
  --color-neutral-0:    #FFFFFF;  /* 본문 배경 */
  --color-neutral-50:   #F8FAFC;  /* 내비·사이드바 배경(--nav-background) */
  --color-neutral-100:  #F1F5F9;  /* muted 면, 탭 목록, 코드 배경 */
  --color-neutral-200:  #E2E8F0;  /* 기본 테두리·입력 테두리 */
  --color-neutral-300:  #CBD5E1;  /* 중간 테두리, 스크롤바 */
  --color-neutral-500:  #64748B;  /* 보조 텍스트·placeholder */
  --color-neutral-700:  #334155;
  --color-neutral-900:  #0F172A;  /* 본문 글자(--foreground) */
  --color-neutral-1000: #020617;  /* neutral-950 — 다크 배경 */

  /* Semantic (console --state-*) */
  --color-success-bg: #ECFDF7;  /* green-50 */
  --color-success-fg: #066046;  /* green-900, 아이콘 #00AD82 */
  --color-warning-bg: #FFF9E5;  /* yellow-50 */
  --color-warning-fg: #8A5A00;  /* yellow-900, 아이콘 #FFA724 */
  --color-error-bg:   #FFF0F1;  /* red-50 */
  --color-error-fg:   #8A0A20;  /* red-900, destructive 버튼 #FF3859 */
  --color-info-bg:    #F0F9FF;  /* blue-50 */
  --color-info-fg:    #005A8A;  /* blue-900, 아이콘 #4483CA */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;                    /* --background */
  --bg-subtle:   #F8FAFC;                    /* --subtle, 사이드바·GNB */
  --bg-elevated: #FFFFFF;                    /* --card (테두리 #F1F5F9) */
  --bg-overlay:  rgba(30, 41, 59, 0.50);     /* --overlay 215 28% 17% / .5 + blur 4px */
  --bg-hero:     #0A0D14;                    /* 마케팅 첫 화면 캔버스(--hero-bg) */

  /* Text 위계 */
  --text-primary:    #0F172A;  /* --foreground */
  --text-secondary:  #475569;  /* --muted-dark */
  --text-tertiary:   #64748B;  /* --muted-foreground */
  --text-on-primary: #FFFFFF;  /* --primary-foreground */
  --text-disabled:   #CBD5E1;  /* --disabled-foreground */

  /* Border */
  --border-default: #E2E8F0;  /* --border */
  --border-subtle:  #F1F5F9;  /* --border-subtle, 카드 테두리 */
  --border-strong:  #64748B;  /* --border-strong */
  --border-focus:   #5B52FF;  /* --ring */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans KR (SIL OFL) — upstage.ai --family--body-ko, 일본어는 Noto Sans JP
- 영문: Geist (SIL OFL, Vercel) 본문 + ESPeak 디스플레이(콘솔·마케팅 공통 @font-face, 사내 전용으로 보임 (추정)) + Geist Mono 코드. 콘솔 본문은 ui-sans-serif, system-ui 시스템 서체
위계 (upstage.ai --size--text-* 데스크톱 값 · leading 토큰 tight 1.1 / snug 1.2 / normal 1.4 / relaxed 1.6):
- Display: 57.6px (3.6rem) / 600 / 1.1 / -0.02em (자간 추정) — ESPeak
- H1: 48px (3rem) / 600 / 1.1 / -0.02em (추정)
- H2: 40px (2.5rem) / 600 / 1.2 / -0.01em (추정)
- H3: 32px (2rem) / 600 / 1.2 / 0
- Body Large: 18px (1.125rem) / 400 / 1.6 / 0
- Body: 16px (1rem) / 400 / 1.6 / 0
- Body Small: 14px (.875rem) / 400 / 1.4 / 0 — 콘솔 기본 본문
- Caption: 12px (.75rem) / 500 / 1.4 / 0

Spacing

스페이싱

Base unit: 4px (upstage.ai --layout---2/4/8/12/16/24/32/40/64/120/128)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 40px; /* 원본 --padding--40 */ --space-3xl: 64px; --space-section: 120px; /* 섹션 사이 --margin--120 */ ``
Container: max-width 1200px(--max-w-content), 좌우 패딩 24px(모바일 16px)

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* --radius--4 — 칩·코드 태그 */
--radius-md: 8px;      /* --radius--8, console --radius .5rem — 버튼·입력·카드 기본 */
--radius-lg: 12px;     /* --radius--12 — 큰 카드·모달 */
--radius-xl: 16px;     /* console --radius-lg 1rem — 제품 소개 카드 */
--radius-full: 9999px; /* --radius--999 — 마케팅 알약 버튼·아바타 */

Shadow / Elevation

콘솔 토큰은 그림자 색 hsl(220 30% 10%)에 강도 .08(다크 .4)을 곱한다.

--shadow-none: none;
--shadow-sm: 0 1px 2px hsl(220 30% 10% / .10);                                         /* 입력·작은 버튼 */
--shadow-md: 0 4px 6px -1px hsl(220 30% 10% / .08), 0 2px 4px -2px hsl(220 30% 10% / .08); /* 카드 hover, 드롭다운 */
--shadow-lg: 0 10px 15px -3px hsl(220 30% 10% / .10), 0 4px 6px -4px hsl(220 30% 10% / .10); /* 팝오버 */
--shadow-xl: 0 20px 25px -5px hsl(220 30% 10% / .15), 0 8px 10px -6px hsl(220 30% 10% / .15); /* 모달(--modal-shadow) */

Iconography

스타일: Outline (콘솔 GNB·사이드바는 Heroicons v2 outline data-slot="icon", 일부 Lucide)
Stroke 굵기: 1.5px (Heroicons), Lucide 쪽은 2px
모서리 처리: Round (round cap/join)
추천 라이브러리: Heroicons (Outline 24) — 대체로 Lucide

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button

.btn { height: 36px; padding: 0 16px; border-radius: var(--radius-md); font: 500 14px/1 Geist, 'Noto Sans KR', sans-serif; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out); cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; } /* 가운데 16px 스피너, 흰색 2px 테두리 */
.btn-secondary { background: var(--bg-base); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--color-neutral-300); }
.btn-secondary:active { background: var(--color-neutral-100); }
.btn-secondary:disabled { color: var(--text-disabled); border-color: var(--border-subtle); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--color-neutral-100); color: var(--text-primary); }
.btn-ghost:active { background: var(--color-neutral-200); }
.btn-danger { background: #FF3859; color: #FFFFFF; }            /* --destructive */
.btn-danger:hover { background: #E8304F; }                       /* (추정) */
.btn-danger:disabled { background: var(--color-error-bg); color: #FFB3BF; }
.btn-pill { border-radius: var(--radius-full); padding: 0 20px; } /* 마케팅 사이트 CTA */

Input

.input { height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); font-size: 14px; }
.input::placeholder { color: var(--text-tertiary); }
.input:hover { border-color: var(--color-neutral-300); }            /* --input-hover */
.input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(91, 82, 255, .20); } /* --input-active + ring 50% */
.input.is-error { border-color: #FF3859; box-shadow: 0 0 0 3px rgba(255, 56, 89, .20); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); border-color: var(--border-subtle); }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; }
.card-emphasis { background: var(--color-primary-50); border-color: var(--color-primary-300); }   /* --accent / --accent-border */
.card-outlined { background: transparent; border: 1px solid var(--border-default); }
.card:hover { box-shadow: var(--shadow-md); }

Badge / Tag

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font: 500 12px/1 Geist, sans-serif; }
.badge-solid { background: var(--color-neutral-900); color: #FFFFFF; }                 /* --badge-default */
.badge-new { background: var(--color-secondary-500); color: var(--color-neutral-900); } /* 메뉴 "New" 라임 */
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-800); }
.badge-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }

Navigation (콘솔 GNB + 사이드바)

.gnb { height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); }
.gnb-link { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.gnb-link.is-active { color: var(--text-primary); }
.sidebar { width: 240px; background: var(--bg-subtle); border-right: 1px solid var(--border-subtle); padding: 12px; }
.sidebar-heading { font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: 12px 8px 4px; }
.sidebar-item { display: block; padding: 6px 8px; border-radius: var(--radius-md); font-size: 14px; color: #475569; }  /* --sidebar-foreground */
.sidebar-item:hover, .sidebar-item.is-active { background: var(--color-neutral-200); color: var(--text-primary); } /* --sidebar-item-highlight */

Motion

콘솔 :root 실측 --duration-fast: .15s / --duration-normal: .3s / --duration-slow: .5s. 이징 곡선은 Tailwind 기본값을 쓰는 것으로 보인다 (추정).

--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 500ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);       /* (추정) */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* (추정) */

Anti-patterns

1. 블루바이올렛 #5B52FF 외의 원색을 행동색으로 쓰지 않는다 — 코랄·민트·마젠타 등은 차트 팔레트(--color--chart--1~10) 전용이다. 2. 로고에 그라데이션·보라 채색을 입히지 않는다 — 현행 로고는 단색(currentColor)이며 먹색 또는 흰색만 쓴다. 3. 라임 #D2FF95 위에 흰 글자를 올리지 않는다 — 라임은 먹색 #18181B 글자와 짝을 이루는 하이라이트다. 4. 카드에 굵은 테두리와 진한 그림자를 겹치지 않는다 — 1px 슬레이트 테두리 또는 옅은 한 겹 그림자 중 하나만. 5. 근거 없는 AI 답을 꾸미지 않는다 — 추출·요약 결과에는 원문 페이지·좌표 같은 출처를 함께 보여 준다(규제 산업 고객 톤).

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처