设计风格指南
什么是 Toss Korean Fintech Blue?

Toss 让银行转账像发短信一样轻盈,从此改写了韩国人对金融的感知方式。
Toss Korean Fintech Blue 速览
Toss 韩国金融科技蓝是 Viva Republica 旗下 Toss 超级应用所开创的视觉语言。Toss 于2015年在韩国上线,为伴随即时通讯成长的一代人重新定义了移动金融体验。这套风格围绕一个统领全局的蓝色展开——足够鲜亮以传递自信与科技感,又足够沉稳以投射金融机构所必需的可信赖感。在暖灰色调的中性背景衬托下,这抹蓝色读来如同一位友好的权威:不是银行金库,而是恰好帮你管钱的聪明朋友。
这套设计系统的核心哲学是「每屏一个动作」。每个页面布局都让用户的目光与拇指在不受干扰的情况下抵达同一个目的地——一枚大号、药片形状的蓝色按钮。充裕的留白将金额与账户余额托举在空间之中,给数字以呼吸的余地,消解了传统银行界面密布小字与免责声明所带来的视觉焦虑。每笔成功交易结束后,一个暖绿色确认标志画下句点,传递出「搞定了」的情绪感受。
除了主蓝色之外,Toss 设计系统还运用了 Pretendard——一款以韩文为先的当代字体——以四种字重覆盖从最大余额展示到最小法律说明的全部层级。同样关键的是文案本身的设计:Toss 使用日常口语韩语写作,以非正式的平等语气称呼用户,而非将其视为账户持有人。这使语言本身与色彩、间距一样,成为整体美学不可分割的一部分。
Toss Korean Fintech Blue 从何而来?
Toss 由李承健创立于2013年。这位曾就读牙医学院的连续创业者,在第九次尝试之前已经历了八次失败。他发现了一个每位韩国智能手机用户都深有体会的痛点:国内银行转账需要经历一套繁琐的流程——各银行专属应用、公共证书安装、安全卡输入、层叠的弹窗——一笔原本十秒可完成的转账,往往耗去十分钟。李承健的洞察并非技术创新——韩国早已具备实时转账基础设施——而是体验层面的:这些摩擦完全没有必要,消除它既是产品设计问题,也是监管沟通问题。
公司花费近两年时间与韩国金融监管机构周旋,终于在2015年2月公开上线。Toss 的增速令创始人自己也感到意外:三次点击完成转账的交互流程迅速成为一个文化参照点。到2019年,它已成长为一款覆盖保险、信用评分、投资账户与数字银行的超级应用。随着业务扩张,品牌需要一套系统化的视觉识别——既能在数十个产品界面上延伸,又能保留最初转账体验那种简洁、自信的气质。Viva Republica 产品与设计团队在内部开发的 Toss 设计系统(TDS),将早期产品中行之有效的设计实践编纂为明确的原则。
将 Pretendard 选为系统主字体,本身即是韩国设计走向成熟的宣言。Pretendard 由吉亨真(Kil Hyung-jin)设计并以开源形式发布,旨在解决一个长期困扰韩国数字排版的问题:韩文字符与出现在混排语境中的拉丁字符(电话号码、品牌名称、英语外来词)之间长期存在视觉不协调。Pretendard 在光学层面统一了两套文字体系,使韩文句子与嵌入其中的英文词语看起来是被一起设计的,而非简单拼接的。Toss 的采用,加之韩国科技行业大量跟随,事实上使其成为新一代韩国数字产品的默认字体声音。
这套视觉识别的演变,也折射出韩国消费科技的更宏观轨迹。智能手机时代初期,韩国金融类应用以复杂著称——多重安全插件、必须依赖桌面端的组件、以及看起来是为取悦监管者而非服务用户而设计的界面。Toss 的设计是对这一传统的刻意颠覆,受到全球即时通讯应用的简洁界面惯例与韩国电商平台的影响——后者已经证明,简单同样可以赢得用户信任。暖中性色背景与对话式语气借鉴了社交应用的语言;统领视野的蓝色则沿用了金融信任领域已被广泛认可的色彩惯例。这种综合是distinctly韩国式的:技术上精密,社会感知上敏锐,为速度而生。
Toss Korean Fintech Blue 的视觉特征是什么?
标志蓝
一个蓝色几乎承担所有视觉工作。它鲜亮但不刺眼——足够饱和以在白色或灰暖中性面上获得注意,又足够冷静以呈现沉稳而非激动的气质。这个蓝色出现在主操作按钮、激活态导航、可交互链接上,偶尔也作为大面积背景色铺设于主视觉区域之后。其余一切退守中性:暖白、灰调或近黑文字色。这种克制的效果是:每当蓝色出现,用户的眼睛便知道这里有可操作的内容。
单屏单动作
核心空间原则是:每个流程页面只呈现一个主要动作。这一原则通过尺度差异在视觉上强制实现:蓝色药片按钮相对于屏幕尺寸偏大,而周围所有内容——标签、次要信息、法律微文字——均以明显更小的字号和更轻的字重排布。留白不是装饰,而是建筑结构,对唯一的焦点形成引力。用户不需要扫视或解读,他们抵达页面,然后采取行动。
暖中性色界面
系统的背景与卡片面并非纯冷白,而是带有微妙的暖意——一种介于白色与极浅灰之间、略微偏向米色但又未完全偏至米色的灰暖色调。这种温度柔化了蓝白搭配可能产生的严峻感,使界面在情绪上与文案那种对话式、朋友般的语气相协调。浮在背景之上的卡片沿用同一暖色系,以轻柔的层次提示加以区分,而非依赖硬边框线。
Pretendard 字体层级
Pretendard 的四种字重——从纤细的 Regular 到有力的 Bold——在无需引入第二款字体的情况下定义了全部信息层级。余额与账户金额以最大字号和最重字重呈现,夺取即时注意力;标签与分类名称降至中等字重与较小字号;法律与辅助文字则以最轻字重在更小的尺度下退至背景。Pretendard 内韩文与拉丁字符之间的光学和谐,使韩语句子、英文品牌名称与数字金额看起来同属一个被一起设计的家族。
对话式文案作为视觉元素
写作风格与视觉设计不可分割。Toss 使用非正式韩语写作——朋友或同辈之间的语气,而非机构对客户的语气。句子简短。指引直接明了。错误提示说明出了什么问题、下一步该怎么做,不使用法律术语。这种语气意味着屏幕上的文字即使承载重要信息也在视觉上显得轻盈——因为简短、清晰的句子在可读字号下占用的空间更少,带来的焦虑感也远低于更长、更密的机构式行文。
药片按钮作为系统签名
完全圆角的药片形主操作按钮,是 Toss 视觉系统中辨识度最高的单一元素。它的轮廓——宽度几乎横跨屏幕、高度足以让拇指舒适按压——赋予蓝色最集中的表达。在韩国移动语境中,药片形状已积累了强烈的文化可读性,与 Toss 所引入的那种无摩擦、自信的数字操作体验高度关联。纯平背景,无渐变,无投影:按钮就是它本身,清晰无歧义,随时待命。
绿色确认时刻
蓝色驱动操作之后,暖绿色的确认标志画下句号。确认页面将绿色对勾与转账金额并置呈现,目的是提供情绪上的完结感,而不仅仅是信息层面的完成反馈。这个绿色比纯信号绿更暖、饱和度略低,让它呈现出庆祝感而非临床感。它短暂而醒目地出现,随后应用回归静默状态,强化了这样一种哲学:一笔完成的交易不应留下任何残余——没有提示,没有追加销售,没有滞留的表单。
谁塑造了 Toss Korean Fintech Blue?
李承健在经历八次创业失败后创立了 Viva Republica 与 Toss,将韩国国内银行转账的极度摩擦识别为既是文化层面的挫败,也是产品机会。他选择首先将这一问题作为用户体验问题来处理——而非技术或合规问题——这奠定了 Toss 视觉系统后来得以明文化的设计哲学。他坦率、非正式的公众沟通风格,也直接影响了品牌对话式文案的语气基调。
负责构建与维护 Toss 设计系统的内部团队,将早期产品中行之有效的设计实践——标志蓝、药片按钮、单屏单动作结构——编纂为一套可在拥有数十个功能领域的超级应用中规模化延伸的组件与原则体系。他们的工作将一种直觉性的早期设计转化为可复现的视觉语言,使 Toss 美学即便在与最初转账体验相距甚远的界面上——保险、信用、投资——也保持清晰的辨识度。
吉亨真(Kil Hyung-jin)是 Pretendard 的设计师。这款开源字体成为 Toss 视觉系统的排版基础,并随后成为其时代最广泛使用的韩国数字字体之一。通过解决混排语境中韩文与拉丁字符之间长期存在的视觉张力——这是韩国数字出版领域的普遍痛点——吉亨真创造了一款跨文字体系高度和谐的字体,使其成为任何需要在同一屏幕上呈现韩语文案、英文品牌名称与数字数据的韩国数字产品的自然之选。
超越个体人物之外,Toss 的视觉识别折射出一种组织文化——将设计与文案视为产品本身,而非在工程决策完成后附加的装饰。在每个按钮标签和错误提示的层面撰写对话式韩语的实践,以及在视觉风格确定之前先审视信息架构的习惯,产生了一套连贯性深入色板之下的设计系统。这种文化,有时被描述为「产品思维即设计思维」,对韩国创业生态系统产生了广泛影响,并在跟随 Toss 设计惯例的一波金融科技与消费类应用中清晰可见。
今天怎么用 Toss Korean Fintech Blue?
Toss 蓝是当代金融科技设计语言中可移植性最强的体系之一,因为它的逻辑是行为性的而非装饰性的:每一个视觉决策都是为了减少犹豫、引导注意力、提供情绪上的完结感。正确运用它,意味着理解:蓝色是信号,留白是决策,文案是设计的一部分——而非日后填充的占位符。
在演示文稿中,这套风格最适合将封面设计为满版蓝色底面配白色大字——简洁、直接;内容页则应当被当作产品界面处理:每页一个主要信息,次要数据以明显更小的尺度呈现,背景延续与 Toss 界面相同的暖中性色。数据页遵循「最重要的数字最大」原则:核心指标以最重字重呈现为页面最大元素,支撑性明细在其下方以一半的视觉份量出现。图表用标志蓝表示主数列,暖灰色用于对比或次要数列;不使用装饰性填充,不使用渐变。
在网页界面上,这套系统最适合仪表板、账户概览页与定价表格——用户在这些场景中的主要任务是做决策。应用严格的垂直节奏与宽松的行高,将内容列宽设置窄于屏幕宽度以创造自然的横向呼吸空间,仅将蓝色用于交互控件与正向状态。卡片组件应当浮于暖中性色背景之上,不使用硬边框——表面的微妙提亮即可传达层次感,无需增加视觉重量。在可读性允许的情况下,导航标签应以文字而非图标呈现。
在编辑与营销场景中,这套风格的权威感与温度感使其对长篇金融内容尤为有效——产品解读、发布公告、监管沟通——信任是这类场景中最核心的说服货币。使用宽边距放置引用语或术语解释,以舒适阅读的字号与宽松的行距排布正文,仅在有意义的时刻使用蓝色:一个关键数据、一个行动号召、一个高亮术语。营销主视觉区域适合满版蓝底配单句大号白色文字,呼应应用自身封面状态的简洁感。
改编 Toss 蓝时最常见的错误,是引入视觉表面而丢失其底层的空间纪律。设计师有时采用了蓝色与药片按钮,却在布局中同时塞入多个行动号召、密集的辅助文案或相互竞争的视觉层级——这与赋予这套风格力量的「单屏单动作」原则背道而驰。同样,将蓝色替换为更冷或更高饱和度的版本会破坏温度平衡;原始色调经过精心校准,读来可信而非攻击性的。文案若退回到正式或机构化的语气,也会瓦解整个系统:视觉语调与语言语调是被一起设计的,将二者分离会产生一个看起来像 Toss、感觉却像传统银行的界面。
Toss Korean Fintech Blue · 常见问题
为什么 Toss 只使用一个蓝色,而不是完整的色板?
单一蓝色的纪律是「每屏单动作」哲学的直接表达。更丰富的色板会制造更多让眼睛停顿的机会——在抵达目的地之前先比较、评估、排列竞争的颜色。通过让蓝色成为系统中唯一的饱和色,Toss 确保了蓝色无论出现在何处,注意力都能无障碍抵达。这不是为了美学极简而极简;这是通过色彩进行的行为工程学。暖中性色、灰调与近黑文字色以不挑战蓝色的方式支撑它,使每个页面成为一个只有一个清晰焦点的完整构图。
这套风格适合非金融类数字产品吗?
Toss 美学在任何「少量清晰、自信的动作比浏览或探索更重要」的产品中都有良好的移植性——任务管理应用、预订流程、新用户引导、结账流程,以及通知密集型移动产品,都与 Toss 所体现的「单屏单动作」逻辑相契合。它对以探索见长的产品则不那么适合:图文丰富的编辑平台、以浏览发现为主要体验的电商界面,或者视觉密度与感官丰富本身是卖点而非失误的娱乐产品。判断标准是:用户的任务是否有清晰的完成状态——如果有,Toss 派生的设计惯例很可能服务得很好。
Toss 视觉系统如何处理深色模式?
Toss 系统的深色模式在保持「蓝色为主操作色」原则的同时,反转了表面层级。背景转换为带有暖意的深碳灰色调——而非纯黑,后者会显得生冷——蓝色按钮以相近的饱和度保持为主要行动号召。暖绿色确认标志的转移是自然的,因为暖色调在深色背景上同样保持其情绪特质。关键的调整在于:深色模式下,次要文字与表面层次的区分需要更刻意的控制——在浅色界面上有效的灰暖色差异,在深色背景上可能坍缩为难以区分的视觉效果。这套风格在深色模式下的优势与浅色模式相同:蓝色始终告诉你该去哪里。
Toss 蓝与其他以蓝色为主的金融科技视觉系统有何区别?
大多数以蓝色为主的金融科技系统使用蓝色来投射企业权威——一种偏冷、略微去饱和的机构感色调,继承自传统银行视觉识别设计。Toss 的蓝色比这一惯例更暖、更饱和,使其更接近消费科技而非银行传统。药片按钮的形状、对话式文案,以及暖中性色背景,共同构建了一个读来像「友好的权威」而非「企业命令」的系统。韩文与拉丁字体排印和谐性的整合——这是一个特定于韩国的设计挑战——也赋予了这套系统一种文化特殊性,使其有别于主导西方市场的国际通用蓝白金融科技美学。
Toss 风格能用于印刷或实体品牌应用吗?
Toss 视觉语言对印刷品的转化尚算顺畅,尤其适合那些需要与数字品牌体验保持连贯的材料:借记卡设计、财务报告封面、ATM 界面图形,以及联名零售终端物料。药片按钮可转化为药片形标签或徽章元素;每个界面单一信息的原则在引导标识和交易类告示上同样有效。暖中性色在涂布纸印刷中能够忠实还原。这套风格在印刷中遭遇局限的场景是:需要丰富摄影图像、详细信息图表或宽泛色调层次的材料——这套系统为干净、高对比度的数字渲染而优化,其克制感在印刷语境中可能显得不够充实,因为在那里,眼睛期待更丰富的视觉环境。