Upbit — Design Reference

Overview

Visual Theme & Atmosphere

Upbit is a digital-asset service operated by Dunamu. Its public web surface makes market information the visual priority: the reverified exchange page exposes trading-oriented controls and dense data regions, while the home and service-center notice pages retain the same light, low-radius treatment around them. The current Developer Center describes APIs for prices, order books, trading, balances, deposits, withdrawals, and real-time streaming; that public product framing helps explain why compact numeric controls and restrained surface colors dominate the captured pages. The observable identity is not a universal visual system: it is a disciplined public-web layer in which blue is used for actions and down-market data, red for up-market data, and white panels sit on a pale gray canvas. This record keeps that exchange, marketing, support, documentation, and authenticated-product boundary explicit.

• Public-source boundary: the supplied capture contains , the public exchange URL, and . It contains no authenticated application screen and no Developer Center chrome.
• Geometry: the repeated raw radii are 0px and 4px. Every retained component except the 4px quick-fill control computes a 0px radius (§4).
• State evidence: the bundle’s interactions[] record is empty (no dialog, tab, menu, or form-error record), but the bundle does hold pointer-state frames: the header navigation links record weight 500 on hover and on press on all three surfaces (§4). No other element has a state frame. Focus, disabled, validation, menu, modal, toast, and transition claims are omitted. Corrected 2026-09-29: the July text read interactionCount: 0 as the absence of any state evidence.

Primary tasks

• Follow market prices and data on the exchange page.
• Set up a trade from the exchange’s dense controls.
• Fill an order amount by tapping a percentage shortcut.
• Tell a rising market from a falling one by colour.
• Check announcements on the service centre notice page.

Imagery & illustration

The supplied evidence is a computed-style/component capture and does not establish a reusable image, illustration, crop, overlay, or asset-licence rule. The public marketing surface remains separate from the exchange UI; neither is used to infer an authenticated-product image system.

Iconography

No named icon family, stroke specification, icon-size scale, or reusable icon component is established in the retained evidence. Coin symbols, glyphs, and asset files are intentionally not promoted from incidental page content.

Brand Narrative

The official Developer Center identifies Upbit as a Dunamu service and presents market-data, exchange, and real-time APIs for strategic trading. Its Korean reference footer identifies Dunamu and a registered virtual-asset-business number. A 2022 Dunamu/Upbit conference report records the then-current statement that Upbit would focus on regulation compliance and investor protections; it is retained as dated corporate context, not as proof of a present visual token or product workflow.

No first-party history, rebrand, or public brand-system source was found in the supplied collector evidence. This reference therefore does not create an origin story or infer a private product strategy.

Principles

The following are evidence-bounded reference implications, not quoted Upbit principles.

1. Keep market data local to its surface. The red #DD3C44 and blue #1375EC observations come from the exchange only. UI implication: do not reuse them as universal marketing, error, or success tokens.
2. Keep controls compact only where measured. The retained quick-fill control is 28px high with a 4px radius. UI implication: do not extrapolate that geometry into navigation, forms, or authenticated trading flows.
3. Keep domains separate. Marketing home, exchange, support notice, Developer Center, SDK licence, and unobserved authenticated product each have different evidence roles. UI implication: do not combine them into a fictional public design system.

Personas

No first-party user research, audience segmentation, or persona material was collected for this update. No fictional names, demographics, jobs, or motivations are supplied.

Colors

Color & surface roles

The following values are live computed observations, not a published Upbit token set.

The exchange-only red/blue pair is documented as a local market display observation. It is not generalized into an accessibility, locale, or cross-market rule without a first-party specification.

Typography

Typography & font evidence

Evidence classes

• Live computed system use: visible public text resolves most often to Roboto, "Noto Sans KR", sans-serif, AppleSDGothicNeo-Regular, "Malgun Gothic", Dotum, sans-serif; the collector classifies Roboto as a system family with high confidence and 744 visible uses. Its FontFaceSet record also lists Google-hosted Roboto sources. This verifies a current resolved public runtime family, not an Upbit-owned brand typeface, so no tokens.typography.family is promoted.
• Declared-only assets: Noto Sans KR has 128 listed source URLs but zero visible uses in the supplied bundle; Droid Sans, Roboto Condensed, and the TradingView-bundled EuclidCircular are likewise declared with zero visible uses. They are not UI-family tokens and must not be substituted into specimens.
• Other system results: Arial and Helvetica occur only a handful of times and are classified system; neither is a brand claim.
• Official font/licence context: the Google Fonts Roboto repository carries Apache License 2.0; Noto’s official documentation says Noto fonts use SIL OFL 1.1. These third-party font licences do not grant rights to Upbit marks, UI assets, or an Upbit brand font.
• Upbit licence boundary: the Upbit Developer SDK licence applies to the SDK materials, says it is not an open-source licence, and expressly does not grant rights to Dunamu trademarks, logos, names, or brands. It is not a font licence or a public design-system specification.

Measured public text roles

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• typography.dense.lineHeight: normal

Elevation & Depth

Elevation

The retained exchange quick-fill sample and the exchange data panels compute box-shadow: none; the service-centre notice panel carries rgb(222, 225, 231) 2px 2px 4px 0px (#DEE1E7, §4). No general elevation scale is claimed from one shadowed container.

Motion & Easing

Motion

No duration, easing, transition, data-update animation, scroll behavior, or interactive sequence was captured. Static CSS classes and one rendered default do not establish a motion contract.

No motion or easing values were captured. Preserve this absence instead of assigning default durations or curves.

Components

Exchange quick-fill control

Observed default

• Background: #FFFFFF
• Text: #1A2434
• Border: 1px solid #D6D8DB
• Radius: 4px
• Padding: 0px 8px 1px
• Height: 28px
• Font: 12px / 400 / resolved Roboto system stack
• Use: percentage quick-fill link on the public exchange; evidence surface-2::[data-omd-capture="139"], class percentage-button css-1vvi88j

The collector reports this as five medium-confidence occurrences on the exchange page. The capture holds no state frame for this element, so only its default is documented. Corrected 2026-09-29: the July text tied this to the empty interaction record, and the July token typed the control as a badge; the collector classes it as a button.

The components below were transcribed on 2026-09-29 from the same 2026-07-13 bundle; nothing was re-measured.

Header navigation link — light (home)

Rest and pointer states

• Background: transparent
• Text: #1A2434
• Radius: 0px · Padding: 0px · Height: 22px
• Font: 15px / 400 / 22px, resolved Roboto system stack
• Hover: weight 500 (400 at rest)
• Pressed: weight 500
• States: sampled on the home header links, home::[data-omd-capture="1"] to "5" (1–4 carry text; 5 is an 84 × 24 link without text). Every hover and pressed frame records weight 500, and weight is the only dumped property that moves. All the siblings agree, so the value is read as settled rather than mid-transition. Focus is not declared: the collector presses before it focuses, which suppresses :focus-visible.
• Use: public home header navigation link, class css-h3yhvr.

Header navigation link — dark (exchange, notice)

Rest and pointer states

• Background: transparent
• Text: rgba(255, 255, 255, 0.6)
• Radius: 0px · Padding: 0px · Height: 22px
• Font: 15px / 400 / 22px
• Hover: weight 500
• Pressed: weight 500
• States: the same class as the light link, sampled on the exchange header (surface-2::[data-omd-capture="2"] to "5") and the notice header (surface-3::[data-omd-capture="1"] to "5"). Every hover and pressed frame records weight 500, the only dumped property that moves. Focus is not declared.
• Use: white text at 60% alpha implies a dark header bar; its fill was not sampled on this element.

Exchange panel tab

• Background: transparent
• Text: #333333
• Border: bottom only, 1px #DDDDDD
• Radius: 0px · Padding: 0px · Height: 45px
• Font: 16px / 500 / 45px
• Selected: text #0062DF, bottom border 3px #0062DF, weight 700 (surface-2::[data-omd-capture="15"], class tab__item__link--active)
• States: rest and the active variant only; the capture holds no pointer-state frame for either.
• Use: exchange panel tab, surface-2::[data-omd-capture="16"], class tab__item__link.

Order-form side tab

• Background: transparent
• Text: #333333
• Border: bottom only, 1px #D4D6DC
• Radius: 0px · Padding: 0px · Height: 45px
• Font: 16px / 500 / 42px
• Selected: text #DD3C44, bottom border 3px #DD3C44, weight 700, on the buy side (surface-2::[data-omd-capture="131"], inside li.tabB__buy.on). Only the buy side was captured selected, so no selected colour is recorded for the other side.
• States: no pointer-state frame.
• Use: exchange order-form side tab, surface-2::[data-omd-capture="132"], class tabB__button.

Notice pagination button

• Background: #FFFFFF
• Text: #1A2434
• Border: 1px #D6D8DB
• Radius: 0px · Padding: 0px · Size: 28px × 28px
• Font: 12px / 400
• Selected (current page): background #0062DF, text #FFFFFF, border 1px #0062DF (surface-3::[data-omd-capture="48"], class css-1arrn0x)
• States: no pointer-state frame.
• Use: service-centre notice pagination, surface-3::[data-omd-capture="49"], class css-10yd3aw (11 occurrences).

Text fields

• Notice search field: surface-3::[data-omd-capture="24"], input.css-1sxigs. Transparent, borderless, text #1A2434, 42px high, 14px / 400.
• Order-form field: surface-2::[data-omd-capture="135"], input[type=text].css-1r6ulzr (three occurrences). Transparent, borderless, text #1A2434, 38px high, 14px / 400.
• Both fields resolve to Arial, one of the system families in §3, not to the Roboto stack. Their wrappers were not sampled, so no field border or fill is declared, and neither field has a state frame.

Panels

• Notice panel: surface-3::article, class css-mzy1sz. Background #FFFFFF, 0px radius, padding 60px 45px 45px, shadow rgb(222, 225, 231) 2px 2px 4px 0px (#DEE1E7).
• Exchange data panel: surface-2::article. Background #FFFFFF, 0px radius, no padding, box-shadow: none; six article panels, 400–990px wide, compute the same values.
• Both are non-interactive containers.

The prior prose-derived token block, 2025 date stamp, broad navigation/hero/table component inventory, motion timings, contrast results, persona profiles, and behavioral state catalogue were not supported by the supplied 2026 collector and are removed rather than refreshed by assumption.

States

Pointer states are documented only for the header navigation links: hover and pressed both record weight 500 against 400 at rest, on all three surfaces (§4). The selected exchange tab, the selected buy tab, and the current notice page are DOM variants captured at rest. No loading, empty, success, error, disabled, focus, validation, menu, dialog, toast, or tab-transition state is documented; focus is not declared from the bundle because the collector presses before it focuses. Corrected 2026-09-29: the July text treated the empty interactions[] record as the absence of every state sample.

Live state probe, 2026-10-16 (), quick-fill: pressed — no visible change (measured 2026-10-16).

Do’s and Don’ts

Do

• Use the observed public exchange quick-fill treatment only with its recorded #FFFFFF, #1A2434, #D6D8DB, 4px-radius, and 28px-height provenance.
• Keep #DD3C44 and #1375EC bounded to their captured exchange-market context.
• Treat Roboto as an observed system-resolved runtime family, not an Upbit-owned brand font.
• Keep marketing, exchange, support, Developer Center, and unobserved authenticated-product claims separated.
• Declare a state only where the bundle holds a settled state frame (the header links’ weight 500); record defaults elsewhere.

Don’t

• Reintroduce the former prose-derived semantic palette or unsupported broad component inventory as current evidence.
• Render Noto Sans KR, EuclidCircular, Droid Sans, Roboto Condensed, Arial, or Helvetica as a verified Upbit UI-family substitute.
• Invent hover, focus, pressed, disabled, validation, menu, dialog, toast, state-transition, motion, or accessibility behavior from static markup.
• Treat the Upbit Developer SDK licence as a licence for UI assets, fonts, logos, or brand use.
• Infer a documented public design system from the absence of a discovered design-system URL.

Voice & Tone

No first-party voice or editorial guideline was collected. The public Korean product, support, and Developer Center surfaces show different functional registers, but this evidence is insufficient to prescribe a reusable brand voice. Avoid inventing customer promises, urgency claims, or copied copy under the Upbit name.

Governance

Accessibility & locale

• The public capture supplies color and geometry values, not an accessibility audit; contrast, keyboard support, focus indication, and target-size conformance are not claimed here.
• The current public text stack includes Korean-capable fallback families, but the capture does not establish a locale typography policy or cross-market color convention.
• Implementations should provide accessible states without presenting those states as observed Upbit behavior.

Known Gaps

• Contrast, home-header-link. Text #1a2434 on #00000000 measures 1.35:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, exchange-panel-tab. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, order-side-tab. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, notice-search-input. Text #1a2434 on #00000000 measures 1.35:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, order-form-input. Text #1a2434 on #00000000 measures 1.35:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.