mymind 网站预览
mymind 网站预览

mymind

阳光下的私人档案 — 温暖的午后光线洒落在私人收藏的思绪、图片和书签上,内容经过精心整理,无文件夹分类。

mymind 仿佛是一本私人的日记,摊开放在温暖的窗台上——柔和、扩散的光线从橙到白的渐变中渗入,整个画布被一种环境般的暖意笼罩。首屏背景是珊瑚橙色的放射状绽放,逐渐过渡到白色,不是照片或插画,只是色彩作为氛围存在。字体设计承担了主要表现力:Louize衬线体在96–140px之间,采用强烈的负字间距(-0.062em),营造出杂志编辑风格的厚重感,这种风格是编辑类杂志所熟悉的;Nunito则用于处理微UI标签,采用拉伸的全大写(0.063em 至 0.125em)字间距——字体在字间距尺度上的两个极端,构成了系统的视觉特征。卡片置于染色的柔和底色上(#e5eaf2、#f3f0e7、#dde9d3),而非通用的白色,每种色调都暗示着不同内容的情绪氛围。唯一的色彩强调——Ember Orange #ff5924——仅以描边胶囊形按钮的边框和品牌展示场景出现,从不作为填充的行动号召(CTA),使其更像一个标记,而非指令。

查看原始网站

使用规范

建议采用

  • 所有标题文字使用Louize-Regular-205TF,字号32px及以上,字间距为-0.04em至-0.062em——字号越大,字间距越紧。
  • 首屏区域的绽放渐变(橙色 → 粉色 → 白色)仅应用于首屏级背景;绝不用于卡片或按钮填充。
  • 所有胶囊形按钮无论变体如何,统一使用100px圆角——完整的圆形按钮是系统中唯一的按钮形状。
  • 特征卡片的区分仅通过背景颜色(Slate 蓝色 #e5eaf2 / 羊皮纸色 #f3f0e7 / 鼠尾草绿 #dde9d3)实现——绝不通过边框或阴影。
  • 导航链接前缀添加一个小型Ember Orange(#ff5924)填充点——这是导航的首要视觉提示。
  • Nunito大写标签的字间距设为+0.063em至+0.125em——正向字间距的极端值与Louize标题的负向字间距形成鲜明对比,定义了系统的排版节奏。
  • 每个Louize展示标题上方,都应将部分小节标题标签置于Ember Orange(#ff5924)的全大写中。

建议避免

  • 任何按钮均不可用Ember Orange(#ff5924)作为实心背景——它仅作为轮廓线强调色。填充橙色会破坏品牌克制的邀请感。
  • 特征卡片禁止使用盒阴影——三个柔和的卡片变体(#e5eaf2、#f3f0e7、#dde9d3)仅通过色彩对比提升视觉层次。
  • Louize标题的字号绝不可超过32px,且字间距不能为正或零——负字间距在不同尺寸下是排版系统的根本规则。
  • 每页区块内表面色调不可超过三种——Slate 蓝色、羊皮纸色 和 鼠尾草绿 构成完整组合;增加第四种卡片颜色将破坏分类体系。
  • 禁止在展示字号文本中使用Inter或Open Sans——Louize主导所有28px以上的字号;Avenir和Inter仅用于正文与UI。
  • 禁止将温暖橙色光晕卡片阴影(rgba(255,167,129,0.44))应用于除首屏产品预览卡片之外的任何元素——这是品牌标志性时刻,而非可复用的视觉提升样式。
  • 禁止在页面区块之间使用明显分隔线(可见的边框下划线或<hr>)——节奏由交替的背景色(#f9fafc 与 #fff1f1)营造,而非结构线。