모두싸인 DESIGN.md

Design System Inspiration of Modusign

Overview

Visual Theme & Atmosphere

Modusign (모두싸인) is a Korean electronic-signature and contract platform, operated by 주식회사 모두싸인. Its founder and CEO 이영준 started the company in 2015 as a student startup in Busan under the name 로아팩토리, beginning with a lawyer-search service; seeing how many legal disputes came from lost or badly drafted contracts led him to electronic contracts. By Hankook Ilbo's January 2026 interview, about 330,000 companies and public bodies used the service and more than ten million people used it. The company's recruiting site states the mission in one line — "계약이 모두에게 더 간편하고 안전할 수 있도록 바꿉니다" — and describes where it is going: past e-signature toward a CLM (contract lifecycle management) platform that connects drafting through analysis with AI. The home page has moved in the same direction: its title now reads "전자서명·전자계약의 표준" and its hero "대한민국 전자서명의 표준 모두싸인", above a headline about connecting the whole contract process — 작성, 검토, 체결, 관리 — in one place.

The brand expression is a warm yellow action on a quiet white page. Every 무료 체험 시작 button on the three captured pages is filled with egg-yolk yellow #fed05f, edged in a 1px honey #ffc533, labelled in black #000000, and brightens to #ffd80a under the pointer. Around it the site stays plain: #333333 body text on #ffffff, #111111 and #212121 for the strongest copy, and a ladder of 1px hairlines (#f0f0f0, #e6e6e6, #cccccc) and pale fills (#fafafa, #f5f5f5, the warm #fff8e6) instead of elevation. The redesigned home hero sets a white 72px / 700 headline over a dark band whose fill the collector did not record as a colour, with a yellow #fed05f dash in the tag line above it; the headline's noun rolls through 계약서, 신청서, 서약서, 확인서 and other document types.

Pricing adds a parallel set of plan colours — #217aff for the recommended plan's action and edge, #08236d for the public-sector plan, black #000000 for another plan action — and the one shadow on the captured pages: a soft blue glow, rgba(33, 122, 255, 0.3) 0px 0px 20px 0px, around the recommended plan card. All text is Pretendard.

Key Characteristics:

• Yellow action system — #fed05f fill, 1px #ffc533 edge, black label, #ffd80a on hover and press
• Pretendard throughout, weight 700 for headlines and action labels, a site-wide -0.4px tracking and 1.6 body line height
• Flat surfaces separated by 1px hairlines and pale fills; the recommended plan card's blue glow is the only shadow observed
• Radii at 6px (header actions), 8px (page actions, tabs), 12px (cards, banners, menus), 24px (badges), 100px (billing toggle)
• Outlined #cccccc actions and dark #1a1a1a / #000000 actions alongside the yellow one
• Plan-context colours on /pricing: #217aff, #08236d
• A dark hero band on the home page with a white headline

Primary tasks

• Send a batch of signature requests and see who has not signed yet
• Sign a document from a link without creating an account
• Keep and manage finished contracts where they were signed (캐비닛)
• Start a free trial without booking a sales call first
• Check legal validity and security before adopting
• Embed signing into another product through the API

Brand Narrative

Modusign began in 2015 as 로아팩토리, a student startup in Busan: 이영준, a law graduate who had left the civil-service exam track and taught himself programming, started with a lawyer-search service and saw how many disputes traced back to lost or badly drafted contracts. That observation became an electronic-signature service whose name reads as its promise — 모두 (everyone) plus 싸인 (sign), an editorial reading of the name. Hankook Ilbo's 2026 interview reports about 330,000 organisations and more than ten million users as of December 2025, customers from the Seoul city government and the Government Employees Pension Service to Samsung Electronics and Kakao, and acquisition offers every year.

The company now describes itself less as a signing tool than as contract infrastructure. In December 2024 its official blog carried 이영준's statement that after supporting the move from paper to electronic documents, the next step is an AI-based contract lifecycle management (CLM) solution; the 2026 recruiting site repeats it as direction — "전자서명을 넘어 계약의 작성부터 분석까지 전 과정을 AI로 잇는 CLM 플랫폼". The home page follows suit, with a headline about connecting 작성, 검토, 체결 and 관리 and product tabs for e-signature and 캐비닛.

The design keeps the approachable register the name implies. Where contract software could dress in institutional chrome, Modusign keeps a white page, black-on-yellow actions and plain Korean copy, and puts a free trial one button away on every captured page.

Principles

1. Everyone signs. Contracts for 모두, not only legal teams. UI implication: the free-trial action is permanent, yellow, and present in the header of every page.
2. Claim the standard, then lower the bar. "전자서명의 표준" is paired with 무료 체험 시작. UI implication: follow every claim with a low-friction action and verifiable numbers.
3. One process, end to end. 작성, 검토, 체결, 관리 in one product. UI implication: present workflows as a connected sequence, not a feature grid.
4. Flat unless it matters. UI implication: hairlines and fills for structure; elevation only for the recommended choice.
5. Warmth where the law is cold. UI implication: keep the yellow for action moments; let trust copy stay sober text on white.

Personas

Personas below are fictional archetypes informed by publicly observable Modusign customer segments (HR and legal teams, SMB operators, public-sector administrators, developers), not individual people.

박민지, 33, 서울. HR manager at a 200-person company during 연봉계약서 season. Sends batch signature requests and tracks who has not signed; chose Modusign because employees can sign without installing anything or creating an account.

정태호, 45, 대구. Runs a franchise food company that signs dozens of supplier contracts a month. Cares that a contract which took days of couriering now closes the same afternoon, with legal validity he can show his lawyer.

김은영, 38, 세종. Public-institution administrator evaluating the public-sector plan. Reads the security and legal-validity pages and the audit trail before anything else.

이준혁, 29, 판교. Backend developer embedding signatures into his company's SaaS through the Modusign API. Judges the product by its documentation and appreciated starting from a free trial instead of a sales call.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from modusign.co.kr, /pricing and /features.

Why #fed05f is the primary. It is the fill of the rendered primary action on every captured page: the header's 무료 체험 시작 (capture 4 on home, /pricing and /features), the page-body 무료 체험 시작 (home captures 7 and 18, /features capture 7) and the yellow conversion banner. The bundle's colour census records #fed05f as a background nine times across all three surfaces, and each of those actions settles on #ffd80a in its hover and pressed frames.

Yellow (primary action)

• Modusign Yellow (#fed05f): Fill of every 무료 체험 시작 action and of the yellow conversion banner; also the dash in the home hero's tag line.
• Yellow Hover (#ffd80a): Hover and pressed fill of the yellow actions, agreed by the header, page-body and banner copies on all three pages.
• Honey Edge (#ffc533): The 1px border of the yellow buttons.
• Deep Honey Edge (#ffb90a): The 1px border of the yellow conversion banner.
• Warm Tint (#fff8e6): Fill of the security panel on /features.

Plan colours (pricing)

• Plan Blue (#217aff): Fill and edge of the recommended plan's action, the recommended card's 1px border, and the tone of its glow.
• GOV Navy (#08236d): Fill of the public-sector plan action.
• Blue Label (#4b75e7): Small 16px / 500 labels on /features.

Text

• Headline (#111111): The home workflow headline and the selected product tab title.
• Ink (#212121): Strong copy on the home page (32px / 600 headings, 18px / 700 labels), the free-plan action label and banner titles.
• Body (#333333): The document default and the headlines on /pricing and /features.
• Secondary (#474747): Statistic labels and footer menu links.
• Gray 700 (#5c5c5c): Feature descriptions and the sticky menu on /features.
• Muted (#707070): Plan list items on /pricing.
• Faint (#999999): Inactive toggle and tab labels, the struck-through list price, the free-plan action's border.
• Tab Inactive (#d3d3d3): Unselected product tab titles on the home page.
• Black (#000000): Labels on the yellow and white actions; the fill of the black plan action.

Surfaces and lines

• Canvas (#ffffff): Page background, plan cards, outlined actions, the sticky menu.
• Dark Fill (#1a1a1a): Fill of the home page's dark actions, which settle on #212121 under the pointer.
• Surface (#fafafa): The free-plan action and the workspace panel on /features.
• Surface Alt (#f5f5f5): The grey conversion banner, hover fill of every outlined action, grey badges.
• Hairline Faint (#f0f0f0): The selected billing toggle's border, the grey banner's border, the pricing tabs' hover fill.
• Hairline (#e6e6e6): 1px borders of plan cards and home statistic cards.
• Hairline Strong (#cccccc): 1px borders of the outlined actions and of the dark and GOV actions.

Not carried forward

• #0000ee "browser-default link blue": in the capture it is the computed colour of wrapper anchors (card links, SNS icons, the "자세히 보기" text buttons, the floating 소개서 받기 button). Their visible labels are child elements styled white or gray1000, so no link colour is claimed; the #ff0000 in their pressed frames is the browser's default :active colour.
• #dddddd (comparison-table lines) and #ff4d4f (consult-form errors) were not observed on the captured pages. #e2e9fe is now a badge fill and badge edge on /features and home, not a plan-column tint.

Typography

Font Family

• Live surface use: Pretendard — loaded, 747 observed uses across headings, body, buttons, cards, tabs and badges; the computed family appears as both Pretendard and pretendard. The bundle records no source URL for it and the site's shared Webflow stylesheet declares no @font-face for it, so how it is served was not resolved. Pretendard is Kil Hyung-jin's open typeface, published under the SIL Open Font License 1.1; it is not a Modusign-owned face.
• Declared only (no observed use): Lato, Lato Fallback and Noto Sans KR (Google Fonts), and webflow-icons (an icon font embedded in the Webflow stylesheet).
• Official brand typeface: none was found on the captured or context pages, so none is claimed.

Hierarchy

Principles

• Bold headlines, regular reading text: headlines and action labels at 700 (the workflow headline at 600), reading text at 400.
• 1.4 on headlines, 1.6 on text: multi-line Korean headlines keep a 1.4 line height; body copy sits at 1.6.
• Tight tracking everywhere: -0.4px is applied site-wide; the 36px headline tightens to -0.72px and the tab titles loosen to -0.24px.

Layout

Spacing System

• Header actions: 8px vertical, 16px horizontal at 44px height
• Page actions: 12px vertical, 24px horizontal at 52px height; plan-detail actions 8px 24px at 44px
• Conversion banners: 30px 36px
• Statistic cards: 36px 36px 52px
• Advanced-feature panels: 48px 56px 64px

Grid & Container

• Home sections run in a 1192px container: a row of three 381px statistic cards, three feature cards, and full-width additional-service rows divided by 1px #e6e6e6 top borders.
• /pricing sets a 1080px row of 349px plan cards (the recommended card is taller and glows), then a full-width public-sector card and four 197px plan-detail cards filled #dbf6f0, #e9f1ff, #eeeafc and #e5eaf9.
• /features pairs a 251px sticky section menu with 781px feature columns, then a grid of advanced-feature panels.
• Both /pricing and /features end with the grey and yellow conversion banners side by side, 528px each.

Whitespace Philosophy

• Every section ends at an action: the yellow and outlined pair recurs in the header, page bodies and the closing banners.
• Flat segmentation: hairlines and pale fills separate content; elevation is reserved for the recommended plan.

Border Radius Scale

• 6px: header actions, small badges
• 8px: page actions, tabs, the selected billing option
• 12px: cards, banners, the sticky menu, feature panels
• 24px: rounded badges on /features
• 100px: the billing toggle; 160px: the NEW marker

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. The markup carries br-for-mobile line breaks in the hero headline and a display-none-mobile class on a feature-card wrapper, so the mobile layout differs, but no breakpoint was measured.

Touch Targets

• Header actions: 44px tall
• Page actions: 52px tall; plan-detail and GOV actions 44px
• Plan-comparison tabs: 57px; billing toggle 41px; sticky menu items 58px

Collapsing Strategy

• Not measured beyond the mobile-specific classes named above.

Image Behavior

• Feature screenshots on /features sit in 12px-radius frames with a 1px #f5f5f5 edge; a home screenshot box uses #f8f9fa with a 1px #e6e6e6 border.

Elevation & Depth

Shadow Philosophy: Modusign's captured pages are flat. Structure comes from hairlines and pale fills, emphasis from solid fills — the yellow action, the dark and black actions, the navy GOV action. The single exception is deliberate: the recommended plan card on /pricing carries a blue glow and a blue edge, so the page's one elevated object is the plan the company wants chosen.

Values kept in prose

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

• shadow.popular: rgba(33, 122, 255, 0.3) 0px 0px 20px 0px

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. The home page's own inline CSS declares one looping keyframe animation, rollText, which steps the hero's document noun (계약서, 신청서, 서약서, 확인서, 합의서, 청약서, 약정서, 동의서, 위임장) upward in ten even stops; its timing is not claimed here. Treat other motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Navigation

Header text link

• Background: transparent
• Text: #000000
• Padding: 8px 16px
• Height: 42px
• Font: 16px / 400 / 25.6px Pretendard
• States: rest only; no state frame was recorded
• Use: 블로그 in the header; the sign-in link beside it was read for style and never followed

Home product tabs

• Text: #d3d3d3 unselected
• Font: 24px / 700 / 33.6px Pretendard, -0.24px
• Selected: #111111 on the first title (모두싸인 전자서명)
• States: selected variant read from rest values; no pointer frame
• Use: product tab titles on the home page

Sticky feature menu (/features)

• Background: #ffffff
• Text: #5c5c5c
• Radius: 12px
• Padding: 16px
• Height: 58px
• Font: 18px / 400 / 25.6px Pretendard
• Hover: background #fffae0
• Pressed: background #fffae0
• States: three siblings settle on #fffae0; focus is not declared from the capture
• Use: sticky section menu, 251 × 58

Plan-comparison tab (/pricing)

• Background: transparent
• Text: #999999
• Radius: 8px
• Padding: 12px 16px 0px
• Height: 57px
• Font: 18px / 400 / 25.6px Pretendard
• Selected: text #212121 at 700
• Hover: background #f0f0f0, text #212121
• Pressed: background #f0f0f0, text #212121
• States: two siblings agree, and the selected tab takes the same fill; focus is not declared from the capture
• Use: tabs above the plan comparison

Billing toggle (/pricing)

• Background: transparent
• Text: #999999
• Radius: 100px
• Padding: 7px 0px 8px
• Height: 41px
• Font: 16px / 400 / 25.6px Pretendard
• Selected: #ffffff background, #333333 text at 700, 1px solid #f0f0f0, 8px radius
• States: selected variant read from rest values; the unselected option's hover and pressed frames match its rest values, so no state is declared
• Use: billing-period switch

Buttons

Header action (무료 체험 시작)

• Background: #fed05f
• Text: #000000
• Border: 1px solid #ffc533
• Radius: 6px
• Padding: 8px 16px
• Height: 44px
• Font: 14px / 700 / 25.6px Pretendard
• Hover: background #ffd80a
• Pressed: background #ffd80a
• States: the header copy on all three pages settles on #ffd80a; focus is not declared from the capture
• Use: header, 110 × 44

Header secondary (도입 문의)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #cccccc
• Radius: 6px
• Padding: 8px 16px
• Height: 44px
• Font: 14px / 700 / 25.6px Pretendard
• Hover: background #f5f5f5
• Pressed: background #f5f5f5
• States: the header copy on all three pages settles on #f5f5f5; focus is not declared from the capture
• Use: header, left of the yellow action, 84 × 44

Primary action (무료 체험 시작)

• Background: #fed05f
• Text: #000000
• Border: 1px solid #ffc533
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 700 / 25.6px Pretendard
• Hover: background #ffd80a
• Pressed: background #ffd80a
• States: three copies on two pages settle on #ffd80a; focus is not declared from the capture
• Use: page-body free-trial action, 137 × 52

Outlined action

• Background: #ffffff
• Text: #000000
• Border: 1px solid #cccccc
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 700 / 25.6px Pretendard
• Hover: background #f5f5f5
• Pressed: background #f5f5f5
• States: four copies on two pages settle on #f5f5f5; focus is not declared from the capture
• Use: consultation action paired with the yellow one, 107 × 52

Dark action

• Background: #1a1a1a
• Text: #ffffff
• Border: 1px solid #cccccc
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 600 / 25.6px Pretendard
• Hover: background #212121
• Pressed: background #212121
• States: two siblings settle on #212121; focus is not declared from the capture
• Use: dark actions on the home page, 182 × 52

Black plan action

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 700 / 25.6px Pretendard
• Hover: background #333333
• Pressed: background #333333
• States: a /pricing and a /features copy settle on #333333; focus is not declared from the capture
• Use: plan action on /pricing, 299 × 52

Recommended plan action

• Background: #217aff
• Text: #ffffff
• Border: 1px solid #217aff
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 700 / 25.6px Pretendard
• States: one element; its hover and pressed frames read #0e6eff, not declared without a sibling
• Use: action on the recommended plan card, 299 × 52

Free plan action

• Background: #fafafa
• Text: #212121
• Border: 1px solid #999999
• Radius: 8px
• Padding: 12px 24px
• Height: 52px
• Font: 16px / 700 / 25.6px Pretendard
• States: one element; its hover and pressed frames read #f5f5f5, not declared without a sibling
• Use: free-plan action on /pricing

Plan-detail action

• Background: #ffffff
• Text: #000000
• Border: 1px solid #cccccc
• Radius: 8px
• Padding: 8px 24px
• Height: 44px
• Font: 16px / 700 / 25.6px Pretendard
• Hover: background #f5f5f5
• Pressed: background #f5f5f5
• States: three siblings settle on #f5f5f5; focus is not declared from the capture
• Use: plan-detail cards on /pricing, 173 × 44

Public-sector plan action

• Background: #08236d
• Text: #ffffff
• Border: 1px solid #cccccc
• Radius: 8px
• Padding: 8px 24px
• Height: 44px
• Font: 16px / 700 / 25.6px Pretendard
• States: rest only; no state frame was recorded
• Use: GOV plan action on /pricing, 173 × 44

Cards & Containers

Plan card

• Background: #ffffff
• Border: 1px solid #e6e6e6
• Radius: 12px
• Use: plan cards on /pricing, 349 wide; 40px 24px header over 16px 24px rows

Recommended plan card

• Background: #ffffff
• Border: 1px solid #217aff
• Radius: 12px
• Shadow: rgba(33, 122, 255, 0.3) 0px 0px 20px 0px
• Use: the recommended plan, 349 × 877, topped by a #e9f2ff badge strip with 12px 12px 0 0 corners

Statistic card

• Background: transparent
• Border: 1px solid #e6e6e6
• Radius: 12px
• Padding: 36px 36px 52px
• Size: 381 × 180
• Use: three statistic cards on the home page; label 18px / 400 #474747

Yellow conversion banner

• Background: #fed05f
• Text: #212121
• Border: 1px solid #ffb90a
• Radius: 12px
• Padding: 30px 36px
• Size: 528 × 94
• States: whole-card link; its hover and pressed frames read #ffd80a on one element and are not declared as a state
• Use: 무료 체험 시작 banner at the foot of /pricing and /features

Grey conversion banner

• Background: #f5f5f5
• Text: #212121
• Border: 1px solid #f0f0f0
• Radius: 12px
• Padding: 30px 36px
• Size: 528 × 94
• States: whole-card link; its hover and pressed frames read #e6e6e6 on one element and are not declared as a state
• Use: consultation banner beside the yellow one

Advanced-feature panel (/features)

• Background: #fafafa
• Radius: 12px
• Padding: 48px 56px 64px
• Use: workspace panel; its siblings fill with #333333 (API, white text), #fff8e6 (security) and #fffcf5 (branding)

Badges

NEW marker

• Background: #fff1cc
• Text: #e0a100
• Radius: 160px
• Padding: 0px 8px
• Height: 26px
• Font: 13px / 500 / 25.6px Pretendard
• Use: beside footer items

Label badge

• Background: #f0f2ff
• Text: #4351e8
• Border: 1px solid #e2e9fe
• Radius: 6px
• Padding: 6px 12px
• Font: 13px / 500 / 16.9px Pretendard
• Use: additional-service rows on the home page

---

Verified: 2026-09-30 (deterministic collector capture of three public pages, logged out, plus first-party context) Tier 1 sources: https://modusign.co.kr/ ; https://modusign.co.kr/pricing ; https://modusign.co.kr/features ; https://recruit.modusign.co.kr/ko/intro ; https://blog.modusign.co.kr/news/pr/etnews_2412 ; https://blog.modusign.co.kr/ Tier 2 sources: getdesign.md/modusign (HTTP 200; the served page contains no occurrence of the name) and styles.refero.design/?q=modusign (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, disabled and success treatments were not captured and are not described.

Do's and Don'ts

Do

• Fill the primary free-trial action with #fed05f, edge it with 1px #ffc533, label it in black, and brighten it to #ffd80a on hover
• Pair it with an outlined action: white, 1px #cccccc, black label, #f5f5f5 on hover
• Set everything in Pretendard with -0.4px tracking; headlines at 700 with a 1.4 line height, text at 400 with 1.6
• Separate content with 1px #e6e6e6 / #f0f0f0 hairlines and pale fills
• Use 6px corners in the header, 8px on page actions and tabs, 12px on cards and banners
• Keep #217aff and #08236d to plan contexts on pricing
• Reserve elevation for the one item you want chosen, as the recommended plan's glow does

Don't

• Don't put white text on the yellow action; its label is black
• Don't add drop shadows to ordinary cards; the only captured shadow belongs to the recommended plan
• Don't style body links in browser-default blue; the captured labels are white or near-black children of their anchors
• Don't use yellow for secondary actions; outlined and dark actions carry those roles
• Don't mix in a second typeface; the declared Lato and Noto Sans KR are not rendered
• Don't invent focus rings or hover values the capture did not settle

Voice & Tone

Modusign's voice is direct, standard-setting and reassuring. The home page states the claim as a title — "대한민국 전자서명의 표준" — and immediately lowers the barrier with 무료 체험 시작. Copy is short, declarative Korean that frames contracts, a stressful legal domain, as a single connected process: 요청부터 체결, 관리까지, 한번에. Confidence comes from scope and numbers rather than exclamation marks.

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

• "대한민국 전자서명의 표준 모두싸인" — home hero headline.
• "서명 요청부터 체결, 관리까지 하나의 서비스로 해결하세요." — home hero subline.
• "계약의 시작부터 끝까지, 모두싸인으로" — /features headline.
• "계약이 모두에게 더 간편하고 안전할 수 있도록 바꿉니다" — recruiting site.

Forbidden register: exclamation-heavy urgency, fear-based legal warnings, unexplained legalese, discount-mall promotion on the core product.

Agent Prompt Guide

Quick Color Reference

• Primary action: #fed05f fill, #ffc533 edge, #000000 label, hover #ffd80a
• Banner edge: #ffb90a; warm panel #fff8e6
• Text: #333333 body, #111111 / #212121 strong, #474747, #5c5c5c, #707070, #999999, #d3d3d3
• Surfaces: #ffffff, #fafafa, #f5f5f5; hairlines #f0f0f0, #e6e6e6, #cccccc
• Dark actions: #1a1a1a (hover #212121), #000000 (hover #333333)
• Plans: #217aff, #08236d; small blue labels #4b75e7

Example Component Prompts

• "Create a header action pair: an outlined button (white, 1px solid #cccccc, black 14px / 700 Pretendard label, 6px radius, 8px 16px padding, 44px tall, #f5f5f5 on hover) and a primary button with the same geometry filled #fed05f, edged 1px #ffc533, labelled black, #ffd80a on hover."
• "Design a plan card row: white cards with 1px #e6e6e6 borders and 12px radius; the recommended card has a 1px #217aff border, a rgba(33, 122, 255, 0.3) 0 0 20px glow and a #217aff action with white 16px / 700 label, 52px tall."
• "Build a closing banner pair: left #f5f5f5 with a 1px #f0f0f0 edge, right #fed05f with a 1px #ffb90a edge, both 12px radius and 30px 36px padding, titles in #212121."

Iteration Guide

1. One yellow primary per group, with black label and a #ffd80a hover
2. Outlined #cccccc companion for the secondary action
3. Pretendard, -0.4px tracking, 700 headlines, 400 text
4. Hairlines and pale fills, not shadows
5. 6 / 8 / 12px corners by role
6. Blue and navy only for plans

---

Governance

Known Gaps

• Contrast, nav-link. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, plan-blue-cta. Text #ffffff on #217aff measures 3.97:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, new-badge. Text #e0a100 on #fff1cc measures 2.02:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.