Axioma 是一套面向创意机构、设计工作室和品牌顾问的五页 HTML 网站模板，首页、作品、服务、工作室与联系页各自独立。它适合把案例和服务讲得稍细一些的团队：访客可以先看作品，再了解交付范围，最后填写项目询盘。页面采用原生 CSS 与 JavaScript，没有 npm 安装或打包步骤。
把作品放在前面，服务和团队接着讲
首页用大字号标题打开话题，再接上精选案例、服务与客户展示；完整作品集合放在 work.html。这种安排给案例留出了独立空间，不必把所有项目塞进首页，也方便访客带着明确目的进入作品页。
| 页面文件 | 适合放什么 |
|---|---|
index.html | 工作室定位、精选项目、六项服务与联系入口 |
work.html | 十个案例卡片，按品牌、网页、动态、编辑和营销活动筛选 |
services.html | 六类服务的交付内容与工作过程 |
about.html | 团队故事、四位成员、价值观、奖项与招聘信息 |
contact.html | 地址和联系渠道，以及项目类型、预算、启动时间等询盘字段 |
服务页接着解释“合作之后具体得到什么”。品牌识别、网页开发、艺术指导、数字策略、动态影像和编辑设计都有对应位置，可以按实际业务保留或合并。团队、客户、奖项和地址都是演示内容，不能直接当成自己的履历。
这五页还没有独立的项目详情页。首页的 Case study 链接进入作品集合页，作品页主要展示图片、分类与简短说明。若一个案例需要交代设计过程、前后对比和最终成果，还要另外扩展详情页；现有筛选不会自动生成这些内容。
纸白、墨黑与青柠色，让案例自己出场
Axioma 的辨识度来自左侧固定导航和右侧大块内容面板。导航像一列目录，正文沿右侧展开，配合大字号与留白，更接近工作室的作品刊物。纸白 #F5F4F0 和墨黑 #0E0E0E 控制底色，青柠色 #C8FF3D 留给按钮和强调区域，案例图片不必再和一整屏装饰色争位置。
屏幕宽度不超过 768px 时，侧栏改成顶部栏，菜单覆盖在内容上方。这个变化已经写进 CSS，长中文标题与真实图片替换之后是否排得开，仍要按实际内容检查。
标题使用 Bricolage Grotesque，正文与标签使用 Geist 和 Geist Mono，均通过 Google Fonts 加载。换成中文内容时还需要考虑中文字体的回退效果；外部字体加载不稳定的环境，可以改用本地字体栈或自托管字体。英文演示中的字体效果不会原样套到所有中文字符上。
改字、换图和加案例，各有对应入口
品牌与文案：五个 HTML 文件一起核对
文案直接写在 HTML 中，修改入口很直观：首页改定位和精选项目，服务页改交付范围，工作室页换团队信息，联系页改地址与邮箱。导航和页脚也写在各页里，因此只改 index.html，其他页面仍会保留旧品牌和联系方式。
全站颜色、字体、间距和导航宽度集中在 assets/css/styles.css 顶部的 CSS 自定义属性中。例如 --lime 控制强调色，--rail 控制桌面侧栏宽度，--pad-x 控制横向留白。统一这些变量，再处理具体页面，比逐个查找按钮颜色省事。
作品卡片：图片与分类标签要一起替换
包内 SVG 是带标签的占位图。README 对作品图片给出 1200×900、团队肖像 600×750、工作室图片 800×1000 的替换建议；这些是素材尺寸建议，实际显示还受 CSS 裁切影响。作品网格使用 4:3 图片框与 object-fit: cover，人物或文字贴着图片边缘时，预览尤其值得多看一眼。
作品分类依靠卡片的 data-tags 和按钮的 data-filter 对应。例如一张卡片写 data-tags="brand,web"，就能出现在品牌和网页两个筛选结果中。新增分类需要同时增加按钮与匹配的标签值；只修改按钮上显示的文字，不会改变筛选规则。首页与作品页的案例也分别写在各自文件中，需要同步修改。
assets/js/main.js 处理作品筛选、移动菜单、滚动显现和页脚年份。滚动动画以透明度和位移变化为主，系统启用“减少动态效果”时会跳过显现动画。它没有自动更新案例内容的后台，频繁增删项目或需要多人维护时，共享内容数据或 CMS 会更合适。
联系页已经问得细，收件流程还需要接上
询盘表单包含姓名、邮箱、公司、角色、项目类型、预算、启动时间、获知渠道和留言。项目类型、预算和启动时间能帮助团队判断合作范围，询盘不必停留在“想聊聊”。是否保留全部字段，取决于实际接单方式。
当前表单只有页面结构，没有提交接口或邮件发送逻辑，并且写有 novalidate。点击提交不能作为已经收件的依据。接入表单服务或自建后端时，需要一并处理输入校验、成功与失败反馈、反垃圾及隐私告知；暂时不准备接表单，也可以保留真实邮箱，把无效提交入口移除。
改完后，用浏览器打开 index.html 即可查看；部署时带上 assets 和其他四个页面，整套站点可以放在静态托管空间。上线检查集中在几个实际入口：各页品牌是否一致，案例筛选是否匹配，手机菜单能否开关，以及联系请求是否确实进入接收端。这套直接编辑文件的方式，适合页面不多、内容更新节奏较慢的展示站。
暂无评论内容