Design System Inspiration of Richart

1. Visual Theme & Atmosphere

Richart -- the digital-banking brand of Taiwan's Taishin International Bank (台新銀行) -- presents itself as the friendliest, most playful face of consumer finance on the Taiwanese web. Its self-declared promise, baked into the page <title>, is "最能幫年輕人存到錢的銀行" (the bank that best helps young people save). Everything about the surface serves that youth-targeted, save-with-a-smile mission: a near-white #fdfdfd canvas kept deliberately bright and airy, a single vivid teal (#17b6c9) doing nearly all of the interactive and brand work, and an illustration-led layout where rounded, characterful graphics carry as much narrative weight as the copy. Where Stripe reads as an engineer's instrument and a traditional bank reads as a marble lobby, Richart reads as a clean, optimistic mobile app that happens to have a marketing website.

The teal is the whole personality. #17b6c9 is a bright, slightly green-leaning cyan-teal -- it looks like clear water, like a fresh start, like the "blue ocean" of saving money rather than the institutional navy of legacy banking. It anchors every primary call to action, the small vertical accent bars that introduce section titles, link hovers, and active states. A brighter sibling cyan (#2be0ec) and a soft tint (#64cedb) extend the family into hero gradients and decorative flourishes, and an unexpected electric lime (#dafa5f) appears as a youthful pop accent. The result is a palette that feels distinctly young, distinctly digital, and distinctly un-bank-like -- exactly the point for a product whose entire reason to exist is to make banking feel approachable to people in their twenties.

The geometry reinforces the friendliness. Primary buttons are full 100px pills, not Stripe's austere 4px corners; cards round at 16px; bottom sheets round at 24px. Nothing on the surface has a hard, aggressive edge. The typographic backbone is Noto Sans TC -- the open, humanist, exhaustively-glyphed Traditional-Chinese workhorse that renders Taiwanese copy cleanly at every weight -- paired with Montserrat for Latin display moments. Depth comes not from flat drop-shadows but from soft, neumorphic inset-and-outset shadow stacks (0px 10px 44px rgba(102,102,102,0.12) with inset highlights) that make surfaces feel like smooth, tactile pebbles. The overall atmosphere is bright, rounded, tactile, and warm -- a fintech that wants you to feel safe, not impressed.

Key Characteristics:

• A single dominant brand teal (#17b6c9) carrying CTAs, accents, links, and active states -- minimal color budget, maximal recognizability
• Bright near-white canvas (#fdfdfd) with cool gray surfaces (#f3f5f6) -- airy and optimistic, never heavy
• Full pill buttons (100px radius) and large 16px-24px card rounding -- soft, app-like, anti-institutional
• Noto Sans TC as the humanist Traditional-Chinese workhorse, Montserrat for Latin display
• Neumorphic inset+outset soft shadows (rgba(102,102,102,0.12) + inset highlights) -- tactile, pebble-like depth
• Hero cyan accent (#2be0ec) and electric lime (#dafa5f) as youthful pops against the calm teal base
• Slate-not-black text (#2a3342 headings, #727d8c body) -- soft, never harsh
• Illustration-led storytelling over dense data -- a consumer app voice, not a developer console

2. Color Palette & Roles

Primary

• Richart Teal (#17b6c9): The core brand color. Primary CTA fill, link hovers, active states, the 4px accent bar before section titles, secondary-button text and border. A bright, water-fresh cyan-teal that defines the brand.
• Teal Hover (#15a6b7): Darker teal for .btn-primary:hover and :active states.
• Teal Soft (#64cedb): Light teal used as the bright stop in the XL button radial gradient and decorative tints.
• Canvas White (#fdfdfd): Page background and button text on teal. An off-pure white that keeps the surface soft.

Accent

• Accent Cyan (#2be0ec): Bright hero cyan for gradient flourishes and decorative highlights -- the energetic edge of the teal family.
• Accent Bright (#30dde8): A second vivid cyan for gradient mids and illustration accents.
• Accent Lime (#dafa5f): Electric chartreuse pop -- a youthful, unexpected highlight used sparingly for emphasis moments.

Surfaces

• Surface (#f3f5f6): Cool light-gray section backgrounds and card fills.
• Surface Alt (#edf0f2): Slightly deeper gray for the bottom stop of subtle vertical surface gradients.
• Ecofresh (#ecf9fa): Pale teal-tinted surface for teal-themed cards and highlight panels.

Text / Neutral Scale

• Heading (#2a3342): Primary heading slate -- a dark blue-gray, never pure black, that keeps headlines soft.
• Ink (#1b2028): Darkest text, near-black with a cool undertone, for maximum-contrast labels.
• Label (#364053): Secondary headings, strong labels, emphasized body.
• Body (#727d8c): Standard body copy, descriptions, secondary text.
• Muted (#b6bec7): Disabled text, captions, the faintest readable gray.

Borders & Lines

• Hairline (#dce0e5): Standard divider and card-border gray.
• Border Soft (#c7cdd4): Slightly stronger border for inputs and grouped controls.

Deep & Status

• Teal Deep (#001617): Near-black dark teal used for immersive dark moments and high-contrast type over light surfaces.
• Warn (#cb904c): Amber for caution and notice states.
• Error (#e75365): Coral-red for validation errors and destructive actions.

3. Typography Rules

Font Family

• Primary: 'Noto Sans TC' -- the humanist Traditional-Chinese sans that renders every Taiwanese glyph cleanly across weights. Used for ~95% of all text.
• Display / Latin: 'Montserrat', falling back to 'Noto Sans TC' -- geometric Latin display face for English headlines, the "Richart" wordmark context, and number-forward moments.
• Stack: 'Noto Sans TC', sans-serif with font-display: swap for resilient web-font loading.

Hierarchy

Principles

• One family, full coverage: Noto Sans TC does nearly everything. The discipline of a single humanist family keeps the Traditional-Chinese typography even and warm across the whole page; Montserrat enters only for Latin display flavor.
• Two working weights: 400 (body) and 500 (labels, buttons, sub-heads), with 700 reserved for headlines. There is no ultra-light affectation here -- this is friendly, legible, mid-weight type, the opposite of Stripe's whisper-weight 300.
• Generous line-height for CJK: Body text runs at line-height: 1.5, lead copy at 1.67. Traditional-Chinese characters are dense; the loose leading keeps long passages breathable.
• Slate, not black: Headlines are #2a3342, body is #727d8c. Nothing uses #000000 -- the softness is deliberate and on-brand.
• Accent-bar titles: A signature device -- a 4px-wide, 24px-tall teal (#17b6c9) vertical bar sits before block titles, a tiny structural flourish that brands every section head.

4. Component Stylings

Buttons

Primary (pill)

• Background: #17b6c9
• Text: #fdfdfd
• Radius: 100px (full pill)
• Font: Noto Sans TC, weight 500
• Hover / active: #15a6b7 background
• Disabled: #727d8c background, rgba(253,253,253,0.5) text, 38px radius
• Use: Primary CTA -- "立即申辦" (apply now), "了解更多" (learn more)

Primary XL (gradient)

• Background: radial-gradient(100% 256.33% at 0% 7.41%, #64cedb 0%, #15a6b7 100%)
• Text: #fdfdfd
• Size: 240px wide, 16px vertical padding, 20px / line-height 32px
• Radius: 100px pill
• Hover: solid #15a6b7 overlay fades in
• Use: Hero / headline primary action

Secondary (outline pill)

• Background: transparent
• Text: #17b6c9
• Border: 2px solid #17b6c9
• Radius: 100px pill
• Hover: fills #17b6c9, text flips to #fdfdfd
• Use: Secondary actions alongside a primary

Cards & Containers

• Background: #fdfdfd or #f3f5f6
• Radius: 16px (standard), 8px (compact), 24px (bottom sheets / hero panels)
• Shadow (soft): 0px 4px 12px rgba(72, 85, 108, 0.24)
• Shadow (neumorphic): 0px 10px 44px rgba(102, 102, 102, 0.12), inset -3px -3px 10px rgba(84, 92, 101, 0.16), inset -5px -3px 12px rgba(193, 203, 221, 0.16)
• Subtle surface gradients: linear-gradient(180deg, #fdfdfd 0%, #eaeef0 100%)

Title Block (signature)

• A 4px × 24px #17b6c9 vertical bar (.title .line), then title text at 18px / weight 500 / #2a3342
• 8px gap between bar and text; the bar is the brand's miniature section-flag

Badges / Tags

• Teal-themed: #ecf9fa background with #17b6c9 text
• Neutral: #f3f5f6 background with #727d8c text
• Radius: pill or 16px

Inputs & Forms

• Border: 1px solid #c7cdd4
• Radius: 8px-16px
• Focus: #17b6c9 border / ring
• Label: #364053, 14px weight 500
• Text: #1b2028
• Placeholder: #b6bec7
• Error: #e75365 border + helper text

Navigation

• Light header on #fdfdfd, "Richart" wordmark left
• Links: Noto Sans TC 14px weight 500, #364053, hover #17b6c9
• Primary teal pill CTA right-aligned
• Mobile: hamburger toggle, bottom-sheet menus rounded at 24px

---

Verified: 2026-06-08 (omd-add-reference -- Tier 1 live CSS extract) Tier 1 sources: https://www.richart.tw, https://www.taishinbank.com.tw (canonical homepage; bot-blocks 403 FORBIDDEN on direct fetch) reconciled with apex richart.tw live HTML + /TSDIB_RichartWeb/static/revamp/css/v3/index.css + headerfooter.css served live -- tokens #17b6c9, Noto Sans TC, 100px pill buttons, neumorphic shadows extracted directly from production CSS. Method note: www.richart.tw returns 403 to automation; the apex richart.tw (same Taishin/Richart property, identical brand chrome) serves the full HTML and v3 stylesheets, from which all token values were measured verbatim. .verification.md: web/references/richart/.verification.md

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Comfortable, even rhythm -- the spacing is generous and predictable, matching the friendly app voice rather than dense data layout

Grid & Container

• Centered single-column hero with large illustration, teal pill CTA below the headline
• Feature sections alternate text-left / illustration-right blocks
• 2-3 column card grids for product features
• Full-bleed soft-gradient section bands (#f3f5f6 → #edf0f2) to segment the page

Whitespace Philosophy

• Airy and optimistic: Lots of breathing room around illustrations and headlines. The page never feels cramped -- whitespace signals calm and trust, important for a savings product.
• Illustration as anchor: Each section is built around a characterful illustration; copy is secondary and concise. The whitespace exists to let the illustrations breathe.
• Soft banding: Alternating near-white and cool-gray surface bands create gentle rhythm without hard dividers.

Border Radius Scale

• Compact (4px-8px): inputs, small chips
• Standard (16px): cards, panels
• Large (24px): bottom sheets, hero panels (often 24px 24px 0 0 for sheets)
• Pill (32px / 100px): buttons, tags, toggles -- the dominant rounding gesture
• Circle (50%): avatars, icon buttons

6. Depth & Elevation

Shadow Philosophy: Richart's depth is soft and tactile rather than crisp. Its signature is the neumorphic shadow stack -- an outer ambient blur (rgba(102,102,102,0.12)) combined with multiple inset highlight/shadow layers that make surfaces look like smooth, rounded pebbles you could pick up. The shadow colors are warm-gray slate (rgba(54,64,83,...), rgba(84,92,101,...)) tied to the text palette, not stark black. This tactile softness is the visual analogue of the brand promise: banking that feels gentle and physical, not cold and digital.

7. Do's and Don'ts

Do

• Use #17b6c9 Richart teal as the single dominant brand color for CTAs, links, and accents
• Make primary buttons full pills (100px radius) -- the rounded geometry is the brand
• Use the 4px-wide teal accent bar before section titles -- it's the signature section flag
• Use Noto Sans TC at weights 400/500/700 with generous line-height (1.5+) for Traditional-Chinese copy
• Keep the canvas bright (#fdfdfd) and surfaces cool-gray (#f3f5f6) -- airy and optimistic
• Use neumorphic inset+outset soft shadows for cards -- tactile, pebble-like depth
• Use slate text (#2a3342 headings, #727d8c body), never pure black
• Lead with friendly illustrations; keep copy concise and youth-facing

Don't

• Don't introduce a competing brand color -- the teal owns the system; lime/cyan are pops only
• Don't use sharp 4px corners on buttons -- Richart is pill-shaped and soft
• Don't use cold black drop-shadows -- depth is warm-gray and neumorphic
• Don't use heavy institutional navy or marble-bank aesthetics -- this is a youth app
• Don't crowd the layout -- whitespace and illustration breathing room are essential
• Don't set Traditional-Chinese body at tight line-height -- CJK density needs 1.5+
• Don't use pure #000000 for text -- always the slate scale
• Don't make the tone formal or stiff -- the voice is warm, encouraging, peer-to-peer

8. Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons are large and finger-friendly (16px vertical padding, 240px wide for XL)
• Nav collapses to hamburger; menus open as 24px-rounded bottom sheets
• Mobile-first: Richart is fundamentally an app brand, so the mobile surface is primary

Collapsing Strategy

• Hero: 60px headline → ~34-40px on mobile, illustration stacks above copy
• Text+illustration alternating rows → single stacked column on mobile
• Feature card grids: 3-col → 2-col → 1-col
• Section spacing: 64px → ~40px on mobile
• Bottom sheets (24px top radius) replace dropdowns on mobile

Image Behavior

• Illustrations scale fluidly and remain the anchor of each section
• Neumorphic card shadows persist at all sizes
• Hero cyan gradient simplifies on small screens

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / brand: Richart Teal (#17b6c9)
• CTA Hover: Teal Hover (#15a6b7)
• Background: Canvas White (#fdfdfd)
• Surface: Cool Gray (#f3f5f6)
• Heading text: Slate (#2a3342)
• Body text: Gray-slate (#727d8c)
• Label text: Dark slate (#364053)
• Border: Hairline (#dce0e5)
• Accent pop: Cyan (#2be0ec), Lime (#dafa5f)
• Error: Coral (#e75365)

Example Component Prompts

• "Create a hero on #fdfdfd background. Headline 48px Noto Sans TC weight 700, color #2a3342. Subtitle 18px weight 400, line-height 1.67, #727d8c. Primary pill CTA: #17b6c9 background, #fdfdfd text, 100px radius, 20px weight 500, 16px vertical padding. Large friendly illustration to the right."
• "Design a feature card: #fdfdfd background, 16px radius, neumorphic shadow 0px 10px 44px rgba(102,102,102,0.12), inset -3px -3px 10px rgba(84,92,101,0.16), inset -5px -3px 12px rgba(193,203,221,0.16). Title 24px Noto Sans TC weight 500 #2a3342, body 16px weight 400 #727d8c line-height 1.5."
• "Build a section title: a 4px × 24px #17b6c9 vertical bar, then title text 18px Noto Sans TC weight 500 #2a3342, 8px gap."
• "Create a secondary button: transparent background, #17b6c9 text, 2px solid #17b6c9 border, 100px pill radius. Hover fills #17b6c9, text becomes #fdfdfd."
• "Design a navigation header: #fdfdfd bar, 'Richart' wordmark left, links 14px Noto Sans TC weight 500 #364053 hover #17b6c9, teal pill CTA right-aligned."

Iteration Guide

1. Teal #17b6c9 is the single brand color -- resist adding competing hues
2. Buttons are always full pills (100px) -- never sharp corners
3. Use the 4px teal accent bar to flag section titles
4. Noto Sans TC weights 400/500/700, line-height 1.5+ for CJK breathing room
5. Slate text scale (#2a3342 / #364053 / #727d8c), never black
6. Neumorphic soft shadows for cards; warm-gray, never black
7. Keep it airy -- whitespace and illustration are core
8. Lime (#dafa5f) and cyan (#2be0ec) are pops only, used sparingly

---

10. Voice & Tone

Richart's voice is warm, encouraging, and peer-to-peer -- a slightly-older friend who is good with money and genuinely wants you to save some. The tagline "最能幫年輕人存到錢的銀行" (the bank that best helps young people save) sets the register: it is about you (the young person) and a concrete, achievable benefit (saving money), not about the institution's prestige. Copy is concise, friendly, and action-oriented, written in casual Traditional Chinese that avoids the stiff formality of legacy Taiwanese banking. Where a traditional bank says "尊榮理財" (prestige wealth management), Richart says, in effect, "let's help you save".

Forbidden register. Stiff institutional formality, prestige-banking vocabulary ("尊榮", "菁英"), fear-based or shaming money language, dense jargon. Richart never talks down to its young audience and never tries to sound like an old bank.

11. Brand Narrative

Richart is the digital-banking brand launched by Taishin International Bank (台新銀行), one of Taiwan's major private commercial banks, as its dedicated answer to a generation of young Taiwanese who grew up on smartphones and apps rather than bank branches. Where the parent bank carries the full apparatus of traditional retail banking, Richart was conceived as a clean, mobile-first, deposit-and-save product with a deliberately youthful identity -- its own name, its own teal, its own illustrated world, distinct from the corporate Taishin chrome.

The strategic bet is explicit in the brand's own promise: be "最能幫年輕人存到錢的銀行" -- the bank that best helps young people save. That reframes the bank's relationship with its customer. Instead of selling prestige or loans, Richart sells a habit (saving) and a feeling (it's easy, it's friendly, you can do it). The teal, the pills, the illustrations, and the neumorphic softness all serve that reframe: this is finance that feels like a well-designed consumer app, because for a digitally-native young user, that is the only kind of finance that feels trustworthy.

What Richart refuses: the marble-lobby gravitas of legacy banking, the cold institutional navy palette, dense form-heavy interfaces, and any tone that makes a 24-year-old feel like they're being lectured. What it embraces: a single friendly brand color, rounded pill geometry, illustration-led storytelling, encouraging copy, and the visual language of a delightful mobile app.

12. Principles

1. One color, total recognition. The teal #17b6c9 does almost all the brand work. A disciplined, near-monochrome accent strategy makes Richart instantly recognizable and prevents the visual noise that erodes trust in a money product.
2. Soft over sharp. Pills, 16px cards, neumorphic shadows. Every edge is rounded because rounded reads as approachable, and approachable is the entire premise.
3. Illustration carries meaning. Characterful graphics are not decoration; they are the primary explanatory device. Copy supports the picture, not the other way around.
4. Save, don't sell. The product's job is to build a saving habit. Design choices reinforce encouragement and progress, never pressure or prestige.
5. App-first, web-second. Richart is fundamentally a mobile app brand; the website inherits the app's softness, rounding, and bottom-sheet patterns rather than imposing a desktop-bank aesthetic.
6. Warm neutrals, never black. Slate text and warm-gray shadows keep even the functional layers gentle.
7. Breathing room as trust. Airy whitespace signals calm and confidence -- important reassurance for someone handing a bank their savings.

13. Personas

Personas below are fictional archetypes informed by Richart's publicly stated target segment (young, digitally-native Taiwanese savers), not individual people.

陳怡君 (Chen Yi-Jun), 25, Taipei. Just started her first full-time job. Has never set foot in a Taishin branch and never will -- she opened her Richart account entirely on her phone during a lunch break. She uses the auto-save feature to skim a little off every paycheck and feels a small hit of satisfaction every time the app celebrates her progress. She picked Richart over the bank her parents use because "it actually feels like it was made for people my age."

林承恩 (Lin Cheng-En), 22, Taichung. University senior with a part-time income. Money is tight, so a savings product that shames him or buries him in jargon would lose him instantly. Richart's encouraging, gamified nudges keep him saving NT$500 a week without it feeling like a chore. He'd churn the moment the tone turned preachy.

黃詩涵 (Huang Shih-Han), 29, Kaohsiung. Freelance designer with irregular income. She values that the interface is clean and the illustrations are charming -- as a designer she notices, and the polish signals competence. She keeps an emergency fund in Richart specifically because the smooth, app-like experience makes checking her balance feel calm rather than stressful.

14. States

15. Motion & Easing

Durations (extracted from live CSS):

Easings (extracted from live CSS):

Signature motions.

1. Button fill. Primary buttons transition background 0.5s from #17b6c9 to #15a6b7 on hover -- a slow, smooth color fill that feels gentle rather than snappy.
2. Secondary fill. Outline buttons fill from transparent to teal over 0.5s, text flipping to white -- a satisfying, watery wash.
3. Soft arrivals. transition: all 0.3s ease-out is the page-wide default; elements settle in softly, matching the rounded, calm aesthetic.
4. Reduce motion. Under prefers-reduced-motion: reduce, transitions collapse to instant; the product stays fully usable with no loss of function.

16. Do's and Don'ts

Do

• Anchor everything on Richart teal #17b6c9; keep the color budget tight
• Use full pill buttons and 16px+ card rounding -- softness is the brand
• Reach for neumorphic warm-gray shadows for tactile depth
• Write warm, encouraging, you-focused Traditional-Chinese copy
• Lead with friendly illustrations and keep the layout airy
• Use the 4px teal accent bar as the section-title signature
• Celebrate saving progress; gamify positively

Don't

• Don't add a second strong brand color or use cold institutional navy
• Don't use sharp corners, black shadows, or dense form-heavy layouts
• Don't write stiff, prestige-banking, or shaming money copy
• Don't crowd the page -- whitespace is part of the trust signal
• Don't use pure black text -- always the slate scale
• Don't tighten CJK line-height below ~1.5
• Don't make errors alarming -- keep them calm and solution-first