文/林芳老师

上一篇（05）我们搭好了网站骨架：导航栏、页脚全站复用，五个菜单全部能点开。但你把网址发给同事看，对方说了句大实话："页面是挺整齐，可这颜色、这字体、浏览器标签页上那个小地球图标——看着还是个'通用模板'，不像我们公司。"

骨架是房子的承重墙，这一篇我们做装修里最显眼的一层：给网站穿上"公司制服"。 配色、字体、logo、浏览器标签页小图标（favicon），四样东西定下来，让 Codex 写进全站配置，从此每个页面自动统一。做完这一篇，客户打开网站三秒内就知道"这是谁家"，而不是一张谁都能套的模板脸。

本篇回答三个问题：颜色怎么定才不土？字体怎么选才专业？logo 和 favicon 怎么放、怎么让 Codex 一次应用全站？

一、先想明白：客户要的是"认出你"，不是"惊艳"

B2B 外贸官网和消费品牌网站的审美逻辑不一样。海外采购商一天打开十几个供应商网站，他不会为你的炫酷动画鼓掌，他只会用眼睛快速确认三件事：这家公司是不是正经经营、产品是不是我要的品类、怎么联系到人。

所以外贸官网的视觉目标只有一个词：识别度。 客户在展会名片、产品目录、开发信落款、网站页脚之间来回切换时，颜色和标志要能对上号。配色花里胡哨、字体换来换去，客户潜意识里会给你贴上"小作坊"标签；颜色克制、字体统一、logo 位置稳定，传递的信号是"这家公司流程规范、靠得住"。

记住一个判断标准：网站穿"制服"，不穿"时装"。 制服的特点是统一、稳定、可识别——这正是 B2B 客户想要的感觉。

二、配色：三色就够，多一个都是风险

新手做网站最容易犯的错，是把喜欢的颜色全堆上去：蓝的导航、绿的按钮、红的强调、紫的链接。结果页面像调色盘，客户眼睛不知道往哪落。专业做法是全站只用三个角色的颜色：

颜色角色	占比	作用	怎么定
主色	约70%	导航栏、标题、主按钮	优先沿用公司已有VI色；没有就选深藏蓝、墨绿这类稳重色
辅助色	约25%	背景分区、卡片边框	主色的浅色版或中性灰
点缀色	约5%	询盘按钮、关键链接、悬停效果	暖橙、砖红等暖色，全站只此一处"跳"

两个实操要点。第一，主色直接抄你现有的物料。 名片、产品目录、展会海报用什么蓝，网站就用什么蓝，把颜色的十六进制编号（形如 #1B3A5C 的一串字符）找出来给 Codex 即可；不知道编号，把名片拍照发给 Codex，他能帮你取色。第二，点缀色全站只用在"希望客户点的地方"——主要是"联系我们/发送询盘"按钮。橙色按钮出现在深藏蓝页面上，客户的视线会自动落过去，这就是制服上那枚工牌的作用。

实操 A： 定出三个颜色的十六进制编号：主色从公司现有物料取，辅助色让 Codex 基于主色生成浅灰蓝版本，点缀色选一个暖橙。三个编号记下来，下一步要用。

三、字体：外贸官网只用"一种家族、两种字重"

字体是新手最爱折腾、也最容易翻车的地方。林芳老师的建议简单到粗暴：英文正文只选一种无衬线字体家族，全站统一；中文不用管，浏览器会自动调用客户设备的默认中文字体。

为什么是无衬线字体？就是笔画末端没有小脚装饰的那种（比如 Arial、Inter、Helvetica），屏幕上越小越清晰，手机上读着不累。衬线字体（Times New Roman 那种）适合印刷品，用在网站正文上，手机端发虚。

项目	建议	说明
英文字体	Inter 或系统默认无衬线组合	现代、免费授权、屏幕显示清晰
字重	常规400写正文，加粗700写标题	两种足够，多了显乱
字号	正文16px起步，标题逐级放大	16px是手机阅读的及格线
行间距	正文1.5倍左右	行距太挤是"业余网站"第一特征
中文字体	不指定，跟随系统	海外客户设备自带渲染，指定了反而可能加载失败

字体文件让 Codex 用正规方式引入（Next.js 有内置的字体加载机制），不要自己去网上下载来路不明的字体文件——既拖慢网站，又有版权风险。

四、logo 和 favicon：两个最容易被漏掉的"身份证"

logo 放两个位置就够：导航栏左上角、页脚。 左上角是全站视线起点，客户每次点新页面都会扫到；页脚再出现一次，形成闭环。logo 让设计同事导出透明背景的 PNG 或 SVG 格式（SVG 最清晰，放大不糊），放进 public 文件夹。没有矢量版 logo？把现有最清晰的 PNG 给 Codex，他能帮你统一到导航栏的高度，白底彩底都能适配。

favicon 是浏览器标签页上那个小图标——就是你现在看这篇文章时，浏览器顶部标签里 CSDN 的那个小标志。它的作用比你想的大：客户同时打开七八个供应商页面对比时，标签页上只显示 favicon 和几个字的标题，有专属图标的网站一眼就能被找回来；没有的，显示一个空白小地球，等于在客户的书签栏里"匿名"。

favicon 制作极简单：让设计同事或用免费工具把 logo 缩成 32×32 的小方图（复杂 logo 就只取首字母或图形标志），存好放进项目，Codex 知道该放哪个位置。手机端把网站收藏到桌面时显示的也是这个图标，一次做好，两端受益。

实操 B： 准备好两份物料——透明背景 logo 文件、32×32 favicon 小图标，都放进 public 文件夹，文件名用英文（如 logo.png、favicon.png），不要用中文文件名。

五、让 Codex 一次应用全站

物料备齐，在 Codex 对话里发下面这段指令（括号内容换成你的真实信息）：

"请为全站配置统一的视觉风格，写入全局布局和全局样式，所有页面自动生效：
1. 配色：主色（你的主色编号）用于导航栏、标题、主按钮；辅助色（你的辅助色编号）用于背景分区和卡片；点缀色（你的点缀色编号）只用于'发送询盘/联系我们'按钮和悬停效果；
2. 字体：英文使用 Inter 字体家族，正文常规字重、标题加粗，正文16px、行高1.5；中文跟随系统默认；
3. logo：使用 public 目录下的 logo.png，放在导航栏左侧和页脚，点击 logo 回到首页；
4. favicon：使用 public 目录下的 favicon.png 配置为全站浏览器标签图标；
5. 手机端保持正常：导航折叠按钮、按钮尺寸、字号在小屏幕上不变形。"

Codex 改完后运行 npm run dev 本地预览，五个页面挨个切一遍：导航颜色统一了、按钮是暖橙色、标签页图标变成你的 logo、字体比默认版精神一截。哪里不满意继续用中文说，比如"按钮橙色再暗一点""标题和正文的对比再拉开一些"，改到满意为止。

实操 C： 全站视觉配置完成后，切手机视图逐页检查，确认颜色、字体、logo、favicon 四样在五个页面全部一致。然后 add、commit（说明写"全站配色字体logo与favicon统一"）、push，Vercel 自动部署后，手机打开线上网址——注意看浏览器标签页上的小图标，那是你的网站从"模板脸"变成"自己人"的标志。

六、本篇三个方法论提示

第一，视觉规范的本质是"降低客户的识别成本"。 颜色字体不是审美题，是信任题。客户记住你靠的不是某一页好看，而是每次见到都一模一样——制服的意义就在这。

第二，定规范一次，应用靠系统，不靠人盯。 配色写进全局样式、logo 放进布局，之后新建一百个页面也自动统一。这和做销售SOP是一个道理：标准写进流程，执行才不会变形；靠每个页面的人"记得用对颜色"，迟早失控。

第三，物料准备是外贸老板自己的活，Codex 替不了。 主色编号、logo 文件、favicon 这三样，Codex 能帮你取色、缩放、配置，但"公司长什么样"得你定。提前让设计同事备齐，建站当天十分钟就能装完全站。

课后作业

1. 定出主色、辅助色、点缀色三个十六进制编号（主色从名片或目录取色）。
2. 备齐透明背景 logo 和 32×32 favicon，放入 public 文件夹，文件名为英文。
3. Codex 完成全站视觉配置，本地五个页面逐一检查：颜色统一、按钮橙色、字体清晰、logo 在位、标签页图标正确。
4. 提交 push 部署上线，手机打开线上网址，把浏览器标签页小图标和网站首页一起截图，存进作业文件夹。

下一篇（07），我们解决"网站里的东西放哪"：产品图片、车间照片、产品目录 PDF 怎么放进 public 文件夹，图片多了网站会不会变慢，图片上那段给搜索引擎看的 alt 文字为什么不能省——物料进场，官网才开始有血有肉。关注本系列，外贸 AI 建站 18 篇，一篇一篇带你走完从定位到上线的全过程。

本系列基于外贸圈集团《AI建站手册》（GitHub + Next.js + Codex 篇），面向零基础外贸人，不讲代码原理，只带你把能获客的网站亲手做出来。

关于作者

林芳老师，国际商法硕士，外贸圈集团创始人，销售SOP方法论与战略成交方法论创始人，100家亿级企业战略顾问，10余年外贸辅导经验，帮助5000多家企业完成销售体系落地，著有《销售SOP》（中国铁道出版社）。外贸圈集团专注为年出口额1.5亿元以下的B2B外贸企业提供销售体系建设与GEO优化服务，覆盖培训、SOP搭建与陪跑全链路。