--- name: Banksalad colors: primary: '#13bd7e' action: '#06a96c' canvas: '#ffffff' foreground: '#111111' secondary: '#555c68' muted: '#9fa4b0' line: '#f0f2f5' typography: heading: fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0px use: Product and safety section headings body: fontSize: 16px fontWeight: 400 lineHeight: 1.5 use: Shared product body and list content label: fontSize: 16px fontWeight: 700 lineHeight: 1.625 letterSpacing: '-0.08px' use: Prominent product labels and actions caption: fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: '-0.07px' use: Product metadata and helper text rounded: chip: 6px action: 16px card: 24px full: 9999px spacing: sm: 8 md: 12 base: 16 lg: 24 components: primary-action: type: button backgroundColor: '#06a96c' textColor: '#ffffff' rounded: 16px padding: 16px 20px height: 56px typography: 16px / 700 hover: 'overlay ::after #000000 opacity 0→0.04; bg stays #06a96c' pressed: 'overlay ::after #000000 opacity 0→0.04 (same as hover)' focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: default captured 2026-07-12; hover, pressed and keyboard focus measured 2026-09-29 on the same loan-flow button (real :hover, :active, and Tab to :focus-visible); every change is instant (transition all 0s) use: Full-width primary action in the public interest-rate flow filter-chip: type: button backgroundColor: rgba(19,189,126,0.15) textColor: '#13bd7e' rounded: 6px padding: 10px 12px typography: 16px / 500 states: default captured; no safe active interaction expansion use: Content-directory category or filter action safety-card: type: card backgroundColor: '#ffffff' border: '1px solid #f0f2f5' rounded: 24px padding: 24px use: Customer-safety action and guidance card disclosure-row: type: listItem backgroundColor: transparent textColor: '#272a30' rounded: 0px padding: 24px 20px typography: '16px / 700 (label span; the button''s own computed style is #000000 16px / 400)' hover: no visible change (measured 2026-09-29) pressed: no visible change (measured 2026-09-29) focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: default captured 2026-07-12; hover, pressed and keyboard focus measured 2026-09-29; the expanded state was not opened use: Expandable disclosure row on a public card product detail gnb-link: type: tab backgroundColor: transparent textColor: '#111111' padding: 0px 22px height: 26px typography: 16px / 700 / Pretendard, -0.08px tracking hover: 'fg #13bd7e' pressed: 'fg #13bd7e' focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: 'hover and pressed state samples captured 2026-07-12 on all 11 header links across four surfaces (44 of 44 read fg #13bd7e); re-measured 2026-09-29 on ''카드'' with real :hover and :active; keyboard focus measured 2026-09-29' use: Sticky desktop header menu link (카드, 대출, 예적금, 무료 건강 검사 …) hero-pill-cta: type: button backgroundColor: '#13bd7e' textColor: '#ffffff' rounded: 41px padding: 10px 20px height: 41px typography: 18px / 500 / Pretendard shadow: 0 4px 9px rgba(0,0,0,0.15) hover: no visible change (measured 2026-09-29) pressed: no visible change (measured 2026-09-29) focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: default captured 2026-07-12; hover, pressed and keyboard focus measured 2026-09-29 (the hero carousel auto-advances, so the pill was read 1.5 s after load) use: Home hero carousel pill '뱅크샐러드 사용해보기'; other slides recolour the same pill hero-outline-pill: type: button backgroundColor: '#ffffff' textColor: '#13bd7e' border: '1px solid #13bd7e' rounded: 41px padding: 10px 20px height: 43px typography: 18px / 500 / Pretendard shadow: 0 4px 9px rgba(0,0,0,0.15) hover: no visible change (measured 2026-09-29) pressed: no visible change (measured 2026-09-29) focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: default captured 2026-07-12; hover, pressed and keyboard focus measured 2026-09-29 in a run with this control alone use: Home hero secondary pill '서비스 더 알아보기' safety-link-card: type: card backgroundColor: '#ffffff' textColor: '#272a30' border: '1px solid #f0f2f5' rounded: 24px padding: 28px 24px size: 564px x 190px typography: 24px / 700 (title h2) shadow: '0 8px 24px #dce9f3' hover: no visible change (measured 2026-09-29) pressed: no visible change (measured 2026-09-29) focus: 'no visible indication: outline none and no other property changes (measured 2026-09-29)' states: default captured 2026-07-12 (three link cards, 564px and 272px wide); hover, pressed and keyboard focus measured 2026-09-29 on the first use: Customer-safety report link card (명의 도용 의심 …); a different element from safety-card, the 158px guidance list card carousel-indicator: type: button backgroundColor: '#ffffff' rounded: 9999px size: 36px x 8px shadow: 0 2px 8px rgba(0,0,0,0.1) states: default captured 2026-07-12 (the current page's dot); the 2026-09-29 survey reads the other dots at 8px x 8px; no pointer-state sample use: Home hero banner page dot ('N페이지 배너 보기') footer-link: type: tab backgroundColor: transparent textColor: '#111111' height: 20px typography: 16px / 400 / Pretendard states: default captured 2026-07-12 (57 links on home, contents and card detail); no pointer-state sample use: Footer column link (회사소개, 블로그, 공지사항, 이용약관 …) fonts: roles: sans: Pretendard faces: Pretendard: scripts: - hangul - latin evidence: - live-surface-use source: https://github.com/orioncactus/pretendard licence: OFL-1.1 distribution: public note: Banksalad serves its own subsets of the static Pretendard weights. --- # Design System Inspiration of Banksalad ## Overview ### Visual Theme & Atmosphere Banksalad is a Korean data-driven financial platform that helps people compare products, understand credit and spending, and connect finance with a broader health-asset proposition. Its current public web surfaces feel informational rather than decorative: a white `#ffffff` canvas, dense but readable Pretendard typography, near-black `#111111` content, and green actions that keep comparison and next steps visible. The most repeated current accent is `#13bd7e`, while a consequential full-width loan action uses the deeper `#06a96c`. This reference follows the live product surfaces and the official Banksalad Product Language publications separately, preserving BPL's collaboration philosophy without pretending its 2020 component values are necessarily identical to today's public web implementation. Current geometry is role-specific rather than governed by one sharp-corner default. The content directory uses a compact 6px green chip, the public loan action uses a 16px radius, customer-safety cards use 24px corners with a `#f0f2f5` border, and a carousel indicator uses a full pill. Plain lists and disclosure rows remain square. The earlier claim that 2px was the dominant current system came from a legacy CSS bundle and is not promoted in this pass. Typography is consistently Pretendard across the five inspected surfaces. The collector matched loaded Pretendard font faces to 603 visible elements spanning body, headings, buttons, cards, and list items. `swiper-icons` was declared but not used for visible text. BM JUA was not declared or visibly used in this fresh capture, so it is not a current UI or marketing token; its earlier promotion has been removed. The observed hierarchy relies mainly on 16px body and labels, 14px supporting copy, and 18–20px headings with 400/500/700 weights. **Key Characteristics:** - Loaded Pretendard across all five current public web surfaces - Current accent `#13bd7e`; deeper action green `#06a96c` - White `#ffffff` canvas with `#111111` foreground, `#555c68` secondary text, and `#9fa4b0` muted metadata - Role-specific 6px / 16px / 24px / full-pill geometry - 8px, 12px, 16px, and 24px as recurring useful spacing values - Public product evidence covers buttons, cards, and list/disclosure rows; inputs, charts, dialogs, and authenticated app states remain unpromoted ### Primary tasks - Compare cards, loans, deposits, or insurance and read the conditions - Check whether an interest-rate reduction request is available - Read a card's benefits, disclosures, and product details - Get guidance after fraud, identity theft, or a mistaken transfer - Read up on a financial decision before entering a product flow ### Brand Narrative Banksalad's current first-party web presence presents a data-based financial platform spanning product comparison, credit and loan guidance, financial content, customer safety, and a wider health-asset direction. The current home page describes a large comparison inventory and a recommendation engine designed to help people choose favorable products. This reference uses those live statements as the present product narrative and does not rely on third-party founder mythology, funding figures, or fabricated competitive comparisons. The official BPL publications explain how this product is made. Banksalad describes Product Language as broader than a visual design system: designers and platform engineers share names, abstraction boundaries, component structures, implementation guidance, and examples. BPL emerged alongside a major service redesign, moved collaborative design work to Figma, established ground rules, and maintained versioned libraries and sample applications so platform differences could be reviewed rather than hidden. BPL's implementation article states “Communication cost is most expensive. Code and Show first, argue after that.” It describes working prototypes, component examples, snapshot testing, and an integral sample app as ways to align design and implementation. These are verified process principles. They do not prove that the colors, radius, or typography observed in 2020 remain current tokens, which is why the current five-surface measurements are reconciled independently. The current design identity therefore has two evidence layers: an official history of cross-functional product-language practice, and a present web implementation built from white surfaces, Pretendard, green actions, explicit comparison copy, and role-specific geometry. Neither layer is used as a substitute for inaccessible native-app evidence. ### Principles 1. **Share one product language.** BPL exists so design and platform teams name and structure the same UI concepts consistently. *UI implication:* component names and anatomy should map across design and implementation rather than being reinvented per platform. 2. **Code and show before abstract debate.** The official BPL article uses working prototypes to expose where teams agree or disagree. *UI implication:* validate a component in a representative screen before promoting a generalized rule. 3. **Keep design and implementation structures aligned.** BPL describes matching Figma layout structure closely enough that a design change produces a corresponding implementation change. *UI implication:* avoid premature abstraction that obscures the authored component anatomy. 4. **Version the shared language.** The official design article describes fixed platform versions, update tracking, and component-list tooling. *UI implication:* reference claims need dates and surface provenance; old BPL values cannot silently become current web tokens. 5. **Test components alone and in realistic composition.** BPL used component examples, snapshot tests, and an integral sample app. *UI implication:* validate both the isolated spec and the assembled product flow. ### Personas Banksalad does not publish validated demographic personas in the sources used for this pass. The current public surfaces support task contexts instead: - A person comparing cards, loans, deposits, or insurance and reading product conditions. - A person checking whether an interest-rate reduction request may be available. - A card-detail visitor reading benefits, disclosures, and product metadata. - A customer looking for fraud, identity-theft, voice-phishing, or mistaken-transfer guidance. - A reader using the financial contents directory to understand a decision before entering a product flow. These are observable jobs, not invented people. Names, ages, quotes, income, behavior frequency, and authenticated-app habits require separate user research. ## Colors ### Primary - **Current accent** (`#13bd7e`): repeated green text and border color across home, contents, loan, and card-detail surfaces. - **Primary action** (`#06a96c`): full-width loan-flow action background, paired with `#ffffff` text. - The previous `#04c584` and `#10df99` values were not observed in the five-surface capture and are not current canonical tokens. ### Heading & Body - **Foreground** (`#111111`): dominant heading, body, and list text across all five surfaces. - **Secondary** (`#555c68`): supporting copy on home, contents, and card detail. - **Neutral** (`#606874`): explanatory copy in loan and customer-safety contexts. - **Muted** (`#9fa4b0`): product metadata and subdued actions on contents and card detail. ### Surface & Border - **Canvas** (`#ffffff`): default current page and card surface. - **Line** (`#f0f2f5`): observed 1px customer-safety card border. - **Transparent**: most navigation, list, disclosure, and utility controls stay unfilled. ### Unresolved color groups No current public chart, authenticated dashboard, input validation, warning, error, or success-state palette was safely captured. Those legacy groups are omitted rather than mapped to plausible greens, reds, or teals. ## Typography ### Font evidence boundary | Evidence class | Resolution | |---|---| | Official product-use | BPL publications establish an official product-language system, but do not publish a current universal font token in the inspected text. | | Live surface-use | Five public web surfaces loaded and visibly used Pretendard on 603 elements. | | Official distributed asset | No Banksalad-exclusive UI font asset is promoted in this reference. | | Declared-only | `swiper-icons` was declared with zero visible text usage. | | Unresolved | Native-app-only typography remains unresolved without an inspectable current surface. | Specimen availability requires a loadable font source and is separate from family truth. ### Font Family - **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif` - Loaded sources were observed for Pretendard Regular, Medium, SemiBold, Bold, and ExtraBold subsets. - BM JUA was not declared, loaded, or visibly used in this fresh capture and is omitted. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | Product Heading | Pretendard | 20px | 700 | 28px | normal | Repeated section and card heading | | Supporting Heading | Pretendard | 18px | 700 | 26px | -0.09px | Compact product heading | | Body | Pretendard | 16px | 400 | 24px | normal | Shared product body and list copy | | Prominent Label | Pretendard | 16px | 700 | 26px | -0.08px | Action and emphasized product label | | Metadata | Pretendard | 14px | 500 | 20px | -0.07px | Supporting product information | | Caption | Pretendard | 12px | 500–700 | 18px | -0.06px | Dense metadata where observed | ### Principles - **Pretendard is the only current visible text family.** Do not substitute an unobserved accent face. - **400 carries reading; 700 carries decisions.** Current body/list copy is commonly 400, while headings and the primary loan action are 700. - **Tracking is subtle at product sizes.** Current 14–18px roles use approximately -0.06px to -0.09px; no -1px display token is promoted. - **Surface evidence stays local.** Authenticated app typography and native-only financial amount roles remain unresolved. ### Brand face, substitute, safe default - **Brand face:** Pretendard, which its author publishes under the SIL Open Font License 1.1 (github.com/orioncactus/pretendard); Banksalad serves its own subsets of the static weights. It can be installed as itself. - **Substitute:** none needed; the brand face is installable. - **Safe default (not the brand face):** none listed; install Pretendard itself. ## Layout ### Spacing System - Base unit: 4px - Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px - Card internal padding: 20px / 24px (slightly tighter than Toss's 20px-horizontal default — Banksalad packs more data) - Table-row vertical padding: 12px (denser than consumer apps) ### Grid & Container - Marketing/landing: max content width ~1080–1200px, centered - App / data surfaces: full-width with 16–24px gutters; tables go edge-to-edge on mobile - Card-recommendation lists: single-column on mobile, 2–3 column grid on desktop - Charts: full-width within their card container, never bleed outside ### Whitespace Philosophy - **Density is the brand.** Where Toss says "breathing room for money", Banksalad says "more facts visible without scrolling". A balance, a comparison rate, an interest rate, and three filter chips can coexist in one card. - **Section rhythm by surface fill.** White (`#ffffff`) and off-white (`#fbfbfb`) sections alternate quietly — not for drama, but to chunk dense data into scannable bands. - **Tight gaps inside, generous gaps outside.** Inside a comparison card, rows sit on 12px vertical gaps. Between cards, 24–32px. The hierarchy of grouping is communicated through gap-size alone. ### Border Radius Scale - **2px (dominant — 81 occurrences in CSS)**: Buttons, inputs, cards, badges, banners. The signature. - 4px: Small badges, inline pills. - 8px: Soft marketing cards (rare). - 10–12px: Promotional banner corners (rare). - 30–41px: Filter pills, tag chips, avatar circles. - 50%: Avatars, icon backdrops. Banksalad's 2px is a typographic-engineering commitment: pixel rounding sharp enough to look engineered, soft enough to not draw blood. Any radius ≥ 12px feels Toss-ish and is reserved for explicitly marketing-warmth contexts. ### Responsive Behavior #### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <600px | Single column, full-width tables (horizontal scroll if needed), 16px gutters | | Tablet | 600–1024px | 2-column card grids, 20px gutters | | Desktop | 1024–1280px | Full marketing layout, 3-column feature grids | | Large | >1280px | Centered content max-width ~1200px | #### Touch Targets - Buttons minimum 42px height (default), 56px for hero display CTAs - Table rows minimum 44px (slightly denser than 48px standard — Banksalad accepts a tighter tap) - Filter pill chips: 28–32px height - Input minimum 48px height; amount-input 56px #### Collapsing Strategy - Hero: 52px → 36px on mobile, weight 700 maintained - Marketing 3-col feature grids → 2-col → single column - Comparison tables: maintain table form on tablet, switch to stacked cards on mobile (each row becomes a card with key/value pairs) - Charts: full-width, maintain aspect ratio, axis-label font drops 12px → 10px on mobile - Filter chip rows: horizontal scroll (no wrap) on mobile to preserve the chip rhythm #### Image Behavior - Card/product logos: 24–40px, consistent square framing within rows - Chart screenshots in marketing: full-width on mobile, 2-col on desktop - Decorative illustrations: rare; when used, locked to a single accent illustration per landing surface (no illustration overload — data is the visual) ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (L0) | No shadow | Page background, inline elements | | Soft (L1) | `0 1px 1px rgba(0,0,0,.08)` | Subtle row lift, list-item separators | | Standard (L2) | `0 2px 5px rgba(0,0,0,.12)` | Default cards — by far the most common (~38 occurrences) | | Elevated (L3) | `0 4px 9px rgba(0,0,0,.15)` | Dropdowns, hover-elevated cards | | Deep (L4) | `0px 2px 8px rgba(0,0,0,.1)` | Floating action panels | | Modal (L5) | `0 17px 50px rgba(0,0,0,.19)` | Dialog modals, account-switch overlays | | Inset (L-1) | `inset 0 1px 1px rgba(0,0,0,.12)` | Pressed button state, depressed input visual | | Halo | `0 0 2px rgba(0,0,0,.26)` | Thin outline on overlay menus and popovers | **Shadow Philosophy.** Shadows are **always neutral and single-layer.** No colored shadows, no parallax stacks. Where Stripe brands its shadows in navy and Toss uses near-zero shadows for clinical clarity, Banksalad sits between — visible enough that cards lift off the surface, restrained enough that the data inside is what the eye lands on. The signature `0 2px 5px rgba(0,0,0,.12)` is a small, low-cost lift used 38× in the bundle. Measured exception (2026-07-12 capture, confirmed 2026-09-29): the customer-safety link card carries a tinted rest shadow, `0 8px 24px #dce9f3`, so the neutral-only statement above does not hold for that card. ### Values kept in prose Measured values the DESIGN.md token grammar cannot carry, kept verbatim: - `shadow.flat`: `none` ## Motion & Easing One current public accordion panel exposed a `350ms` height/opacity transition using `cubic-bezier(0.25, 0.1, 0.25, 1)`. No broader duration scale, spring policy, chart animation, score count-up, or reduced-motion implementation was verified in this capture. The six controls probed on 2026-09-29 all compute `transition: all 0s`, so their hover and pressed changes are instant.
Superseded synthetic motion proposals — not verified product facts **Durations:** | Token | Value | Use | |---|---|---| | `motion-instant` | 0ms | State commits, checkbox flips, focus ring appearance | | `motion-fast` | 150ms | Hover, focus, button press overlays, inline value updates | | `motion-standard` | 250ms | Card expand, dropdown open, tab content switch, modal open | | `motion-slow` | 400ms | Page-level transitions, recommendation-card reveal animation | | `motion-data` | 600ms | Chart series draw-in, score-bar count-up — slower because the user needs time to read the number | **Easings:** | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Arriving — modals, dropdowns, sheets | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals | | `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions, chart draw-in | | `ease-data` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Score count-up, chart series — eases out gradually so the final value is the calm resting state | **Explicitly forbidden.** No spring overshoot anywhere. No bounce. No `cubic-bezier` with a middle control above `1.0`. Banksalad's voice is *advisor*, not *delighter* — spring-easing reads as a consumer app celebrating a transaction, which is the opposite of the brand promise. Where Toss licenses spring easing only for the money-moved checkmark, Banksalad does not license it at all. **Signature motions.** 1. **Score count-up.** When a credit-score or asset-total updates, the number animates from the previous value to the new value across `motion-data` (600ms) with `ease-data`. The duration is deliberately slow — the user is supposed to read the change, not see it flash. The Korean numeric separators (`,`) re-flow correctly during the count. 2. **Chart series draw-in.** Time-series charts draw left-to-right in `motion-data` with `ease-standard`. The user's own series (`#04c584`) is drawn *last*, so the eye lands on the user's own data after the surrounding distribution has been established. 3. **Recommendation card reveal.** When a fresh recommendation set loads, cards fade in with `motion-standard / ease-enter` from `opacity: 0; translateY(4px)`. Translate is intentionally small (4px, not 20px) — the cards arrive, they do not fly in. 4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Score count-ups become instant value swaps. Chart draw-ins render their final state immediately. Banksalad remains fully usable; nothing in the product is information-dependent on motion.
## Components ### Current verified components **Primary Loan Action** - Background: `#06a96c` - Text: `#ffffff` - Radius: 16px - Padding: 16px 20px - Height: 56px - Font: 16px / 700 / Pretendard - Hover: a full-size black `::after` overlay goes from opacity 0 to 0.04; the fill stays `#06a96c` - Pressed: the same overlay at 0.04 (pressed equals hover) - Focus: no visible indication — `outline-style: none`, and no other property changes (measured 2026-09-29 after real Tab presses, `:focus-visible` matched) - States: default captured 2026-07-12; hover, pressed and focus measured 2026-09-29 on the same loan-flow button; every change is instant (`transition: all 0s`) - Use: Full-width primary action in the public interest-rate flow **Content Filter Chip** - Background: `rgba(19, 189, 126, 0.15)` - Text: `#13bd7e` - Radius: 6px - Padding: 10px 12px - Font: 16px / 500 / Pretendard - States: default captured 2026-07-12; no safe active interaction expansion. The `/contents` surface answered HTTP 404 on 2026-09-29 (four attempts), so these values could not be re-measured and stay as captured - Use: Category and filter action on the public contents directory **Customer Safety Card** - Background: `#ffffff` - Border: 1px solid `#f0f2f5` - Radius: 24px - Padding: 24px - Use: Customer-safety action and guidance card - Scope: the 158px guidance list card (`surface-4::li`, six on the page). The report link cards at the top of the same page are a different element, recorded below as Safety Link Card; the 2026-09-29 probe measured one of those, so its 28px 24px padding and tinted shadow do not apply here **Product Disclosure Row** - Background: transparent - Label: `#272a30`, 16px / 700 / Pretendard — the visible `span.text-b16.font-bold` (measured 2026-09-29). The button's own computed style is `#000000` 16px / 400; the earlier `#111111` matched neither - Radius: 0px - Padding: 24px 20px - Hover and pressed: no visible change (measured 2026-09-29) - Focus: no visible indication — `outline-style: none`, nothing else changes (measured 2026-09-29) - Use: Expandable disclosure row on the public card-product detail (the expanded state was not opened) ### Header, hero and footer (captured 2026-07-12; states measured 2026-09-29) **Header Menu Link** - Text: `#111111`, 16px / 700 / Pretendard, -0.08px tracking; padding 0 22px, 26px line box, no fill - Hover and pressed: the text turns `#13bd7e`. All 44 July state samples (11 links on four surfaces) agree, and the 2026-09-29 probe read the same on 카드 with real `:hover` and `:active` - Focus: no visible indication — `outline-style: none`, nothing else changes (measured 2026-09-29) - Use: sticky desktop header (카드, 대출, 예적금, 무료 건강 검사, 건강 보험, 자동차보험 …) **Hero Pill CTA** - Background `#13bd7e`, text `#ffffff`, 41px radius, padding 10px 20px, 41px tall, 18px / 500 / Pretendard - Shadow: `0 4px 9px rgba(0,0,0,0.15)` - Hover and pressed: no visible change. Focus: no visible indication (all measured 2026-09-29) - The carousel's other slides recolour the same pill: `#877af5` with white text (내 최저금리 조회하기) and `#ffbe4c` with `#111111` text (이벤트 보기), captured 2026-07-12 and present again in the 2026-09-29 survey - Use: 뱅크샐러드 사용해보기 **Hero Outline Pill** - Background `#ffffff`, text and 1px border `#13bd7e`; the filled pill's radius, padding, type and shadow; 43px tall - Hover and pressed: no visible change. Focus: no visible indication (all measured 2026-09-29) - Use: 서비스 더 알아보기 **Safety Link Card** - Background `#ffffff`, 1px solid `#f0f2f5` border, 24px radius, padding 28px 24px, 564px × 190px (272px-wide cards sit beside it) - Shadow: `0 8px 24px #dce9f3` — a tinted rest shadow, present in the 2026-07-12 capture and on 2026-09-29 - Title: `#272a30`, 24px / 700 (measured 2026-09-29) - Hover and pressed: no visible change. Focus: no visible indication (all measured 2026-09-29) - Use: customer-safety report links (명의 도용 의심 …) **Carousel Page Dot** - `#ffffff`, 9999px radius, 36px × 8px for the current page, shadow `0 2px 8px rgba(0,0,0,0.1)`; the 2026-09-29 survey reads the other dots at 8px × 8px - No pointer-state sample **Footer Link** - Text `#111111`, 16px / 400 / Pretendard, 20px line box, no fill - No pointer-state sample - Use: footer columns (회사소개, 블로그, 공지사항, 이용약관 …) None of the six controls probed on 2026-09-29 shows a visible keyboard focus indication: each removes the browser ring (`outline-style: none`) and changes nothing else. That is recorded as a measured absence on each component, not as a focus token.
Superseded 2026-05 legacy snapshot — retained for audit history, not canonical ### Legacy Buttons #### Primary CTA (Salad Green) - Background: `#04c584` - Text: `#ffffff` - Border: none - Radius: 2px - Padding: 12px 24px - Height: 42px (line-height-driven) - Font: 16px / 700 / Pretendard - Hover: background `#10df99` (lightens — opposite of convention) - Use: Primary CTA on data tables, recommendation rows, transactional flows ("내 카드 추천 받기", "신청하기") #### Primary CTA — Large Display - Background: `#04c584` - Text: `#ffffff` - Border: none - Radius: 2px - Padding: 16px 32px - Height: 56px - Font: 18px / 700 / Pretendard - Letter-spacing: -1px - Hover: `#10df99` - Use: Hero CTA on landing surfaces ("앱 다운로드", "지금 시작하기") #### Primary CTA — Hover-Inverted (Retry) - Background: `#10df99` (default lighter) - Text: `#ffffff` - Border: none - Radius: 2px - Padding: 10px 20px - Font: 14px / 500 / Pretendard - Hover: background `#04c584` (darkens — the one place Banksalad uses the darken pattern) - Use: Secondary retry / "다시 시도" actions where the resting state is a softer mint #### Ghost / Outlined - Background: `#ffffff` - Text: `#04c584` - Border: 1px solid `#04c584` - Radius: 2px - Padding: 12px 24px - Font: 16px / 700 / Pretendard - Hover: background `#f3fdfa` (mint tint) - Use: Secondary actions paired with a Primary CTA #### Neutral / Cancel - Background: `#f5f5f5` - Text: `#434444` - Border: none - Radius: 2px - Padding: 12px 24px - Font: 16px / 700 / Pretendard - Hover: background `#e1e1e1` - Use: Cancel / "취소" / dismiss actions #### Disabled - Background: `#e1e1e1` - Text: `#acacac` - Border: none - Radius: 2px - Font: 16px / 700 / Pretendard - Use: Disabled state (form incomplete, retry cooling down) #### Link Button (Inline Text Link) - Background: transparent - Text: `#04c584` - Border: none - Padding: 0 - Font: 14px / 500 / Pretendard - Hover: text-decoration: underline - Use: Inline links within content ("자세히 보기"), table-row jump links ### Cards & Containers #### Data Card (Default) - Background: `#ffffff` - Border: 1px solid `#e1e1e1` (some surfaces use no border + shadow only) - Radius: 2px - Padding: 20px 24px - Shadow: `0 2px 5px rgba(0, 0, 0, 0.12)` - Use: Recommendation rows, transaction cards, account summary blocks #### Card — Soft Variant - Background: `#fbfbfb` - Border: none - Radius: 8px - Padding: 24px - Shadow: `0 2px 8px rgba(0, 0, 0, 0.1)` - Use: Marketing/landing feature cards (the rare 8px-radius case) #### Card — Highlight (Selected) - Background: `#f3fdfa` - Border: 1px solid `#10df99` - Radius: 2px - Padding: 20px 24px - Use: Selected state in product comparison lists (cards/loans), recommended-pick highlight ### Inputs & Forms #### Text Input (Default) - Background: `#ffffff` - Text: `#999999` (placeholder) / `#434444` (filled) - Border: 1px solid `#e1e1e1` - Radius: 2px - Padding: 0 16px - Height: 48px - Font: 16px / 500 / Pretendard #### Text Input — Focus - Background: `#f3fdfa` - Text: `#434444` - Border: 1px solid `#10df99` - Radius: 2px - Use: Active typing state — the mint tint is the only branded background fill in the system #### Text Input — Error - Background: `#ffffff` - Text: `#434444` - Border: 1px solid `#fe493d` - Radius: 2px - Error message below: 12px / 500 / `#fe493d` - Use: Validation failure state #### Amount Input (Financial) - Background: `#ffffff` - Text: `#2b2b2b` - Border: 2px solid `#f5f5f5` - Radius: 2px - Padding: 0 16px - Height: 56px - Font: 22px / 700 / Pretendard (right-aligned) - Use: Specialized input for entering won amounts — heavier border (2px), bigger type, right-aligned, 700 weight; treats money input as a heading not a form field ### Badges & Tags #### Status Pill (Brand) - Background: `#f3fdfa` - Text: `#04c584` - Border: none - Radius: 41px (rare pill — used only on tag chips, not buttons) - Padding: 4px 10px - Font: 12px / 500 / Pretendard - Use: Filter chips ("연회비 없음", "주유 할인") on card-recommendation pages #### Status Badge (Warning) - Background: `#ffffff` - Text: `#f56200` - Border: 1px solid `#fd8700` - Radius: 2px - Padding: 2px 8px - Font: 12px / 700 / Pretendard - Use: Rate-warning, expiry, attention-needed indicators #### Status Badge (Negative) - Background: `#ffffff` - Text: `#fe493d` - Border: 1px solid `#fe493d` - Radius: 2px - Padding: 2px 8px - Font: 12px / 700 / Pretendard - Use: Overdue, declined, blocking-issue indicators ### Tables (Financial Data) #### Table Header Row - Background: `#f5f5f5` - Text: `#7b7b7b` - Border-bottom: 1px solid `#e1e1e1` - Padding: 12px 16px - Font: 13px / 700 / Pretendard / uppercase letter-spacing 0.05em - Use: Column headers on transaction lists, fee schedules #### Table Body Row - Background: `#ffffff` (alternates with `#fbfbfb` on dense tables) - Text: `#434444` - Border-bottom: 1px solid `#e1e1e1` - Padding: 12px 16px - Font: 14px / 500 / Pretendard - Amounts right-aligned: 14px / 700 / `#2b2b2b` (positive) or `#fe493d` (negative) - Use: Transaction rows, line-item displays ### Charts & Data Viz #### Chart Series Tokens - Series 1: `#34464b` (primary) - Series 2: `#5c818a` (secondary) - Series 3: `#1c6c73` (tertiary) - Series 4: `#a7c7cf` (quaternary / pale) - Highlight: `#04c584` (always reserved for "your value" / user's own data point) - Negative: `#fe493d` - Positive trend: `#04c584` #### Axis & Gridlines - Axis label: 10–12px / 500 / `#7b7b7b` - Gridline: 1px dashed `#e1e1e1` - Background: `#ffffff` or `#fbfbfb` ### Navigation - Header: sticky white (`#ffffff`), no shadow at rest, 1px bottom border `#f5f5f5` - Logo: left, ~24–28px tall, brand wordmark in `#04c584` (or `#2b2b2b` mono variant) - Nav links: 14px / 500 / Pretendard / `#434444`, hover `#04c584` - Sign-in CTA: white background, `#2b2b2b` text, 1px solid `#d8dfe6` border, 16px radius, 6px 14px padding, 14px / 400 (the home-page header uses a softer 16px radius for the auth pill — exception to the 2px default; this is the only 16px-radius live observation in the captured DOM) ### Shadows | Level | Treatment | Use | |---|---|---| | Flat | none | Page background, inline elements | | Soft (L1) | `0 1px 1px rgba(0,0,0,.08)` | Subtle row separators | | Standard (L2) | `0 2px 5px rgba(0,0,0,.12)` | Default cards — most common (~38 occurrences) | | Elevated (L3) | `0 4px 9px rgba(0,0,0,.15)` | Dropdowns, popovers | | Deep (L4) | `0px 2px 8px rgba(0,0,0,.1)` | Floating panels | | Modal (L5) | `0 17px 50px rgba(0,0,0,.19)` | Modal dialogs | | Inset | `inset 0 1px 1px rgba(0,0,0,.12)` | Pressed-button / depressed input feel | ---
--- **Verified:** 2026-07-12 (omd:migrate) · states re-measured 2026-09-29 (live probe of the home, loan, customer-safety and card-detail pages) **Tier 1 sources:** https://www.banksalad.com/ ; https://www.banksalad.com/contents ; https://www.banksalad.com/loan/interest-rate-cut ; https://www.banksalad.com/customer-safety ; https://www.banksalad.com/product/cards/CARD002319 ; https://blog.banksalad.com/tech/banksalad-product-language-design/ ; https://blog.banksalad.com/tech/banksalad-product-language-ios/ **Tier 2 sources:** https://getdesign.md/banksalad (no brand record found in exact search); https://styles.refero.design/?q=banksalad (attempted; browser-harness unavailable and indexed search returned no brand result) **Tier 2 status:** unavailable **Conflicts unresolved:** none **Earlier mistakes reverted:** `#04c584` canonical primary, `#10df99` hover, BM JUA current usage, 2px default radius, and uncaptured input/chart/modal/state claims ### States The 2026-07-12 collector performed zero safe interaction expansions, but its pseudo-state pass did record hover and pressed samples for the 11 header menu links on four surfaces (text `#111111` to `#13bd7e`). This paragraph previously said default render states only (corrected 2026-09-29). A live probe on 2026-09-29 measured hover, pressed and keyboard focus on six controls. The header link turns `#13bd7e`; the loan action darkens through a black `::after` overlay at opacity 0.04; the two hero pills, the safety link card and the disclosure row do not change; and none of the six shows a visible keyboard focus indication (`outline-style: none`, nothing else changes). No canonical empty, loading, error, success, or disabled treatment is promoted. The loan accordion was captured in its rendered state, but this does not establish a complete product-state system.
Superseded synthetic state proposals — not verified product facts | State | Treatment | |---|---| | **Empty (no linked accounts)** | White canvas. Single short paragraph in `#434444` body text explaining why the screen is empty (`아직 연동된 카드가 없어요. 카드를 연동하면 자동으로 지출 분석이 시작돼요.`). One primary CTA in Salad Green (`#04c584`, 2px radius). No illustration. | | **Empty (filter cleared)** | Single line of `#7b7b7b` caption (`조건에 맞는 결과가 없어요. 필터를 조정해주세요.`). No CTA — user adjusts filters themselves. | | **Empty (no transactions this period)** | Two-line message in `#434444` explaining the filter scope (`선택한 기간에 거래 내역이 없어요. 다른 기간을 선택하거나 카드 연동을 확인해보세요.`). | | **Loading (first paint)** | Skeleton blocks at `#f5f5f5` matching the final layout exactly. Financial amounts render as `--원` placeholders rather than skeleton bars — a skeleton bar that resolves to a number is disorienting; `--` is honest. 1s shimmer with 8% white highlight using a `linear-gradient` sweep. | | **Loading (refresh / in-place)** | Subtle `#04c584` 2px progress bar at top of the section. Previous values stay visible. Never block the table during refresh. | | **Error (inline field)** | `#fe493d` 1px border on the input, 12px error text below in `#fe493d` weight 500. One actionable sentence (`주민등록번호가 일치하지 않아요. 다시 확인해주세요.`). | | **Error (recommendation fetch failed)** | Inline banner inside the recommendation card area. `#fe493d` left border, white background, 14px `#434444` text explaining what failed + a `다시 시도하기` button in the retry-button style (`#10df99` resting → `#04c584` on hover). Never a generic toast. | | **Error (data freshness warning)** | Soft warning banner with `#fd8700` left accent bar, white background, 13px `#7b7b7b` text noting the data is N hours stale. Non-blocking — the user can still see the (possibly stale) figures. | | **Success (action confirmed)** | Inline confirmation row in `#f3fdfa` mint-tint background, `#04c584` 16px / 700 confirmation text, the relevant figure in 22px / 700 `#2b2b2b` below. No toast for important actions — they get their own confirmation surface. | | **Success (passive update)** | 3s auto-dismiss toast at top-right. `#2b2b2b` background (NOT brand green — green is reserved for interactive surfaces), white 14px / 500 text, 2px radius, shadow `0 2px 5px rgba(0,0,0,.12)`. No emoji. | | **Skeleton** | `#f5f5f5` blocks at exact final dimensions, 2px radius matching the component being loaded. 1s shimmer. Financial-amount slots show `--원`, not a bar. | | **Disabled** | Background `#e1e1e1`, text `#acacac`, 2px radius preserved. Cursor `not-allowed`. The geometry stays identical to the enabled state so re-enabling does not shift layout. | | **Pressed (button)** | Inset shadow `inset 0 1px 1px rgba(0,0,0,.12)` + background shifts by ~5% darker for the press duration. Returns instantly on release (no spring). |
## Do's and Don'ts ### Do - Use `#04c584` for every interactive moment — CTAs, links, focus accents, "your data point" on charts - Use `#10df99` for hover (it's *brighter* than `#04c584` — Banksalad lightens on interaction) - Use `#f3fdfa` mint tint on input focus background — the only branded surface tint in the system - Keep border-radius at 2px for buttons, inputs, cards, badges — the system's geometric signature - Use Pretendard with the full Korean fallback stack; 700 as default weight for headings and CTAs - Use `#2b2b2b`/`#434444` warm near-blacks for type instead of `#000000` - Use the teal-slate family (`#34464b`/`#5c818a`/`#1c6c73`/`#a7c7cf`) for chart series — cooler than brand green by design - Use `#04c584` only for "your value" on a chart — never as a generic data fill - Right-align financial amounts in tables; use 700 weight for amounts even at 14px - Use comma-separated won amounts with the currency unit in 500 weight (`12,400,000원`) ### Don't - Don't use Toss's 12px+ rounded corners — Banksalad is 2px; 8px is the soft-marketing exception - Don't use Kakao yellow, KakaoPay yellow, or any warm accent for primary interaction — green is the sole interactive hue - Don't use BM JUA inside the app — Jua is for marketing-landing display moments only - Don't use weight 400 for body — Banksalad's body weight is 500 - Don't apply colored shadows (blue, green, branded) — shadows are always neutral black - Don't pad financial cards generously like Toss — Banksalad packs density; data is the aesthetic - Don't approximate currency amounts (`약 120만원`) on primary financial surfaces — bare numerals with commas only - Don't use `#0099ff` info-blue for default links — green is the default link color; blue is reserved for *external* references - Don't use Pretendard 300 on body — light weights only at hero display sizes (52px+) - Don't sprinkle the brand green on chart series — green is for interaction, teal-slate is for data ## Voice & Tone Current public copy is direct, explanatory, and comparison-oriented. The home page connects financial and health assets; the contents directory names products, benefits, and comparison tasks explicitly; customer-safety copy gives the risk and the next action. This supports a factual Korean product voice, but it does not establish the invented notification, validation, or authenticated-app copy previously included here.
Superseded voice hypotheses — not current official guidance | Context | Tone | |---|---| | CTAs | Imperative, concrete outcome. `내 카드 찾기`, `대출 한도 확인하기`, `신청하기`. Never `시작하기 →` with an arrow flourish. | | Section headlines | Statement of fact, not a hook. `이번 달 지출 분석` not `이번 달, 얼마나 썼는지 보러 갈까요?`. | | Recommendations | Justified. Every recommended card or loan has a one-sentence reason next to it (`연 30만원 이상 절약될 수 있어요`). Never a bare ranked list. | | Financial figures | Bare numerals with commas. `1,240,000원`. Approximations (`약 124만원`) are forbidden on primary surfaces. | | Success messages | One-line confirmation + the relevant figure. `신용점수가 855점으로 올랐어요.` No emoji, no exclamation. | | Error / validation | Specific cause + one-line action. `주민등록번호가 일치하지 않아요. 다시 확인해주세요.` Never `오류가 발생했습니다`. | | Empty states | Explain the *why*, then suggest one next step. `아직 연동된 카드가 없어요. 카드를 연동하면 자동으로 지출 분석이 시작돼요.` | | Legal / disclosure | Formal `~합니다` endings. Pinned at the bottom of recommendation cards. Treated as part of the product, not a footer afterthought. | | Health-asset (DNA, screening) | Same calm advisor voice as finance. No marketing exuberance about "discovering your DNA". Just `이번 검사로 18가지 항목을 확인할 수 있어요`. |
The table above is a historical hypothesis and is not promoted as an official writing standard. Current verified samples are: - “금융을 넘어 건강 자산까지” — current home positioning. - “신용대출, 햇살론, 직장인 대출까지 한 번에 비교하세요” — comparison copy. - “내 대출금리 조회” — concrete product action. - “명의 도용 의심 도용사고·보이스피싱 신고 및 행동 요령을 확인하세요” — risk plus next action. No complete official voice-and-tone manual was found. Push notifications, authenticated errors, sentence-ending rules, and prohibited phrase lists remain unresolved. ## Agent Prompt Guide ### Quick Color Reference - Primary CTA: Salad Green (`#04c584`) - Hover: Hover Green (`#10df99`) - Page background: White (`#ffffff`) - Surface alt: Off-white (`#fbfbfb`) - Neutral surface: (`#f5f5f5`) - Heading text: Warm near-black (`#2b2b2b`) - Body text: (`#434444`) - Caption: (`#7b7b7b`) - Placeholder: (`#999999`) - Border: (`#e1e1e1`) - Focus background tint: Mint (`#f3fdfa`) - Chart series: `#34464b` / `#5c818a` / `#1c6c73` / `#a7c7cf` - Error: `#fe493d` - Warning: `#fd8700` / `#f56200` ### Example Component Prompts - "Create a Banksalad-style primary CTA: `#04c584` background, white text, 2px border-radius (not 12px), 700-weight Pretendard at 16px, 12px 24px padding, 42px height. Hover lightens to `#10df99`." - "Design a card-recommendation row: white background, 1px solid `#e1e1e1` border, 2px radius, 20px 24px padding, shadow `0 2px 5px rgba(0,0,0,.12)`. Card logo 32px left, title 16px/700 `#2b2b2b`, three filter chips below (`#f3fdfa` bg, `#04c584` text, 41px radius, 12px/500), annual-fee figure right-aligned 18px/700 with '원' suffix in 500." - "Build a focused amount input: 2px border `#f5f5f5`, on focus border `#10df99` and background `#f3fdfa`. Text 22px/700 right-aligned, `#2b2b2b`, won unit in 500 weight following the digits." - "Create a data chart: white background, axis labels 10px/500 `#7b7b7b`, gridlines 1px dashed `#e1e1e1`. Series 1 `#34464b`, series 2 `#5c818a`, series 3 `#1c6c73`. User's own data point in `#04c584` to make 'your value' pop against neutral teal-slate." - "Design a transaction table row: alternating `#ffffff` / `#fbfbfb` background, 12px 16px padding, 1px solid `#e1e1e1` bottom border. Date column 14px/500 `#7b7b7b`, merchant 14px/500 `#434444`, amount right-aligned 14px/700 — `#2b2b2b` for positive, `#fe493d` for negative." ### Iteration Guide 1. **Default radius is 2px.** If the AI produces 12px or 16px corners, reject — that's Toss, not Banksalad. 2. **Default weight is 700 for anything important.** Headings, CTAs, financial amounts. 500 for body. Never 400 for body. 3. **Green is for interaction only.** Never use `#04c584` as a generic background fill or decorative element. It always means: the user can tap this, or this is the user's own data. 4. **Hover lightens.** `#04c584` → `#10df99` on hover (the opposite of conventional darken-on-hover). This is a signature. 5. **Shadows are neutral and single-layer.** `0 2px 5px rgba(0,0,0,.12)` is the workhorse. No colored shadows. 6. **Chart series are teal-slate, not green.** `#34464b` / `#5c818a` / `#1c6c73` / `#a7c7cf`. Reserve green for the user's own data point. 7. **Pretendard is non-negotiable.** Always include the full Korean fallback stack. Jua only for marketing display. --- ## Governance ### Known Gaps - **Contrast, `primary-action`.** Text `#ffffff` on `#06a96c` measures 3.04:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `filter-chip`.** Text `#13bd7e` on `#13bd7e26` measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `disclosure-row`.** Text `#272a30` on `#00000000` measures 1.46:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `gnb-link`.** Text `#111111` on `#00000000` measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `hero-pill-cta`.** Text `#ffffff` on `#13bd7e` measures 2.44:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `hero-outline-pill`.** Text `#13bd7e` on `#ffffff` measures 2.44:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `footer-link`.** Text `#111111` on `#00000000` measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.