Best styles精选榜单
Best dark-mode design styles最适合深色模式的设计风格
Good dark mode is not a light theme with the colors flipped. It is designed dark-first: a layered near-black palette that creates depth, type and contrast tuned so it stays legible, and accents that glow without straining the eye. These dark styles from Curio's library do exactly that — each one a complete system your AI can apply over MCP or a DESIGN.md download.好的深色模式不是把浅色主题的颜色翻个面。它是天生为深色而设计的:层次分明的近黑配色营造纵深、调校过的字体与对比保持清晰、强调色发光却不刺眼。下面这些来自 Curio 风格库的深色风格正是如此 —— 每一种都是完整系统,你的 AI 可通过 MCP 或下载 DESIGN.md 直接套上。
What makes a dark style work什么样的深色风格才算好
Dark styles that hold up share a few traits: a layered palette of near-blacks and greys that gives surfaces depth instead of a flat void, text contrast tuned to stay readable without harsh pure-white glare, and accent colors chosen to read as luminous against the dark. The hard part is the same restraint as light mode — depth and mood without losing legibility.立得住的深色风格有几个共性:用多层近黑与灰阶让界面有纵深、而不是一片扁平的黑洞;调校过的文字对比保持可读、又不至于纯白刺眼;以及在暗底上读起来发光的强调色。难点和浅色一样在于克制 —— 既要纵深与氛围、又不丢可读性。
Every style below is a full design system — colors, typography, spacing, components, and rules — not a template. You do not edit it by hand; you point your AI at it and it builds your interface in that style. Tap "What is it" to read the full guide, or "View spec" to see the system.下面每一种都是完整设计系统 —— 色彩、字体、间距、组件加规则 —— 不是模板。你不用手动改;把 AI 指向它,它就用这种风格搭出界面。点「了解风格」看完整指南,或点「查看规格」看系统。
The styles风格清单
-
1
Acid House Smiley (1988)Acid House Smiley (1988)
Rave energy hits first. Acid yellow on black, Anton caps, smiley glow.锐舞能量先撞上来。黑底酸黄、Anton大写与笑脸辉光。
-
2
Apple Liquid Glass 2024Apple Liquid Glass 2024
Skeuomorphism, reborn for spatial. Frosted panels, specular highlights, depth as a design material.为空间时代重生的拟物化:磨砂面板、随视角变化的高光、深度本身成为设计材质。
-
3
Art Brut (Dubuffet, 1948)Art Brut (Dubuffet, 1948)
Rawness crowds the frame. Mud brown, oxblood marks, and hand scrawl erase the margins.粗粝填满画面:泥棕底、牛血红刻痕与手写体挤压边缘。
-
4
Art Deco Jazz AgeArt Deco Jazz Age
Jazz Age glamour. Sunburst rays, stepped ziggurats, gold on black — Chrysler Building lobby in CSS.爵士时代的流光奢华:太阳光芒、阶梯几何、金色撞黑底——克莱斯勒大厦门厅的 CSS 版。
-
5
Discord 2024Discord 2024
Blurple cozy. Charcoal grounds, illustrated characters — every surface says 'hang out, don't work'.刻意去企业化的语音聊天:blurple 蓝紫、深炭灰底、俏皮插画角色——每个界面都说「来玩」。
-
6
Linear 2024Linear 2024
Precision down to the millisecond. Near-black, indigo-violet accents, Inter Display, no decoration.开发者工具美学的标杆:近乎纯黑、克制靛紫点缀、Inter Display 字体、毫秒级精确动效。
-
7
Mexican Día de Muertos (Marigold Ofrenda)Mexican Día de Muertos (Marigold Ofrenda)
Joy outruns mourning. Marigold orange and magenta lattice blaze on velvet purple.喜悦胜过哀悼。丝绒紫底上,万寿菊橙与洋红剪纸燃亮。
-
8
Nike "Just Do It" (1988)Nike "Just Do It" (1988)
Brutal motion command. Black field, condensed caps, white motion mark and one Volt strike.残酷的运动命令:黑底、凝缩大写、白色动势标与一击Volt。
-
9
Spotify DarkSpotify Dark
Streaming feels canonical. Near-black canvas, green play pills, album-art grid.流媒体感一眼成立:近黑画布、绿色播放胶囊与专辑封面网格。
-
10
Spotify Wrapped 2023Spotify Wrapped 2023
Social data goes neon. Hot pink-orange gradients, huge Inter stats, sticker badges.社交数据变霓虹:粉橙渐变、巨型数字、贴纸徽章。
-
11
Terminal Vim Dracula (2014)Terminal Vim Dracula (2014)
Terminal-native darkness. Near-black panes carry six saturated syntax colors in mono grid.终端原生的暗色:近黑分屏承载六色语法高亮与等宽网格。
-
12
The Matrix (Green-Code)The Matrix (Green-Code)
Terminal myth, disciplined. CRT green code rain, black grid, monospace scripture.终端神话,冷峻克制。CRT 绿代码雨、黑色网格与等宽字成形。
FAQ常见问题
Are these true dark designs, or just a dark toggle on a light style?这些是真正的深色设计,还是浅色风格加个深色开关?
These are styles designed dark-first — the palette, contrast, and elevation are built for a dark surface from the start, so depth and legibility hold up rather than looking like a flipped light theme.这些都是天生为深色而设计的风格 —— 配色、对比、层次从一开始就为暗底而生,所以纵深和可读性都立得住,而不像把浅色主题翻了个面。
How do I apply one of these styles?怎么把这些风格用上?
Connect Curio's MCP server to your AI client (Claude Code, Cursor, ChatGPT, and others) and ask it to build your page or app in the chosen style, or download the style's DESIGN.md and add it to your project.把 Curio 的 MCP 服务连到你的 AI 客户端(Claude Code、Cursor、ChatGPT 等),让它用选定风格生成你的页面或应用;或下载该风格的 DESIGN.md 加进项目。