FckSignups 设计系统拆解色彩、字体与间距如何统一视觉【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignupsFckSignups现已更名 NoSignups是一个收录 200 个开源在线工具的精选目录站主打「免注册、浏览器即用」。这个项目用 React TypeScript 构建但其真正的亮点藏在界面背后——一套被称为「Brutalist粗野主义」的设计系统。本文将拆解它的色彩令牌、三套字体与间距规则带你快速看懂它是如何做到视觉统一的。一个文件定义全部CSS 变量色板打开全局样式文件 src/styles/index.css你会看到整个站点的「调色盘」全部集中在:root里的一组 CSS 变量中变量颜色用途--bg#050505近纯黑背景--surface/--surface-2#0f0f0f / #1a1a1a卡片与悬浮层--border/--border-light#222 / #333描边与分隔线--text/--text-muted#f0f0f0 / #a9a9a9主文本 / 次要文本--accent#E2023A品牌红全站唯一强调色--accent-2~--accent-4荧光绿 / 橙 / 青徽章、成功态、装饰新手要点全站不出现任何「魔法色值」组件只引用变量。想换主题色改--accent一行即可——这就是色彩统一的根本保障。粗野主义风格还有三个标志性细节同样写在这个文件里噪点覆盖层body::before用 SVG 分形噪声生成 3.5% 透明度的颗粒质感扫描线body::after模拟老式显示器的横向细线硬阴影按钮统一使用3px 3px 0的实心投影配合大红色描边形成「贴纸感」。三套字体分工明确正文、标题与等宽字体声明集中在 src/styles/fonts.css通过font-face本地加载了两套可变字体Inter--font-sans——正文与输入内容可读性强Space Grotesk--font-display——大标题与品牌名几何感强、有张力等宽字体栈--font-mono——SF Mono / Fira Code 等用于标签、徽章、统计数字和表单标签。分工规则非常清晰标题层级用 Space Grotesk页头品牌名 Header.module.css 里通过clamp(2.5rem, 6vw, 5rem)实现流式缩放从手机到桌面无缝适配正文用 Inter行高 1.5~1.6保证长文舒适「终端味」元素工具索引号、分类按钮、星标数统一用等宽字体 全大写 字距 0.08em~0.1em制造复古终端氛围。 一个巧思搜索框左侧有个红色提示符见 ToolFilters.module.css像命令行一样暗示「这里可以输入」。间距与布局rem 节奏 1400px 容器间距体系遵循「1rem 16px」的节奏常用档位是 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3rem几乎见不到零散像素值容器.container限宽 1400px 并水平居中移动端内边距从 1.5rem 收窄到 1rem工具卡片网格Tools.module.css 使用repeat(auto-fill, minmax(340px, 1fr))自适应列数gap: 0.5rem的细缝 网格底色--border让每张卡片像嵌在「砖缝」里卡片内部ToolCard.module.css 内边距 1.5rem移动端 1rem元素间 gap 0.9rem标题、描述、标签、页脚四层结构整齐。页脚的三栏网格 Footer.module.css 与页头 Header.module.css 的双栏网格都沿用相同的 2rem 间距上下呼应。细节如何强化统一状态、徽章与动效设计系统的「统一感」往往体现在重复的细节上强调色只给关键动作搜索框聚焦、按钮悬浮、必填星号、卡片悬停下划线全部用同一个--accent红成功态则交给荧光绿--accent-2徽章体系FEATURED红底、EDITORS橙底、NEW绿底、ABANDONED灰底删除线字号统一 0.6rem、等宽字体、全大写见 ToolCard.module.css微动效节制卡片悬浮时底部红条从左展开width 0% → 100%、品牌标题悬停触发轻微错位「故障感」glitch 动画、Toast 提示用红色 52px 光晕边框时长都在 0.15s~0.3s 之间圆角策略输入框border-radius: 0保持硬朗卡片与按钮用 0.5rem 小圆角缓和攻击性——刚柔并济。新手可复用的设计系统清单把 FckSignups 的做法浓缩成 5 条可直接套用的经验色彩令牌先行所有颜色进:root变量组件层禁止裸写色值字体三件套正文无衬线 展示字体 等宽字体各自边界清晰间距只用 rem 档位0.25 的倍数最省心视觉自然对齐强调色要稀缺一个强调色负责所有「重点」出现得克制才醒目状态样式写进组件hover / focus / active 与基础样式同文件维护行为即设计的一部分。结语设计系统就是「约束的美」FckSignups 没有引入 UI 框架却靠一份 26 行的变量定义 组件级 CSS Modules让 200 多个工具的列表页面保持着高度一致的粗野气质。对新手来说与其收集花哨的效果不如先学会像它这样定义令牌、限定字体、锁死间距节奏——统一感自然就会出现。想了解收录规则与工具提交格式可阅读 README.md数据与分类定义见 tools.json 和 src/data/schema.js。【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考