
Tailwind CSS
作为产品演示的字体样本是一张排版校样,其中 CAM 标题是界面,以粗体黑色 96px 字体突出显示,仅凭其大小就能吸引注意力。
调色板
品牌
- Syntax Sky
#00a6f4 - Syntax Cyan
#74d4ff
中性的
- Ink Black
#030712 - Slate Mist
#4a5565 - Slate Mid
#6a7282 - Slate Cool
#364153 - Steel Veil
#90a1b9 - Fog Line
#cad5e2
排版
从 12 像素到 96 像素 · 6 步
- Inter — 替代品: Inter (Google Fonts — this is already Inter) · 轮廓 400, 500, 600, 700
- IBM Plex Mono (plexMono) — 替代品: IBM Plex Mono (Google Fonts) · 轮廓 400, 500, 600
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 宽敞 |
| 基本步骤 | 16px |
| 按钮半径 | 32px (pill CTA), 4px (code/tag badges) |
| 卡片半径 | 8px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 96px |
| 页面宽度 | 1280px |
AI 将按照Tailwind CSS风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- AI for Business — 以暖灰色调为主的粗野主义风格编辑展示厅
- Superhuman — 黄金时段编辑委员会
- Visitors — 白色工程图
- Vercel — 终端信息印在白纸上
- Jeton — 一篇关于金融科技的社论,主题是温暖的大理石。
- ClickUp — 一个功能强大的白色大理石面板仪表盘。该页面是某款效率工具的产品宣传册,因此其视觉语言借鉴了产品本身:密集的列表、状态指示器、头像组以及醒目的文字说明,宛如一份产品规格展示。
- Dock — 阳光奶油纸,钴脉冲
- Quizlet — 教室以白色为背景,装饰着各种颜色——一张安静的桌子,桌子后面是四张粉彩色的卡片,这是冷灰色墙壁背景下唯一的亮色点缀,墙上还有一抹靛蓝色记号笔的痕迹。
- Airtable — 一个温馨的研讨会,章节用不同颜色标记。
- Headspace — 温暖纸张上的阳光健康角落
- Foodnoms — 白色瓷器上描绘着阳光明媚的水果市场——温暖的橙子、新鲜的绿叶和饱满圆润的形状
- WHOOP — 午夜时分的表演实验室——黑色剧场般的空旷背景下,白色的临床实验室工作台上,一道紫色的电流脉冲闪过。