Design System Inspiration of NRISE (WIPPY)

Overview

Visual Theme & Atmosphere

NRISE (엔라이즈) is the Korean consumer-tech company behind WIPPY (위피), a No.1-positioned social-discovery app, and 콰트 (Quat), a habit-forming health product. Its web surfaces read as confident, editorial, and almost aggressively monochrome — a near-black-on-white system where a single saturated pink is the only chromatic event on the page. The canvas is pure white (#ffffff) with occasional soft-grey blocks (#fafafa); text and headings sit in a warm near-black ink (#222222) rather than pure black for display, while body copy defaults to true black (#000000). The effect is clean, high-contrast, and product-forward: the design gets out of the way so the app screenshots and the one pink CTA can do the talking.

The typographic personality is unmistakably Korean-modern: everything is set in Pretendard, the de-facto Korean product sans, with headlines running at a heavy weight 700. The corporate hero and section titles land at 38px, the WIPPY product hero jumps to 48px, and section heads on the product surface sit at 36px — all bold, all tight-leading, all in the same near-black #222222. Small grey eyebrow labels (#767676) in Latin caps (“MISSION”, “HISTORY”, “NEWS”) introduce each block at 19px / weight 400, giving the layout a magazine-like rhythm. Nav labels drop to a quiet 14px / weight 600 in a near-black nav ink (#212429). There is no second typeface and no light display weight — the hierarchy is carried entirely by size and the bold/regular weight split.

What distinguishes NRISE from its consumer-app peers is its restraint with depth and color. The system is essentially shadow-free: live inspection found box-shadow: none across the hero, nav, headings, and section CTAs — only a single floating scroll-to-top button carries a subtle two-layer shadow. Separation comes from flat surfaces and dark blocks instead of elevation: a deep-neutral ladder of near-blacks (#212529, #212126, #111111) anchors dark sections and cards, while white cards round at 10–12px. Interactive chrome splits cleanly in two: pill CTAs at 30px radius (the pink #ff0056 WIPPY action and a black #000000 twin for the second product) on the corporate home, and a sharper 8px solid black button on the WIPPY career surface. The result is a flat, fast, mobile-native aesthetic — the visual language of a young Korean app studio, not a legacy corporate site.

Key Characteristics:

• Pretendard everywhere at weight 700 for headlines — no second typeface, no light display weight
• A single saturated pink (#ff0056) reserved for the primary WIPPY CTA — the only chromatic accent
• Warm near-black ink (#222222) for headings; true black (#000000) for body and dark CTAs
• Monochrome dark ladder — #212529 / #212126 / #111111 — for dark sections, cards, and the floating action
• Near-shadow-free: separation via flat white / grey (#fafafa) surfaces and dark blocks, not elevation
• Latin grey eyebrow labels (#767676) at 19px introducing each editorial section
• Pill geometry on the corporate home (30px CTAs) vs a sharper 8px solid button on the product surface
• Quiet 14px / weight 600 nav labels in near-black nav ink (#212429)

Primary tasks

• Express who you are and discover other people
• Meet neighborhood friends who share your interests
• Check how the service handles safety before joining
• Build healthier daily habits with the studio’s second product

Brand Narrative

NRISE (엔라이즈) is a Korean consumer-tech studio that builds mobile products around two human needs: connection and healthy routine. Its flagship is WIPPY (위피), positioned on its own surface as Korea’s No.1 social-discovery service — “나를 표현하고 상대를 발견하는 공간” (a space to express yourself and discover others) and “같은 관심사를 가진 동네 친구와의 만남” (meeting neighborhood friends who share your interests). Its second product line, 콰트 (Quat), sits under the mission “건강한 습관을 형성하여 삶의 변화를 제공합니다” (forming healthy habits to deliver life change). Together the two products express the company’s stated umbrella value: “NRISE가 세상에 전하는 가치.”

The company frames its work in emotional-benefit terms rather than technical ones. Where the corporate mission talks about “편안한 만남” (comfortable connection) delivering “일상의 행복” (everyday happiness), WIPPY’s product surface foregrounds safety as a first-class value — “더 나은 연결을 위해 안전을 최우선의 가치로” — a deliberate stance for a social-discovery category that often carries trust concerns. A press item observed on the homepage (“콰트·위피 눈부신 활약…엔라이즈, 2년 연속 흑자 달성”, dated 2026.04.08) points to a business narrative of two-consecutive-years profitability driven by both products.

What NRISE refuses, visible in its design: the busy, shadow-stacked chrome and multi-color palettes of legacy portals, and the dark-pattern urgency common to engagement-driven social apps. What it embraces: a flat, fast, monochrome canvas; a single trustworthy pink reserved for the one action that matters; bold Pretendard headlines that speak plainly; and copy that frames the product around human feeling and safety rather than metrics.

(Company facts above beyond the live homepage/career surfaces — e.g. the exact founding year and leadership — are not asserted here; the narrative is anchored to verbatim, live-observed positioning and the dated press headline.)

Principles

1. One action, one color. Pink (#ff0056) means “do this.” UI implication: reserve the saturated pink exclusively for the primary WIPPY CTA so the next step is never ambiguous on an otherwise monochrome screen.
2. Feeling before features. The brand sells everyday happiness and healthy habits, not specs. UI implication: lead sections with emotional-benefit headlines; let product screenshots carry the detail.
3. Safety is a design value. For a social-discovery product, trust is a feature. UI implication: surface safety and control copy prominently and calmly; never bury it.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: no shadows; separate with white, grey, and dark blocks; keep the page light and quick to scan.
5. Bold, single-voice type. Pretendard 700 headlines carry the whole hierarchy. UI implication: use size and the bold/regular split for structure — never reach for a second typeface or a light display weight.

Personas

Personas below are fictional archetypes informed by publicly observable NRISE/WIPPY user segments (young Korean adults seeking new connections, users building healthy routines), not individual people.

김하늘, 26, 서울. A young professional new to a neighborhood who uses WIPPY to meet people with shared interests. Values that the app feels safe and expressive rather than transactional. Chose WIPPY because it presented itself as a space to “express and discover,” not a numbers game.

정우진, 31, 경기. A user who came for social discovery and stayed for the studio’s habit product, 콰트. Appreciates the plain, warm tone and the single clear CTA on every screen — he always knows what the next step is.

이서연, 24, 부산. Safety-conscious first-time user of a social-discovery app. Reassured by WIPPY’s explicit “안전을 최우선의 가치로” messaging and the calm, non-pushy interface. Distrusts apps that feel urgent or cluttered.

Colors

Primary

• WIPPY Pink (#ff0056): The single saturated brand accent and primary CTA background. A hot magenta-pink used almost exclusively for the WIPPY product call-to-action — the system’s one “action” color.

Ink & Text

• Ink (#222222): Primary heading and display color. A warm near-black used for every headline (H1/H2/H3) and most section text — softer than pure black, which gives the type a premium weight.
• Pure Black (#000000): Body-copy default and the fill of the black pill/solid CTAs and dark sections. Maximum contrast where it counts.
• Nav Ink (#212429): The near-black used for top-nav item labels — a hair cooler than the heading ink.
• Muted Grey (#767676): Eyebrow labels (“MISSION”, “HISTORY”, “NEWS”), metadata, and lowest-emphasis captions.
• Muted Alt (#8c8c8c): A lighter grey companion for secondary captions and fine print.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, and text on dark/pink surfaces.
• Surface Grey (#fafafa): Soft off-white block background for alternating sections.
• Neutral 900 (#212529): The deepest working neutral — background of the floating scroll-to-top action and dark neutral surfaces.
• Neutral 850 (#212126): Near-black card background for dark product feature cards on the WIPPY surface.
• Section Dark (#111111): Very dark block background for immersive full-width dark sections.

On-Dark

• On Dark (#ffffff): White text and icons placed on any of the dark neutral or pink surfaces.

Typography

Font Family

• Sans: Pretendard (with -apple-system, system-ui, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic fallbacks) — the single family for the entire system, from display to body.

Hierarchy

Principles

• One font, two weights: Pretendard carries everything. Weight 700 is display/heading; weight 400 is body and eyebrow; nav sits at 600. There is no third typeface and no light display weight.
• Weight is the hierarchy: With a single family, the bold/regular contrast (and size) does all the hierarchy work — headlines are always 700, body always 400.
• Comfortable leading: Body and hero run at a generous 1.5 line-height for hangul legibility; section titles tighten only slightly (~1.33–1.35).
• Latin eyebrows over hangul body: Uppercase Latin labels (“MISSION”, “HISTORY”) in muted grey introduce hangul content blocks — a deliberate editorial device.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: Button padding lands at 8px 16px (home pills) and 10.5px 24px (product solid button); section rhythm is generous and vertical

Grid & Container

• Centered single-column marketing layout with an editorial eyebrow → headline → content cadence per section
• Corporate home alternates white (#ffffff) and soft-grey (#fafafa) full-width bands; the WIPPY surface introduces full-width dark blocks
• News/press items sit in a list of white cards at 10px radius
• Feature content on the product surface uses dark cards (#212126) at 12px radius

Whitespace Philosophy

• Editorial spacing over density: generous vertical rhythm between sections; each block breathes around its eyebrow-and-headline pair.
• Flat segmentation: sections separate by background shift (white ↔ #fafafa ↔ dark blocks), not by shadow or heavy borders.
• Single-accent focus: with only one saturated color, the pink CTA is the visual anchor of any screen it appears on.

Border Radius Scale

• Extra-small (4px): nav item buttons
• Small (8px): the product-surface solid button
• Medium (10px): white news/list cards
• Large (12px): dark feature cards
• XL (24px): the floating scroll-to-top action
• Pill (30px): the home-page CTA pills
• Jumbo (48px): large pill/avatar-scale rounding

Responsive Behavior

Breakpoints

Touch Targets

• Home CTA pills at 40px height, full pill for an unmistakable tap target
• Product solid button at 48px height with 24px horizontal padding
• Nav items at 32px height, spaced within the header
• Floating scroll-to-top at 48px, comfortably tappable

Collapsing Strategy

• Hero: 48px WIPPY / 38px corporate headlines scale down on mobile, weight 700 maintained
• Feature bands: multi-column → stacked single column
• White ↔ grey ↔ dark alternating sections maintain full-width treatment
• Eyebrow → headline → content stacks vertically at all sizes

Image Behavior

• App screenshots and product illustrations carry no shadow at any size, consistent with the flat system
• Cards maintain 10–12px radius across breakpoints

Elevation & Depth

Shadow Philosophy: NRISE is a near-shadowless, flat system. Live inspection returned box-shadow: none across the hero, nav, headings, cards, and section CTAs on both surfaces — the only element carrying a shadow is the floating scroll-to-top button, which uses a soft two-layer drop. Depth and grouping are otherwise communicated entirely through flat surfaces: white (#ffffff), soft grey (#fafafa), and the dark neutral ladder (#212529, #212126, #111111). When emphasis is needed the system reaches for the pink #ff0056 CTA or a dark block, never elevation.

Values kept in prose

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

• shadow.none: none
• shadow.floating: rgba(0,0,0,0.04) 0px 1px 2px 0px, rgba(0,0,0,0.06) 0px 8px 24px

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast aesthetic. CTAs respond to press with a subtle scale/opacity shift; content fades in from below at motion-standard / ease-enter; the floating scroll-to-top eases in on scroll. No bounce or spring — a trust-forward social product signals steadiness, not gimmickry. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.

<!– OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on two surfaces:

• — corporate home: nav, mission/history/news sections, pink & dark CTAs
• — WIPPY product/career surface: hero, feature sections, primary button, floating TOP action

Token-level claims (§1-9) are sourced from this live inspection (see web/references/nrise/.verification.md Proof block for raw computed-style samples).

Voice samples (§10) are verbatim from the live surfaces (corporate mission line, WIPPY hero, WIPPY safety value).

Brand narrative (§11): NRISE (엔라이즈) operates WIPPY (위피, social discovery) and 콰트 (Quat, healthy-habit). Positioning quotes are verbatim from the live homepage/career surfaces; the profitability note references the dated press headline observed on the homepage (“엔라이즈, 2년 연속 흑자 달성”, 2026.04.08). Founding year and leadership are deliberately NOT asserted — not verified from a first-party statement in this turn.

Personas (§13) are fictional archetypes informed by publicly observable WIPPY/NRISE user segments. Names are illustrative; they do not refer to real people.

Interpretive claims (e.g., “one action, one color”, “flat and fast as a rejection of legacy portal chrome”) are editorial readings connecting NRISE’s observed design to its positioning, not directly sourced NRISE statements. –>

Components

Buttons

WIPPY CTA (Primary)

• Background: #ff0056
• Text: #ffffff
• Radius: 30px
• Padding: 8px 16px
• Height: 40px
• Font: 16px Pretendard weight 700
• Use: WIPPY product call-to-action (“더 알아보기”) — the system’s single saturated action

Dark Pill CTA

• Background: #000000
• Text: #ffffff
• Radius: 30px
• Padding: 8px 16px
• Height: 40px
• Font: 16px Pretendard weight 700
• Use: Second-product CTA (“더 알아보기”) on the corporate home — a monochrome twin of the pink pill

Solid Button (Product surface)

• Background: #000000
• Text: #ffffff
• Radius: 8px
• Padding: 10.5px 24px
• Height: 48px
• Font: 16px Pretendard weight 400
• Use: WIPPY career primary button (“바로가기”) — sharper geometry than the home pills

Nav Item

• Background: #ffffff
• Text: #212429
• Radius: 4px
• Padding: 5.5px 12px
• Height: 32px
• Font: 14px Pretendard weight 600
• Active: background #222222, text #ffffff
• Use: Top-nav item (HOME / PRODUCT / CULTURE / CAREER); the active item fills dark

Floating Top Button

• Background: #212529
• Text: #ffffff
• Radius: 24px
• Height: 48px
• Shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.06) 0px 8px 24px
• Use: Scroll-to-top floating action — the one place the flat system uses elevation

Cards & Containers

News Card (White)

• Background: #ffffff
• Radius: 10px
• Use: News/press list card on the white canvas (no shadow)

Dark Feature Card

• Background: #212126
• Text: #ffffff
• Radius: 12px
• Use: Dark product feature card on the WIPPY surface

Badges

Eyebrow Label

• Text: #767676
• Font: 19px Pretendard weight 400
• Use: Latin-caps section eyebrow (“MISSION”, “HISTORY”, “NEWS”)

States

Do’s and Don’ts

Do

• Set every headline in Pretendard weight 700 — it’s the entire display voice
• Use warm near-black ink (#222222) for headings and true black (#000000) for body
• Reserve pink (#ff0056) for the primary WIPPY CTA — keep it the single “action” color
• Separate sections with flat surfaces (#ffffff ↔ #fafafa ↔ dark blocks), not shadows
• Introduce sections with muted-grey (#767676) Latin-caps eyebrow labels at 19px
• Use pill geometry (30px) for the home CTAs and a sharper 8px solid button on the product surface
• Anchor dark sections and cards with the neutral ladder (#212529, #212126, #111111)
• Keep body and hero leading generous (1.5) for hangul legibility

Don’t

• Add drop shadows for elevation — NRISE is flat; only the floating TOP button carries one
• Spread pink across many elements — it dilutes the single-action signal
• Introduce a second typeface or a light display weight — Pretendard 700/400 is the whole system
• Use pure black (#000000) for headings — reserve the warm near-black #222222
• Mix in a second accent hue — pink is the only saturated color
• Set headlines in a regular weight — display is always 700
• Over-tint surfaces with color — the neutrals are strictly greyscale
• Bury the CTA in decoration — the one pink pill should read as the obvious next step

Voice & Tone

NRISE’s voice is warm, human, and reassuring — a Korean consumer brand that frames technology in terms of everyday feeling rather than features. The corporate mission lines speak in the register of emotional benefit: comfortable connection and healthy habits, not KPIs. WIPPY’s product copy is confident and safety-forward, positioning the app as a trustworthy space to be yourself. Copy is plain, declarative Korean, low on jargon and free of hype punctuation.

Voice samples (verbatim from live surfaces):

• “편안한 만남을 통해 일상의 행복을 전달합니다” — corporate mission (comfortable connection → everyday happiness). (verified live 2026-07-02)
• “위피, 소셜 디스커버리 1위 서비스” — WIPPY product hero (category-leading positioning). (verified live 2026-07-02)
• “더 나은 연결을 위해 안전을 최우선의 가치로” — WIPPY safety value (safety as the top priority for better connection). (verified live 2026-07-02)

Forbidden register: hype punctuation and superlative stacking, fear- or urgency-based dark patterns, undefined jargon, anything that frames a social app as a numbers game rather than human connection.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: WIPPY Pink (#ff0056)
• Heading ink: Near-black (#222222)
• Body text: Pure black (#000000)
• Nav labels: Nav ink (#212429)
• Background: Pure white (#ffffff)
• Soft surface: Grey (#fafafa)
• Dark neutrals: #212529, #212126, #111111
• Muted labels: Grey (#767676), Grey alt (#8c8c8c)
• On dark/pink: White (#ffffff)

Example Component Prompts

• “Create a hero on white background. Headline at 48px Pretendard weight 700, line-height 1.5, color #222222. Below it a pink CTA: #ff0056 background, white text, 30px radius, 8px 16px padding, 40px height, 16px Pretendard weight 700 — ‘더 알아보기’.”
• “Design an editorial section: muted-grey (#767676) eyebrow label ‘MISSION’ at 19px Pretendard weight 400, then a 38px weight-700 #222222 title, then body at 16px weight 400 #000000. No shadow — separate the next block with a #fafafa background.”
• “Build a dark feature card: #212126 background, white text, 12px radius, no shadow. Title 23px Pretendard weight 700 #ffffff, body 16px weight 400.”
• “Create top nav: white header. Pretendard 14px weight 600 items in #212429; active item fills #222222 with white text at 4px radius. WIPPY pink CTA optional on the right.”

Iteration Guide

1. Pretendard weight 700 for every headline; weight 400 for body and eyebrows; 600 for nav
2. Pink (#ff0056) is the single action color — don’t spread it
3. No shadows — separate with white / #fafafa / dark blocks; only the floating TOP button lifts
4. Heading ink is #222222 (warm near-black), body is #000000 (true black)
5. Home CTAs are 30px pills; the product solid button is 8px
6. Dark surfaces use the neutral ladder #212529 / #212126 / #111111
7. Lead sections with a muted-grey Latin-caps eyebrow at 19px

Governance

Known Gaps

• Contrast, cta-wippy. Text #ffffff on #ff0056 measures 3.90:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.