하이퍼커넥트 DESIGN.md

Design System Inspiration of Hyperconnect

Overview

Visual Theme & Atmosphere

Hyperconnect (하이퍼커넥트) is a video-technology company founded in 2014 and best known for Azar, its video chat app (the Product page's calls to action read "START VIDEO CHAT" and "INSTALL AZAR APP"). Its careers site describes it as a global video-technology company with world-class depth in video communication (WebRTC) and artificial intelligence, working under a mission to connect people around the world and create social and cultural value; the Tech page claims the world's first mobile version of WebRTC. The company's own history page tracks the arc: Azar's first global Google Play feature and 10 million users in 2015, a real-time voice-translation feature built with Google in 2016, subsidiaries in Singapore and Japan, Hakuna Live in 2019, 300 million cumulative Azar users by January 2022 — and, in 2021, the acquisition by Match Group. The footer now reads "HYPERCONNECT LLC" and links to Match Group's site, and every page title carries the registered mark: "HYPERCONNECT®".

The corporate site hyperconnect.com wears that story plainly. Each page opens on a full-bleed hero video under a translucent dark overlay, with a 62px Poppins "Our Mission" headline and the mission line "Innovate Social Experiences, Making Every Connection a Delightful Adventure" set in white. The header links are white Poppins at 16px / 700, and one of them — the section you are in — turns mint #00dd99. That mint is the site's only chromatic signal on its own chrome: it marks the current section on every captured page and colours the "자세히 알아보기" link on the Korean home. Below the hero, section titles drop to near-black rgba(0, 0, 0, 0.8) in Poppins 46px / 700, press cards carry #222222 titles and #b4b4b4 dates, and a dark footer lists links in #858585. Corners are square almost everywhere; the one rounded shape is Azar's own pill-shaped #1cd092 call to action on the Product page.

Key Characteristics:

• One mint, #00dd99, reserved for the current navigation item and an accent link
• Poppins 700 for the hero (62px), section titles (46px), navigation and footer headings
• Body type split by language: Pretendard on the Korean pages, Inter on the English ones
• Square geometry: pagination, arrows and footer buttons at 0px radius
• Greys by role: #222222 titles, #858585 secondary text, #b4b4b4 dates and idle page numbers, #888888 legal links
• Azar's CTAs keep their own look — #1cd092 fill, 28px pill, dark label — inside the corporate Product page
• No box-shadow on any captured element

Primary tasks

• Understand the mission and the company's history
• See what Azar is and get the app
• Read about the company's WebRTC, AI and data work, and its tech blog
• Read press releases in the newsroom
• Find open roles on the careers site

Brand Narrative

Hyperconnect was founded in 2014 around one idea its careers site still states: connect people around the world through video and create social and cultural value doing it. Azar was the vehicle. The company's history page reads as a list of reach — Azar featured by Google Play in more than 56 countries in 2015, 100 million cumulative users by December 2017, 200 million by November 2019, 300 million by January 2022 — interleaved with engineering: a real-time voice-translation function built with Google in 2016, the mobile WebRTC work the Tech page calls a world first, and a steady run of papers at venues such as CVPR, INTERSPEECH, EMNLP, ECCV, ICCV and WSDM. Founder Sang-il Ahn won the EY Entrepreneur Of The Year award in 2018, the year Forbes listed the company among Korea's top ten start-ups.

2021 is the turn: Singletown by SLIDE launched, the company started an enterprise business, and Match Group acquired it. The site now closes with "Copyright © 2026, HYPERCONNECT LLC" and a link to Match Group; the newsroom keeps publishing in Korean, and the tech blog (hyperconnect.github.io) keeps writing about on-device AI and LLM evaluation.

The design is the company in miniature: a dark video hero and big Poppins claims for the consumer side, square controls and plain grey text for the engineering side, and one mint that tells you where you are.

Principles

1. Connection is the mission. UI implication: lead with the mission line and the people it connects, not with features.
2. Show where the user is. UI implication: mint #00dd99 marks the current section; nothing else competes for it.
3. Engineering shown as record. UI implication: history and research as dated lists, press as dated cards.
4. Square and quiet controls. UI implication: 0px corners and grey text on corporate controls; colour belongs to the product's own CTAs.
5. Language-aware type. UI implication: Pretendard for Korean, Inter for English, Poppins for the brand voice in both.

Personas

Personas below are fictional archetypes informed by publicly observable Hyperconnect audiences (Azar users, engineers considering the company, press and partners), not individual people.

김도윤, 29, 서울. A backend engineer reading the Tech page and the tech blog before applying; wants evidence of WebRTC and on-device AI depth.

Mehmet Yılmaz, 24, Istanbul. An Azar user who reached the Product page from a search; looks for the START VIDEO CHAT and app-store buttons.

Sara Lindholm, 41, Stockholm. A partnerships lead checking the history and newsroom to judge scale and ownership before a meeting.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from the Korean home (hyperconnect.com/ko/), the Product page and the newsroom.

Accent

• Hyperconnect Mint (#00dd99): The current navigation item — About on /ko/, Product on the Product page, Newsroom in the newsroom — and the "자세히 알아보기" text link on the home page. This is the primary because it is the one chromatic colour the corporate chrome renders in a selected role, on all three captured pages.
• Azar CTA (#1cd092): The fill of START VIDEO CHAT and INSTALL AZAR APP on the Product page, with a dark rgba(0, 0, 0, 0.87) label. It appears on one page only, in a separate MUI instance with a Roboto stack — Azar's product action carried onto the corporate site — so it is its own token and not the primary.

Ink & Text

• Heading (rgba(0, 0, 0, 0.8)): Home section titles and the default body colour. It carries alpha, so it is recorded here and on the section type role rather than as a colour token (colour tokens are six-digit hex).
• Ink (#222222): Press card titles and the current page number.
• Secondary (#858585): Footer links, the copyright line, the RELATED SITE button, the pagination hover colour and the pagination arrow's fill.
• Muted (#b4b4b4): Press dates and idle page numbers.
• Legal (#888888): The Notice, IP, Code of Ethics and privacy links along the footer's bottom edge.
• On Dark (#ffffff): The hero headline and paragraph, the header links, the language switch and the footer column headings.

Surfaces

• The pages set no background on html or body (both compute transparent), so the white page is the browser default and no canvas token is declared. The hero's dark overlay and the footer's dark fill sit on elements the collector did not record, so neither is a token.

Not carried forward

• The June record's #3860be filter pill, #cddcf2 tint card, #222222 "Apply" and "Confirm My Choices" buttons with 2px corners, and its cookie dialog: none was observed on the three captured pages, and no consent banner appeared on any page opened this session. #18da9e, #f8f8f8, #f4f4f4, #333333, #696969 and #bbbbbb were not observed either.
• The June soft and raised shadows: no captured element has a box-shadow.

Typography

Font Family

• Live surface use (display and navigation): Poppins — loaded, 55 observed uses: the hero headline, section titles, navigation, the language switch, press card titles and footer headings.
• Live surface use (English body and UI): Inter — loaded, 37 observed uses: the hero paragraph on English pages, press dates, page numbers, the copyright line and the RELATED SITE button.
• Live surface use (Korean body): Pretendard — loaded, 11 observed uses: the hero paragraph, copyright and RELATED SITE button on /ko/, and the App Store and Google Play links on the Product page.
• Declared, not loaded: Noto Sans — the stylesheet declares the face and 146 elements ask for noto-sans, but no face loaded, so body copy, list items and footer links render in the browser's fallback sans. No token uses it.
• System stack: Roboto — the Azar CTAs' MUI stack (Roboto, Helvetica, Arial, sans-serif); no web font loads for it.
• Brand typeface: none is published on the pages opened; the collector did not record the file URLs of the loaded faces.

Hierarchy

Principles

• Poppins carries the brand voice: every headline and every navigation label is Poppins 700.
• Body type follows the language: Korean pages switch the hero paragraph and footer text to Pretendard; English pages use Inter.
• Weight, not size, separates UI text: the selected language is the same 12px Poppins at 700 instead of 400.

Layout

Spacing System

• Measured paddings: 6px 8px on page numbers, 6px 16px on the Azar CTA, 12px on the arrows, 6px 8px on the RELATED SITE button.
• Footer columns sit 90px apart (right padding on each column heading) with 20px under each heading.

Grid & Container

• A full-width hero with a 720px text block at the left.
• The newsroom lays press cards out two per row at 344px wide, rows repeating about every 440px.
• A dark footer closes every page with six link columns, a copyright line and the RELATED SITE button.

Whitespace Philosophy

• Large headline, short paragraph, generous gaps: the home page gives each section title (Grow Rapidly & Expand Globally, Technology Driven, Creating Enjoyment) its own band.

Border Radius Scale

• 0px: page numbers, arrows, footer button, press cards
• 28px: the Azar CTA pill
• 50%: a 60 × 60 icon button on the hero

Responsive Behavior

Breakpoints

• Captured at 1440 × 900 only; no breakpoint behaviour was measured.

Touch Targets

• Page numbers are 50 × 50 and arrows 51 × 51; header links are 26px tall.

Collapsing Strategy

• Not measured.

Image Behavior

• The hero is a full-bleed video under a dark overlay; press cards set their title and date at the foot of a 344 × 350 tile.

Elevation & Depth

Shadow Philosophy: No captured element has a box-shadow. Depth comes from the hero video under its overlay and from the dark footer, not from elevation.

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. The navigation frames caught values between white and the next colour (#f5fefb), which shows the links animate without timing them. Treat motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Navigation

Global navigation link

• Background: transparent
• Text: #ffffff
• Selected: #00dd99 on the current section
• Height: 26px
• Font: 16px / 700 / 26.1px Poppins
• States: one hover and pressed pair reads #505050 and another pressed frame #f5fefb; they disagree, so they are treated as transition frames and no hover is declared
• Use: About, Product, Tech, Newsroom, Career, Contact over the hero video

Language switch

• Text: #ffffff, 12px Poppins
• Selected: weight 700 on the active language (KOR on /ko/, ENG on English pages); the other stays at 400

Accent link

• Text: #00dd99
• Font: 14px / 700 (noto-sans stack, falls back)
• Use: 자세히 알아보기 under Technology Driven on the home page

Buttons

Azar CTA

• Background: #1cd092
• Text: rgba(0, 0, 0, 0.87)
• Radius: 28px
• Padding: 6px 16px
• Height: 52px
• Font: 15px / 700 / 26.25px, 0.42855px tracking, Roboto stack
• Use: START VIDEO CHAT and INSTALL AZAR APP on the Product page

Pagination button

• Background: transparent
• Text: #b4b4b4; current page #222222
• Hover and pressed: #858585
• Padding: 6px 8px
• Size: 50 × 50
• Font: 15.75px / 500 Inter

Pagination arrow

• Background: #858585
• Icon: #ffffff; rgba(0, 0, 0, 0.26) while disabled
• Radius: 0px
• Padding: 12px
• Size: 51 × 51

RELATED SITE button

• Background: transparent
• Text: #858585
• Border: 1px solid rgba(233, 233, 233, 0.15)
• Padding: 6px 8px
• Height: 35px
• Font: 12px / 500 / 21px

Cards

Press card

• Radius: 0px
• Size: 344 × 350, two per row
• Title: 16px / 700 / 19.2px Poppins #222222
• Date: 12px / 400 / 18px Inter #b4b4b4

---

Verified: 2026-09-30 (deterministic collector capture of three public pages, logged out, plus first-party context) Tier 1 sources: https://hyperconnect.com/ko/ ; https://hyperconnect.com/en/business/ ; https://hyperconnect.com/en/news/ ; https://hyperconnect.com/en/company/milestone/ ; https://hyperconnect.com/en/tech/ ; https://career.hyperconnect.com/ ; https://hyperconnect.github.io/ Tier 2 sources: getdesign.md/hyperconnect (HTTP 200; the served page contains no occurrence of the name) and styles.refero.design/?q=hyperconnect (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Focus rings, error, empty, loading and success treatments were not captured and are not described.

Do's and Don'ts

Do

• Mark the current section with #00dd99 and keep the other links white over the hero
• Set headlines and navigation in Poppins 700
• Switch body type with the language: Pretendard for Korean, Inter for English
• Keep controls square; use weight to show the selected language
• Use #222222, #858585 and #b4b4b4 for title, secondary and meta text

Don't

• Don't spread mint across fills or backgrounds — on the corporate chrome it only marks selection and one link
• Don't treat Azar's #1cd092 pill as the corporate button; it belongs to the product
• Don't add shadows or rounded cards; none is observed
• Don't rely on noto-sans — the family never loads

Voice & Tone

Hyperconnect speaks as a global technology company with a consumer product: mission-first headlines, factual history, and engineering claims stated as achievements. English carries the brand lines; Korean carries the press releases and the careers site.

Voice samples (verbatim, opened 2026-09-30):

• "Innovate Social Experiences, Making Every Connection a Delightful Adventure" — hero line on every captured page.
• "Connecting the world with innovative technology" — Tech page headline.
• "2014년 설립된 하이퍼커넥트는 비디오 커뮤니케이션(WebRTC)과 인공지능(AI) 분야에서 세계 수준의 실력과 경험을 보유하고 있는 글로벌 영상 기술 기업입니다." — careers site.

Forbidden register: hype adjectives without a number behind them, exclamation-heavy CTAs, emoji on the corporate site.

Agent Prompt Guide

Quick Color Reference

• Current section and accent link: #00dd99
• Hero, header and footer headings: #ffffff
• Section titles and body: rgba(0, 0, 0, 0.8); card titles #222222
• Secondary #858585; meta #b4b4b4; legal #888888
• Azar CTA: #1cd092 with an rgba(0, 0, 0, 0.87) label

Example Component Prompts

• "Create a header over a dark hero video: white 16px / 700 Poppins links, the current one in #00dd99, and an ENG / KOR switch where the active language is 700."
• "Design a press card grid: two cards per row, 344px wide, square corners, title 16px / 700 Poppins #222222, date 12px Inter #b4b4b4."
• "Build pagination: 50 × 50 transparent buttons with 15.75px / 500 Inter numbers in #b4b4b4, hover #858585, current page #222222, and square #858585 arrow buttons with white icons."

Iteration Guide

1. Poppins 700 for every headline and navigation label
2. One mint, only for selection and a single accent link
3. Square corners on every corporate control
4. Pretendard for Korean text, Inter for English
5. No shadows

---

Governance

Known Gaps

• Contrast, pagination-arrow. Text #ffffff on #858585 measures 3.69:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.