Treecard

一份包裹在高端编辑式布局中的环境影响报告。

源自背景摄影的深邃、富有氛围感的绿色为主导，使用白色文字以形成对比。

transitional-serif · humanist-sans

• display80px · 400
• body18px · 400

围绕文本块的垂直间距采用标准的8px网格节奏。

使用微妙、低不透明度的白色边框进行最小化的分隔。

一个居中、垂直堆叠的单栏布局，聚焦于核心信息。

文本元素采用柔和的淡入效果 · 滚动时背景图像运用微妙的 parallax 效果

交互元素上的微妙透明度变化。 · 标准的按压状态。

• button 在此特定视图中极少或无按钮。
• card 在此视图中不存在。
• chip 在此视图中不存在。
• input 在此视图中不存在。
• hero 一个全屏摄影背景，搭配居中、堆叠的文本块，用于主标题和副标题。

• 语气 感恩、谦逊且扎根于大地。
• 标题风格 大尺寸、优雅的衬线字体，专注于情感共鸣。
• 按钮文案 低调、小型大写字母、大写无衬线字体用于“SCROLL TO EXPLORE”等次要提示。

• 不要使用霓虹或高饱和度的强调色——截图显示的是柔和、源于自然的调色板。
• 不要使用几何无衬线字体设置主标题——截图显示的是优雅、高对比度的过渡衬线字体。
• 不要用多个相互竞争的视觉元素使布局杂乱——截图显示的是干净、居中的层级结构。
• 不要使用刺眼、重阴影的按钮——截图显示的是依赖摄影景深的界面。
• 不要应用 rigid、带框的容器——截图显示的是文字在氛围感背景上自由浮动。
• 不要在文案中使用非正式或俏皮的语气——截图显示的是真诚、感激且略带正式感的信息。
• 避免: 响亮、激进的营销语言
• 避免: 分散核心信息的复杂、繁忙布局
• 避免: 与自然主题冲突的明亮、不自然的强调色
• 避免: 大量使用边框或框体来框定内容
• 避免: 削弱严肃、感激基调的俏皮或非正式排版
• 避免: 破坏平静氛围的快速、刺耳动画