Biocoda：给一家合同实验室做的网站

Biocoda 按订单做检测：样品进来，报告出去。没有东西可以展示 —— 没有界面，没有包装，而试管的照片在地球上任何一家实验室里看起来都一样。

所以这个网站靠的是图示和对比。`StatementHero` 用一句主张而不是一张图片开场。`SchemeOverview` 画出样品在实验室里走的路径，`FlowPanel` 画出仪器做完之后数据的去向。`RangeChart` 展示数值的分布：对一家实验室来说，那才是产品 —— 重要的不是平均值，而是那条走廊有多窄。

用一次对比，代替十条论据

中段是 `BeforeAfterSplitSlider`，同一张图两种状态之间的一道帘子。对实验室来说，这是页面上最实在的一个板块：一个形容词都不用，就把客户要买的那个差别摆了出来。

接着是装着合作形式的 `ProgramCards`，和装着人的 `TeamGrid`。在一项没有产品的服务里，人就是产品，所以团队排在价格前面，而不是后面。

这个网站演示了什么

极浅的蓝底上一抹荧光青柠，配近乎黑的文字。这一对是故意吵的：实验室网站通常一片蓝、彼此雷同，而在收件箱里被认出来，比看起来沉稳更要紧。

展示字体用的是衬线 —— 在这个行业里不常见 —— 正文用无衬线。改一行配置，两个都会变，十三个板块里的标题跟着一起变。