Upstage Design

upstage-design

Upstage 코퍼레이트 디자인 시스템 레퍼런스. 슬라이드·발표자료·마케팅 자산·내부 도구 UI 등 Upstage 브랜드를 따르는 시각물을 만들 때 참조한다. 단일 voltage of Solar Indigo (#5B52FF) + 흰색/네이비 두 floor 캔버스 + lavender wash 보조 surface 가 핵심.

When to use

• 슬라이드 / PPT / Keynote 덱 작성 또는 변환
• 마케팅 페이지·랜딩·보고서·배너 디자인
• 내부 도구 / 어드민 UI 의 색·타입·간격 토큰 결정
• "Upstage 다운" 비주얼이 필요한 모든 경우

Hard rules

1. 단일 accent: Solar Indigo #5B52FF 외 다른 브랜드 accent 추가 금지. 의미적 색(error/success 등)이 필요하면 채도를 indigo 보다 낮춰서 경쟁하지 않게.
2. 하드 코너 우선: 전체 도형의 약 89% 사각형, 9% rounded(반경 ~12pt), 2% 원. soft corner 는 "discrete unit" 강조 시에만.
3. 그림자 사용 금지: depth 는 surface(흰색·네이비·라벤더 wash) + 색 채도로만 표현.
4. 헤드라인 weight 700 고정. 위계는 사이즈·색 대비로 만든다 (500/600 mid-weight 사용 금지).
5. bilingual KO/EN 폰트 스택 필수. fallback 에 "맑은 고딕", "Malgun Gothic" 또는 Pretendard 포함.
6. lavender wash (#ECF0FF) 가 흰 카드 + hairline 보더의 표준 대체. content card 에 1pt 회색 border 두지 말 것.

---

Overview

Upstage is the canonical example of an enterprise-grade, document-AI presentation system — measured, technical, and built around a single voltage of indigo. The base canvas alternates between pure white ({colors.canvas} — #ffffff) for product and content slides and a near-black navy ({colors.canvas-dark} — #0D1320) for hero, section-break, and "before/after" framing slides. Headlines run in a deep ink-navy ({colors.ink} — #0D1320) on light surfaces and pure white ({colors.on-dark} — #ffffff) on dark surfaces. A single voltage of Solar Indigo ({colors.primary} — #5B52FF) carries every brand mark, every primary numeric stat, the vector wave graphic on the hero slide, the active step indicator on process diagrams, and the single accent rule that separates section bands.

Type runs Arial for headlines and Calibri for running body, with Geist appearing as a modern accent on numeric callouts and product wordmarks, and Inter as a tertiary fallback. There is no custom-licensed display face — the system trusts a workmanlike sans stack and lets color and layout do the differentiation. Headline weights sit at 700 across the board, but the actual size range is wide: hero numerics go up to ~37pt while content body holds at a tight 18pt, with table micro-text dropping to 7pt for dense pricing tables.

The shape language is mostly hard. Of every preset geometry in the deck, ~89% are pure rectangles, ~9% are rounded rectangles (used selectively for product cards, "Impact" callouts, and stepped pill labels), and ~2% are circles (icon plates, process-flow nodes). Hard corners on grid containers, soft corners only where the system is calling out a discrete unit of content. There are no hairline strokes around content cards on dark surfaces — separation comes from a lavender-wash fill ({colors.surface-soft} — #ECF0FF) instead.

Key Characteristics:

• Single accent color: {colors.primary} (#5B52FF — "Solar Indigo") carries the Upstage paper-plane wordmark, every primary stat number, the wave-cone hero graphic, active process steps, and the section-divider rule. Used scarcely on light slides — most content slides are 90% white + ink with one or two indigo moments — and as the dominant surface fill on accent slides.
• Workmanlike type stack: Arial for headlines, Calibri for body, with Geist and Inter as tertiary accents. No custom display face. Headline weights stay at 700; modesty in face is offset by aggressive size contrast (37pt hero vs 7pt micro).
• Two-floor canvas: a {colors.canvas} white floor for product and detail slides, and a {colors.canvas-dark} near-black navy floor (#0D1320) for hero / section-break / before-after framing slides. The deck reads as a "sandwich" — dark covers, white interior, dark transitions.
• Lavender-wash content bands: {colors.surface-soft} (#ECF0FF) is the signature secondary surface — every product feature card, comparison band, and AI Pack callout sits inside an indigo-tinted wash rather than a white card with a hairline border.
• Indigo fill stripes on tables: pricing and comparison tables alternate header rows in {colors.primary} (#5B52FF) and zebra-stripe content rows in {colors.surface-soft} (#ECF0FF). The result is far more saturated than typical enterprise SaaS.
• Cone / wave hero motif: the recurring section-break visual is a parametric ribbed cone in {colors.primary} over the dark canvas, suggesting "documents flowing into the model." It is the single recognizable brand graphic and replaces what would otherwise be a hero photograph.
• Three-tier weight ladder on stat callouts: a 37pt indigo number, a 22pt ink subhead, and a 9pt muted caption — repeated as the stat-callout pattern on the "Global AI Leader" slide.
• 4pt base spacing system, with major section padding at {spacing.section} (~64pt slide-edge margin) — denser than typical pitch decks because Upstage runs information-rich enterprise content (pricing, architecture, before/after grids) that demands cell density.

Colors

Brand & Accent

• Solar Indigo ({colors.primary} — #5B52FF): The single brand color. Used for the Upstage wordmark, primary stat numbers ("100+", "300만"), the cone/wave hero graphic, the active step in process flows, the section-divider rule, and the header-row fill on pricing tables. The most recognizable color in the deck.
• Indigo Pressed ({colors.primary-pressed} — #442AD8): The deeper saturation variant used on bullet markers, list discs, and selected-state indicators in the AI Pack pricing tables. Slightly more saturated than the primary.
• Indigo Hover ({colors.primary-hover} — #4F36F5): A mid-tone between primary and pressed, used for icon-fill on product feature plates inside the lavender bands.
• Indigo Light ({colors.primary-light} — #7578FF): A lighter parallel of the primary used on secondary nodes in process-flow diagrams and on de-emphasized stat callouts ("AI 정예팀" sub-stat).
• Indigo Lift ({colors.primary-lift} — #805CFB): A violet-leaning variant that appears only inside the cone/wave hero graphic as the inner ribs — never as a UI fill.

Surface

• Canvas ({colors.canvas} — #ffffff): The default page floor for product, detail, comparison, and pricing slides. Roughly 60% of slide surface area.
• Canvas Dark ({colors.canvas-dark} — #0D1320): The near-black navy floor for hero, section-break, and before/after framing slides. Roughly 30% of slide surface area. Never pure black — the slight blue cast (#0D1320 vs #000000) keeps it warm enough to pair with the indigo accent without going cold.
• Canvas Dark Lift ({colors.canvas-dark-lift} — #0A0D14): A blacker variant of the dark canvas used as the recessed inner panel on the "BEFORE" half of comparison slides.
• Canvas Dark Soft ({colors.canvas-dark-soft} — #1E1F20): A slightly raised fill used on the dark hero slide as a behind-the-cone gradient anchor.
• Surface Soft ({colors.surface-soft} — #ECF0FF): The lavender wash. The single most distinctive surface in the system — used as the fill for every product feature band, AI Pack callout block, and comparison cell on white slides. Replaces what would be a white card with a hairline border in a typical enterprise deck.
• Surface Soft Lift ({colors.surface-soft-lift} — #F1F3FC): A paler variant of the lavender wash used on alternating zebra-stripe rows inside pricing tables.
• Surface Periwinkle ({colors.surface-periwinkle} — #DDE3FF): Mid-tone between Surface Soft and the primary lights — used inside table merge cells and on the "AI Workspace" platform layer band on the architecture slide.
• Surface Neutral ({colors.surface-neutral} — #F5F5F6): A non-tinted off-white used as a side-rail panel fill on the title slide and as a fallback fill where the lavender wash would compete with adjacent indigo content.
• Surface Neutral Strong ({colors.surface-neutral-strong} — #E9E8F0): A heavier neutral fill — used on the legal sub-band of the title slide and on muted disabled rows.

Hairlines & Borders

• Hairline ({colors.hairline} — #D9D9D9): The default 1px border tone. Used sparingly — separator rules between table rows, the underline beneath the title-slide author block, and the thin divider between the BEFORE and AFTER columns on comparison slides.
• Hairline Cool ({colors.hairline-cool} — #CFCFD2): A slightly warmer variant used on dark-canvas surfaces where the default hairline would disappear into the navy.
• Hairline Soft ({colors.hairline-soft} — #D1D1DB): The lightest 1px tone, used for inner-table dividers between zebra rows where the lavender lift already provides most of the separation.

Text

• Ink ({colors.ink} — #0D1320): The dominant text color on light surfaces. Display headlines, section titles, body paragraphs, and most inline body text. The same hex as {colors.canvas-dark} — Upstage uses one navy for both deep text and dark surface, deliberately collapsing the two roles.
• Ink Strong ({colors.ink-strong} — #000000): True black, used for hero headline runs that need the strongest possible weight (e.g., "Company Intro" title).
• Body ({colors.body} — #374151): A slate gray for running-text inside long-form product copy. Slightly cooler than ink, lighter weight, easier to read across multi-line paragraphs.
• Body Soft ({colors.body-soft} — #434C60): A second body tone used on captions and meta lines beneath stat callouts. Sits between Body and Muted.
• Muted ({colors.muted} — #4B5563): Sub-titles and muted helper copy on light surfaces. Tailwind-like slate-600.
• Muted Soft ({colors.muted-soft} — #84848C): Disabled or de-emphasized supporting text — caption-row fine print on the title slide ("Enterprise Business Service") and the small italic hardware/VAT disclaimer beneath pricing tables.
• Muted Cool ({colors.muted-cool} — #979CAE): The faintest text tone, used for in-graphic labels inside the Upstage AI Pack architecture diagram (where labels need to recede behind shaded blocks).
• On Dark ({colors.on-dark} — #ffffff): White text on the dark canvas (hero headlines, section-break titles).
• On Primary ({colors.on-primary} — #ffffff): White text on Solar Indigo fills (pricing-table header rows, active step indicators).

Semantic & Accent

• Mint ({colors.mint} — #AFD89D): A muted sage-green used only on the architecture slide to highlight "Operating System" and "Device Hardware" partner-supplied layers — distinguishing them from Upstage's own indigo-tinted layers.
• Mint Light ({colors.mint-light} — #D2FF95): A brighter parallel of Mint, used on the same architecture diagram as the layer-edge highlight.
• Lavender Mid ({colors.lavender-mid} — #949CE5): A muted lavender used on outer rings of the cone/wave hero graphic — it never appears as a UI fill, only inside the recurring brand graphic.
• Lavender Soft ({colors.lavender-soft} — #6C6ED6): A periwinkle mid-tone between the primary and the muted-cool — used on secondary process-flow nodes.
• Lavender Edge ({colors.lavender-edge} — #A1B6FF): A pale edge tone for outer-ring strokes inside the hero graphic.

There are no error-red, success-green, or warning-yellow tokens in the deck — this is intentional. Upstage is a pitch deck, not an application, and semantic states only enter through the customer-screenshot mockups embedded inside product slides.

Scrim

There is no global modal scrim — the deck is static — but the dark hero slides apply a subtle vertical gradient from {colors.canvas-dark} (#0D1320) at the top to {colors.canvas-dark-lift} (#0A0D14) at the bottom to seat the cone graphic.

Typography

Font Family

The system runs Arial for display headlines and Calibri for running body and table text. Geist appears as a modern accent on a small number of product wordmarks ("Document Parse", "Solar Pro") and large numeric callouts. Inter appears as a tertiary accent inside the architecture-diagram labels and the AI Pack feature card body. Fallbacks walk Helvetica, system-ui, -apple-system, "맑은 고딕", "Malgun Gothic", sans-serif — Korean glyph coverage is essential because the deck is bilingual KO/EN.

There is no separate display family — the variable mass comes from size and weight contrast, not from typeface change.

Hierarchy

| Token | Size | Weight | Use | |---|---|---|---| | {typography.display-xl} | 37pt | 700 | Hero numerics on stat-callout slides ("Global AI Leader" headline split) | | {typography.display-lg} | 31.5pt | 700 | Title-slide H1 ("Company Intro") | | {typography.display-md} | 22.8pt | 700 | Section-break headlines ("문서를 이해하는 AI") and major slide titles | | {typography.display-sm} | 21.4pt | 700 | Sub-section heads inside content slides ("왜 AI 도입이 어려울까요?") | | {typography.title-lg} | 17.1pt | 700 | AI Pack product card titles ("AI Pack for RAG") | | {typography.title-md} | 14.25pt | 700 | Sub-section titles inside lavender content bands ("지식 컬렉션", "Agent 생성") | | {typography.stat-display} | ~10.7pt | 700 | Stat-callout numeric overlays inside the "100+" / "300만" tile system | | {typography.body-lg} | 18pt | 400 | The default running-text inside product feature copy | | {typography.body-md} | 9.5pt | 400 | Compact body copy inside dense lavender feature cards | | {typography.body-sm} | 9.05pt | 400 | Table cells, caption rows, and secondary stat sub-labels | | {typography.body-xs} | 8.55pt | 400 | Tertiary captions on the architecture diagram and "BEFORE/AFTER" comparison meta lines | | {typography.caption} | 7.13pt | 700 | Pricing-table header labels and micro-tags inside dense table layouts | | {typography.micro} | 6.17pt | 400 | The smallest legal disclaimer ("*워크스테이션에 한함, 연간 구독 가격 기준") | | {typography.button} | 12pt | 700 | Title-slide author name ("전 수 민") and inline button-style labels |

Principles

Headline weight stays uniform at 700 across the entire ladder — Upstage does not use a 500/600 mid-weight. The hierarchy comes entirely from size contrast and color contrast (indigo numbers vs ink labels) rather than from weight modulation.

The single typographically loud moment in the deck is the "Global AI Leader" stat-callout block on slide 4, where a 37pt indigo numeric pairs with a 22pt ink subhead and a 9pt muted caption — a 4× size ratio across three lines. This pattern is the deck's signature stat-display style.

Body copy holds at a tight 9–10pt across product feature cards, which is small for a deck meant to be projected — Upstage compensates with high contrast (deep ink on lavender wash) and short paragraph length (3–4 lines max per feature card).

Note on Font Substitutes

If Arial and Calibri are unavailable, Inter is the closest open-source substitute for both — it carries Latin and CJK fallbacks gracefully. Calibri's slightly tighter cap height means body text in Inter should be set ~5% smaller to match perceived weight. Pretendard is the recommended substitute when Korean glyph coverage and Inter-like proportions are both required.

Layout

Spacing System

• Base unit: 4pt (with 8pt snap on most major increments).
• Tokens: {spacing.xxs} 2pt · {spacing.xs} 4pt · {spacing.sm} 8pt · {spacing.md} 12pt · {spacing.base} 16pt · {spacing.lg} 24pt · {spacing.xl} 32pt · {spacing.xxl} 48pt · {spacing.section} 64pt.
• Slide-edge padding: {spacing.section} (64pt) on left and right edges of the 16:9 slide; {spacing.xxl} (48pt) top and bottom — denser than a typical 80pt pitch-deck margin because Upstage runs information-heavy slides.
• Card internal padding: {spacing.lg} (24pt) inside the lavender feature bands; {spacing.base} (16pt) inside dense table cells; {spacing.sm} (8pt) inside stat-callout meta rows.
• Gutters: {spacing.base} (16pt) between feature cards in a 3- or 4-up grid; {spacing.lg} (24pt) between major content bands; {spacing.xs} (4pt) on dense table column divide

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: minjugo
• Source: minjugo/agent-skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.