shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

Refero Styles

DESIGN.md 规范

Overview

Overview

System

Style Comparison
9种
Token Standards
Tokens
9/9 设计美学全量实装styles.refero.design 全集

Refero Styles · 9 大主流现代设计风格全景实装

严谨还原 styles.refero.design 收集的全球 9 大现代 Web 设计美学流派,包含各自独特的背景色值、阴影算法与排版规范。

01 / Linear.app深空黑细流光

Linear 极致工程美学

采用 #08090C 极深色底,配以 1px 细微半透边框与微弱的径向光斑。无多余阴影,纯粹依靠低对比层次划分界面。

bg: #0d0e12; border: 1px solid #27272a;
#5E6AD2
02 / Vercel Geist纯粹黑白高反差

Geist 冷峻工业极简风

严格的纯黑 (#000000) 与纯白 (#FFFFFF) 反差,结合无衬线字体与等宽数字。克制、高效、剔除非必要渐变。

font: Geist Mono; contrast: 100%;
#000000 / #FFFFFF
03 / Apple Smooth超椭圆与磨砂

Apple 拟态平滑微触感

超大圆角(Squircle),层叠毛玻璃与极柔和的弥散阴影,营造贴近物理真实世界的亲和手感。

radius: 24px; blur: 20px;
#0071E3 (Apple Blue)
04 / Neo-Brutalism新粗野主义

粗黑描边硬投影美学

高饱和度糖果撞色、重度粗黑描边与零羽化 90 度硬阴影,呈现街头波普艺术冲击感。

shadow: 4px 4px 0 #000; border: 3px solid;
#FDE047 (高能黄)
05 / Stripe Fintech信任深蓝斜角

Stripe 金融科技旗舰风

以稳重信任的 Navy 深蓝底色为基调,搭配 3D 倾斜角度多色阶渐变与网格背景,被全球支付金融产品广泛推崇。

bg: #0A2540; accent: #635BFF;
#635BFF
06 / Supabase Neon翡翠绿极客

Supabase 翡翠暗黑极客风

深色哑光基底融入高饱和度荧光绿(Emerald Green),辅以虚线辅助对齐网格,深受开发者与开源数据库喜爱。

accent: #3ECF8E; bg: #121212;
#3ECF8E
07 / Raycast Desktop悬浮命令岛

Raycast 桌面级悬浮面板

模仿 macOS Spotlight 的悬浮交互面板,深度结合快捷键胶囊(Kbd)、单行输入命令与极简列表。

Quick Command Launcher⌘K
#FF6363
08 / Notion Document纯净纸感排版

Notion 专注知识文档风

宛如羊皮纸质感的微白底色 (#FBFBFA),弱化一切色彩干扰,专注段落层级、列表块与知识沉淀。

bg: #fbfbfa; line-height: 1.65;
#FBFBFA (纸张色)
09 / AI Perplexity流光智能体

AI 原生呼吸流光流派

结合青色(Cyan)与深紫的高斯流光呼吸动效,常用于 AI 问答对话框、检索引用源卡片与思维链推理视图。

glow: radial-gradient(cyan, purple);
#06B6D4