Not in the top 1,000 by GitHub stars

yzfly/awesome-design-html

115 brand-themed HTML designs as a Claude Code skill (93 web + 22 iOS, incl. 20 China showcase). Install in one line, then talk: 'do a Linear-style page', '飞书风的页面', 'Spotify Now Playing iPhone mockup'.

Design Marketing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → de259911d157

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit de259911d1576395fc73bfaef048554b795b8ea2

184GitHub stars

5stars in 7 days

1skill in this repository

0commits in 30 days

Heat

3.3

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

awesome-design-html /

How it works

awesome-design-html

When your agent uses it

118 single-page HTML design references: a 中国传统色 Chinese Traditional Colors swatch page (742 named hues, hue-grouped, click-to-copy HEX/RGB, under assets/web/design.zhongguo-colors.html) + 96 marketing webpages (Stripe, Linear, Notion, Apple, Vercel, Figma, Airbnb, Cursor, Claude, BrowserOS, Bun, Spotify, Tesla, Ferrari, BMW + China tier: 飞书 Feishu, 抖音 Douyin, 豆包 Doubao, 阿里云 Aliyun, 支付宝 Alipay, 钉钉 DingTalk, 语雀 Yuque, 腾讯云 Tencent Cloud, 微信 WeChat, DeepSeek, Kimi, 文心一言 Wenxin, 通义千问 Qwen, Qwen Cloud, 小米汽车 Xiaomi EV, 蔚来 NIO, 理想 Li Auto, 极氪 ZEEKR, 哔哩哔哩 Bilibili, 米哈游 miHoYo, 小米 Xiaomi, 小红书 Xiaohongshu) under assets/web/ + 22 iOS app mockups (Instagram, Spotify, TikTok, WhatsApp, Telegram, Discord, Threads, X/Twitter, Snapchat, YouTube, Netflix, Apple Music, Uber, Airbnb, ChatGPT, Notion, Tinder, Hinge, Starbucks, DoorDash, Robinhood, Duolingo) under assets/ios/. Each HTML contains brand-faithful demo + design system reference. Triggers: '中国传统色', '中国色色卡', '传统色配色', '做个飞书风的页面', '参考 DeepSeek 极简', '小米汽车 hero', '小红书风格瀑布流', 'do a Linear-style page', 'mimic Stripe hero gradient', 'iPhone mockup of Spotify Now Playing', 'Chinese traditional color palette', or any brand-name + design/style/page/UI/screen.

What it loads into context

Frontmatter

410 tokens

Always available to the agent

SKILL.md

3,084 tokens

When the skill is activated

Reference documents

16,813 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

How to use this skill
File naming
Brand index — Web (95)
Brand index — iOS (22)
Brand archetypes (quick lookup when no specific brand named)
Web HTML file structure
iOS HTML file structure
Quality bar (when generating new pages from this reference)
When NOT to use this skill
Source attribution

Scripts executed separately

.github/scripts/capture-thumbnails.sh

Files

.github/assets/banner.svgasset8,567 bytes
.github/assets/thumbnails/airbnb.webpasset19,330 bytes
.github/assets/thumbnails/alipay.webpasset18,578 bytes
.github/assets/thumbnails/aliyun.webpasset20,214 bytes
.github/assets/thumbnails/apple.webpasset10,062 bytes
.github/assets/thumbnails/bilibili.webpasset19,996 bytes
.github/assets/thumbnails/bmw-m.webpasset17,826 bytes
.github/assets/thumbnails/bugatti.webpasset10,956 bytes
.github/assets/thumbnails/chatgpt-ios.webpasset24,396 bytes
.github/assets/thumbnails/claude.webpasset21,064 bytes
.github/assets/thumbnails/cursor.webpasset21,046 bytes
.github/assets/thumbnails/deepseek.webpasset20,976 bytes
.github/assets/thumbnails/dingtalk.webpasset24,476 bytes
.github/assets/thumbnails/doubao.webpasset20,518 bytes
.github/assets/thumbnails/douyin.webpasset18,614 bytes
.github/assets/thumbnails/duolingo-ios.webpasset26,426 bytes
.github/assets/thumbnails/feishu.webpasset17,080 bytes
.github/assets/thumbnails/ferrari.webpasset17,280 bytes
.github/assets/thumbnails/figma.webpasset24,994 bytes
.github/assets/thumbnails/instagram-ios.webpasset22,384 bytes
.github/assets/thumbnails/kimi.webpasset16,640 bytes
.github/assets/thumbnails/lamborghini.webpasset12,502 bytes
.github/assets/thumbnails/li-auto.webpasset13,878 bytes
.github/assets/thumbnails/linear.webpasset19,832 bytes
.github/assets/thumbnails/mihoyo.webpasset16,378 bytes
.github/assets/thumbnails/mistral.webpasset15,868 bytes
.github/assets/thumbnails/nio.webpasset16,672 bytes
.github/assets/thumbnails/notion.webpasset24,062 bytes
.github/assets/thumbnails/opencode.webpasset16,626 bytes
.github/assets/thumbnails/qwen.webpasset21,450 bytes
.github/assets/thumbnails/snapchat-ios.webpasset30,730 bytes
.github/assets/thumbnails/spotify-ios.webpasset21,640 bytes
.github/assets/thumbnails/stripe.webpasset19,988 bytes
.github/assets/thumbnails/supabase.webpasset18,792 bytes
.github/assets/thumbnails/tencent-cloud.webpasset19,580 bytes
.github/assets/thumbnails/tesla.webpasset6,034 bytes
.github/assets/thumbnails/tinder-ios.webpasset23,628 bytes
.github/assets/thumbnails/vercel.webpasset15,524 bytes
.github/assets/thumbnails/wechat.webpasset15,830 bytes
.github/assets/thumbnails/wenxin.webpasset21,732 bytes
.github/assets/thumbnails/whatsapp-ios.webpasset26,418 bytes
.github/assets/thumbnails/xiaomi-ev.webpasset11,982 bytes
.github/assets/thumbnails/xiaomi.webpasset9,954 bytes
.github/assets/thumbnails/yuque.webpasset18,112 bytes
.github/assets/thumbnails/zeekr.webpasset11,374 bytes
.github/scripts/capture-thumbnails.shruns3,480 bytes
.gitignoreasset262 bytes
.nojekyllasset0 bytes
LICENSEasset1,573 bytes
README.mddoc30,094 bytes
README.zh-CN.mddoc29,879 bytes
SKILL.mdcore11,286 bytes
SKILL.mdcore11,286 bytes
SKILL.mdcore11,286 bytes
SKILL.mdcore11,286 bytes
assets/ios/design.airbnb-ios.htmlasset59,957 bytes
assets/ios/design.apple-music-ios.htmlasset58,440 bytes
assets/ios/design.chatgpt-ios.htmlasset54,262 bytes
assets/ios/design.discord-ios.htmlasset65,651 bytes
assets/ios/design.doordash-ios.htmlasset60,261 bytes
assets/ios/design.duolingo-ios.htmlasset59,310 bytes
assets/ios/design.hinge-ios.htmlasset53,999 bytes
assets/ios/design.instagram-ios.htmlasset65,533 bytes
assets/ios/design.netflix-ios.htmlasset53,070 bytes
assets/ios/design.notion-ios.htmlasset58,948 bytes
assets/ios/design.robinhood-ios.htmlasset56,377 bytes
assets/ios/design.snapchat-ios.htmlasset59,875 bytes
assets/ios/design.spotify-ios.htmlasset60,538 bytes
assets/ios/design.starbucks-ios.htmlasset58,044 bytes
assets/ios/design.telegram-ios.htmlasset63,318 bytes
assets/ios/design.threads-ios.htmlasset56,408 bytes
assets/ios/design.tiktok-ios.htmlasset60,976 bytes
assets/ios/design.tinder-ios.htmlasset60,835 bytes
assets/ios/design.uber-ios.htmlasset56,337 bytes
assets/ios/design.whatsapp-ios.htmlasset62,237 bytes
assets/ios/design.x-twitter-ios.htmlasset62,094 bytes
assets/ios/design.youtube-ios.htmlasset58,178 bytes
assets/web/design.airbnb.htmlasset64,609 bytes
assets/web/design.airtable.htmlasset54,048 bytes
assets/web/design.alipay.htmlasset50,543 bytes
assets/web/design.aliyun.htmlasset49,600 bytes
assets/web/design.apple.htmlasset36,573 bytes
assets/web/design.bilibili.htmlasset52,583 bytes
assets/web/design.binance.htmlasset40,230 bytes
assets/web/design.bmw-m.htmlasset50,229 bytes
assets/web/design.bmw.htmlasset53,089 bytes
assets/web/design.browseros.htmlasset60,011 bytes
assets/web/design.bugatti.htmlasset47,470 bytes
assets/web/design.bun.htmlasset51,654 bytes
assets/web/design.cal.htmlasset48,391 bytes
assets/web/design.claude.htmlasset54,132 bytes
assets/web/design.clay.htmlasset51,994 bytes
assets/web/design.clickhouse.htmlasset42,515 bytes
assets/web/design.cohere.htmlasset45,189 bytes
assets/web/design.coinbase.htmlasset42,902 bytes
assets/web/design.composio.htmlasset39,840 bytes
assets/web/design.cursor.htmlasset52,975 bytes
assets/web/design.deepseek.htmlasset46,558 bytes
assets/web/design.dingtalk.htmlasset53,035 bytes
assets/web/design.doubao.htmlasset49,508 bytes
assets/web/design.douyin.htmlasset59,460 bytes
assets/web/design.elevenlabs.htmlasset39,467 bytes
assets/web/design.expo.htmlasset47,583 bytes
assets/web/design.feishu.htmlasset77,576 bytes
assets/web/design.ferrari.htmlasset49,184 bytes
assets/web/design.figma.htmlasset59,553 bytes
assets/web/design.framer.htmlasset40,796 bytes
assets/web/design.hashicorp.htmlasset45,401 bytes
assets/web/design.ibm.htmlasset49,489 bytes
assets/web/design.intercom.htmlasset71,230 bytes
assets/web/design.kimi.htmlasset56,653 bytes
assets/web/design.kraken.htmlasset51,341 bytes
assets/web/design.lamborghini.htmlasset51,997 bytes
assets/web/design.li-auto.htmlasset52,309 bytes
assets/web/design.linear.htmlasset49,571 bytes
assets/web/design.lovable.htmlasset51,594 bytes
assets/web/design.mastercard.htmlasset48,770 bytes
assets/web/design.meta.htmlasset44,277 bytes
assets/web/design.mihoyo.htmlasset45,914 bytes
assets/web/design.minimax.htmlasset34,675 bytes
assets/web/design.mintlify.htmlasset49,259 bytes
assets/web/design.miro.htmlasset46,756 bytes
assets/web/design.mistral.htmlasset44,873 bytes
assets/web/design.mongodb.htmlasset66,712 bytes
assets/web/design.nike.htmlasset48,858 bytes
assets/web/design.nio.htmlasset50,411 bytes
assets/web/design.notion.htmlasset58,582 bytes
assets/web/design.nvidia.htmlasset48,498 bytes
assets/web/design.ollama.htmlasset33,906 bytes
assets/web/design.opencode.htmlasset36,989 bytes
assets/web/design.pinterest.htmlasset40,178 bytes
assets/web/design.playstation.htmlasset42,509 bytes
assets/web/design.posthog.htmlasset50,636 bytes
assets/web/design.qwen.htmlasset45,753 bytes
assets/web/design.qwencloud.htmlasset60,739 bytes
assets/web/design.raycast.htmlasset55,883 bytes
assets/web/design.renault.htmlasset45,114 bytes
assets/web/design.replicate.htmlasset43,284 bytes
assets/web/design.resend.htmlasset43,301 bytes
assets/web/design.revolut.htmlasset41,680 bytes
assets/web/design.runwayml.htmlasset37,580 bytes
assets/web/design.sanity.htmlasset45,075 bytes
assets/web/design.sentry.htmlasset48,500 bytes
assets/web/design.shopify.htmlasset55,721 bytes
assets/web/design.slack.htmlasset63,454 bytes
assets/web/design.spacex.htmlasset34,820 bytes
assets/web/design.spotify.htmlasset50,761 bytes
assets/web/design.starbucks.htmlasset59,727 bytes
assets/web/design.stripe.htmlasset39,298 bytes
assets/web/design.supabase.htmlasset60,732 bytes
assets/web/design.superhuman.htmlasset50,463 bytes
assets/web/design.tencent-cloud.htmlasset48,031 bytes
assets/web/design.tesla.htmlasset37,544 bytes
assets/web/design.theverge.htmlasset44,120 bytes
assets/web/design.together.htmlasset46,489 bytes
assets/web/design.uber.htmlasset54,006 bytes
assets/web/design.vercel.htmlasset53,869 bytes
assets/web/design.vodafone.htmlasset44,807 bytes
assets/web/design.voltagent.htmlasset41,505 bytes
assets/web/design.warp.htmlasset49,874 bytes
assets/web/design.webflow.htmlasset50,732 bytes
assets/web/design.wechat.htmlasset52,510 bytes
assets/web/design.wenxin.htmlasset46,939 bytes
assets/web/design.wired.htmlasset40,976 bytes
assets/web/design.wise.htmlasset37,865 bytes
assets/web/design.xai.htmlasset39,130 bytes
assets/web/design.xiaohongshu.htmlasset56,943 bytes
assets/web/design.xiaomi-ev.htmlasset48,027 bytes
assets/web/design.xiaomi.htmlasset39,233 bytes
assets/web/design.yuque.htmlasset44,096 bytes
assets/web/design.zapier.htmlasset47,328 bytes
assets/web/design.zeekr.htmlasset49,286 bytes
assets/web/design.zhongguo-colors.htmlasset37,974 bytes
index.htmlasset69,804 bytes

No excerpt is shown for this license. Read the source on GitHub.

View the complete source on GitHub

Skills included

awesome-design-html

Repository facts

License: No license detected
Created: May 20, 2026
Last pushed: Jun 14, 2026
Forks: 17
Open issues: 0
Project activity: Slowing

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 5, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 3 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
7 dangerous shell commandsin 4 files: assets/web/design.bun.html:364 assets/web/design.ollama.html:403 assets/web/design.opencode.html:416 and 1 more
1,473 network referencesin 124 files: README.md:3 README.zh-CN.md:3 index.html:9 and 121 more
No hidden or obfuscated text
No instruction overrides
1 executable scriptin 1 file: .github/scripts/capture-thumbnails.sh:1
6 references to secretsin 4 files: assets/web/design.resend.html:310 assets/web/design.composio.html:651 assets/web/design.kimi.html:564 and 1 more
No requests to vote in Hot

Show all 1,487 signals by file

`.github/assets/banner.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 480" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Awesome Design HTML — 113 brand-themed single-file HTML design references">

`.github/scripts/capture-thumbnails.sh`

Executable scriptline 1
```
#!/usr/bin/env bash
```

`LICENSE`

Network accessline 27

This project's web design references (71 brands) are based on VoltAgent/awesome-design-md (https://github.com/VoltAgent/awesome-design-md),

Network accessline 28

VoltAgent/awesome-design-md (https://github.com/VoltAgent/awesome-design-md),

Network accessline 31

iOS design references (22 apps) draw inspiration from Meliwat/awesome-ios-design-md (https://github.com/Meliwat/awesome-ios-design-md)

Network accessline 32

Meliwat/awesome-ios-design-md (https://github.com/Meliwat/awesome-ios-design-md)

`README.md`

Network accessline 3

<a href="https://code.jiangshu.ai/awesome-design-html/">

Network accessline 7

<a href="README.md"><img src="https://img.shields.io/badge/Read_in-English-2962ff?style=for-the-badge&logo=googletranslate&logoColor=white" alt="English"></a>

Network accessline 8

<a href="README.zh-CN.md"><img src="https://img.shields.io/badge/阅读-中文-c92a2a?style=for-the-badge&logo=googletranslate&logoColor=white" alt="中文"></a>

Network accessline 10

<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-242830?style=flat-square&logo=opensourceinitiative&logoColor=white" alt="License MIT"></a>

Network accessline 11

<a href="#-web-library--94-marketing-pages"><img src="https://img.shields.io/badge/Web-94_brands-3ECF8E?style=flat-square&logo=html5&logoColor=white" alt="94 web brands"></a>

Network accessline 12

<a href="#-ios-library--22-app-mockups"><img src="https://img.shields.io/badge/iOS-22_apps-007AFF?style=flat-square&logo=apple&logoColor=white" alt="22 iOS apps"></a>

Network accessline 13

<a href="https://docs.claude.com/claude-code"><img src="https://img.shields.io/badge/Claude_Code-skill-d97757?style=flat-square&logo=anthropic&logoColor=white" alt="Claude Code skill"></a>

Network accessline 14

<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="GitHub Stars"></a>

Network accessline 15

<a href="https://github.com/yzfly/awesome-design-html/releases"><img src="https://img.shields.io/github/v/release/yzfly/awesome-design-html?style=flat-square&logo=github&color=8957e5" alt="Latest Release"></a>

Network accessline 17

<p> <b><a href="https://code.jiangshu.ai/awesome-design-html/">🎨 Live Gallery</a></b>

Network accessline 18

<b><a href="https://code.jiangshu.ai/awesome-design-html/">🎨 Live Gallery</a></b>

Network accessline 40

Please install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html

Network accessline 55

> **Manual install (if you prefer)**: `git clone https://github.com/yzfly/awesome-design-html.git ~/.claude/skills/awesome-design-html` > > **Packaged download**: Grab the `.zip` from [Releases](https://github.com/yzfly/awesome-design-html/

Network accessline 57

> **Packaged download**: Grab the `.zip` from [Releases](https://github.com/yzfly/awesome-design-html/releases) and drop it in `~/.claude/skills/`.

Network accessline 86

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></

Network accessline 87

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></td> <td

Network accessline 88

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></td>

Network accessline 89

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html"><img src=".github/assets/thumbnails/chatgpt-ios.webp" width="100%" alt="ChatGPT iOS"/><br/><sub><b>ChatGPT iOS</b></sub

Network accessline 90

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html"><img src=".github/assets/thumbnails/cursor.webp" width="100%" alt="Cursor"/><br/><sub><b>Cursor</b></sub></a></td>

Network accessline 91

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.supabase.html"><img src=".github/assets/thumbnails/supabase.webp" width="100%" alt="Supabase"/><br/><sub><b>Supabase</b></sub></a></td>

Network accessline 92

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td>

Network accessline 93

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td> <td alig

Network accessline 94

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td>

Network accessline 95

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mistral.html"><img src=".github/assets/thumbnails/mistral.webp" width="100%" alt="Mistral"/><br/><sub><b>Mistral</b></sub></a></td>

Network accessline 102

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></su

Network accessline 103

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></sub></a></

Network accessline 104

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></sub></a></td>

Network accessline 105

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.duolingo-ios.html"><img src=".github/assets/thumbnails/duolingo-ios.webp" width="100%" alt="Duolingo"/><br/><sub><b>Duolingo</b></sub></a

Network accessline 106

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html"><img src=".github/assets/thumbnails/instagram-ios.webp" width="100%" alt="Instagram"/><br/><sub><b>Instagram</b></sub

Network accessline 107

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.snapchat-ios.html"><img src=".github/assets/thumbnails/snapchat-ios.webp" width="100%" alt="Snapchat"/><br/><sub><b>Snapchat</b></sub></a

Network accessline 108

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub>

Network accessline 109

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub></a></

Network accessline 110

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub></a></td>

Network accessline 111

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html"><img src=".github/assets/thumbnails/whatsapp-ios.webp" width="100%" alt="WhatsApp"/><br/><sub><b>WhatsApp</b></sub></a></td>

Network accessline 118

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></

Network accessline 119

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></td> <td

Network accessline 120

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></td>

Network accessline 121

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.linear.html"><img src=".github/assets/thumbnails/linear.webp" width="100%" alt="Linear"/><br/><sub><b>Linear</b></sub></a></td>

Network accessline 122

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.notion.html"><img src=".github/assets/thumbnails/notion.webp" width="100%" alt="Notion"/><br/><sub><b>Notion</b></sub></a></td>

Network accessline 123

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.vercel.html"><img src=".github/assets/thumbnails/vercel.webp" width="100%" alt="Vercel"/><br/><sub><b>Vercel</b></sub></a></td>

Network accessline 124

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td>

Network accessline 125

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td> <td align="center"><

Network accessline 126

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td>

Network accessline 127

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html"><img src=".github/assets/thumbnails/airbnb.webp" width="100%" alt="Airbnb"/><br/><sub><b>Airbnb</b></sub></a></td>

Network accessline 134

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td>

Network accessline 135

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td> <td widt

Network accessline 136

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td>

Network accessline 137

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tesla.html"><img src=".github/assets/thumbnails/tesla.webp" width="100%" alt="Tesla"/><br/><sub><b>Tesla</b></sub></a></td>

Network accessline 138

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.ferrari.html"><img src=".github/assets/thumbnails/ferrari.webp" width="100%" alt="Ferrari"/><br/><sub><b>Ferrari</b></sub></a></td>

Network accessline 139

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html"><img src=".github/assets/thumbnails/bmw-m.webp" width="100%" alt="BMW M"/><br/><sub><b>BMW M</b></sub></a></td>

Network accessline 140

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td>

Network accessline 141

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td> <td align="c

Network accessline 142

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td>

Network accessline 143

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.lamborghini.html"><img src=".github/assets/thumbnails/lamborghini.webp" width="100%" alt="Lamborghini"/><br/><sub><b>Lamborghini</b></sub></a></td>

Network accessline 154

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a

Network accessline 155

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a></td> <

Network accessline 156

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a></td>

Network accessline 157

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html"><img src=".github/assets/thumbnails/douyin.webp" width="100%" alt="Douyin"/><br/><sub><b>抖音 Douyin</b></sub></a></td>

Network accessline 158

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.doubao.html"><img src=".github/assets/thumbnails/doubao.webp" width="100%" alt="Doubao"/><br/><sub><b>豆包 Doubao</b></sub></a></td>

Network accessline 159

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.aliyun.html"><img src=".github/assets/thumbnails/aliyun.webp" width="100%" alt="Aliyun"/><br/><sub><b>阿里云 Aliyun</b></sub></a></td>

Network accessline 160

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝 Alipay</b></sub></a></td>

Network accessline 161

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝 Alipay</b></sub></a></td> <td align="c

Network accessline 162

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝 Alipay</b></sub></a></td>

Network accessline 163

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.dingtalk.html"><img src=".github/assets/thumbnails/dingtalk.webp" width="100%" alt="DingTalk"/><br/><sub><b>钉钉 DingTalk</b></sub></a></td>

Network accessline 164

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.yuque.html"><img src=".github/assets/thumbnails/yuque.webp" width="100%" alt="Yuque"/><br/><sub><b>语雀 Yuque</b></sub></a></td>

Network accessline 165

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tencent-cloud.html"><img src=".github/assets/thumbnails/tencent-cloud.webp" width="100%" alt="Tencent Cloud"/><br/><sub><b>腾讯云 Tencent Cloud</b></sub

Network accessline 166

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td>

Network accessline 167

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td> <td colspan="

Network accessline 168

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td>

Network accessline 175

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></su

Network accessline 176

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></sub></a></

Network accessline 177

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></sub></a></td>

Network accessline 178

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.kimi.html"><img src=".github/assets/thumbnails/kimi.webp" width="100%" alt="Kimi"/><br/><sub><b>Kimi</b></sub></a></td>

Network accessline 179

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wenxin.html"><img src=".github/assets/thumbnails/wenxin.webp" width="100%" alt="Wenxin"/><br/><sub><b>文心一言 Wenxin</b></sub></a></td>

Network accessline 180

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwen.html"><img src=".github/assets/thumbnails/qwen.webp" width="100%" alt="Qwen"/><br/><sub><b>通义千问 Qwen</b></sub></a></td>

Network accessline 186

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车 Xiaomi E

Network accessline 187

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车 Xiaomi EV</b></s

Network accessline 188

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车 Xiaomi EV</b></sub></

Network accessline 189

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.nio.html"><img src=".github/assets/thumbnails/nio.webp" width="100%" alt="NIO"/><br/><sub><b>蔚来 NIO</b></sub></a></td>

Network accessline 190

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.li-auto.html"><img src=".github/assets/thumbnails/li-auto.webp" width="100%" alt="Li Auto"/><br/><sub><b>理想 Li Auto</b></sub></a></td>

Network accessline 191

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.zeekr.html"><img src=".github/assets/thumbnails/zeekr.webp" width="100%" alt="ZEEKR"/><br/><sub><b>极氪 ZEEKR</b></sub></a></td>

Network accessline 197

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩 Bilibili</b

Network accessline 198

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩 Bilibili</b></sub><

Network accessline 199

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩 Bilibili</b></sub></a></

Network accessline 200

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mihoyo.html"><img src=".github/assets/thumbnails/mihoyo.webp" width="100%" alt="miHoYo"/><br/><sub><b>米哈游 miHoYo</b></sub></a></td>

Network accessline 201

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi.html"><img src=".github/assets/thumbnails/xiaomi.webp" width="100%" alt="Xiaomi"/><br/><sub><b>小米 Xiaomi</b></sub></a></td>

Network accessline 202

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaohongshu.html"><sub><b>小红书 Xiaohongshu</b><br/><i>Masonry feed</i></sub></a></td>

Network accessline 210

**🇨🇳 China tier** — [飞书 Feishu](https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html) · [抖音 Douyin](https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html) · [豆包 Doubao](https://code.jiangshu.ai/awe

Network accessline 212

**Productivity / SaaS** — [Airtable](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airtable.html) · [Cal.com](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cal.html) · [Intercom](https://code.jiangshu.ai/aw

Network accessline 214

**Dev tools / IDEs** — [BrowserOS](https://code.jiangshu.ai/awesome-design-html/assets/web/design.browseros.html) · [Cursor](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html) · [Figma](https://code.jiangshu.ai/awes

Network accessline 216

**AI / LLM** — [Claude](https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html) · [Cohere](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cohere.html) · [ElevenLabs](https://code.jiangshu.ai/awesome-desig

Network accessline 218

**Infra / dev infra** — [Composio](https://code.jiangshu.ai/awesome-design-html/assets/web/design.composio.html) · [ClickHouse](https://code.jiangshu.ai/awesome-design-html/assets/web/design.clickhouse.html) · [HashiCorp](https://code.jiang

Network accessline 220

**Fintech / crypto** — [Binance](https://code.jiangshu.ai/awesome-design-html/assets/web/design.binance.html) · [Coinbase](https://code.jiangshu.ai/awesome-design-html/assets/web/design.coinbase.html) · [Kraken](https://code.jiangshu.ai/awe

Network accessline 222

**Auto / luxury** — [BMW](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw.html) · [BMW M](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html) · [Bugatti](https://code.jiangshu.ai/awesome-design-html

Network accessline 224

**Consumer / commerce** — [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html) · [Nike](https://code.jiangshu.ai/awesome-design-html/assets/web/design.nike.html) · [Pinterest](https://code.jiangshu.ai/awesome

Network accessline 226

**Enterprise / platform** — [Apple](https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html) · [Expo](https://code.jiangshu.ai/awesome-design-html/assets/web/design.expo.html) · [IBM](https://code.jiangshu.ai/awesome-desig

Network accessline 228

**Media / gaming / telecom** — [PlayStation](https://code.jiangshu.ai/awesome-design-html/assets/web/design.playstation.html) · [SpaceX](https://code.jiangshu.ai/awesome-design-html/assets/web/design.spacex.html) · [The Verge](https://code.

Network accessline 234

**Music · Video** — [Spotify](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html) · [Apple Music](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.apple-music-ios.html) · [YouTube](https://code.jia

Network accessline 236

**Social** — [Instagram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html) · [Threads](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.threads-ios.html) · [X / Twitter](https://code.jiangshu.a

Network accessline 238

**Messaging** — [WhatsApp](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html) · [Telegram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.telegram-ios.html) · [Discord](https://code.jiangshu.ai

Network accessline 240

**AI · Productivity** — [ChatGPT](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html) · [Notion](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.notion-ios.html)

Network accessline 242

**Travel** — [Uber](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.uber-ios.html) · [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.airbnb-ios.html)

Network accessline 244

**Dating** — [Tinder](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html) · [Hinge](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.hinge-ios.html)

Network accessline 246

**Food · Finance · Learning** — [Starbucks](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.starbucks-ios.html) · [DoorDash](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.doordash-ios.html) · [Robinhood](http

Network accessline 272

Web specs derived from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT). iOS specs derived from [Meliwat/awesome-ios-design-md](https://github.com/Meliwat/awesome-ios-design-md).

Network accessline 278

<a href="https://star-history.com/#yzfly/awesome-design-html&Date">

Network accessline 279

<picture>     <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark" />     <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.

Network accessline 280

<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark" />

Network accessline 281

<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />

Network accessline 282

<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />

Network accessline 294

<a href="https://github.com/yzfly"><img src="https://img.shields.io/badge/GitHub-yzfly-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub"/></a>

Network accessline 295

<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="Star this repo"/></a>

Network accessline 305

<sub>Made with ♥ by [云中江树](https://github.com/yzfly). MIT licensed.</sub>

`README.zh-CN.md`

Network accessline 3

<a href="https://code.jiangshu.ai/awesome-design-html/">

Network accessline 7

<a href="README.md"><img src="https://img.shields.io/badge/Read_in-English-2962ff?style=for-the-badge&logo=googletranslate&logoColor=white" alt="English"></a>

Network accessline 8

<a href="README.zh-CN.md"><img src="https://img.shields.io/badge/阅读-中文-c92a2a?style=for-the-badge&logo=googletranslate&logoColor=white" alt="中文"></a>

Network accessline 10

<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-242830?style=flat-square&logo=opensourceinitiative&logoColor=white" alt="License MIT"></a>

Network accessline 11

<a href="#-网页库--94-个营销页"><img src="https://img.shields.io/badge/Web-94_brands-3ECF8E?style=flat-square&logo=html5&logoColor=white" alt="94 个网页"></a>

Network accessline 12

<a href="#-ios-库--22-个-app-仿真"><img src="https://img.shields.io/badge/iOS-22_apps-007AFF?style=flat-square&logo=apple&logoColor=white" alt="22 个 iOS app"></a>

Network accessline 13

<a href="https://docs.claude.com/claude-code"><img src="https://img.shields.io/badge/Claude_Code-skill-d97757?style=flat-square&logo=anthropic&logoColor=white" alt="Claude Code 技能"></a>

Network accessline 14

<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="GitHub Stars"></a>

Network accessline 15

<a href="https://github.com/yzfly/awesome-design-html/releases"><img src="https://img.shields.io/github/v/release/yzfly/awesome-design-html?style=flat-square&logo=github&color=8957e5" alt="最新版本"></a>

Network accessline 17

<p> <b><a href="https://code.jiangshu.ai/awesome-design-html/">🎨 在线画廊</a></b>

Network accessline 18

<b><a href="https://code.jiangshu.ai/awesome-design-html/">🎨 在线画廊</a></b>

Network accessline 40

帮我安装这个 Claude Code skill: https://github.com/yzfly/awesome-design-html

Network accessline 55

> **手动安装**(如果你想自己来): `git clone https://github.com/yzfly/awesome-design-html.git ~/.claude/skills/awesome-design-html`

Network accessline 57

> **打包下载**: 从 [Releases](https://github.com/yzfly/awesome-design-html/releases) 下载 `.zip`,扔进 `~/.claude/skills/` 目录。

Network accessline 86

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></

Network accessline 87

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></td> <td

Network accessline 88

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src=".github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></td>

Network accessline 89

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html"><img src=".github/assets/thumbnails/chatgpt-ios.webp" width="100%" alt="ChatGPT iOS"/><br/><sub><b>ChatGPT iOS</b></sub

Network accessline 90

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html"><img src=".github/assets/thumbnails/cursor.webp" width="100%" alt="Cursor"/><br/><sub><b>Cursor</b></sub></a></td>

Network accessline 91

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.supabase.html"><img src=".github/assets/thumbnails/supabase.webp" width="100%" alt="Supabase"/><br/><sub><b>Supabase</b></sub></a></td>

Network accessline 92

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td>

Network accessline 93

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td> <td alig

Network accessline 94

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src=".github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td>

Network accessline 95

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mistral.html"><img src=".github/assets/thumbnails/mistral.webp" width="100%" alt="Mistral"/><br/><sub><b>Mistral</b></sub></a></td>

Network accessline 102

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></su

Network accessline 103

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></sub></a></

Network accessline 104

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src=".github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></sub></a></td>

Network accessline 105

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.duolingo-ios.html"><img src=".github/assets/thumbnails/duolingo-ios.webp" width="100%" alt="Duolingo"/><br/><sub><b>Duolingo</b></sub></a

Network accessline 106

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html"><img src=".github/assets/thumbnails/instagram-ios.webp" width="100%" alt="Instagram"/><br/><sub><b>Instagram</b></sub

Network accessline 107

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.snapchat-ios.html"><img src=".github/assets/thumbnails/snapchat-ios.webp" width="100%" alt="Snapchat"/><br/><sub><b>Snapchat</b></sub></a

Network accessline 108

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub>

Network accessline 109

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub></a></

Network accessline 110

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src=".github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub></a></td>

Network accessline 111

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html"><img src=".github/assets/thumbnails/whatsapp-ios.webp" width="100%" alt="WhatsApp"/><br/><sub><b>WhatsApp</b></sub></a></td>

Network accessline 118

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></

Network accessline 119

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></td> <td

Network accessline 120

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src=".github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></td>

Network accessline 121

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.linear.html"><img src=".github/assets/thumbnails/linear.webp" width="100%" alt="Linear"/><br/><sub><b>Linear</b></sub></a></td>

Network accessline 122

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.notion.html"><img src=".github/assets/thumbnails/notion.webp" width="100%" alt="Notion"/><br/><sub><b>Notion</b></sub></a></td>

Network accessline 123

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.vercel.html"><img src=".github/assets/thumbnails/vercel.webp" width="100%" alt="Vercel"/><br/><sub><b>Vercel</b></sub></a></td>

Network accessline 124

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td>

Network accessline 125

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td> <td align="center"><

Network accessline 126

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src=".github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td>

Network accessline 127

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html"><img src=".github/assets/thumbnails/airbnb.webp" width="100%" alt="Airbnb"/><br/><sub><b>Airbnb</b></sub></a></td>

Network accessline 134

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td>

Network accessline 135

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td> <td widt

Network accessline 136

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src=".github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td>

Network accessline 137

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tesla.html"><img src=".github/assets/thumbnails/tesla.webp" width="100%" alt="Tesla"/><br/><sub><b>Tesla</b></sub></a></td>

Network accessline 138

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.ferrari.html"><img src=".github/assets/thumbnails/ferrari.webp" width="100%" alt="Ferrari"/><br/><sub><b>Ferrari</b></sub></a></td>

Network accessline 139

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html"><img src=".github/assets/thumbnails/bmw-m.webp" width="100%" alt="BMW M"/><br/><sub><b>BMW M</b></sub></a></td>

Network accessline 140

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td>

Network accessline 141

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td> <td align="c

Network accessline 142

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src=".github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td>

Network accessline 143

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.lamborghini.html"><img src=".github/assets/thumbnails/lamborghini.webp" width="100%" alt="Lamborghini"/><br/><sub><b>Lamborghini</b></sub></a></td>

Network accessline 154

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a

Network accessline 155

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a></td> <

Network accessline 156

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src=".github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a></td>

Network accessline 157

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html"><img src=".github/assets/thumbnails/douyin.webp" width="100%" alt="Douyin"/><br/><sub><b>抖音 Douyin</b></sub></a></td>

Network accessline 158

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.doubao.html"><img src=".github/assets/thumbnails/doubao.webp" width="100%" alt="Doubao"/><br/><sub><b>豆包 Doubao</b></sub></a></td>

Network accessline 159

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.aliyun.html"><img src=".github/assets/thumbnails/aliyun.webp" width="100%" alt="Aliyun"/><br/><sub><b>阿里云</b></sub></a></td>

Network accessline 160

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝</b></sub></a></td>

Network accessline 161

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝</b></sub></a></td> <td align="center">

Network accessline 162

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src=".github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝</b></sub></a></td>

Network accessline 163

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.dingtalk.html"><img src=".github/assets/thumbnails/dingtalk.webp" width="100%" alt="DingTalk"/><br/><sub><b>钉钉</b></sub></a></td>

Network accessline 164

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.yuque.html"><img src=".github/assets/thumbnails/yuque.webp" width="100%" alt="Yuque"/><br/><sub><b>语雀</b></sub></a></td>

Network accessline 165

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tencent-cloud.html"><img src=".github/assets/thumbnails/tencent-cloud.webp" width="100%" alt="Tencent Cloud"/><br/><sub><b>腾讯云</b></sub></a></td>

Network accessline 166

</tr> <tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td>

Network accessline 167

<tr> <td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td> <td colspan="

Network accessline 168

<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src=".github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td>

Network accessline 175

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></su

Network accessline 176

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></sub></a></

Network accessline 177

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src=".github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></sub></a></td>

Network accessline 178

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.kimi.html"><img src=".github/assets/thumbnails/kimi.webp" width="100%" alt="Kimi"/><br/><sub><b>Kimi</b></sub></a></td>

Network accessline 179

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wenxin.html"><img src=".github/assets/thumbnails/wenxin.webp" width="100%" alt="Wenxin"/><br/><sub><b>文心一言</b></sub></a></td>

Network accessline 180

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwen.html"><img src=".github/assets/thumbnails/qwen.webp" width="100%" alt="Qwen"/><br/><sub><b>通义千问</b></sub></a></td>

Network accessline 186

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车</b></sub

Network accessline 187

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车</b></sub></a></t

Network accessline 188

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src=".github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车</b></sub></a></td>

Network accessline 189

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.nio.html"><img src=".github/assets/thumbnails/nio.webp" width="100%" alt="NIO"/><br/><sub><b>蔚来 NIO</b></sub></a></td>

Network accessline 190

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.li-auto.html"><img src=".github/assets/thumbnails/li-auto.webp" width="100%" alt="Li Auto"/><br/><sub><b>理想 Li Auto</b></sub></a></td>

Network accessline 191

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.zeekr.html"><img src=".github/assets/thumbnails/zeekr.webp" width="100%" alt="ZEEKR"/><br/><sub><b>极氪 ZEEKR</b></sub></a></td>

Network accessline 197

<table> <tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩</b></sub></

Network accessline 198

<tr> <td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩</b></sub></a></td>

Network accessline 199

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src=".github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩</b></sub></a></td>

Network accessline 200

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mihoyo.html"><img src=".github/assets/thumbnails/mihoyo.webp" width="100%" alt="miHoYo"/><br/><sub><b>米哈游</b></sub></a></td>

Network accessline 201

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi.html"><img src=".github/assets/thumbnails/xiaomi.webp" width="100%" alt="Xiaomi"/><br/><sub><b>小米</b></sub></a></td>

Network accessline 202

<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaohongshu.html"><sub><b>小红书 Xiaohongshu</b><br/><i>瀑布流 explore feed</i></sub></a></td>

Network accessline 210

**🇨🇳 中国大厂** — [飞书 Feishu](https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html) · [抖音 Douyin](https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html) · [豆包 Doubao](https://code.jiangshu.ai/awesome-d

Network accessline 213

**效率 / SaaS** — [Airtable](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airtable.html) · [Cal.com](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cal.html) · [Intercom](https://code.jiangshu.ai/awesome-desi

Network accessline 215

**开发工具 / IDE** — [BrowserOS](https://code.jiangshu.ai/awesome-design-html/assets/web/design.browseros.html) · [Cursor](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html) · [Figma](https://code.jiangshu.ai/awesome-de

Network accessline 217

**AI / 大模型** — [Claude](https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html) · [Cohere](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cohere.html) · [ElevenLabs](https://code.jiangshu.ai/awesome-desig

Network accessline 219

**基础设施** — [Composio](https://code.jiangshu.ai/awesome-design-html/assets/web/design.composio.html) · [ClickHouse](https://code.jiangshu.ai/awesome-design-html/assets/web/design.clickhouse.html) · [HashiCorp](https://code.jiangshu.ai/awesom

Network accessline 221

**金融 / 加密** — [Binance](https://code.jiangshu.ai/awesome-design-html/assets/web/design.binance.html) · [Coinbase](https://code.jiangshu.ai/awesome-design-html/assets/web/design.coinbase.html) · [Kraken](https://code.jiangshu.ai/awesome-desi

Network accessline 223

**汽车 / 奢华** — [BMW](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw.html) · [BMW M](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html) · [Bugatti](https://code.jiangshu.ai/awesome-design-html/asset

Network accessline 225

**消费 / 电商** — [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html) · [Nike](https://code.jiangshu.ai/awesome-design-html/assets/web/design.nike.html) · [Pinterest](https://code.jiangshu.ai/awesome-design-html

Network accessline 227

**企业 / 平台** — [Apple](https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html) · [Expo](https://code.jiangshu.ai/awesome-design-html/assets/web/design.expo.html) · [IBM](https://code.jiangshu.ai/awesome-design-html/assets/

Network accessline 229

**媒体 / 游戏 / 通信** — [PlayStation](https://code.jiangshu.ai/awesome-design-html/assets/web/design.playstation.html) · [SpaceX](https://code.jiangshu.ai/awesome-design-html/assets/web/design.spacex.html) · [The Verge](https://code.jiangshu.ai/

Network accessline 235

**音乐 / 视频** — [Spotify](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html) · [Apple Music](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.apple-music-ios.html) · [YouTube](https://code.jiangshu.

Network accessline 237

**社交** — [Instagram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html) · [Threads](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.threads-ios.html) · [X / Twitter](https://code.jiangshu.ai/aw

Network accessline 239

**通讯** — [WhatsApp](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html) · [Telegram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.telegram-ios.html) · [Discord](https://code.jiangshu.ai/awesom

Network accessline 241

**AI / 效率** — [ChatGPT](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html) · [Notion](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.notion-ios.html)

Network accessline 243

**出行** — [Uber](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.uber-ios.html) · [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.airbnb-ios.html)

Network accessline 245

**约会** — [Tinder](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html) · [Hinge](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.hinge-ios.html)

Network accessline 247

**美食 / 金融 / 学习** — [Starbucks](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.starbucks-ios.html) · [DoorDash](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.doordash-ios.html) · [Robinhood](https://code.jian

Network accessline 273

网页规范改自 [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT)。iOS 规范改自 [Meliwat/awesome-ios-design-md](https://github.com/Meliwat/awesome-ios-design-md)。

Network accessline 279

<a href="https://star-history.com/#yzfly/awesome-design-html&Date">

Network accessline 280

<picture>     <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark" />     <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.

Network accessline 281

<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark" />

Network accessline 282

<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />

Network accessline 283

<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />

Network accessline 295

<a href="https://github.com/yzfly"><img src="https://img.shields.io/badge/GitHub-yzfly-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub"/></a>

Network accessline 296

<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="Star this repo"/></a>

Network accessline 306

<sub>由 [云中江树](https://github.com/yzfly) ♥ 打造 · MIT 协议</sub>

`SKILL.md`

Network accessline 10

- **`assets/web/design.zhongguo-colors.html`** — 🎨 **中国传统色 Chinese Traditional Colors**: a 742-hue swatch page derived from [nevertoday/zhongguo-traditional-colors](https://github.com/nevertoday/zhongguo-traditional-colors). Hues are auto-g

Network accessline 177

- **Web specs** derived from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT).

Network accessline 178

- **iOS specs** derived from [Meliwat/awesome-ios-design-md](https://github.com/Meliwat/awesome-ios-design-md) (Spectr gallery for full specs).

`assets/ios/design.airbnb-ios.html`

Network accessline 6

<title>Airbnb — iOS design spec</title> <meta name="description" content="Airbnb iOS app design reference. #ffffff canvas, #FF5A5F Rausch coral-red, 12px corners, photography-first, Cereal typography." /> <link rel="preconnect" href="https:

Network accessline 7

<meta name="description" content="Airbnb iOS app design reference. #ffffff canvas, #FF5A5F Rausch coral-red, 12px corners, photography-first, Cereal typography." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="pr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 639

<p>Airbnb's iOS app owes more to its photography than its tokens. Rausch (#FF5A5F) holds the Reserve button and the heart. Babu (#00A699) shows up in confirmation states. Everything else is ink at #222 over white.</p>       </div>       <a

Network accessline 640

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.airbnb-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 641

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.airbnb-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 790

airbnb iOS     </div>     <p>Design reference. Not affiliated with Airbnb, Inc. Token values are derived from the public iOS app and Airbnb's published brand system (DLS). View this design reference on <a href="https://github.com/yzfly/awes

Network accessline 791

</div>     <p>Design reference. Not affiliated with Airbnb, Inc. Token values are derived from the public iOS app and Airbnb's published brand system (DLS). View this design reference on <a href="https://github.com/yzfly/awesome-design-html

Network accessline 792

<p>Design reference. Not affiliated with Airbnb, Inc. Token values are derived from the public iOS app and Airbnb's published brand system (DLS). View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/

Network accessline 793

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.airbnb-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 797

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.airbnb-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.apple-music-ios.html`

Network accessline 6

<title>Apple Music — iOS design spec</title> <meta name="description" content="Apple Music iOS app design reference. Pink-red gradient brand mark, SF Pro Display, white canvas, time-synced lyrics, Dolby Atmos badge, AirPlay device sheet." /

Network accessline 7

<meta name="description" content="Apple Music iOS app design reference. Pink-red gradient brand mark, SF Pro Display, white canvas, time-synced lyrics, Dolby Atmos badge, AirPlay device sheet." /> <link rel="preconnect" href="https://fonts.

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 618

<p>Apple Music's iOS token set inherits Apple's HIG — SF Pro Display, system gray ladder, large titles at -0.5px — and ships exactly one brand color on top.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-

Network accessline 619

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.apple-music-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 620

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.apple-music-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 771

Apple Music iOS     </div>     <p>Design reference. Not affiliated with Apple Inc. Tokens are derived from the public iOS app and Apple's Human Interface Guidelines. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/

Network accessline 772

</div>     <p>Design reference. Not affiliated with Apple Inc. Tokens are derived from the public iOS app and Apple's Human Interface Guidelines. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/desi

Network accessline 773

<p>Design reference. Not affiliated with Apple Inc. Tokens are derived from the public iOS app and Apple's Human Interface Guidelines. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.apple-mu

Network accessline 774

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.apple-music-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 778

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.apple-music-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.chatgpt-ios.html`

Network accessline 6

<title>ChatGPT — iOS design spec</title> <meta name="description" content="ChatGPT iOS app design reference. #ffffff canvas, #10A37F OpenAI green, asymmetric bubble grammar, Söhne typography, conversational minimalism." /> <link rel="precon

Network accessline 7

<meta name="description" content="ChatGPT iOS app design reference. #ffffff canvas, #10A37F OpenAI green, asymmetric bubble grammar, Söhne typography, conversational minimalism." /> <link rel="preconnect" href="https://fonts.googleapis.com"

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 599

<p>ChatGPT's iOS app reaches for fewer tokens than almost any consumer app in the App Store. One green you barely see. One bubble color. A handful of grays. The point is that nothing is in the way.</p>       </div>       <a class="ds-source

Network accessline 600

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 601

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 745

ChatGPT iOS     </div>     <p>Design reference. Not affiliated with OpenAI. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.ch

Network accessline 746

</div>     <p>Design reference. Not affiliated with OpenAI. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html"

Network accessline 747

<p>Design reference. Not affiliated with OpenAI. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html" target="_bl

Network accessline 748

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 752

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.chatgpt-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.discord-ios.html`

Network accessline 6

<title>Discord — iOS design spec</title> <meta name="description" content="Discord iOS app design reference. #2B2D31 dark canvas, #5865F2 Blurple, role-colored usernames, server-rail navigation, voice-tile metaphor." /> <link rel="preconnec

Network accessline 7

<meta name="description" content="Discord iOS app design reference. #2B2D31 dark canvas, #5865F2 Blurple, role-colored usernames, server-rail navigation, voice-tile metaphor." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 743

<p>Every token Discord's iOS app reaches for — dark surface ladder, role colors, status palette, radius. Light mode exists, but dark is canonical.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-htm

Network accessline 744

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.discord-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 745

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.discord-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 889

Discord iOS     </div>     <p>Design reference. Not affiliated with Discord Inc. Token values derived from the public iOS app and Discord's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-

Network accessline 890

</div>     <p>Design reference. Not affiliated with Discord Inc. Token values derived from the public iOS app and Discord's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob

Network accessline 891

<p>Design reference. Not affiliated with Discord Inc. Token values derived from the public iOS app and Discord's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/asset

Network accessline 892

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.discord-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 896

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.discord-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.doordash-ios.html`

Network accessline 6

<title>DoorDash — iOS design spec</title> <meta name="description" content="DoorDash iOS app design reference. White canvas, signature brand red, restaurant feed, group orders, live driver-tracking map." /> <link rel="preconnect" href="http

Network accessline 7

<meta name="description" content="DoorDash iOS app design reference. White canvas, signature brand red, restaurant feed, group orders, live driver-tracking map." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="pr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 683

<p>Every token DoorDash's iOS app reaches for — surface ladder, type ramp, radius scale, components. One brand red carries the whole identity; everything else is white, gray, or food.</p>       </div>       <a class="ds-source" href="https:

Network accessline 684

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.doordash-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 685

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.doordash-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 842

DoorDash iOS     </div>     <p>Design reference. Not affiliated with DoorDash, Inc. Token values are derived from the public iOS app and DoorDash's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-de

Network accessline 843

</div>     <p>Design reference. Not affiliated with DoorDash, Inc. Token values are derived from the public iOS app and DoorDash's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/ma

Network accessline 844

<p>Design reference. Not affiliated with DoorDash, Inc. Token values are derived from the public iOS app and DoorDash's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/i

Network accessline 845

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.doordash-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 849

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.doordash-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.duolingo-ios.html`

Network accessline 6

<title>Duolingo — iOS design spec</title> <meta name="description" content="Duolingo iOS app design reference. Bright #58CC02 green, saturated palette, chunky 3D-shadow buttons, lesson path with circular nodes, Duo the owl." /> <link rel="p

Network accessline 7

<meta name="description" content="Duolingo iOS app design reference. Bright #58CC02 green, saturated palette, chunky 3D-shadow buttons, lesson path with circular nodes, Duo the owl." /> <link rel="preconnect" href="https://fonts.googleapis.

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Nunito:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 626

<p>Every token Duolingo's iOS app reaches for — surface ladder, type ramp, radius scale, components. The color system uses six brand-saturated hues with a paired "deep" shade for each — the deep one is always the 4pt shadow below.</p>

Network accessline 627

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.duolingo-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 628

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.duolingo-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 772

Duolingo iOS     </div>     <p>Design reference. Not affiliated with Duolingo, Inc. Token values are derived from the public iOS app and Duolingo's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/

Network accessline 773

</div>     <p>Design reference. Not affiliated with Duolingo, Inc. Token values are derived from the public iOS app and Duolingo's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-ht

Network accessline 774

<p>Design reference. Not affiliated with Duolingo, Inc. Token values are derived from the public iOS app and Duolingo's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/mai

Network accessline 775

<a class="btn btn-light" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.duolingo-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 779

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.duolingo-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.hinge-ios.html`

Network accessline 6

<title>Hinge — iOS design spec</title> <meta name="description" content="Hinge iOS app design reference. White canvas, calm purple accent, prompt-driven profiles, slow scroll, comment-the-prompt heart." /> <link rel="preconnect" href="https

Network accessline 7

<meta name="description" content="Hinge iOS app design reference. White canvas, calm purple accent, prompt-driven profiles, slow scroll, comment-the-prompt heart." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cormorant+Garamond:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 592

<p>Every token Hinge's iOS app reaches for — surface ladder, type ramp, radius scale, components. Quiet by design; loud only at the points of decision.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-desig

Network accessline 593

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.hinge-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 594

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.hinge-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 749

Hinge iOS     </div>     <p>Design reference. Not affiliated with Hinge, Inc. Token values are derived from the public iOS app and Hinge's published brand identity. View this design reference on <a href="https://github.com/yzfly/awesome-des

Network accessline 750

</div>     <p>Design reference. Not affiliated with Hinge, Inc. Token values are derived from the public iOS app and Hinge's published brand identity. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/

Network accessline 751

<p>Design reference. Not affiliated with Hinge, Inc. Token values are derived from the public iOS app and Hinge's published brand identity. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets

Network accessline 752

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.hinge-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 756

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.hinge-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.instagram-ios.html`

Network accessline 6

<title>Instagram — iOS design spec</title> <meta name="description" content="Instagram iOS app design reference. White canvas, signature gradient (#f09433 → #bc1888), Instagram Red likes, circular story rings, edge-to-edge media." /> <link

Network accessline 7

<meta name="description" content="Instagram iOS app design reference. White canvas, signature gradient (#f09433 → #bc1888), Instagram Red likes, circular story rings, edge-to-edge media." /> <link rel="preconnect" href="https://fonts.google

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Grand+Hotel&display=swap" rel="stylesheet" />

Network accessline 770

<p>Every token Instagram's iOS app reaches for — surface ladder, type ramp, radius scale, components. The brand gradient is reserved real estate; everything else is monochromatic so the photography can speak.</p>       </div>       <a class

Network accessline 771

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.instagram-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 772

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.instagram-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 932

<span style="font-weight:500;color:var(--ink-muted);font-size:13px;align-self:flex-end;padding-bottom:5px">iOS</span>     </div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS

Network accessline 933

</div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and Instagram's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-de

Network accessline 934

<p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and Instagram's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/b

Network accessline 935

<a class="btn btn-pill-light" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.instagram-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 939

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.instagram-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.netflix-ios.html`

Network accessline 6

<title>Netflix — iOS design spec</title> <meta name="description" content="Netflix iOS app design reference. Pure black canvas, #E50914 red, artwork-embedded titles, Top 10 giant outlined numerals, profile picker bouncy zoom." /> <link rel=

Network accessline 7

<meta name="description" content="Netflix iOS app design reference. Pure black canvas, #E50914 red, artwork-embedded titles, Top 10 giant outlined numerals, profile picker bouncy zoom." /> <link rel="preconnect" href="https://fonts.googleap

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 584

<p>Netflix's iOS app token set: pure black canvas, the unrepentant <code>#E50914</code>, a strict gray ladder, and a 4pt corner radius that almost never bends.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/aweso

Network accessline 585

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.netflix-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 586

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.netflix-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 732

Netflix iOS     </div>     <p>Design reference. Not affiliated with Netflix, Inc. Tokens are derived from the public iOS app and Netflix's published brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/m

Network accessline 733

</div>     <p>Design reference. Not affiliated with Netflix, Inc. Tokens are derived from the public iOS app and Netflix's published brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/d

Network accessline 734

<p>Design reference. Not affiliated with Netflix, Inc. Tokens are derived from the public iOS app and Netflix's published brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.netfl

Network accessline 735

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.netflix-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 739

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.netflix-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.notion-ios.html`

Network accessline 6

<title>Notion — iOS design spec</title> <meta name="description" content="Notion iOS app design reference. #ffffff canvas, #37352F warm-black ink, hairline borders, block-based density, slash-command grammar." /> <link rel="preconnect" href

Network accessline 7

<meta name="description" content="Notion iOS app design reference. #ffffff canvas, #37352F warm-black ink, hairline borders, block-based density, slash-command grammar." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 687

<p>Every token Notion's iOS app reaches for — the warm-black ink ladder, the six tints reserved for highlights, the radius scale that almost never exceeds 6px. Hairlines do the structural work; color does not.</p>       </div>       <a clas

Network accessline 688

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 689

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 834

Notion iOS     </div>     <p>Design reference. Not affiliated with Notion Labs, Inc. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/

Network accessline 835

</div>     <p>Design reference. Not affiliated with Notion Labs, Inc. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-i

Network accessline 836

<p>Design reference. Not affiliated with Notion Labs, Inc. Token values are derived from the public iOS app. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-ios.html" ta

Network accessline 837

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 841

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.notion-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.robinhood-ios.html`

Network accessline 6

<title>Robinhood — iOS design spec</title> <meta name="description" content="Robinhood iOS app design reference. White canvas, signature green-up orange-down, tabular numbers, confetti first trade, after-hours moon." /> <link rel="preconnec

Network accessline 7

<meta name="description" content="Robinhood iOS app design reference. White canvas, signature green-up orange-down, tabular numbers, confetti first trade, after-hours moon." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Network accessline 651

<p>Every token Robinhood's iOS app reaches for — surface ladder, type ramp, radius scale, components. The green and orange are absolute: green-up, orange-down, no exceptions.</p>       </div>       <a class="ds-source" href="https://github.

Network accessline 652

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.robinhood-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 653

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.robinhood-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 813

Robinhood iOS     </div>     <p>Design reference. Not affiliated with Robinhood Markets, Inc. Token values are derived from the public iOS app and Robinhood's brand identity. View this design reference on <a href="https://github.com/yzfly/a

Network accessline 814

</div>     <p>Design reference. Not affiliated with Robinhood Markets, Inc. Token values are derived from the public iOS app and Robinhood's brand identity. View this design reference on <a href="https://github.com/yzfly/awesome-design-html

Network accessline 815

<p>Design reference. Not affiliated with Robinhood Markets, Inc. Token values are derived from the public iOS app and Robinhood's brand identity. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/

Network accessline 816

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.robinhood-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 820

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.robinhood-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.snapchat-ios.html`

Network accessline 6

<title>Snapchat — iOS design spec</title> <meta name="description" content="Snapchat iOS app design reference. #FFFC00 brand yellow canvas, ghost mark, camera-first surface, color-coded send arrows, Bitmoji-driven identity." /> <link rel="p

Network accessline 7

<meta name="description" content="Snapchat iOS app design reference. #FFFC00 brand yellow canvas, ghost mark, camera-first surface, color-coded send arrows, Bitmoji-driven identity." /> <link rel="preconnect" href="https://fonts.googleapis.

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 669

<p>Every token Snapchat's iOS app reaches for. Yellow is the only color you don't get to negotiate — and it lives at every level of the system, from the icon to the chrome to the loading state.</p>       </div>       <a class="ds-source" hr

Network accessline 670

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.snapchat-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 671

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.snapchat-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 816

Snapchat iOS     </div>     <p>Design reference. Not affiliated with Snap Inc. Token values derived from the public iOS app and Snap's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blo

Network accessline 817

</div>     <p>Design reference. Not affiliated with Snap Inc. Token values derived from the public iOS app and Snap's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios

Network accessline 818

<p>Design reference. Not affiliated with Snap Inc. Token values derived from the public iOS app and Snap's brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.sna

Network accessline 819

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.snapchat-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 823

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.snapchat-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.spotify-ios.html`

Network accessline 6

<title>Spotify — iOS design spec</title> <meta name="description" content="Spotify iOS app design reference. #121212 canvas, #1DB954 functional green, pill-and-circle geometry, album-art-driven Now Playing gradient." /> <link rel="preconnec

Network accessline 7

<meta name="description" content="Spotify iOS app design reference. #121212 canvas, #1DB954 functional green, pill-and-circle geometry, album-art-driven Now Playing gradient." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 693

<p>Every token Spotify's iOS app reaches for — surface ladder, type ramp, radius scale, components. Use it as a paste-grade reference; the green is the only color you don't get to negotiate.</p>       </div>       <a class="ds-source" href=

Network accessline 694

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.spotify-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 695

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.spotify-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 854

Spotify iOS     </div>     <p>Design reference. Not affiliated with Spotify AB. Token values are derived from the public iOS app and Spotify's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/aweso

Network accessline 855

</div>     <p>Design reference. Not affiliated with Spotify AB. Token values are derived from the public iOS app and Spotify's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/b

Network accessline 856

<p>Design reference. Not affiliated with Spotify AB. Token values are derived from the public iOS app and Spotify's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/as

Network accessline 857

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.spotify-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 861

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.spotify-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.starbucks-ios.html`

Network accessline 6

<title>Starbucks — iOS design spec</title> <meta name="description" content="Starbucks iOS app design reference. Deep emerald canvas, Stars rewards arc, mobile order, scan to pay, gold tier accent." /> <link rel="preconnect" href="https://f

Network accessline 7

<meta name="description" content="Starbucks iOS app design reference. Deep emerald canvas, Stars rewards arc, mobile order, scan to pay, gold tier accent." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconne

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 645

<p>Every token Starbucks's iOS app reaches for — surface ladder, type ramp, radius scale, components. The green is non-negotiable. The gold belongs only to Stars.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/aw

Network accessline 646

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.starbucks-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 647

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.starbucks-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 802

Starbucks iOS     </div>     <p>Design reference. Not affiliated with Starbucks Corporation. Token values are derived from the public iOS app and Starbucks's published creative expression guidelines. View this design reference on <a href="h

Network accessline 803

</div>     <p>Design reference. Not affiliated with Starbucks Corporation. Token values are derived from the public iOS app and Starbucks's published creative expression guidelines. View this design reference on <a href="https://github.com/

Network accessline 804

<p>Design reference. Not affiliated with Starbucks Corporation. Token values are derived from the public iOS app and Starbucks's published creative expression guidelines. View this design reference on <a href="https://github.com/yzfly/aweso

Network accessline 805

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.starbucks-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 809

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.starbucks-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.telegram-ios.html`

Network accessline 6

<title>Telegram — iOS design spec</title> <meta name="description" content="Telegram iOS app design reference. White canvas, #229ED9 brand blue, paper-plane mark, soft light-blue outgoing bubbles, channel-first information density." /> <lin

Network accessline 7

<meta name="description" content="Telegram iOS app design reference. White canvas, #229ED9 brand blue, paper-plane mark, soft light-blue outgoing bubbles, channel-first information density." /> <link rel="preconnect" href="https://fonts.goo

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 702

<p>Every token Telegram's iOS app reaches for — color, type, radius, components. Light-mode canonical; dark mode is a free inversion. The blue is the only accent you don't get to negotiate.</p>       </div>       <a class="ds-source" href="

Network accessline 703

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.telegram-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 704

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.telegram-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 849

Telegram iOS     </div>     <p>Design reference. Not affiliated with Telegram FZ-LLC. Token values derived from the public iOS app and Telegram's design assets. View this design reference on <a href="https://github.com/yzfly/awesome-design-

Network accessline 850

</div>     <p>Design reference. Not affiliated with Telegram FZ-LLC. Token values derived from the public iOS app and Telegram's design assets. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/as

Network accessline 851

<p>Design reference. Not affiliated with Telegram FZ-LLC. Token values derived from the public iOS app and Telegram's design assets. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/de

Network accessline 852

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.telegram-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 856

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.telegram-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.threads-ios.html`

Network accessline 6

<title>Threads — iOS design spec</title> <meta name="description" content="Threads iOS app design reference. Pure black canvas, zero accent color, hairline separators, multi-part thread pole, Meta's quiet typography ethic." /> <link rel="pr

Network accessline 7

<meta name="description" content="Threads iOS app design reference. Pure black canvas, zero accent color, hairline separators, multi-part thread pole, Meta's quiet typography ethic." /> <link rel="preconnect" href="https://fonts.googleapis.

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 630

<p>Every token Threads's iOS app reaches for — surface ladder, type ramp, radius scale, components. Inherited Meta-blue verified check and Instagram-red heart are the only chromatic notes — everything else is built from a five-stop gray lad

Network accessline 631

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.threads-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 632

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.threads-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 777

Threads iOS     </div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and Meta's published brand guidelines. View this design reference on <a href="https://github.com/yzfly

Network accessline 778

</div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and Meta's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-

Network accessline 779

<p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and Meta's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/m

Network accessline 780

<a class="btn btn-outline" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.threads-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 784

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.threads-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.tiktok-ios.html`

Network accessline 6

<title>TikTok — iOS design spec</title> <meta name="description" content="TikTok iOS app design reference. #000 canvas, cyan #25F4EE + red #FE2C55 RGB-split brand mark, full-bleed 9:16 video, right-side action stack, spinning audio disc." /

Network accessline 7

<meta name="description" content="TikTok iOS app design reference. #000 canvas, cyan #25F4EE + red #FE2C55 RGB-split brand mark, full-bleed 9:16 video, right-side action stack, spinning audio disc." /> <link rel="preconnect" href="https://f

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 654

<p>The whole TikTok iOS vocabulary — pure black surfaces, the cyan/red RGB-split mark, video-first geometry, and the right-thumb action ladder.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/b

Network accessline 655

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tiktok-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 656

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tiktok-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 810

TikTok iOS     </div>     <p>Design reference. Not affiliated with ByteDance / TikTok Pte. Ltd. Tokens are derived from the public iOS app and TikTok's brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blo

Network accessline 811

</div>     <p>Design reference. Not affiliated with ByteDance / TikTok Pte. Ltd. Tokens are derived from the public iOS app and TikTok's brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/i

Network accessline 812

<p>Design reference. Not affiliated with ByteDance / TikTok Pte. Ltd. Tokens are derived from the public iOS app and TikTok's brand guidance. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.t

Network accessline 813

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tiktok-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 817

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tiktok-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.tinder-ios.html`

Network accessline 6

<title>Tinder — iOS design spec</title> <meta name="description" content="Tinder iOS app design reference. Pink-to-orange gradient brand (#FE3C72 → #FF655B). Swipe deck, action button stack, It's a Match modal, Gold gradient gate." /> <link

Network accessline 7

<meta name="description" content="Tinder iOS app design reference. Pink-to-orange gradient brand (#FE3C72 → #FF655B). Swipe deck, action button stack, It's a Match modal, Gold gradient gate." /> <link rel="preconnect" href="https://fonts.go

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 668

<p>Every token Tinder's iOS app reaches for — surface ladder, type ramp, radius scale, components. The brand gradient is the only place pink and orange ever live; the action buttons each get a single hue; gold means "premium."</p>       </d

Network accessline 669

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tinder-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 670

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tinder-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 815

Tinder iOS     </div>     <p>Design reference. Not affiliated with Tinder LLC / Match Group. Token values are derived from the public iOS app and Tinder's published brand guidelines. View this design reference on <a href="https://github.com

Network accessline 816

</div>     <p>Design reference. Not affiliated with Tinder LLC / Match Group. Token values are derived from the public iOS app and Tinder's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-

Network accessline 817

<p>Design reference. Not affiliated with Tinder LLC / Match Group. Token values are derived from the public iOS app and Tinder's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html

Network accessline 818

<a class="btn btn-outline" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tinder-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 822

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.tinder-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.uber-ios.html`

Network accessline 6

<title>Uber — iOS design spec</title> <meta name="description" content="Uber iOS app design reference. #000 brand, #fff canvas, full-pill geometry, edge-to-edge maps, Uber Move typography." /> <link rel="preconnect" href="https://fonts.goog

Network accessline 7

<meta name="description" content="Uber iOS app design reference. #000 brand, #fff canvas, full-pill geometry, edge-to-edge maps, Uber Move typography." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect"

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 626

<p>Every Uber token starts at #000. White is the second color. The teal accent shows up so rarely you forget it exists. Maps carry the entire visual hierarchy of the surface.</p>       </div>       <a class="ds-source" href="https://github.

Network accessline 627

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.uber-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 628

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.uber-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 772

Uber iOS     </div>     <p>Design reference. Not affiliated with Uber Technologies, Inc. Token values are derived from the public iOS app and Uber's Base brand guidelines. View this design reference on <a href="https://github.com/yzfly/awes

Network accessline 773

</div>     <p>Design reference. Not affiliated with Uber Technologies, Inc. Token values are derived from the public iOS app and Uber's Base brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-ht

Network accessline 774

<p>Design reference. Not affiliated with Uber Technologies, Inc. Token values are derived from the public iOS app and Uber's Base brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/mai

Network accessline 775

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.uber-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 779

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.uber-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.whatsapp-ios.html`

Network accessline 6

<title>WhatsApp — iOS design spec</title> <meta name="description" content="WhatsApp iOS app design reference. #25D366 brand green, #DCF8C6 outgoing bubble, end-to-end encrypted, blue double-check read receipts." /> <link rel="preconnect" h

Network accessline 7

<meta name="description" content="WhatsApp iOS app design reference. #25D366 brand green, #DCF8C6 outgoing bubble, end-to-end encrypted, blue double-check read receipts." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <lin

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 683

<p>Every token WhatsApp's iOS app reaches for — surface ladder, type ramp, radius scale, components. The bubbles are the lowest-radius non-pill element in the entire app — the corner says "this is the seam where two people meet."</p>

Network accessline 684

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.whatsapp-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 685

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.whatsapp-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 823

WhatsApp iOS     </div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and WhatsApp's published brand guidelines. View this design reference on <a href="https://github.com/

Network accessline 824

</div>     <p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and WhatsApp's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-des

Network accessline 825

<p>Design reference. Not affiliated with Meta Platforms, Inc. Token values are derived from the public iOS app and WhatsApp's published brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/bl

Network accessline 826

<a class="btn btn-pill-light" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.whatsapp-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 830

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.whatsapp-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.x-twitter-ios.html`

Network accessline 6

<title>X (Twitter) — iOS design spec</title> <meta name="description" content="X iOS app design reference. Pure #000 canvas, white-on-black geometry, legacy #1D9BF0 Twitter Blue for follow and links, hairline #2F3336 borders, Chirp typograp

Network accessline 7

<meta name="description" content="X iOS app design reference. Pure #000 canvas, white-on-black geometry, legacy #1D9BF0 Twitter Blue for follow and links, hairline #2F3336 borders, Chirp typography." /> <link rel="preconnect" href="https://

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 644

<p>Every token X's iOS app reaches for — black canvas, hairline ladder, one blue. The discipline IS the design.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.x-twi

Network accessline 645

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.x-twitter-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 646

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.x-twitter-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 794

X iOS     </div>     <p>Design reference. Not affiliated with X Corp. Token values derived from the public iOS app and the legacy Twitter brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/

Network accessline 795

</div>     <p>Design reference. Not affiliated with X Corp. Token values derived from the public iOS app and the legacy Twitter brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/

Network accessline 796

<p>Design reference. Not affiliated with X Corp. Token values derived from the public iOS app and the legacy Twitter brand guidelines. View this design reference on <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/

Network accessline 797

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.x-twitter-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 801

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.x-twitter-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/ios/design.youtube-ios.html`

Network accessline 6

<title>YouTube — iOS design spec</title> <meta name="description" content="YouTube iOS app design reference. #FF0000 brand red, light canvas, Roboto-style hierarchy, 16:9 thumbnails with duration pill, mini-player handoff, Shorts vertical."

Network accessline 7

<meta name="description" content="YouTube iOS app design reference. #FF0000 brand red, light canvas, Roboto-style hierarchy, 16:9 thumbnails with duration pill, mini-player handoff, Shorts vertical." /> <link rel="preconnect" href="https://

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 650

<p>The YouTube iOS vocabulary — light surfaces, gray ladder text, one functional red. Roboto in production, Inter here. Numbers always tabular.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/b

Network accessline 651

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.youtube-ios.html" target="_blank" rel="noopener">View Source ↗</a>     </div>

Network accessline 652

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.youtube-ios.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 810

YouTube iOS     </div>     <p>Design reference. Not affiliated with YouTube LLC / Google. Tokens are derived from the public iOS app and YouTube's published brand resources. Source spec at <a href="https://github.com/yzfly/awesome-design-ht

Network accessline 811

</div>     <p>Design reference. Not affiliated with YouTube LLC / Google. Tokens are derived from the public iOS app and YouTube's published brand resources. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/ass

Network accessline 812

<p>Design reference. Not affiliated with YouTube LLC / Google. Tokens are derived from the public iOS app and YouTube's published brand resources. Source spec at <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/des

Network accessline 813

<a class="btn btn-pill" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.youtube-ios.html" target="_blank" rel="noopener">README ↗</a>

Network accessline 817

<a class="float-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/ios/design.youtube-ios.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.airbnb.html`

Network accessline 6

<title>Airbnb — Inspired Design</title> <meta name="description" content="An Airbnb-inspired marketing page: pure white canvas, single-voltage Rausch coral, photography-led property cards, pill search bar, 8px rounded CTAs. Sourced from awe

Network accessline 7

<meta name="description" content="An Airbnb-inspired marketing page: pure white canvas, single-voltage Rausch coral, photography-led property cards, pill search bar, 8px rounded CTAs. Sourced from awesome-design-md." /> <link rel="preconnec

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 1197

<div class="ds-intro">     <h2>The tokens behind every pixel.</h2>     <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.airbnb.html" target="_blank" rel="noopener">DESIGN.md</a>. Single Rausc

Network accessline 1198

<h2>The tokens behind every pixel.</h2>     <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.airbnb.html" target="_blank" rel="noopener">DESIGN.md</a>. Single Rausch voltage, near-black ink,

Network accessline 1199

<p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.airbnb.html" target="_blank" rel="noopener">DESIGN.md</a>. Single Rausch voltage, near-black ink, 8px button radius, 14px card radius, modest

Network accessline 1424

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.airbnb.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.airtable.html`

Network accessline 6

<title>Airtable — Inspired Design</title> <meta name="description" content="An Airtable-inspired marketing surface: white editorial canvas, near-black pill CTA, full-bleed coral / forest / cream signature cards, multi-color spreadsheet UI m

Network accessline 7

<meta name="description" content="An Airtable-inspired marketing surface: white editorial canvas, near-black pill CTA, full-bleed coral / forest / cream signature cards, multi-color spreadsheet UI mockup with category chips. Sourced from aw

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;475;500;600;700&family=Inter+Tight:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 862

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.airtable.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.alipay.html`

Network accessline 6

<title>支付宝 Alipay — 设计系统研究</title> <meta name="description" content="支付宝视觉语言研究:支付宝蓝 + 暖橙红包点缀 + 国民支付与生活服务的信任感. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="支付宝视觉语言研究:支付宝蓝 + 暖橙红包点缀 + 国民支付与生活服务的信任感. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 564

<p>支付宝的视觉语言是"国民信任 + 生活温度":支付宝蓝 #1677FF 是主基调,负责安全与稳重;暖橙 #FF6034 偶尔出现在红包、会员、情感节点,让金融工具不冷冰冰.下面是 token.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.alipay.html" targ

Network accessline 565

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.alipay.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 566

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.alipay.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 765

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.alipay.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

`assets/web/design.aliyun.html`

Network accessline 6

<title>阿里云 Aliyun — 设计系统研究</title> <meta name="description" content="阿里云视觉语言研究:白底克制 + 阿里云橙 + 严谨企业级排版. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="阿里云视觉语言研究:白底克制 + 阿里云橙 + 严谨企业级排版. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 561

<p>阿里云的视觉语言是企业级的:白底为画布,阿里云橙 #FF6A00 是唯一的功能色,圆角控制在 4–8px 之间——少则可信.下面是这套语言的 token.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.aliyun.html" target="_blank" rel="no

Network accessline 562

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.aliyun.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 563

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.aliyun.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 762

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.aliyun.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

`assets/web/design.apple.html`

Network accessline 6

<title>Apple — Inspired Design</title> <meta name="description" content="An Apple-inspired design study: the signature product tile matrix — slim black global nav, frosted sub-nav, a full-bleed hero tile and a 2-up grid of white and light-g

Network accessline 7

<meta name="description" content="An Apple-inspired design study: the signature product tile matrix — slim black global nav, frosted sub-nav, a full-bleed hero tile and a 2-up grid of white and light-gray tiles, centered headlines with pair

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

Network accessline 512

<p>Apple's web identity is not a color scheme — it is an information architecture. Edge-to-edge product tiles, a centered headline stack, one pair of blue links, and silence everywhere else. The structure does the talking; the accent color

Network accessline 513

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.apple.html" target="_blank" rel="noopener">View source ↗</a>     </div>

Network accessline 514

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.apple.html" target="_blank" rel="noopener">View source ↗</a>

Network accessline 653

<div>         <h4>About this Study</h4>         <ul><li><a href="#design-system">Design System</a></li><li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li></ul>

Network accessline 654

<h4>About this Study</h4>         <ul><li><a href="#design-system">Design System</a></li><li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li></ul>       </div>

Network accessline 655

<ul><li><a href="#design-system">Design System</a></li><li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li></ul>

Network accessline 657

<div>         <h4>Author</h4>         <ul><li><a href="https://github.com/yzfly" target="_blank" rel="noopener">云中江树</a></li><li><a href="#">微信公众号: 云中江树</a></li></ul>

Network accessline 658

<h4>Author</h4>         <ul><li><a href="https://github.com/yzfly" target="_blank" rel="noopener">云中江树</a></li><li><a href="#">微信公众号: 云中江树</a></li></ul>       </div>

Network accessline 659

<ul><li><a href="https://github.com/yzfly" target="_blank" rel="noopener">云中江树</a></li><li><a href="#">微信公众号: 云中江树</a></li></ul>

Network accessline 662

<div class="foot-legal">       <span>© 2026 设计研究 · 致敬 Apple 视觉语言 · 作者 云中江树</span>       <span class="links"><a href="#">CC BY-NC 4.0</a><a href="#">Privacy</a><a href="#">Terms</a></span>

Network accessline 663

<span>© 2026 设计研究 · 致敬 Apple 视觉语言 · 作者 云中江树</span>       <span class="links"><a href="#">CC BY-NC 4.0</a><a href="#">Privacy</a><a href="#">Terms</a></span>     </div>

Network accessline 664

<span class="links"><a href="#">CC BY-NC 4.0</a><a href="#">Privacy</a><a href="#">Terms</a></span>

Network accessline 669

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.apple.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.bilibili.html`

Network accessline 6

<title>哔哩哔哩 bilibili — 设计系统研究</title> <meta name="description" content="哔哩哔哩 bilibili 设计语言视觉研究: B 站粉蓝双色, 二次元社区圆润友好的视觉系统, 弹幕文化的色彩表达. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="哔哩哔哩 bilibili 设计语言视觉研究: B 站粉蓝双色, 二次元社区圆润友好的视觉系统, 弹幕文化的色彩表达. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crosso

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />

Network accessline 635

<p>B 站的视觉语言天然带着二次元社区的可爱与活力. 粉色承担情感与互动, 蓝色承担识别与稳定, 多彩点缀于各个分区. 圆角是 B 站的几何性格, 弹幕是 B 站的色彩文化.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bilibili.html" target="_blan

Network accessline 636

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bilibili.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 637

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bilibili.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 820

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bilibili.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.binance.html`

Network accessline 6

<title>Binance — Inspired Design</title> <meta name="description" content="A Binance-inspired trading platform marketing page: near-black canvas, yellow CTA voltage, dense markets table with green/red price cells, BinancePlex-style tabular

Network accessline 7

<meta name="description" content="A Binance-inspired trading platform marketing page: near-black canvas, yellow CTA voltage, dense markets table with green/red price cells, BinancePlex-style tabular mono numbers, light footer reset. Sourced

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@500;600;700&display=swap" rel="stylesheet">

Network accessline 596

<h2 class="display-md" style="margin-top: 12px;">Tokens, type, components.</h2>       </div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.binance.html" target="_bl

Network accessline 597

</div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.binance.html" target="_blank">awesome-design-md / binance</a></div>     </div>

Network accessline 598

<div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.binance.html" target="_blank">awesome-design-md / binance</a></div>

Network accessline 761

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.binance.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.bmw-m.html`

Network accessline 6

<title>BMW M — Inspired Design</title> <meta name="description" content="A BMW M-inspired marketing page: pure black canvas, uppercase letterspaced display, M tricolor stripe, full-bleed motorsport photography placeholders, rectangular 0px

Network accessline 7

<meta name="description" content="A BMW M-inspired marketing page: pure black canvas, uppercase letterspaced display, M tricolor stripe, full-bleed motorsport photography placeholders, rectangular 0px CTAs. Sourced from awesome-design-md."

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">

Network accessline 1165

<div class="ds-eyebrow"><span class="stripe-tag"></span>Design System Reference</div>     <h2>The M language.</h2>     <p>A motorsport-engineering interface. Pure black canvas, white uppercase letterspaced display, the M tricolor as the onl

Network accessline 1166

<h2>The M language.</h2>     <p>A motorsport-engineering interface. Pure black canvas, white uppercase letterspaced display, the M tricolor as the only decoration, and rectangular 0px CTAs. Tokens below are extracted from the brand's <a hre

Network accessline 1167

<p>A motorsport-engineering interface. Pure black canvas, white uppercase letterspaced display, the M tricolor as the only decoration, and rectangular 0px CTAs. Tokens below are extracted from the brand's <a href="https://github.com/yzfly/a

Network accessline 1346

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bmw-m.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.bmw.html`

Network accessline 6

<title>BMW — Inspired Design</title> <meta name="description" content="A BMW-inspired marketing page: light canvas with BMW corporate blue, BMW Type Next Latin substitute, 0px-radius rectangular CTAs, dark navy hero band. Sourced from aweso

Network accessline 7

<meta name="description" content="A BMW-inspired marketing page: light canvas with BMW corporate blue, BMW Type Next Latin substitute, 0px-radius rectangular CTAs, dark navy hero band. Sourced from awesome-design-md." /> <link rel="preconne

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">

Network accessline 1246

<div class="ds-eyebrow">Design System Reference</div>     <h2>The BMW corporate language.</h2>     <p>A measured, dealership-functional system. Light canvas, BMW corporate blue as the single primary action color, BMW Type Next Latin at the

Network accessline 1247

<h2>The BMW corporate language.</h2>     <p>A measured, dealership-functional system. Light canvas, BMW corporate blue as the single primary action color, BMW Type Next Latin at the 700/300 weight split, and rectangular 0px-radius CTAs. Tok

Network accessline 1248

<p>A measured, dealership-functional system. Light canvas, BMW corporate blue as the single primary action color, BMW Type Next Latin at the 700/300 weight split, and rectangular 0px-radius CTAs. Tokens below are extracted from the brand's

Network accessline 1428

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bmw.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.browseros.html`

Network accessline 9

<meta property="og:description" content="A self-contained tribute to BrowserOS's visual language: cream canvas, one terracotta accent, a white poodle mascot, and the warmest settings panel in browser-land. 色 / 形 / 神 extraction included." />

Network accessline 10

<meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Network accessline 450

</nav>     <div class="nav-cta">       <a class="gh" href="https://github.com/browseros-ai/BrowserOS" target="_blank" rel="noopener">

Network accessline 451

<div class="nav-cta">       <a class="gh" href="https://github.com/browseros-ai/BrowserOS" target="_blank" rel="noopener">         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.

Network accessline 452

<a class="gh" href="https://github.com/browseros-ai/BrowserOS" target="_blank" rel="noopener">

Network accessline 764

<p>Extracted through the <strong>色 / 形 / 神</strong> lens — color, form, spirit. BrowserOS's whole move is to take the most intimidating surface in software (model keys, MCP servers, provider endpoints) and make it feel like a warm consumer

Network accessline 765

</div>       <a class="ds-source" href="https://www.browseros.com/" target="_blank" rel="noopener">View browseros.com ↗</a>     </div>

Network accessline 766

<a class="ds-source" href="https://www.browseros.com/" target="_blank" rel="noopener">View browseros.com ↗</a>

Network accessline 916

<a class="src-link" href="https://www.browseros.com/" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.bugatti.html`

Network accessline 6

<title>Bugatti — Inspired Design</title> <meta name="description" content="A Bugatti-inspired marketing page: pure black canvas, three-family typography trinity (Saira Condensed display, EB Garamond serif body, JetBrains Mono buttons), wide

Network accessline 7

<meta name="description" content="A Bugatti-inspired marketing page: pure black canvas, three-family typography trinity (Saira Condensed display, EB Garamond serif body, JetBrains Mono buttons), wide-tracked uppercase, transparent pill CTAs

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500&family=EB+Garamond:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 1154

<div class="ds-eyebrow">— Design System Reference —</div>     <h2>The Bugatti language.</h2>     <p>An austere luxury-automotive interface. Pure black canvas. No accent colour. Three custom typefaces in rigid trinity: Display (uppercase wid

Network accessline 1155

<h2>The Bugatti language.</h2>     <p>An austere luxury-automotive interface. Pure black canvas. No accent colour. Three custom typefaces in rigid trinity: Display (uppercase wide-tracked, here substituted with Saira Condensed), Text Regula

Network accessline 1156

<p>An austere luxury-automotive interface. Pure black canvas. No accent colour. Three custom typefaces in rigid trinity: Display (uppercase wide-tracked, here substituted with Saira Condensed), Text Regular (serif body, here EB Garamond), M

Network accessline 1354

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.bugatti.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.bun.html`

Network accessline 9

<meta property="og:description" content="Bun's docs texture extracted: cream heritage band, hot-pink accent on clean warm-white, the bun mascot, fast-install terminal, full design system reference." /> <meta property="og:type" content="webs

Network accessline 10

<meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 362

<p class="sub">Develop, test, run, and bundle JavaScript &amp; TypeScript projects — all with Bun. A runtime, package manager, bundler and test runner in a single tool.</p>     <div class="hero-actions">       <div class="install-cmd"><span

Network accessline 363

<div class="hero-actions">       <div class="install-cmd"><span class="pr">$</span> curl -fsSL bun.sh/install | bash <span class="copy"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect

Dangerous shell operationline 364

<div class="install-cmd"><span class="pr">$</span> curl -fsSL bun.sh/install | bash <span class="copy"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="11" height="1

Network accessline 364

<div class="install-cmd"><span class="pr">$</span> curl -fsSL bun.sh/install | bash <span class="copy"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="11" height="1

Network accessline 526

<span class="cm"># run it — no build step</span> <span class="pr">$</span> bun run dev <span class="ok">&#10003;</span> ready on <span class="hl">http://localhost:3000</span></div>

Network accessline 527

<span class="pr">$</span> bun run dev <span class="ok">&#10003;</span> ready on <span class="hl">http://localhost:3000</span></div>       </div>

Network accessline 528

<span class="ok">&#10003;</span> ready on <span class="hl">http://localhost:3000</span></div>

Network accessline 563

<div class="sub">Tokens, type ladder, radius, components — extracted from the live bun.com/docs surface.</div>       </div>       <a href="https://bun.com/docs" target="_blank" rel="noopener">View source ↗</a>

Network accessline 564

</div>       <a href="https://bun.com/docs" target="_blank" rel="noopener">View source ↗</a>     </div>

Network accessline 565

<a href="https://bun.com/docs" target="_blank" rel="noopener">View source ↗</a>

Network accessline 670

<div class="code-block" style="margin:0">             <div class="code-head"><span class="dot"></span><span>install.sh</span><span class="copy">Copy</span></div>             <div class="code-body"><span class="pk">$</span> curl -fsSL bun.sh

Network accessline 671

<div class="code-head"><span class="dot"></span><span>install.sh</span><span class="copy">Copy</span></div>             <div class="code-body"><span class="pk">$</span> curl -fsSL bun.sh/install | bash <span class="pk">$</span> bun init <sp

Dangerous shell operationline 672

<div class="code-body"><span class="pk">$</span> curl -fsSL bun.sh/install | bash

Network accessline 672

<div class="code-body"><span class="pk">$</span> curl -fsSL bun.sh/install | bash

Network accessline 718

<a class="float-md" href="https://bun.com/docs" target="_blank" rel="noopener"><span class="d"></span> View source ↗</a>

`assets/web/design.cal.html`

Network accessline 6

<title>Cal.com — Inspired Design</title> <meta name="description" content="A Cal.com-inspired marketing surface: white canvas with custom Cal Sans-style display headlines, black primary CTAs, light-gray feature cards, calendar week-view + b

Network accessline 7

<meta name="description" content="A Cal.com-inspired marketing surface: white canvas with custom Cal Sans-style display headlines, black primary CTAs, light-gray feature cards, calendar week-view + booking confirmation flow, and a dark navy

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 772

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cal.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.claude.html`

Network accessline 6

<title>Claude — Inspired Design</title> <meta name="description" content="A Claude/Anthropic-inspired marketing page: warm cream canvas, slab-serif Copernicus display via Cormorant Garamond, coral CTAs, dark navy product surfaces. Sourced f

Network accessline 7

<meta name="description" content="A Claude/Anthropic-inspired marketing page: warm cream canvas, slab-serif Copernicus display via Cormorant Garamond, coral CTAs, dark navy product surfaces. Sourced from awesome-design-md." /> <link rel="pr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

Network accessline 974

<p class="eyebrow">DESIGN SYSTEM</p>       <h2>Cream, coral, navy. One trinity.</h2>       <p>Anthropic's web language anchors on a tinted cream canvas, a single warm coral CTA, and dark navy product surfaces — a deliberate counter-position

Network accessline 975

<h2>Cream, coral, navy. One trinity.</h2>       <p>Anthropic's web language anchors on a tinted cream canvas, a single warm coral CTA, and dark navy product surfaces — a deliberate counter-position to the cool grays of the rest of the AI ca

Network accessline 976

<p>Anthropic's web language anchors on a tinted cream canvas, a single warm coral CTA, and dark navy product surfaces — a deliberate counter-position to the cool grays of the rest of the AI category. Every token below is sourced from the br

Network accessline 1211

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.claude.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.clay.html`

Network accessline 6

<title>Kiln — Inspired by Clay's design system</title> <meta name="description" content="A Clay-inspired marketing page: cream canvas, dark-navy primary CTAs, saturated single-color feature cards (pink, teal, lavender, peach, ochre), clayma

Network accessline 7

<meta name="description" content="A Clay-inspired marketing page: cream canvas, dark-navy primary CTAs, saturated single-color feature cards (pink, teal, lavender, peach, ochre), claymation-style illustrations, sales workflow centerpiece. S

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fraunces:wght@500;600&display=swap" rel="stylesheet">

Network accessline 880

<p class="caption-up">— Design system</p>     <h2 class="display-lg" style="margin: 16px 0;">Cream canvas. Six saturated cards. One mountain at the bottom.</h2>     <p class="body-md" style="font-size: 18px;">Source: <a href="https://github

Network accessline 881

<h2 class="display-lg" style="margin: 16px 0;">Cream canvas. Six saturated cards. One mountain at the bottom.</h2>     <p class="body-md" style="font-size: 18px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/asset

Network accessline 882

<p class="body-md" style="font-size: 18px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.clay.html" target="_blank" rel="noopener" style="color: var(--ink); border-bottom: 1px solid var(--ink);">

Network accessline 1062

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.clay.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.clickhouse.html`

Network accessline 6

<title>ClickHouse — Inspired Design</title> <meta name="description" content="A ClickHouse-inspired marketing page: near-pure black canvas, electric yellow voltage, Inter at 700 with tight tracking, SQL code blocks, yellow stat-callouts. So

Network accessline 7

<meta name="description" content="A ClickHouse-inspired marketing page: near-pure black canvas, electric yellow voltage, Inter at 700 with tight tracking, SQL code blocks, yellow stat-callouts. Sourced from awesome-design-md." /> <link rel=

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 790

<h2 class="section-title">Tokens, by ClickHouse.</h2>       <p class="section-lede">Near-pure black canvas, electric-yellow voltage, Inter 700 with tight tracking, SQL code blocks. The yellow is the brand.</p>       <a class="ds-link" href=

Network accessline 791

<p class="section-lede">Near-pure black canvas, electric-yellow voltage, Inter 700 with tight tracking, SQL code blocks. The yellow is the brand.</p>       <a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/asse

Network accessline 792

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.clickhouse.html" target="_blank" rel="noopener">→ READ THE FULL DESIGN.MD</a>

Network accessline 990

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.clickhouse.html" target="_blank" rel="noopener">

`assets/web/design.cohere.html`

Network accessline 6

<title>Cohere — Inspired Design</title> <meta name="description" content="A Cohere-inspired marketing page and design-system reference: white editorial canvas, deep green product band, pill CTAs, agent console mockup. Sourced from awesome-d

Network accessline 7

<meta name="description" content="A Cohere-inspired marketing page and design-system reference: white editorial canvas, deep green product band, pill CTAs, agent console mockup. Sourced from awesome-design-md." /> <link rel="preconnect" hre

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 712

<div class="mono">DESIGN SYSTEM · v.alpha</div>     <h2 class="ds-title">The system in the open.</h2>     <p>Tokens and primitives behind the Cohere marketing surface — colors grouped by role, the type ladder, radii, and the canonical compo

Network accessline 713

<h2 class="ds-title">The system in the open.</h2>     <p>Tokens and primitives behind the Cohere marketing surface — colors grouped by role, the type ladder, radii, and the canonical component set. Source: <a href="https://github.com/yzfly/

Network accessline 714

<p>Tokens and primitives behind the Cohere marketing surface — colors grouped by role, the type ladder, radii, and the canonical component set. Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cohere

Network accessline 915

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cohere.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.coinbase.html`

Network accessline 6

<title>Coinbase — Inspired Design</title> <meta name="description" content="A Coinbase-inspired institutional-crypto marketing page: bright white canvas, Coinbase Blue pill CTAs, full-bleed dark editorial hero with floating product mockups,

Network accessline 7

<meta name="description" content="A Coinbase-inspired institutional-crypto marketing page: bright white canvas, Coinbase Blue pill CTAs, full-bleed dark editorial hero with floating product mockups, tabular mono prices. Sourced from awesome

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">

Network accessline 641

</div>       <div class="ds-meta">         Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.coinbase.html" target="_blank">awesome-design-md / coinbase</a>

Network accessline 642

<div class="ds-meta">         Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.coinbase.html" target="_blank">awesome-design-md / coinbase</a>       </div>

Network accessline 643

Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.coinbase.html" target="_blank">awesome-design-md / coinbase</a>

Network accessline 812

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.coinbase.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.composio.html`

Network accessline 6

<title>Composio — Inspired Design</title> <meta name="description" content="A Composio-inspired marketing page and design-system reference: near-black canvas, deep electric blue voltage (#0007cd), 2x2 terminal mockup hero, abcDiatype-style

Network accessline 7

<meta name="description" content="A Composio-inspired marketing page and design-system reference: near-black canvas, deep electric blue voltage (#0007cd), 2x2 terminal mockup hero, abcDiatype-style sans, toolkit grid for AI agent integratio

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Access to secretsline 651
```
[Credential-related source omitted]
```

Network accessline 869

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.composio.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.cursor.html`

Network accessline 6

<title>Cursor — Inspired Design</title> <meta name="description" content="A Cursor-inspired marketing page: warm cream canvas, near-black ink, magazine-weight display, AI-timeline pastel pills, IDE mockup as protagonist. Sourced from awesom

Network accessline 7

<meta name="description" content="A Cursor-inspired marketing page: warm cream canvas, near-black ink, magazine-weight display, AI-timeline pastel pills, IDE mockup as protagonist. Sourced from awesome-design-md." /> <link rel="preconnect"

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 744

<p class="eyebrow">Design System</p>     <h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.c

Network accessline 745

<h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cursor.html" target="_blank" rel="noopener

Network accessline 746

<p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cursor.html" target="_blank" rel="noopener" style="color: var(--primary); text-decoration: underline; tex

Network accessline 938

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.cursor.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.deepseek.html`

Network accessline 6

<title>DeepSeek — 设计系统研究</title> <meta name="description" content="DeepSeek 设计语言视觉研究: 白底极简 + 蓝鲸蓝单色强调, 学术克制的中国开源 AI 设计禅意. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="DeepSeek 设计语言视觉研究: 白底极简 + 蓝鲸蓝单色强调, 学术克制的中国开源 AI 设计禅意. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 510

<p>DeepSeek 的视觉语言拒绝花哨. 白底, 黑字, 一抹蓝鲸蓝. 没有渐变, 没有阴影堆叠, 没有多余的装饰. 它的克制本身就是表达 — 让内容和推理过程成为唯一的主角.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.deepseek.html" target="_bl

Network accessline 511

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.deepseek.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 512

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.deepseek.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 726

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.deepseek.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.dingtalk.html`

Network accessline 6

<title>钉钉 DingTalk — 设计系统研究</title> <meta name="description" content="钉钉视觉语言研究:钉钉蓝 + 圆润几何 + 国民协作平台的信息密度. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="钉钉视觉语言研究:钉钉蓝 + 圆润几何 + 国民协作平台的信息密度. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 562

<p>钉钉的视觉语言是国民级协作平台的"安全感":单一信任蓝 #1A87FF,白底圆角,信息密度大但分组清晰——亲切而不轻浮.下面是这套语言背后的 token.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.dingtalk.html" target="_blank" rel="

Network accessline 563

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.dingtalk.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 564

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.dingtalk.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 758

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.dingtalk.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

`assets/web/design.doubao.html`

Network accessline 6

<title>豆包 Doubao — 设计系统研究</title> <meta name="description" content="豆包 AI 视觉语言研究:温柔紫色系 + 圆润几何 + 亲和的 AI 朋友气质. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="豆包 AI 视觉语言研究:温柔紫色系 + 圆润几何 + 亲和的 AI 朋友气质. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 525

<p>豆包不是一个工程师工具,所以它的视觉从不锐利.圆角永远 16–20px,主色是一抹会发光的紫,辅以橙色保留人味——下面是这套语言背后的 token.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.doubao.html" target="_blank" rel="noope

Network accessline 526

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.doubao.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 527

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.doubao.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 720

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.doubao.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

`assets/web/design.douyin.html`

Network accessline 6

<title>抖音 Douyin — 竖屏沉浸 Feed · 设计系统研究</title> <meta name="description" content="抖音 (Douyin) 设计语言视觉研究: 竖屏沉浸式 feed 即品牌结构, 近黑画布上的 cyan #25F4EE / red #FE2C55 双色错位签名, 互动栏, 黑胶唱片与音乐跑马灯. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fo

Network accessline 7

<meta name="description" content="抖音 (Douyin) 设计语言视觉研究: 竖屏沉浸式 feed 即品牌结构, 近黑画布上的 cyan #25F4EE / red #FE2C55 双色错位签名, 互动栏, 黑胶唱片与音乐跑马灯. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect"

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />

Network accessline 668

<p>抖音的设计语言为 "屏幕消失" 服务: 近黑画布把界面藏起来, 让视频成为唯一光源. 双生色 cyan / red 的 RGB 错位是声画振动的视觉化 — 只用在 logo, 大标题与点赞数字上, 其余一律黑白灰.</p>       </div>       <a class="btn btn-outline btn-sm" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/

Network accessline 669

</div>       <a class="btn btn-outline btn-sm" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.douyin.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 670

<a class="btn btn-outline btn-sm" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.douyin.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 863

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.douyin.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.elevenlabs.html`

Network accessline 6

<title>ElevenLabs — Inspired Design</title> <meta name="description" content="An ElevenLabs-inspired marketing page and design-system reference: editorial off-white canvas, Waldenburg-style serif at weight 300, atmospheric pastel gradient o

Network accessline 7

<meta name="description" content="An ElevenLabs-inspired marketing page and design-system reference: editorial off-white canvas, Waldenburg-style serif at weight 300, atmospheric pastel gradient orbs, ink pill CTAs, voice library mockup. So

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=EB+Garamond:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 847

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.elevenlabs.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.expo.html`

Network accessline 6

<title>Expo — Inspired Design</title> <meta name="description" content="An Expo-inspired marketing page: pure white canvas, sky-blue atmospheric wash behind the hero, pure black 8px pill CTAs, Inter 600 display + 400 body, JetBrains Mono on

Network accessline 7

<meta name="description" content="An Expo-inspired marketing page: pure white canvas, sky-blue atmospheric wash behind the hero, pure black 8px pill CTAs, Inter 600 display + 400 body, JetBrains Mono on every code surface, MacBook + iPhone

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 853

<span class="c-prompt">$</span> <span class="c-fn">eas</span> build --platform ios --profile preview <span class="c-ok">✔ Build queued — #1284</span> <span class="c-out">  https://expo.dev/accounts/acme/projects/rover/builds/1284</span></pr

Network accessline 854

<span class="c-ok">✔ Build queued — #1284</span> <span class="c-out">  https://expo.dev/accounts/acme/projects/rover/builds/1284</span></pre>       </div>

Network accessline 855

<span class="c-out">  https://expo.dev/accounts/acme/projects/rover/builds/1284</span></pre>

Network accessline 924

<h2 class="section-title">Tokens, by Expo.</h2>       <p class="section-lede">A pure white canvas with a sky-blue hero wash, black 8px CTAs, Inter at 600 for display, and JetBrains Mono on every code surface. Compact, editorial, developer-e

Network accessline 925

<p class="section-lede">A pure white canvas with a sky-blue hero wash, black 8px CTAs, Inter at 600 for display, and JetBrains Mono on every code surface. Compact, editorial, developer-ergonomic.</p>       <a class="ds-link" href="https://g

Network accessline 926

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.expo.html" target="_blank" rel="noopener">Read the full DESIGN.md →</a>

Network accessline 1158

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.expo.html" target="_blank" rel="noopener">

`assets/web/design.feishu.html`

Network accessline 6

<title>飞书 · 先进团队,先用飞书</title> <meta name="description" content="飞书 · 字节跳动旗下 AI 工作平台。即时消息、视频会议、智能文档、多维表格、OKR、项目协作、飞书 AI 一体化。" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="飞书 · 字节跳动旗下 AI 工作平台。即时消息、视频会议、智能文档、多维表格、OKR、项目协作、飞书 AI 一体化。" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

Network accessline 1191

<p>飞书蓝主导,六色辅助用于产品模块区分。圆角友善但克制。字体兼顾中英自然混排 (PingFang SC × Inter)。下面是所有 token。</p>     </div>     <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.feishu.html" target="_blank" rel="noopener">V

Network accessline 1192

</div>     <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.feishu.html" target="_blank" rel="noopener">View Source ↗</a>   </div>

Network accessline 1193

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.feishu.html" target="_blank" rel="noopener">View Source ↗</a>

Network accessline 1323

<a class="float-src" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.feishu.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.ferrari.html`

Network accessline 6

<title>Ferrari — Where Numbers Become Luxury · Design Study</title> <meta name="description" content="Ferrari brand design study: cinematic near-black panels where performance figures are set like Didot couture — 1000 CV, 2.5 s, V12 — with

Network accessline 7

<meta name="description" content="Ferrari brand design study: cinematic near-black panels where performance figures are set like Didot couture — 1000 CV, 2.5 s, V12 — with low-slung silhouettes, Rosso Corsa restraint and a Scuderia red band

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

Network accessline 620

<p>The structural idea of this study: Ferrari's identity does not live in photographs — it lives in figures. So the page treats performance data as the hero asset, set in Didone serifs at display sizes on a near-black stage, with Rosso Cors

Network accessline 621

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ferrari.html" target="_blank" rel="noopener">View source ↗</a>     </div>

Network accessline 622

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ferrari.html" target="_blank" rel="noopener">View source ↗</a>

Network accessline 783

<ul>             <li><a href="#design-system">Design System</a></li>             <li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li>

Network accessline 784

<li><a href="#design-system">Design System</a></li>             <li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li>           </ul>

Network accessline 785

<li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html</a></li>

Network accessline 797

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ferrari.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.figma.html`

Network accessline 6

<title>Figma — Inspired Design</title> <meta name="description" content="A Figma-inspired marketing page: monochrome black-and-white editorial frame interrupted by oversized pastel color blocks — lime, lilac, cream, mint, coral, navy. Pill

Network accessline 7

<meta name="description" content="A Figma-inspired marketing page: monochrome black-and-white editorial frame interrupted by oversized pastel color blocks — lime, lilac, cream, mint, coral, navy. Pill CTAs only. Sourced from awesome-design-

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 460

<!-- Top nav --> <header class="topnav"><div class="wrap row">   <a class="brand" href="#"><svg class="glyph" viewBox="0 0 22 32" xmlns="http://www.w3.org/2000/svg">

Network accessline 461

<header class="topnav"><div class="wrap row">   <a class="brand" href="#"><svg class="glyph" viewBox="0 0 22 32" xmlns="http://www.w3.org/2000/svg">     <path d="M5.5 32a5.5 5.5 0 0 0 5.5-5.5V21H5.5a5.5 5.5 0 0 0 0 11Z" fill="#0acf83"/>

Network accessline 462

<a class="brand" href="#"><svg class="glyph" viewBox="0 0 22 32" xmlns="http://www.w3.org/2000/svg">

Network accessline 853

<h2 class="display-lg" style="margin: 16px 0;">The tokens behind every pill.</h2>     <p class="body-lg" style="opacity: 0.8;">Source:       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.figma.html" targe

Network accessline 854

<p class="body-lg" style="opacity: 0.8;">Source:       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.figma.html" target="_blank" rel="noopener" style="border-bottom: 1px solid var(--ink);">DESIGN.md</a>.

Network accessline 855

<a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.figma.html" target="_blank" rel="noopener" style="border-bottom: 1px solid var(--ink);">DESIGN.md</a>.

Network accessline 1019

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.figma.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.framer.html`

Network accessline 6

<title>Frameworks — Inspired by Framer's design system</title> <meta name="description" content="A Framer-inspired marketing page: near-black canvas, oversized white display type with aggressive negative tracking, white pill CTAs, vibrant g

Network accessline 7

<meta name="description" content="A Framer-inspired marketing page: near-black canvas, oversized white display type with aggressive negative tracking, white pill CTAs, vibrant gradient spotlight cards. Sourced from awesome-design-md." /> <l

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">

Network accessline 353

border-radius: 50%;   flex: none;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyline points='20 6 9 17 4

Network accessline 354

flex: none;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyline points='20 6 9 17 4 12'/></svg>");   backg

Network accessline 355

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyline points='20 6 9 17 4 12'/></svg>");

Network accessline 697

<p class="eyebrow">— Design system</p>     <h2 class="display-lg" style="margin: 16px 0;">The poster, the&nbsp;canvas, the&nbsp;ring.</h2>     <p class="body-lg" style="color: var(--ink-muted);">Source: <a href="https://github.com/yzfly/awe

Network accessline 698

<h2 class="display-lg" style="margin: 16px 0;">The poster, the&nbsp;canvas, the&nbsp;ring.</h2>     <p class="body-lg" style="color: var(--ink-muted);">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/desig

Network accessline 699

<p class="body-lg" style="color: var(--ink-muted);">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.framer.html" target="_blank" rel="noopener" style="color: var(--ink); border-bottom: 1px solid var

Network accessline 856

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.framer.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.hashicorp.html`

Network accessline 6

<title>HashiCorp — Inspired Design</title> <meta name="description" content="A HashiCorp-inspired marketing page: near-black canvas, per-product chromatic identity, hashicorpSans-feel Inter, 8px CTAs, charcoal cards over surface lift. Sourc

Network accessline 7

<meta name="description" content="A HashiCorp-inspired marketing page: near-black canvas, per-product chromatic identity, hashicorpSans-feel Inter, 8px CTAs, charcoal cards over surface lift. Sourced from awesome-design-md." /> <link rel="p

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap" rel="stylesheet">

Network accessline 807

<h2 class="section-title">Tokens, by HashiCorp.</h2>       <p class="section-lede">A black canvas, charcoal lift, seven product accents. Engineered hierarchy carries every page.</p>       <a class="ds-link" href="https://github.com/yzfly/aw

Network accessline 808

<p class="section-lede">A black canvas, charcoal lift, seven product accents. Engineered hierarchy carries every page.</p>       <a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.hashicorp.htm

Network accessline 809

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.hashicorp.html" target="_blank" rel="noopener">→ READ THE FULL DESIGN.MD</a>

Network accessline 1021

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.hashicorp.html" target="_blank" rel="noopener">

`assets/web/design.ibm.html`

Network accessline 6

<title>IBM — Inspired Design</title> <meta name="description" content="An IBM-inspired marketing page in faithful Carbon Design System: white canvas, IBM Blue accent, 0px corners, IBM Plex Sans at weight 300 for display. Sourced from awesom

Network accessline 7

<meta name="description" content="An IBM-inspired marketing page in faithful Carbon Design System: white canvas, IBM Blue accent, 0px corners, IBM Plex Sans at weight 300 for display. Sourced from awesome-design-md." /> <link rel="preconnec

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 869

<h2 class="section-title">Tokens, by Carbon.</h2>       <p class="section-lede">A white canvas, light gray lift, one assertive blue. Engineered hierarchy through size and weight — not chrome.</p>       <a class="ds-link" href="https://githu

Network accessline 870

<p class="section-lede">A white canvas, light gray lift, one assertive blue. Engineered hierarchy through size and weight — not chrome.</p>       <a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/des

Network accessline 871

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ibm.html" target="_blank" rel="noopener">→ Read the full DESIGN.md</a>

Network accessline 1103

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ibm.html" target="_blank" rel="noopener">

`assets/web/design.intercom.html`

Network accessline 6

<title>Intercom — Inspired Design</title> <meta name="description" content="An Intercom-inspired marketing page: cream canvas, charcoal primary, Fin Orange AI accent, white floating cards, product-mockup-led rhythm. Sourced from awesome-des

Network accessline 7

<meta name="description" content="An Intercom-inspired marketing page: cream canvas, charcoal primary, Fin Orange AI accent, white floating cards, product-mockup-led rhythm. Sourced from awesome-design-md." /> <link rel="preconnect" href="h

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 1328

<div class="ds-intro">     <h2>The tokens behind every pixel.</h2>     <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.intercom.html" target="_blank" rel="noopener">DESIGN.md</a>. Cream canv

Network accessline 1329

<h2>The tokens behind every pixel.</h2>     <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.intercom.html" target="_blank" rel="noopener">DESIGN.md</a>. Cream canvas, charcoal primary, singl

Network accessline 1330

<p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.intercom.html" target="_blank" rel="noopener">DESIGN.md</a>. Cream canvas, charcoal primary, single Fin Orange accent reserved for AI, white f

Network accessline 1565

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.intercom.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.kimi.html`

Network accessline 6

<title>Kimi · 月之暗面 Moonshot AI — 设计系统研究</title> <meta name="description" content="Kimi (月之暗面 Moonshot AI) 设计语言视觉研究: 深空黑画布, 暗面月球与边缘光, 克制的月相青强调色, 开源 Agentic 模型的工程师气质. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis

Network accessline 7

<meta name="description" content="Kimi (月之暗面 Moonshot AI) 设计语言视觉研究: 深空黑画布, 暗面月球与边缘光, 克制的月相青强调色, 开源 Agentic 模型的工程师气质. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fo

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 561

<span class="prompt">$</span> <span class="cmd">python</span><br/> <span class="dim">&gt;&gt;&gt;</span> <span class="cmd">client = OpenAI(</span><br/> <span class="dim">...</span> <span class="cmd">&nbsp;&nbsp;base_url=</span><span class="

Network accessline 562

<span class="dim">&gt;&gt;&gt;</span> <span class="cmd">client = OpenAI(</span><br/> <span class="dim">...</span> <span class="cmd">&nbsp;&nbsp;base_url=</span><span class="str">"https://api.moonshot.cn/v1"</span><span class="cmd">,</span><

Network accessline 563

<span class="dim">...</span> <span class="cmd">&nbsp;&nbsp;base_url=</span><span class="str">"https://api.moonshot.cn/v1"</span><span class="cmd">,</span><br/>

Access to secretsline 564
```
[Credential-related source omitted]
```

Network accessline 647

<p>月之暗面的设计语言是字面意义的 "dark side of the moon": 深空黑画布, 月球大部分隐在阴影里, 只露一道青色边缘光. 克制, 理性, 带一点登月工程的浪漫 — 它不试图可爱, 它试图可信.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.kimi.ht

Network accessline 648

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.kimi.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 649

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.kimi.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 863

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.kimi.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.kraken.html`

Network accessline 6

<title>Kraken — Inspired Design</title> <meta name="description" content="A Kraken-inspired crypto exchange marketing page: white surface, Kraken Purple primary, 12px-radius buttons, trading dashboard panels, tabular mono prices and serious

Network accessline 7

<meta name="description" content="A Kraken-inspired crypto exchange marketing page: white surface, Kraken Purple primary, 12px-radius buttons, trading dashboard panels, tabular mono prices and serious security signals. Sourced from awesome-

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">

Network accessline 1054

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.kraken.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.lamborghini.html`

Network accessline 6

<title>Lamborghini — Inspired Design</title> <meta name="description" content="A Lamborghini-inspired marketing page: true-black canvas, surgical gold accent, hexagonal geometric language, all-caps display, zero-radius sharp rectangles. Sou

Network accessline 7

<meta name="description" content="A Lamborghini-inspired marketing page: true-black canvas, surgical gold accent, hexagonal geometric language, all-caps display, zero-radius sharp rectangles. Sourced from awesome-design-md." /> <link rel="p

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Barlow+Condensed:wght@300;400;500;700;900&display=swap" rel="stylesheet">

Network accessline 1512

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.lamborghini.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.li-auto.html`

Network accessline 6

<title>理想汽车 Li Auto — Design System Study</title> <meta name="description" content="理想汽车 L9 / L8 / L7 / MEGA 设计语言研究: 白底温暖, 理想绿主调, 圆润友好, 家庭场景叙事, 增程式智能电动车. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="理想汽车 L9 / L8 / L7 / MEGA 设计语言研究: 白底温暖, 理想绿主调, 圆润友好, 家庭场景叙事, 增程式智能电动车. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.c

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 637

<p>理想汽车的视觉语言: 暖白基底 + 理想绿 (#2A7E3F) 主调 + 暖橙 secondary, 强圆角 12-32px, 圆润柔和, 强调家的温度与场景感. 拒绝跑车科技, 拥抱家庭温度.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.li-auto.html" ta

Network accessline 638

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.li-auto.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 639

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.li-auto.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 795

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.li-auto.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.linear.html`

Network accessline 6

<title>Linear — Inspired Design</title> <meta name="description" content="A Linear-inspired marketing page: dark canvas, surface ladder, lavender accent, aggressive negative tracking. Product UI takes the lead. Sourced from awesome-design-m

Network accessline 7

<meta name="description" content="A Linear-inspired marketing page: dark canvas, surface ladder, lavender accent, aggressive negative tracking. Product UI takes the lead. Sourced from awesome-design-md." /> <link rel="preconnect" href="http

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 702

<p class="eyebrow">Design system</p>     <h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.l

Network accessline 703

<h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.linear.html" target="_blank" rel="noopener

Network accessline 704

<p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.linear.html" target="_blank" rel="noopener" style="color: var(--primary);">DESIGN.md</a>. Single dark can

Network accessline 881

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.linear.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.lovable.html`

Network accessline 6

<title>Lovable — Inspired Design</title> <meta name="description" content="A Lovable-inspired marketing page: warm parchment cream canvas, humanist Camera-style display, conversational AI prompt as protagonist, opacity-driven gray system. S

Network accessline 7

<meta name="description" content="A Lovable-inspired marketing page: warm parchment cream canvas, humanist Camera-style display, conversational AI prompt as protagonist, opacity-driven gray system. Sourced from awesome-design-md." /> <link

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 1482

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.lovable.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.mastercard.html`

Network accessline 6

<title>Mastercard — Inspired Design</title> <meta name="description" content="A Mastercard-inspired editorial fintech marketing page: warm cream canvas, circular portrait constellation, ink-black pill CTAs, ghost-watermark headlines and orb

Network accessline 7

<meta name="description" content="A Mastercard-inspired editorial fintech marketing page: warm cream canvas, circular portrait constellation, ink-black pill CTAs, ghost-watermark headlines and orbital orange arcs. Sourced from awesome-desig

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;450;500;600;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">

Network accessline 1037

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mastercard.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.meta.html`

Network accessline 6

<title>Meta — Inspired Design</title> <meta name="description" content="A Meta-inspired marketing page: stark white canvas, black pill primary CTAs, cobalt commerce CTAs, Optimistic-VF-feel Inter at weight 500 display, photographic feature

Network accessline 7

<meta name="description" content="A Meta-inspired marketing page: stark white canvas, black pill primary CTAs, cobalt commerce CTAs, Optimistic-VF-feel Inter at weight 500 display, photographic feature cards with 32px rounding. Sourced from

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Network accessline 883

<h2 class="section-title">Tokens, by Meta.</h2>       <p class="section-lede">Pill-shaped buttons, 32px photographic cards, black for marketing, cobalt for commerce, and Optimistic VF carrying every text role with ss01 + ss02 on.</p>

Network accessline 884

<p class="section-lede">Pill-shaped buttons, 32px photographic cards, black for marketing, cobalt for commerce, and Optimistic VF carrying every text role with ss01 + ss02 on.</p>       <a class="ds-link" href="https://github.com/yzfly/awes

Network accessline 885

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.meta.html" target="_blank" rel="noopener">Read the full DESIGN.md →</a>

Network accessline 1099

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.meta.html" target="_blank" rel="noopener">

`assets/web/design.mihoyo.html`

Network accessline 6

<title>米哈游 miHoYo / HoYoverse — 设计语言研究</title> <meta name="description" content="米哈游视觉语言的设计研究：紫粉渐变网格 + 二次元美学、多彩克制、圆润 12-16px 圆角、技术宅拯救世界叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="米哈游视觉语言的设计研究：紫粉渐变网格 + 二次元美学、多彩克制、圆润 12-16px 圆角、技术宅拯救世界叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorig

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 540

<p>米哈游的视觉语言以紫粉渐变作为情感锚点,辅以蓝、金、薄荷点缀次元感。 圆角偏大(12–32px),呈现圆润可爱;但版式严格遵循栅格,避免廉价同人风。</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mihoyo.html" target="_blank" rel="noope

Network accessline 541

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mihoyo.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 542

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mihoyo.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 725

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mihoyo.html" target="_blank" rel="noopener">查看源码 ↗</a>

`assets/web/design.minimax.html`

Network accessline 6

<title>MiniMax — Inspired Design</title> <meta name="description" content="A MiniMax-inspired marketing page and design-system reference: stark white canvas, black-pill CTAs, vibrant gradient product cards (coral, magenta, blue, purple), DM

Network accessline 7

<meta name="description" content="A MiniMax-inspired marketing page and design-system reference: stark white canvas, black-pill CTAs, vibrant gradient product cards (coral, magenta, blue, purple), DM Sans across every surface, model showcas

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 721

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.minimax.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.mintlify.html`

Network accessline 6

<title>Mintlify — Inspired Design</title> <meta name="description" content="A Mintlify-inspired marketing page: atmospheric sky-gradient hero, mint accent CTAs, black pill primaries, 3-column doc layout, Inter + Geist Mono. Sourced from awe

Network accessline 7

<meta name="description" content="A Mintlify-inspired marketing page: atmospheric sky-gradient hero, mint accent CTAs, black pill primaries, 3-column doc layout, Inter + Geist Mono. Sourced from awesome-design-md." /> <link rel="preconnect"

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 223

.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px} .tier li{display:flex;gap:10px;color:var(--charcoal)} .tier li::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:var

Network accessline 224

.tier li{display:flex;gap:10px;color:var(--charcoal)} .tier li::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:var(--r-full);background:var(--brand-green-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='

Network accessline 225

.tier li::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:var(--r-full);background:var(--brand-green-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='

Network accessline 602

<div class="sub">Tokens, type ladder, radius, components — pulled from the captured DESIGN.md.</div>       </div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mintlify.html" target="_blank" rel="no

Network accessline 603

</div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mintlify.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>     </div>

Network accessline 604

<a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mintlify.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>

Network accessline 765

<a class="float-md" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mintlify.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.miro.html`

Network accessline 6

<title>Mirror — Inspired by Miro's design system</title> <meta name="description" content="A Miro-inspired marketing page: stark white canvas, canary-yellow wordmark, black pill CTAs, pastel feature cards that echo the actual sticky-note pa

Network accessline 7

<meta name="description" content="A Miro-inspired marketing page: stark white canvas, canary-yellow wordmark, black pill CTAs, pastel feature cards that echo the actual sticky-note palette, whiteboard mockup centerpiece. Sourced from awesom

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Caveat:wght@500;700&display=swap" rel="stylesheet">

Network accessline 430

background: var(--success-accent);   border-radius: 50%;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyli

Network accessline 431

border-radius: 50%;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyline points='20 6 9 17 4 12'/></svg>");

Network accessline 432

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'><polyline points='20 6 9 17 4 12'/></svg>");

Network accessline 804

<p class="micro-uppercase">— Design system</p>     <h2 class="display-lg" style="margin: 16px 0;">Yellow wordmark, black&nbsp;pill, sticky&nbsp;palette.</h2>     <p class="body-md" style="font-size: 18px; color: var(--slate);">Source: <a hr

Network accessline 805

<h2 class="display-lg" style="margin: 16px 0;">Yellow wordmark, black&nbsp;pill, sticky&nbsp;palette.</h2>     <p class="body-md" style="font-size: 18px; color: var(--slate);">Source: <a href="https://github.com/yzfly/awesome-design-html/bl

Network accessline 806

<p class="body-md" style="font-size: 18px; color: var(--slate);">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.miro.html" target="_blank" rel="noopener" style="color: var(--brand-blue); border-bot

Network accessline 985

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.miro.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.mistral.html`

Network accessline 6

<title>Mistral AI — Inspired Design</title> <meta name="description" content="A Mistral AI-inspired marketing page and design-system reference: atmospheric sunset gradient hero, cream-yellow surfaces, near-serif display, signature sunset st

Network accessline 7

<meta name="description" content="A Mistral AI-inspired marketing page and design-system reference: atmospheric sunset gradient hero, cream-yellow surfaces, near-serif display, signature sunset stripe band. Sourced from awesome-design-md."

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Access to secretsline 575
```
[Credential-related source omitted]
```

Network accessline 705

<div class="mono">DESIGN SYSTEM · v.alpha</div>       <h2>The atelier.</h2>       <p>Tokens and primitives behind the Mistral surface — colors grouped by role, the editorial-and-Inter type ladder, radii, and the canonical component set. Sou

Network accessline 706

<h2>The atelier.</h2>       <p>Tokens and primitives behind the Mistral surface — colors grouped by role, the editorial-and-Inter type ladder, radii, and the canonical component set. Source: <a href="https://github.com/yzfly/awesome-design-

Network accessline 707

<p>Tokens and primitives behind the Mistral surface — colors grouped by role, the editorial-and-Inter type ladder, radii, and the canonical component set. Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/de

Network accessline 918

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mistral.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.mongodb.html`

Network accessline 6

<title>MongoDB — Inspired Design</title> <meta name="description" content="A MongoDB-inspired marketing page: deep navy-teal hero band, bright leaf-green pill CTAs, code mockup cards, 3-tier pricing with mint-bordered featured tier. Sourced

Network accessline 7

<meta name="description" content="A MongoDB-inspired marketing page: deep navy-teal hero band, bright leaf-green pill CTAs, code mockup cards, 3-tier pricing with mint-bordered featured tier. Sourced from awesome-design-md." /> <link rel="p

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 558

<header class="topnav"><div class="wrap row">   <a class="brand" href="#">     <svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 559

<a class="brand" href="#">     <svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">       <path d="M16 2C16 2 22 8 22 18C22 24 19 29 16 30C13 29 10 24 10 18C10 8 16 2 16 2Z" fill="#00ed64"/>

Network accessline 560

<svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 947

<span class="eyebrow">Design system</span>     <h2 class="heading-1">Bright green on deep teal. The whole story.</h2>     <p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mongodb.html" target="_bl

Network accessline 948

<h2 class="heading-1">Bright green on deep teal. The whole story.</h2>     <p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mongodb.html" target="_blank" rel="noopener" style="color: var(--brand-g

Network accessline 949

<p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mongodb.html" target="_blank" rel="noopener" style="color: var(--brand-green-dark); text-decoration: underline;">DESIGN.md</a>. Dual-mode identity.

Network accessline 1096

<div class="footer-brand">       <a class="brand" href="#">         <svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 1097

<a class="brand" href="#">         <svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">           <path d="M16 2C16 2 22 8 22 18C22 24 19 29 16 30C13 29 10 24 10 18C10 8 16 2 16 2Z" fill="#00ed64"/>

Network accessline 1098

<svg class="glyph" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 1133

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.mongodb.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.nike.html`

Network accessline 6

<title>Nike — Inspired Design</title> <meta name="description" content="A Nike-inspired commerce page: editorial Bebas-style display burned into photography, pure black-and-white retail chrome, pill CTAs, flat product cards on Soft Cloud. S

Network accessline 7

<meta name="description" content="A Nike-inspired commerce page: editorial Bebas-style display burned into photography, pure black-and-white retail chrome, pill CTAs, flat product cards on Soft Cloud. Sourced from awesome-design-md." /> <li

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 1035

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nike.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.nio.html`

Network accessline 6

<title>蔚来 NIO — Design System Study</title> <meta name="description" content="蔚来 NIO 设计语言研究: 白色优雅基底, 天空蓝 accent, NIO House 高端用户生活方式叙事, 换电与 NOMI 体验. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="蔚来 NIO 设计语言研究: 白色优雅基底, 天空蓝 accent, NIO House 高端用户生活方式叙事, 换电与 NOMI 体验. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.c

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 616

<p>蔚来的视觉语言: 大量留白, 极简白底配天空蓝 (#0085FF / #00BFFF), 偶尔以黑色高端 tile 出现. 字体几何 sans, 中性中带克制, 不卖配置, 卖归属感.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nio.html" target="_bl

Network accessline 617

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nio.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 618

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nio.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 770

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nio.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.notion.html`

Network accessline 6

<title>Notion — Inspired Design</title> <meta name="description" content="A Notion-inspired marketing page: deep navy hero band with sticky-note dots, purple rectangular CTA, pastel feature cards, kanban mockup. Sourced from awesome-design-

Network accessline 7

<meta name="description" content="A Notion-inspired marketing page: deep navy hero band with sticky-note dots, purple rectangular CTA, pastel feature cards, kanban mockup. Sourced from awesome-design-md." /> <link rel="preconnect" href="htt

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 826

<div class="section-head">     <p class="h2">The tokens behind every pixel.</p>     <p class="subtitle">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.notion.html" target="_blank" rel="noopener" st

Network accessline 827

<p class="h2">The tokens behind every pixel.</p>     <p class="subtitle">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.notion.html" target="_blank" rel="noopener" style="color: var(--link-blue);">

Network accessline 828

<p class="subtitle">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.notion.html" target="_blank" rel="noopener" style="color: var(--link-blue);">DESIGN.md</a>. Purple primary, navy hero band, multi-

Network accessline 1043

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.notion.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.nvidia.html`

Network accessline 6

<title>NVIDIA — Inspired Design</title> <meta name="description" content="An NVIDIA-inspired marketing page: black hero/footer chapters, paper-white body, NVIDIA Green #76b900 as the single accent, 2px radius, NVIDIA-EMEA-feel Inter at 400/

Network accessline 7

<meta name="description" content="An NVIDIA-inspired marketing page: black hero/footer chapters, paper-white body, NVIDIA Green #76b900 as the single accent, 2px radius, NVIDIA-EMEA-feel Inter at 400/700, decorative green corner squares. So

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 968

<h2 class="section-title">Tokens, by NVIDIA.</h2>       <p class="section-lede">Two-mode surface architecture, a single saturated green accent, 2px radius everywhere, and a corner-square that ships with every reusable card.</p>       <a cla

Network accessline 969

<p class="section-lede">Two-mode surface architecture, a single saturated green accent, 2px radius everywhere, and a corner-square that ships with every reusable card.</p>       <a class="ds-link" href="https://github.com/yzfly/awesome-desi

Network accessline 970

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nvidia.html" target="_blank" rel="noopener">→ Read the full DESIGN.md</a>

Network accessline 1206

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.nvidia.html" target="_blank" rel="noopener">

`assets/web/design.ollama.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Ollama — Inspired Design</title> <meta name="description" content="An Ollama-inspired marketing page and design-system reference: paper-white Markdown-README canv

Network accessline 6

<title>Ollama — Inspired Design</title> <meta name="description" content="An Ollama-inspired marketing page and design-system reference: paper-white Markdown-README canvas, rounded heading face, black pill CTAs, inline curl install pill, te

Network accessline 7

<meta name="description" content="An Ollama-inspired marketing page and design-system reference: paper-white Markdown-README canvas, rounded heading face, black pill CTAs, inline curl install pill, terminal-mockup card with traffic-light do

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 401

<div>       <span class="install-pill">         <span class="mono">curl -fsSL https://ollama.com/install.sh | sh</span>

Network accessline 402

<span class="install-pill">         <span class="mono">curl -fsSL https://ollama.com/install.sh | sh</span>         <span class="copy" title="Copy">

Dangerous shell operationline 403

<span class="mono">curl -fsSL https://ollama.com/install.sh | sh</span>

Network accessline 403

<span class="mono">curl -fsSL https://ollama.com/install.sh | sh</span>

Network accessline 643

<tr>             <td>code-md</td>             <td class="mono" style="font-size:16px;">curl -fsSL https://ollama.com/install.sh | sh</td>

Network accessline 644

<td>code-md</td>             <td class="mono" style="font-size:16px;">curl -fsSL https://ollama.com/install.sh | sh</td>             <td class="meta">ui-monospace · 16 / 400</td>

Dangerous shell operationline 645

<td class="mono" style="font-size:16px;">curl -fsSL https://ollama.com/install.sh | sh</td>

Network accessline 645

<td class="mono" style="font-size:16px;">curl -fsSL https://ollama.com/install.sh | sh</td>

Network accessline 723

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.ollama.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.opencode.html`

Network accessline 6

<title>OpenCode — Inspired Design</title> <meta name="description" content="An OpenCode-inspired marketing page rendered entirely in monospace: warm cream canvas, near-black ink, ASCII bracket markers, 4px-radius interactive elements, and a

Network accessline 7

<meta name="description" content="An OpenCode-inspired marketing page rendered entirely in monospace: warm cream canvas, near-black ink, ASCII bracket markers, 4px-radius interactive elements, and a single dark TUI hero mockup. Sourced from

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">

Network accessline 414

</div>     <div class="install-snippet">       <span class="cmd">curl -fsSL https://opencode.ai/install | bash</span>

Network accessline 415

<div class="install-snippet">       <span class="cmd">curl -fsSL https://opencode.ai/install | bash</span>       <span class="copy" aria-label="copy">

Dangerous shell operationline 416

<span class="cmd">curl -fsSL https://opencode.ai/install | bash</span>

Network accessline 416

<span class="cmd">curl -fsSL https://opencode.ai/install | bash</span>

Network accessline 545

<li>Community Discord</li>       </ul>       <div class="cta-wrap"><a href="#" class="btn btn-secondary" style="width: 100%;">curl ... | bash</a></div>

Network accessline 546

</ul>       <div class="cta-wrap"><a href="#" class="btn btn-secondary" style="width: 100%;">curl ... | bash</a></div>     </div>

Dangerous shell operationline 547

<div class="cta-wrap"><a href="#" class="btn btn-secondary" style="width: 100%;">curl ... | bash</a></div>

Network accessline 547

<div class="cta-wrap"><a href="#" class="btn btn-secondary" style="width: 100%;">curl ... | bash</a></div>

Network accessline 615

<h2 class="heading-md">Design System</h2>   </div>   <p class="body-md" style="margin: 0 0 48px; max-width: 64ch;">A single-font system. Berkeley Mono carries every text role; here it's substituted by JetBrains Mono and IBM Plex Mono. Warm

Network accessline 617

<p class="body-md" style="margin: 0 0 48px; max-width: 64ch;">A single-font system. Berkeley Mono carries every text role; here it's substituted by JetBrains Mono and IBM Plex Mono. Warm cream canvas. 4px radius on interactive elements only

Network accessline 740

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.opencode.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.pinterest.html`

Network accessline 6

<title>Pinspire — Inspired by Pinterest's design system</title> <meta name="description" content="A Pinterest-inspired marketing page: warm-cream chrome, masonry pin grid, fully-rounded pill buttons, single Pinterest-red CTA. Sourced from a

Network accessline 7

<meta name="description" content="A Pinterest-inspired marketing page: warm-cream chrome, masonry pin grid, fully-rounded pill buttons, single Pinterest-red CTA. Sourced from awesome-design-md." /> <link rel="preconnect" href="https://fonts

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 617

<span class="eyebrow" style="color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;">— Design system</span>     <h2 class="display-lg" style="margin: 16px 0;">Get out of the photograph's

Network accessline 618

<h2 class="display-lg" style="margin: 16px 0;">Get out of the photograph's way.</h2>     <p class="body-md" style="color: var(--mute);">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.pinterest.html

Network accessline 619

<p class="body-md" style="color: var(--mute);">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.pinterest.html" target="_blank" rel="noopener" style="color: var(--ink-soft); font-weight: 600; border-

Network accessline 801

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.pinterest.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.playstation.html`

Network accessline 6

<title>PlayStation — Inspired Design</title> <meta name="description" content="A PlayStation-inspired marketing page: three-canvas chapter rhythm of black, white, and PlayStation Blue, fully-rounded pill CTAs, light-weight display type, and

Network accessline 7

<meta name="description" content="A PlayStation-inspired marketing page: three-canvas chapter rhythm of black, white, and PlayStation Blue, fully-rounded pill CTAs, light-weight display type, and dramatic CSS-rendered game key art. Sourced

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 697

<span class="eyebrow">Design System</span>     <h2 class="display-lg">Three canvases. One brand voice.</h2>     <p class="lead" style="color: var(--body-light);">A chapter-driven layout system: pure black, true white, and PlayStation Blue a

Network accessline 698

<h2 class="display-lg">Three canvases. One brand voice.</h2>     <p class="lead" style="color: var(--body-light);">A chapter-driven layout system: pure black, true white, and PlayStation Blue alternate down the page. The chrome is quiet — l

Network accessline 699

<p class="lead" style="color: var(--body-light);">A chapter-driven layout system: pure black, true white, and PlayStation Blue alternate down the page. The chrome is quiet — light-weight type, pill CTAs, 8px cards. Source — <a href="https:/

Network accessline 846

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.playstation.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.posthog.html`

Network accessline 6

<title>PostHog — Inspired Design</title> <meta name="description" content="A PostHog-inspired marketing page: cream canvas, hedgehog marginalia, yellow-orange CTA pill, IBM Plex Sans, olive ink. Sourced from awesome-design-md." /> <link rel

Network accessline 7

<meta name="description" content="A PostHog-inspired marketing page: cream canvas, hedgehog marginalia, yellow-orange CTA pill, IBM Plex Sans, olive ink. Sourced from awesome-design-md." /> <link rel="preconnect" href="https://fonts.googlea

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 559

posthog.<span class="f">init</span>(<span class="s">"phc_yourkey"</span>, {   api_host: <span class="s">"https://eu.posthog.com"</span>,

Network accessline 560

api_host: <span class="s">"https://eu.posthog.com"</span>,

Network accessline 643

<div class="sub">Tokens, type ladder, radius, components — pulled from the captured DESIGN.md.</div>       </div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.posthog.html" target="_blank" rel="noo

Network accessline 644

</div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.posthog.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>     </div>

Network accessline 645

<a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.posthog.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>

Network accessline 823

<a class="float-md" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.posthog.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.qwen.html`

Network accessline 6

<title>通义千问 Qwen — 设计系统研究</title> <meta name="description" content="通义千问 Qwen 设计语言视觉研究: 阿里紫粉渐变 + 二次色 cyan, 开源开放的大模型设计语言. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="通义千问 Qwen 设计语言视觉研究: 阿里紫粉渐变 + 二次色 cyan, 开源开放的大模型设计语言. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 560

<p>Qwen 的视觉语言以紫色为主轴, 向粉色延伸, 偶尔出现 cyan 作为强调色. 这种 "主紫 + 副 cyan" 的双轨色彩策略让界面既有阿里大厂的稳重, 又带技术品牌的灵动.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.qwen.html" target="_bla

Network accessline 561

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.qwen.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 562

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.qwen.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 730

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.qwen.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.qwencloud.html`

Network accessline 8

<meta property="og:title" content="Qwen Cloud — Design System Reference" /> <meta property="og:description" content="A self-contained tribute to Qwen Cloud's AI-Native Cloud visual language: rainbow violet hero gradient, featured model pric

Network accessline 9

<meta property="og:description" content="A self-contained tribute to Qwen Cloud's AI-Native Cloud visual language: rainbow violet hero gradient, featured model pricing tabs, customer-card witness band." /> <link rel="preconnect" href="https

Network accessline 10

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 11

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 12

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Network accessline 926

<div class="prompt-row">           <span class="gt">&gt;</span>           <span>Read <span class="url">https://www.qwencloud.com/skills.md</span> and follow the instructions to install qwencloud skills for me.</span>

Network accessline 927

<span class="gt">&gt;</span>           <span>Read <span class="url">https://www.qwencloud.com/skills.md</span> and follow the instructions to install qwencloud skills for me.</span>           <span class="copied">Copied!</span>

Network accessline 928

<span>Read <span class="url">https://www.qwencloud.com/skills.md</span> and follow the instructions to install qwencloud skills for me.</span>

Network accessline 1307

<p>Qwen Cloud differs from the consumer Qwen page on three axes: <strong>(1)</strong> a four-stop horizontal violet→magenta→purple→blue spectrum reserved for keywords and analyst eyebrows, <strong>(2)</strong> a near-monochrome light surfac

Network accessline 1308

</div>       <a class="ds-source" href="https://www.qwencloud.com/" target="_blank" rel="noopener">View qwencloud.com ↗</a>     </div>

Network accessline 1309

<a class="ds-source" href="https://www.qwencloud.com/" target="_blank" rel="noopener">View qwencloud.com ↗</a>

Network accessline 1476

<a class="src-link" href="https://www.qwencloud.com/" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.raycast.html`

Network accessline 6

<title>Raycast — Inspired Design</title> <meta name="description" content="A Raycast-inspired marketing page: pure near-black canvas, white CTA pill, command-palette mockup as hero, Inter with ss03, hero red stripe gradient. Sourced from aw

Network accessline 7

<meta name="description" content="A Raycast-inspired marketing page: pure near-black canvas, white CTA pill, command-palette mockup as hero, Inter with ss03, hero red stripe gradient. Sourced from awesome-design-md." /> <link rel="preconnec

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 542

<header class="topnav"><div class="wrap row">   <a class="brand" href="#">     <svg class="logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 543

<a class="brand" href="#">     <svg class="logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">       <path d="M3 9.5L12 3l9 6.5v9L12 21l-9-2.5v-9z" stroke="#ff5757" stroke-width="1.6" stroke-linejoin="round"/>

Network accessline 544

<svg class="logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 878

<p class="eyebrow">Design System</p>     <h2 class="display-lg">The tokens behind every pixel.</h2>     <p class="body-lg">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.raycast.html" target="_blan

Network accessline 879

<h2 class="display-lg">The tokens behind every pixel.</h2>     <p class="body-lg">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.raycast.html" target="_blank" rel="noopener" style="color: var(--on-

Network accessline 880

<p class="body-lg">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.raycast.html" target="_blank" rel="noopener" style="color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px;"

Network accessline 1079

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.raycast.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.renault.html`

Network accessline 6

<title>Renault — Inspired Design</title> <meta name="description" content="A Renault-inspired marketing page: high-contrast black & white canvas with Sunlight Yellow accent, square-cornered tiles, NouvelR-style display type. Photography-fir

Network accessline 7

<meta name="description" content="A Renault-inspired marketing page: high-contrast black & white canvas with Sunlight Yellow accent, square-cornered tiles, NouvelR-style display type. Photography-first automotive system. Sourced from awesom

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Network accessline 991

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.renault.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.replicate.html`

Network accessline 6

<title>Replicate — Inspired Design</title> <meta name="description" content="A Replicate-inspired marketing page: cream canvas, hot-orange stamp, oversized rb-freigeist-neue display, dark code wells, full-rounded interactive shapes. Sourced

Network accessline 7

<meta name="description" content="A Replicate-inspired marketing page: cream canvas, hot-orange stamp, oversized rb-freigeist-neue display, dark code wells, full-rounded interactive shapes. Sourced from awesome-design-md." /> <link rel="pre

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 770

<span class="ky">print</span>(output) <span class="cm"># https://replicate.delivery/yhqm/...png</span></div>

Network accessline 771

<span class="cm"># https://replicate.delivery/yhqm/...png</span></div>

Network accessline 870

<h2 class="section-title">Tokens, by the<br>workbench.</h2>       <p class="section-lede">An honest look at the building blocks — cream canvas, hot-orange stamp, three families, full-rounded interactives. No surprises, no second accent.</p>

Network accessline 871

<p class="section-lede">An honest look at the building blocks — cream canvas, hot-orange stamp, three families, full-rounded interactives. No surprises, no second accent.</p>       <a class="ds-link mono" href="https://github.com/yzfly/awes

Network accessline 872

<a class="ds-link mono" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.replicate.html" target="_blank" rel="noopener">→ Read the full DESIGN.md</a>

Network accessline 1085

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.replicate.html" target="_blank" rel="noopener">

`assets/web/design.resend.html`

Network accessline 6

<title>Resend — Inspired Design</title> <meta name="description" content="A Resend-inspired marketing page: true black canvas, oversized editorial serif hero, atmospheric glows, code window + white email card. Sourced from awesome-design-md

Network accessline 7

<meta name="description" content="A Resend-inspired marketing page: true black canvas, oversized editorial serif hero, atmospheric glows, code window + white email card. Sourced from awesome-design-md." /> <link rel="preconnect" href="https

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 181

.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px} .tier li{display:flex;gap:10px;color:var(--body)} .tier li::before{content:"";flex:0 0 auto;width:14px;height:14px;color:var(--accent-gr

Network accessline 183

.tier li::before{content:"";flex:0 0 auto;width:14px;height:14px;color:var(--accent-green);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311ff99' stroke-width

Access to secretsline 310
```
[Credential-related source omitted]
```
Access to secretsline 333
```
[Credential-related source omitted]
```

Network accessline 480

<div class="sub">Tokens, type ladder, radius, components — pulled from the captured DESIGN.md.</div>       </div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.resend.html" target="_blank" rel="noop

Network accessline 481

</div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.resend.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>     </div>

Network accessline 482

<a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.resend.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>

Access to secretsline 586
```
[Credential-related source omitted]
```

Network accessline 627

<a class="float-md" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.resend.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.revolut.html`

Network accessline 6

<title>Revolut — Inspired Design</title> <meta name="description" content="A Revolut-inspired marketing page: full-bleed black canvas, Aeonik-style 136px display headlines, white pill CTAs, cobalt-violet featured plan, premium card mockup c

Network accessline 7

<meta name="description" content="A Revolut-inspired marketing page: full-bleed black canvas, Aeonik-style 136px display headlines, white pill CTAs, cobalt-violet featured plan, premium card mockup centerpiece. Sourced from awesome-design-m

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 622

<h2 class="display-lg aeon" style="margin-top: 12px;">Tokens, type, components.</h2>       </div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.revolut.html" target

Network accessline 623

</div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.revolut.html" target="_blank">awesome-design-md / revolut</a></div>     </div>

Network accessline 624

<div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.revolut.html" target="_blank">awesome-design-md / revolut</a></div>

Network accessline 787

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.revolut.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.runwayml.html`

Network accessline 6

<title>Runway — Inspired Design</title> <meta name="description" content="A Runway-inspired marketing tribute: cinematic dark canvas, abcNormal-style display via DM Sans, full-bleed photographic UI, cool-slate neutrals, zero shadows. Source

Network accessline 7

<meta name="description" content="A Runway-inspired marketing tribute: cinematic dark canvas, abcNormal-style display via DM Sans, full-bleed photographic UI, cool-slate neutrals, zero shadows. Sourced from awesome-design-md." /> <link rel=

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,450;9..40,500;9..40,600&family=Inter:wght@400;450;500;600&display=swap" rel="stylesheet">

Network accessline 1168

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.runwayml.html" target="_blank" rel="noopener">

`assets/web/design.sanity.html`

Network accessline 6

<title>Sanity — Inspired Design</title> <meta name="description" content="A Sanity-inspired marketing tribute: near-black canvas, achromatic gray ramp, coral-red CTA, electric-blue hover state, dev-tool studio mockup with two-pane content +

Network accessline 7

<meta name="description" content="A Sanity-inspired marketing tribute: near-black canvas, achromatic gray ramp, coral-red CTA, electric-blue hover state, dev-tool studio mockup with two-pane content + code. Sourced from awesome-design-md."

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 1277

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.sanity.html" target="_blank" rel="noopener">

`assets/web/design.sentry.html`

Network accessline 6

<title>Sentri — Inspired Design</title> <meta name="description" content="A Sentri-inspired marketing page: violet-midnight canvas, lime keyword highlight chip, sticker mascots, stack-trace mockup, Rubik + Monaco. Sourced from awesome-desig

Network accessline 7

<meta name="description" content="A Sentri-inspired marketing page: violet-midnight canvas, lime keyword highlight chip, sticker mascots, stack-trace mockup, Rubik + Monaco. Sourced from awesome-design-md." /> <link rel="preconnect" href="h

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">

Network accessline 178

.lime-divider{height:18px;width:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 10 Q 30 0 60 10 T 120 10 T 180 10 T 240 10 T 300 10 T 36

Network accessline 244

/* —— Footer (light) —— */ .foot{background:var(--canvas-light);color:var(--ink-deep);padding:48px 32px 32px;position:relative} .foot::before{content:"";display:block;height:18px;margin-bottom:32px;background-image:url("data:image/svg+xml;u

Network accessline 245

.foot{background:var(--canvas-light);color:var(--ink-deep);padding:48px 32px 32px;position:relative} .foot::before{content:"";display:block;height:18px;margin-bottom:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.

Network accessline 246

.foot::before{content:"";display:block;height:18px;margin-bottom:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 10 Q 30 0 60 10 T 120 1

Network accessline 454

Sentri.<span class="f">init</span>({   dsn: <span class="s">"https://abc@o0.ingest.sentri.io/0"</span>,

Network accessline 455

dsn: <span class="s">"https://abc@o0.ingest.sentri.io/0"</span>,

Network accessline 542

<div class="sub">Tokens, type ladder, radius, components — pulled from the captured DESIGN.md.</div>       </div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.sentry.html" target="_blank" rel="noop

Network accessline 543

</div>       <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.sentry.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>     </div>

Network accessline 544

<a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.sentry.html" target="_blank" rel="noopener">View source DESIGN.md ↗</a>

Network accessline 691

<a class="float-md" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.sentry.html" target="_blank" rel="noopener">VIEW DESIGN.MD ↗</a>

`assets/web/design.shopify.html`

Network accessline 6

<title>Shopify — Inspired Design</title> <meta name="description" content="A Shopify-inspired marketing page: cream canvas, aloe and pistachio greens, thin Neue Haas display type, pill buttons, merchant dashboard mockup. Sourced from awesom

Network accessline 7

<meta name="description" content="A Shopify-inspired marketing page: cream canvas, aloe and pistachio greens, thin Neue Haas display type, pill buttons, merchant dashboard mockup. Sourced from awesome-design-md." /> <link rel="preconnect" h

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Network accessline 1180

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.shopify.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.slack.html`

Network accessline 6

<title>Slacc — Inspired Design</title> <meta name="description" content="A Slack-inspired marketing page: deep aubergine primary, cream-lavender pastel-mesh hero, floating product UI mockups, pill CTAs at 90px radius. Sourced from awesome-d

Network accessline 7

<meta name="description" content="A Slack-inspired marketing page: deep aubergine primary, cream-lavender pastel-mesh hero, floating product UI mockups, pill CTAs at 90px radius. Sourced from awesome-design-md." /> <link rel="preconnect" hr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 1243

<div class="ds-intro">       <h2>The tokens behind the page.</h2>       <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.slack.html" target="_blank" rel="noopener">DESIGN.md</a>. Aubergine pr

Network accessline 1244

<h2>The tokens behind the page.</h2>       <p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.slack.html" target="_blank" rel="noopener">DESIGN.md</a>. Aubergine primary, cream-lavender hero, p

Network accessline 1245

<p>Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.slack.html" target="_blank" rel="noopener">DESIGN.md</a>. Aubergine primary, cream-lavender hero, pill 90px buttons, blue inline links — the b

Network accessline 1469

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.slack.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.spacex.html`

Network accessline 6

<title>SpaceX — Inspired Design</title> <meta name="description" content="A SpaceX-inspired marketing page: pure black canvas, full-bleed CSS-rendered rocket and Mars photography stand-ins, uppercase D-DIN display with positive tracking, an

Network accessline 7

<meta name="description" content="A SpaceX-inspired marketing page: pure black canvas, full-bleed CSS-rendered rocket and Mars photography stand-ins, uppercase D-DIN display with positive tracking, and a single ghost-pill CTA per band. Sour

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Network accessline 565

<span class="eyebrow" style="color: var(--ink-mute);">Design System</span>     <h2 class="display-lg" style="color: var(--ink); margin-top: 16px;">Black, white, and the photograph.</h2>     <p style="font-size: 16px; line-height: 1.7; max-w

Network accessline 566

<h2 class="display-lg" style="color: var(--ink); margin-top: 16px;">Black, white, and the photograph.</h2>     <p style="font-size: 16px; line-height: 1.7; max-width: 620px; margin: 16px 0 0; color: var(--ink-mute);">No accent colors. No dr

Network accessline 567

<p style="font-size: 16px; line-height: 1.7; max-width: 620px; margin: 16px 0 0; color: var(--ink-mute);">No accent colors. No drop shadows. No gradients on chrome. Photography is the design system; D-DIN uppercase is the voice. Source — <a

Network accessline 692

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.spacex.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.spotify.html`

Network accessline 6

<title>Spotify — Design System Study</title> <meta name="description" content="A visual study of Spotify's design language: near-black cocoon, singular Spotify Green accent, pill-and-circle geometry, uppercase tracking. Marketing demo + des

Network accessline 7

<meta name="description" content="A visual study of Spotify's design language: near-black cocoon, singular Spotify Green accent, pill-and-circle geometry, uppercase tracking. Marketing demo + design system reference." /> <link rel="preconne

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 589

<p>Spotify's UI is a study in restraint — five shades of charcoal, one functional green, and a strict geometry of pills and circles. Below: the tokens behind the cocoon.</p>       </div>       <a class="ds-source" href="https://github.com/y

Network accessline 590

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.spotify.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 591

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.spotify.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 792

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.spotify.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.starbucks.html`

Network accessline 6

<title>Starbucks — Design System Study</title> <meta name="description" content="A visual study of Starbucks's design language: warm-cream canvas, four-tier green system, full-pill buttons, scale(0.95) press, floating Frap CTA. Marketing de

Network accessline 7

<meta name="description" content="A visual study of Starbucks's design language: warm-cream canvas, four-tier green system, full-pill buttons, scale(0.95) press, floating Frap CTA. Marketing demo + design system reference." /> <link rel="pr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;500;600&family=Kalam:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 380

<div class="hero-image">       <div class="hero-cup">         <svg class="cup-svg" width="200" height="240" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 381

<div class="hero-cup">         <svg class="cup-svg" width="200" height="240" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">           <!-- lid -->

Network accessline 382

<svg class="cup-svg" width="200" height="240" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 658

<p>Starbucks's system is disciplined about where each green goes — Starbucks for headings, Accent for CTAs, House for bands, Uplift for decoration. Gold appears only for Rewards ceremony. Below: the tokens behind the café.</p>       </div>

Network accessline 659

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.starbucks.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 660

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.starbucks.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 846

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.starbucks.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.stripe.html`

Network accessline 6

<title>Stripe — Inspired Design</title> <meta name="description" content="A Stripe-inspired marketing page: gradient mesh hero, Sohne-thin display, indigo pill CTAs, tabular numerics. Sourced from awesome-design-md." /> <link rel="preconnec

Network accessline 7

<meta name="description" content="A Stripe-inspired marketing page: gradient mesh hero, Sohne-thin display, indigo pill CTAs, tabular numerics. Sourced from awesome-design-md." /> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

Network accessline 442

<span class="k">session</span> = <span class="v">Stripi::Checkout::Session</span>.<span class="n">create</span>(   <span class="n">mode:</span>          <span class="s">"subscription"</span>,   <span class="n">success_url:</span>   <span cl

Network accessline 443

<span class="n">mode:</span>          <span class="s">"subscription"</span>,   <span class="n">success_url:</span>   <span class="s">"https://example.com/ok"</span>,   <span class="n">cancel_url:</span>    <span class="s">"https://example.c

Network accessline 444

<span class="n">success_url:</span>   <span class="s">"https://example.com/ok"</span>,

Network accessline 445

<span class="n">cancel_url:</span>    <span class="s">"https://example.com/cancel"</span>,

Network accessline 607

<p class="section-eyebrow">Design system</p>     <h2>The tokens behind every pixel.</h2>     <p>Every color, character, and curve on this page comes from a documented token set. Below are the canonical values, rendered in their own voice —

Network accessline 608

<h2>The tokens behind every pixel.</h2>     <p>Every color, character, and curve on this page comes from a documented token set. Below are the canonical values, rendered in their own voice — sourced directly from the brand's <a href="https:

Network accessline 609

<p>Every color, character, and curve on this page comes from a documented token set. Below are the canonical values, rendered in their own voice — sourced directly from the brand's <a href="https://github.com/yzfly/awesome-design-html/blob/

Network accessline 776

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.stripe.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.supabase.html`

Network accessline 6

<title>Supabaze — Inspired Design</title> <meta name="description" content="A Supabaze-inspired marketing page: white canvas, single emerald CTA, monochrome typography, composited Postgres dashboard mockups. Sourced from awesome-design-md."

Network accessline 7

<meta name="description" content="A Supabaze-inspired marketing page: white canvas, single emerald CTA, monochrome typography, composited Postgres dashboard mockups. Sourced from awesome-design-md." /> <link rel="preconnect" href="https://f

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 439

<header class="topnav"><div class="wrap row">   <a class="brand" href="#">     <svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 440

<a class="brand" href="#">     <svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">       <path d="M63.7 110.3c-2.8 3.5-8.4 1.6-8.5-2.9L53.8 65h36.6c6.6 0 10.4 7.7 6.3 12.9l-32.9 32.4z" fill="#3ecf

Network accessline 441

<svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 786

<span class="eyebrow">Design system</span>     <h2 class="display-xl">A monochrome system with one chromatic event.</h2>     <p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.supabase.html" target=

Network accessline 787

<h2 class="display-xl">A monochrome system with one chromatic event.</h2>     <p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.supabase.html" target="_blank" rel="noopener" style="text-decoration:

Network accessline 788

<p>Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.supabase.html" target="_blank" rel="noopener" style="text-decoration: underline;">DESIGN.md</a>. White canvas commitment. Single emerald primary. C

Network accessline 927

<div class="footer-brand">       <a class="brand" href="#">         <svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 928

<a class="brand" href="#">         <svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">           <path d="M63.7 110.3c-2.8 3.5-8.4 1.6-8.5-2.9L53.8 65h36.6c6.6 0 10.4 7.7 6.3 12.9l-32.9 32.4z" fil

Network accessline 929

<svg class="glyph" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

Network accessline 964

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.supabase.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.superhuman.html`

Network accessline 9

<meta property="og:description" content="AI-native inbox built for high-performing teams. 4 hours saved every week, every person."> <meta property="og:type" content="website"> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 10

<meta property="og:type" content="website"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;460;500;540;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 849

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.superhuman.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.tencent-cloud.html`

Network accessline 6

<title>腾讯云 Tencent Cloud — 设计语言研究</title> <meta name="description" content="腾讯云视觉语言的设计研究：白底 + 腾讯蓝 #006EFF 单色锚点、冷感企业蓝渐变、4–8px 圆角、产业互联网叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="腾讯云视觉语言的设计研究：白底 + 腾讯蓝 #006EFF 单色锚点、冷感企业蓝渐变、4–8px 圆角、产业互联网叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crosso

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 560

<p>腾讯云的视觉语言用单一的腾讯蓝 #006EFF 锚定专业感:大量留白、4–8px 圆角、克制的渐变、isometric 3D 插画。每一个 token 都为"产业互联网"这一叙事服务。</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tencent-cloud.html" t

Network accessline 561

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tencent-cloud.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 562

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tencent-cloud.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 621

<tr><td class="token">--btn</td><td class="sample" style="font-size:14px;font-weight:500">立即购买</td><td>13 / 14 / 15</td><td>500</td><td>normal</td></tr>           <tr><td class="token">--caption</td><td class="sample" style="font-size:12px;

Network accessline 622

<tr><td class="token">--caption</td><td class="sample" style="font-size:12px;font-weight:400;color:#86909c">SLA 99.995%</td><td>12</td><td>400</td><td>normal</td></tr>           <tr><td class="token">--mono</td><td class="sample" style="fon

Network accessline 623

<tr><td class="token">--mono</td><td class="sample" style="font-family:JetBrains Mono,monospace;font-size:12px">curl -X POST</td><td>11 / 12</td><td>400 / 500</td><td>normal</td></tr>

Network accessline 751

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tencent-cloud.html" target="_blank" rel="noopener">查看源码 ↗</a>

`assets/web/design.tesla.html`

Network accessline 9

<meta property="og:description" content="One vehicle per viewport. Silhouettes, specs and translucent pills — the structure itself is the brand." /> <meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.go

Network accessline 10

<meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />

Network accessline 534

<p>Tesla 的辨识度不在配色, 在信息架构本身: 一屏一辆车, 滚动即换幕. 每一幕的剧本完全相同 — 名字, 一句话, 一辆车, 三个数字, 两枚按钮 — 重复本身成为节奏, 黑与银交替成为剪辑. 页面不解释产品, 它放映产品.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/desig

Network accessline 535

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tesla.html" target="_blank" rel="noopener">View source ↗</a>     </div>

Network accessline 536

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tesla.html" target="_blank" rel="noopener">View source ↗</a>

Network accessline 658

<a href="#energy">Energy</a>     <a href="#design-system">Design System</a>     <a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">GitHub</a>

Network accessline 659

<a href="#design-system">Design System</a>     <a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">GitHub</a>   </div>

Network accessline 660

<a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">GitHub</a>

Network accessline 666

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.tesla.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.theverge.html`

Network accessline 6

<title>The Verge — Inspired Design</title> <meta name="description" content="A Verge-inspired editorial tribute: canvas-black, acid-mint and ultraviolet hazard accents, Manuka-style 107px display via Archivo Black, mono uppercase labels, St

Network accessline 7

<meta name="description" content="A Verge-inspired editorial tribute: canvas-black, acid-mint and ultraviolet hazard accents, Manuka-style 107px display via Archivo Black, mono uppercase labels, StoryStream timeline, color-block story tiles

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;500;700&family=Newsreader:opsz,wght@6..72,400&display=swap" rel="stylesheet">

Network accessline 1234

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.theverge.html" target="_blank" rel="noopener">

`assets/web/design.together.html`

Network accessline 6

<title>Together AI — Inspired Design</title> <meta name="description" content="A Together AI-inspired marketing page and design system reference: alternating dark-navy and white bands, three-color orange-magenta-periwinkle gradient ribbon,

Network accessline 7

<meta name="description" content="A Together AI-inspired marketing page and design system reference: alternating dark-navy and white bands, three-color orange-magenta-periwinkle gradient ribbon, uppercase mono labels, giant wordmark sign-of

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 758

<span class="mono-eye" style="color: var(--body);">DESIGN SYSTEM · V.ALPHA</span>       <h2>The system in the open.</h2>       <p>Tokens and primitives behind the Together surface — colors grouped by role, the display-sans + uppercase-mono

Network accessline 759

<h2>The system in the open.</h2>       <p>Tokens and primitives behind the Together surface — colors grouped by role, the display-sans + uppercase-mono ladder, the lightly-rounded radius scale, and the canonical component set. Source: <a hr

Network accessline 760

<p>Tokens and primitives behind the Together surface — colors grouped by role, the display-sans + uppercase-mono ladder, the lightly-rounded radius scale, and the canonical component set. Source: <a href="https://github.com/yzfly/awesome-de

Network accessline 958

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.together.html" target="_blank" rel="noopener">VIEW DESIGN.MD ↗</a>

`assets/web/design.uber.html`

Network accessline 6

<title>Uber — Inspired Design</title> <meta name="description" content="An Uber-inspired marketing page: black-and-white duet, 999px pill CTAs, sentence-case display type, ride-request form card, polarity-flipped promo bands. Sourced from a

Network accessline 7

<meta name="description" content="An Uber-inspired marketing page: black-and-white duet, 999px pill CTAs, sentence-case display type, ride-request form card, polarity-flipped promo bands. Sourced from awesome-design-md." /> <link rel="preco

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Network accessline 1216

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.uber.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.vercel.html`

Network accessline 6

<title>Vercel — Inspired Design</title> <meta name="description" content="A Vercel-inspired marketing page: stark ink-on-white duet, mesh gradient hero, 100px pill CTAs, geist-feel Inter, mono captions. Sourced from awesome-design-md." /> <

Network accessline 7

<meta name="description" content="A Vercel-inspired marketing page: stark ink-on-white duet, mesh gradient hero, 100px pill CTAs, geist-feel Inter, mono captions. Sourced from awesome-design-md." /> <link rel="preconnect" href="https://font

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

Network accessline 849

<div class="gray">› Building 47 routes...</div>           <div class="gray">› Uploading 312 files (2.1 MB)...</div>           <div><span class="ok">✓</span> Production: <span class="url">https://app.vercell.app</span> <span class="gray">[re

Network accessline 850

<div class="gray">› Uploading 312 files (2.1 MB)...</div>           <div><span class="ok">✓</span> Production: <span class="url">https://app.vercell.app</span> <span class="gray">[ready in 8.3s]</span></div>         </div>

Network accessline 851

<div><span class="ok">✓</span> Production: <span class="url">https://app.vercell.app</span> <span class="gray">[ready in 8.3s]</span></div>

Network accessline 1064

<p class="eyebrow">// DESIGN SYSTEM</p>       <h2>Ink, white, and one mesh.</h2>       <p>Vercel's chrome is one of the cleanest stark systems on the web — black ink on near-white canvas, a 200-step gray scale, mono captions for technical v

Network accessline 1065

<h2>Ink, white, and one mesh.</h2>       <p>Vercel's chrome is one of the cleanest stark systems on the web — black ink on near-white canvas, a 200-step gray scale, mono captions for technical voice, and a multi-stop mesh gradient as the en

Network accessline 1066

<p>Vercel's chrome is one of the cleanest stark systems on the web — black ink on near-white canvas, a 200-step gray scale, mono captions for technical voice, and a multi-stop mesh gradient as the entire decoration. Tokens below are sourced

Network accessline 1305

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.vercel.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.vodafone.html`

Network accessline 9

<meta property="og:description" content="Unlimited 5G, gigabit broadband, business connectivity. The most reliable network, built for everyone."> <meta property="og:type" content="website"> <link rel="preconnect" href="https://fonts.googlea

Network accessline 10

<meta property="og:type" content="website"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Network accessline 721

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.vodafone.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.voltagent.html`

Network accessline 6

<title>Voltagent — Inspired Design</title> <meta name="description" content="A Voltagent-inspired marketing page: near-black canvas, single electric-green accent, hairline-bordered feature cards, Inter + SF Mono. Looks like documentation th

Network accessline 7

<meta name="description" content="A Voltagent-inspired marketing page: near-black canvas, single electric-green accent, hairline-bordered feature cards, Inter + SF Mono. Looks like documentation that decided to sell something. Sourced from

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 864

<h2 class="section-title">Tokens, by Voltagent.</h2>       <p class="section-lede">Near-black canvas, one electric-green accent, hairline-bordered cards, Inter + SF Mono. The brand reads as documentation that decided to also sell something.

Network accessline 865

<p class="section-lede">Near-black canvas, one electric-green accent, hairline-bordered cards, Inter + SF Mono. The brand reads as documentation that decided to also sell something.</p>       <a class="ds-link" href="https://github.com/yzfl

Network accessline 866

<a class="ds-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.voltagent.html" target="_blank" rel="noopener">READ THE FULL DESIGN.MD →</a>

Network accessline 1051

<a class="floating-design-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.voltagent.html" target="_blank" rel="noopener">

`assets/web/design.warp.html`

Network accessline 6

<title>Warp — Inspired Design</title> <meta name="description" content="A Warp-inspired marketing page: warm-dark canvas, off-white CTAs, terminal mockup as protagonist, tight 3-4px radii, Inter + DM Mono + Instrument Serif italic moments.

Network accessline 7

<meta name="description" content="A Warp-inspired marketing page: warm-dark canvas, off-white CTAs, terminal mockup as protagonist, tight 3-4px radii, Inter + DM Mono + Instrument Serif italic moments. Sourced from awesome-design-md." /> <l

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">

Network accessline 554

<div class="term-line term-out">Creating pull request for <span class="term-yellow">retry-backoff</span> → <span class="term-blue">main</span></div>         <div class="term-line term-ok">✓ Draft PR #482 created</div>         <div class="te

Network accessline 555

<div class="term-line term-ok">✓ Draft PR #482 created</div>         <div class="term-line term-mute">  https://github.com/team/queue/pull/482</div>         <div class="term-line"><span class="term-prompt">⏵</span> <span class="term-cursor"

Network accessline 556

<div class="term-line term-mute">  https://github.com/team/queue/pull/482</div>

Network accessline 745

</div>       <a href="#" class="btn btn-primary">Download .deb</a>       <div class="cmd">curl -fsSL warp.dev/get.sh | sh</div>

Network accessline 746

<a href="#" class="btn btn-primary">Download .deb</a>       <div class="cmd">curl -fsSL warp.dev/get.sh | sh</div>     </div>

Dangerous shell operationline 747

<div class="cmd">curl -fsSL warp.dev/get.sh | sh</div>

Network accessline 747

<div class="cmd">curl -fsSL warp.dev/get.sh | sh</div>

Network accessline 765

<p class="eyebrow">Design System</p>     <h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.w

Network accessline 766

<h2 class="display-md">The tokens behind every pixel.</h2>     <p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.warp.html" target="_blank" rel="noopener"

Network accessline 767

<p class="body-lg" style="margin-top: 16px;">Source: <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.warp.html" target="_blank" rel="noopener" style="color: var(--ink); text-decoration: underline; text-unde

Network accessline 940

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.warp.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.webflow.html`

Network accessline 6

<title>Webflow — Inspired Design</title> <meta name="description" content="A Webflow-inspired marketing surface: near-black #080808 primary against generous white canvas, five-stop chromatic category palette (purple/pink/blue/orange/green),

Network accessline 7

<meta name="description" content="A Webflow-inspired marketing surface: near-black #080808 primary against generous white canvas, five-stop chromatic category palette (purple/pink/blue/orange/green), and a full-bleed visual designer mockup

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;550;600&family=Inconsolata:wght@400;500&display=swap" rel="stylesheet">

Network accessline 458

<span class="toolicon">↻</span>         <span class="pill">Production · v2.4</span>         <span class="url">https://acme.io/products/launch</span>

Network accessline 459

<span class="pill">Production · v2.4</span>         <span class="url">https://acme.io/products/launch</span>         <div class="right">

Network accessline 460

<span class="url">https://acme.io/products/launch</span>

Network accessline 855

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.webflow.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.wechat.html`

Network accessline 6

<title>微信 WeChat — 设计系统研究 · 一个生活方式</title> <meta name="description" content="微信 (WeChat) 设计语言视觉研究: 让聊天流本身成为品牌 — #EDEDED 聊天背景, #95EC69 己方气泡, 红包与转账卡片, 朋友圈九宫格, 小程序宫格与微信支付. 克制到近乎没有设计的设计. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https:

Network accessline 7

<meta name="description" content="微信 (WeChat) 设计语言视觉研究: 让聊天流本身成为品牌 — #EDEDED 聊天背景, #95EC69 己方气泡, 红包与转账卡片, 朋友圈九宫格, 小程序宫格与微信支付. 克制到近乎没有设计的设计. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preco

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />

Network accessline 620

<p>微信的设计语言是 "退后一步": 大面积的白与浅灰把舞台让给内容, 品牌绿只在按钮, 角标和那个支付成功的对勾上出现. 真正的辨识度藏在结构里 — #EDEDED 的聊天背景, #95EC69 的己方气泡, 橙金色的红包, 这些不是装饰, 是十亿人的肌肉记忆.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/a

Network accessline 621

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wechat.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 622

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wechat.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 799

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wechat.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.wenxin.html`

Network accessline 6

<title>文心一言 — 设计系统研究</title> <meta name="description" content="文心一言设计语言视觉研究: 百度蓝紫双色梦幻渐变, 知识增强的中国大模型设计语言. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="文心一言设计语言视觉研究: 百度蓝紫双色梦幻渐变, 知识增强的中国大模型设计语言. 营销 demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />

Network accessline 572

<p>文心一言的视觉系统由百度蓝出发, 向紫色过渡, 偶尔触及粉色高光. 这套渐变体系是知识增强大模型的视觉具象 — 蓝色稳重, 紫色想象, 粉色未来.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wenxin.html" target="_blank" rel="noopen

Network accessline 573

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wenxin.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 574

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wenxin.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 744

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wenxin.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.wired.html`

Network accessline 9

<meta property="og:description" content="Design research: the front-page grid as brand. Hairline rules, block masthead, duotone panels, neon accents." /> <meta property="og:type" content="website" /> <link rel="preconnect" href="https://fon

Network accessline 10

<meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 11

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 12

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 13

<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="styleshee

Network accessline 539

<p>WIRED's identity is newspaper discipline electrified: 1px black hairlines doing all the structure, black-on-white typography doing all the talking, and three neon accents used like punctuation — never like paint. Nothing is rounded. Noth

Network accessline 540

</div>       <a class="ds-src" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wired.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 541

<a class="ds-src" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wired.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 679

<li><a href="#design-system">Design System</a></li>           <li><a href="#daily">The Daily</a></li>           <li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">Repository</a></li>

Network accessline 680

<li><a href="#daily">The Daily</a></li>           <li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">Repository</a></li>         </ul>

Network accessline 681

<li><a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">Repository</a></li>

Network accessline 692

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wired.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.wise.html`

Network accessline 6

<title>Wise — Inspired Design</title> <meta name="description" content="A Wise-inspired global money-transfer marketing page: sage-tinted canvas, ultra-heavy weight-900 display sans, lime-green CTA pills, currency converter signature card.

Network accessline 7

<meta name="description" content="A Wise-inspired global money-transfer marketing page: sage-tinted canvas, ultra-heavy weight-900 display sans, lime-green CTA pills, currency converter signature card. Sourced from awesome-design-md." /> <l

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">

Network accessline 562

<h2>Tokens, type and components.</h2>       </div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wise.html" target="_blank">awesome-design-md / wise</a></div>

Network accessline 563

</div>       <div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wise.html" target="_blank">awesome-design-md / wise</a></div>     </div>

Network accessline 564

<div class="ds-meta">Sourced from <a href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wise.html" target="_blank">awesome-design-md / wise</a></div>

Network accessline 718

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.wise.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.xai.html`

Network accessline 6

<title>xAI — Inspired Design</title> <meta name="description" content="An xAI-inspired marketing page and design system reference: strict near-black canvas, white outline pills, Universal Sans display with negative tracking, mono uppercase

Network accessline 7

<meta name="description" content="An xAI-inspired marketing page and design system reference: strict near-black canvas, white outline pills, Universal Sans display with negative tracking, mono uppercase eyebrows. Sourced from awesome-design

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 622

<div class="eyebrow-mono">DESIGN SYSTEM · V.ALPHA</div>       <h2>The system in the open.</h2>       <p>Tokens and primitives behind the xAI marketing surface — colors grouped by role, the Universal-Sans-and-Geist-Mono ladder, the radius sc

Network accessline 623

<h2>The system in the open.</h2>       <p>Tokens and primitives behind the xAI marketing surface — colors grouped by role, the Universal-Sans-and-Geist-Mono ladder, the radius scale, and the canonical component set. Source: <a href="https:/

Network accessline 624

<p>Tokens and primitives behind the xAI marketing surface — colors grouped by role, the Universal-Sans-and-Geist-Mono ladder, the radius scale, and the canonical component set. Source: <a href="https://github.com/yzfly/awesome-design-html/b

Network accessline 804

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xai.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.xiaohongshu.html`

Network accessline 8

<meta property="og:title" content="小红书 Xiaohongshu — Design System Reference" /> <meta property="og:description" content="A self-contained tribute to xiaohongshu.com/explore: signature red #FF2442, left category rail, true masonry note grid

Network accessline 9

<meta property="og:description" content="A self-contained tribute to xiaohongshu.com/explore: signature red #FF2442, left category rail, true masonry note grid with variable-height covers, white cards with hover-lift, red heart + gray count

Network accessline 10

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 11

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 12

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Network accessline 709

<span class="brand-mark" aria-label="小红书">         <!-- Stylized little-red-book mark -->         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 710

<!-- Stylized little-red-book mark -->         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">           <rect x="4" y="3" width="16" height="18" rx="2" fill="#fff"/>

Network accessline 711

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Network accessline 1173

<p>从 <strong>xiaohongshu.com/explore</strong> 的探索页提取的代币 token：品牌红 <span class="mono" style="color:var(--red)">#FF2442</span> 的红色锚点、PingFang SC 字体阶梯、瀑布流 16px 圆角白卡、999px 胶囊按钮 + 输入框、红色 heart icon + 灰色数字、左侧分类胶囊导航。Light-only，不做暗色模式。</p>       </

Network accessline 1174

</div>       <a class="ds-source" href="https://www.xiaohongshu.com/explore" target="_blank" rel="noreferrer noopener">View source ↗</a>     </div>

Network accessline 1175

<a class="ds-source" href="https://www.xiaohongshu.com/explore" target="_blank" rel="noreferrer noopener">View source ↗</a>

Network accessline 1346

<a class="src-link" href="https://www.xiaohongshu.com/explore" target="_blank" rel="noreferrer noopener">

`assets/web/design.xiaomi-ev.html`

Network accessline 6

<title>小米汽车 Xiaomi EV — Design System Study</title> <meta name="description" content="小米汽车 SU7 / SU7 Ultra 设计语言研究: 黑色为底, 极速红与小米橙双 accent, 性能数据感, 跑车叙事. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="小米汽车 SU7 / SU7 Ultra 设计语言研究: 黑色为底, 极速红与小米橙双 accent, 性能数据感, 跑车叙事. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" c

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 557

<p>小米汽车的视觉语言: 大面积纯黑 + 小米橙作为品牌信号 + 极速红专属性能叙事. 字体偏重 800-900 数据感, 圆角克制, 跑车科技混合.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi-ev.html" target="_blank" rel="noo

Network accessline 558

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi-ev.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 559

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi-ev.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 709

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi-ev.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.xiaomi.html`

Network accessline 6

<title>小米 Xiaomi — 设计语言研究</title> <meta name="description" content="小米视觉语言的设计研究：极简白底 + 小米橙 #FF6900 单色锚点、Apple-style 克制布局、为发烧而生的性价比叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="小米视觉语言的设计研究：极简白底 + 小米橙 #FF6900 单色锚点、Apple-style 克制布局、为发烧而生的性价比叙事。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" c

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 494

<p>小米的视觉语言借鉴 Apple 的极简骨架,但把灰阶替换为更鲜活的小米橙 #FF6900。 大量留白、巨大的产品图、强烈的负字距标题 — 用最少的元素讲最饱满的产品故事。</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi.html" target="_blank"

Network accessline 495

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 496

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 666

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.xiaomi.html" target="_blank" rel="noopener">查看源码 ↗</a>

`assets/web/design.yuque.html`

Network accessline 6

<title>语雀 Yuque — 设计语言研究</title> <meta name="description" content="语雀视觉语言的设计研究：白底 + 语雀绿 #31CC79 + 衬线标题书卷气、温暖琥珀点缀、文人感东方知识工具美学。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 7

<meta name="description" content="语雀视觉语言的设计研究：白底 + 语雀绿 #31CC79 + 衬线标题书卷气、温暖琥珀点缀、文人感东方知识工具美学。营销 demo + 设计系统参考。" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossori

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 494

<p>语雀以 Noto Serif SC 衬线字体承载标题的书卷气,以森林感的语雀绿 #31CC79 表达自然与生长,以暖琥珀 #F4B400 点缀情感温度。设计在这里不是工具,而是一种对待思想的态度。</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.yuque.html" tar

Network accessline 495

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.yuque.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>     </div>

Network accessline 496

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.yuque.html" target="_blank" rel="noopener">查看 DESIGN.md ↗</a>

Network accessline 676

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.yuque.html" target="_blank" rel="noopener">查看源码 ↗</a>

`assets/web/design.zapier.html`

Network accessline 6

<title>Zapier — Inspired Design</title> <meta name="description" content="A Zapier-inspired marketing surface: warm-cream canvas, deep coffee ink, single saturated orange CTA, and a full workflow chain mockup (trigger → filter → action → ac

Network accessline 7

<meta name="description" content="A Zapier-inspired marketing surface: warm-cream canvas, deep coffee ink, single saturated orange CTA, and a full workflow chain mockup (trigger → filter → action → action) with app logo nodes. Sourced from

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Network accessline 850

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.zapier.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

`assets/web/design.zeekr.html`

Network accessline 6

<title>极氪 ZEEKR — Design System Study</title> <meta name="description" content="极氪 ZEEKR 001 FR / 7X 设计语言研究: 几何极简, 几乎纯黑白, 极氪光蓝 accent, Apple / Porsche taycan 混合风格, 国产豪华电车设计天花板. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://font

Network accessline 7

<meta name="description" content="极氪 ZEEKR 001 FR / 7X 设计语言研究: 几何极简, 几乎纯黑白, 极氪光蓝 accent, Apple / Porsche taycan 混合风格, 国产豪华电车设计天花板. 营销 Demo + 设计系统参考." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" hr

Network accessline 8

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 9

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 10

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

Network accessline 590

<p>极氪的视觉语言: 拒绝任何花哨. 几乎纯黑白单色系, 大字号几何 sans 字体配 -2.5px 负字距, 锋利的 4-8px 圆角, 唯一的极氪光蓝 (#0061FF) 作为功能 accent. Apple + Porsche Taycan 混合, 国产豪华电车设计天花板.</p>       </div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blo

Network accessline 591

</div>       <a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.zeekr.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>     </div>

Network accessline 592

<a class="ds-source" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.zeekr.html" target="_blank" rel="noopener">View DESIGN.md ↗</a>

Network accessline 748

<a class="src-link" href="https://github.com/yzfly/awesome-design-html/blob/main/assets/web/design.zeekr.html" target="_blank" rel="noopener">View source ↗</a>

`assets/web/design.zhongguo-colors.html`

Network accessline 13

<meta property="og:locale" content="zh_CN" /> <meta name="twitter:card" content="summary_large_image" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 14

<meta name="twitter:card" content="summary_large_image" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 15

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 16

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 17

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Network accessline 222

</div>   </div>   <a class="gh" href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">

Network accessline 223

</div>   <a class="gh" href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">     <svg viewBox="0 0 24 24"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.3-1.8-1.

Network accessline 224

<a class="gh" href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">

Network accessline 258

<div class="foot">     <div class="col">       <p>色卡数据来自开源项目 <a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">nevertoday/zhongguo-traditional-colors</a>（742 高清中国传统色卡）。本页将其整理为按色相归类、可检索、可复制的单文

Network accessline 259

<div class="col">       <p>色卡数据来自开源项目 <a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">nevertoday/zhongguo-traditional-colors</a>（742 高清中国传统色卡）。本页将其整理为按色相归类、可检索、可复制的单文件 HTML 色谱，收录于 <a href="

Network accessline 260

<p>色卡数据来自开源项目 <a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">nevertoday/zhongguo-traditional-colors</a>（742 高清中国传统色卡）。本页将其整理为按色相归类、可检索、可复制的单文件 HTML 色谱，收录于 <a href="https://github.com/yzfly

Network accessline 262

</div>     <div class="links">       <a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">原始项目 ↗</a>

Network accessline 263

<div class="links">       <a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">原始项目 ↗</a>       <a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-desi

Network accessline 264

<a href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">原始项目 ↗</a>

Network accessline 265

<a href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">awesome-design-html ↗</a>

Network accessline 266

<a href="https://github.com/yzfly/awesome-design-html#readme" target="_blank" rel="noopener">README ↗</a>

Network accessline 271

<div class="toast" id="toast">已复制 <b id="toastVal"></b></div> <a class="viewsrc" href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">View source ↗</a>

Network accessline 272

<a class="viewsrc" href="https://github.com/nevertoday/zhongguo-traditional-colors" target="_blank" rel="noopener">View source ↗</a>

`index.html`

Network accessline 9

<meta property="og:description" content="115 brand-themed single-page HTML designs · 93 web + 22 iOS · A Claude Code skill" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://code.jiangshu.ai/awesome-d

Network accessline 10

<meta property="og:type" content="website" /> <meta property="og:url" content="https://code.jiangshu.ai/awesome-design-html/" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 11

<meta property="og:url" content="https://code.jiangshu.ai/awesome-design-html/" />

Network accessline 12

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 13

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Network accessline 14

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />

Network accessline 260

<button data-lang="zh">中</button>       </div>       <a class="gh-link" href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">

Network accessline 261

</div>       <a class="gh-link" href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">         <svg viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58V20.6c-3.34.7

Network accessline 262

<a class="gh-link" href="https://github.com/yzfly/awesome-design-html" target="_blank" rel="noopener">

Network accessline 288

<span>↓</span>       </a>       <a class="btn btn-secondary" href="https://github.com/yzfly/awesome-design-html#-install-in-claude-code" target="_blank">

Network accessline 289

</a>       <a class="btn btn-secondary" href="https://github.com/yzfly/awesome-design-html#-install-in-claude-code" target="_blank">         <span data-en="Install in Claude Code" data-zh="安装到 Claude Code">Install in Claude Code</span>

Network accessline 290

<a class="btn btn-secondary" href="https://github.com/yzfly/awesome-design-html#-install-in-claude-code" target="_blank">

Network accessline 379

<div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">claude code</span><button class="copy-btn" id="copyInstall" title="Copy" aria-label="Copy install prompt">copy</

Network accessline 380

<div class="term-body">             <div class="term-msg user"><span class="msg-label">YOU</span><span class="msg-text install-line" id="installLine">Please install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html

Network accessline 381

<div class="term-msg user"><span class="msg-label">YOU</span><span class="msg-text install-line" id="installLine">Please install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html</span></div>

Network accessline 477

<span data-en="A Claude Code skill that gives Claude a 115-brand vocabulary." data-zh="一个让 Claude 拥有 115 个品牌词汇的 Claude Code 技能。">A Claude Code skill that gives Claude a 115-brand vocabulary.</span>         <span data-en=" MIT licensed. Base

Network accessline 478

<span data-en=" MIT licensed. Based on " data-zh=" MIT 协议。改自 "> MIT licensed. Based on </span>         <a href="https://github.com/VoltAgent/awesome-design-md" target="_blank">VoltAgent/awesome-design-md</a>         <span data-en=" + " data

Network accessline 479

<a href="https://github.com/VoltAgent/awesome-design-md" target="_blank">VoltAgent/awesome-design-md</a>

Network accessline 480

<span data-en=" + " data-zh=" + "> + </span>         <a href="https://github.com/Meliwat/awesome-ios-design-md" target="_blank">Meliwat/awesome-ios-design-md</a>.       </p>

Network accessline 481

<a href="https://github.com/Meliwat/awesome-ios-design-md" target="_blank">Meliwat/awesome-ios-design-md</a>.

Network accessline 483

<div class="credit">         <span data-en="Designed in Apple tile rhythm + Supabase green + OpenCode mono. Made by " data-zh="Apple 节奏 + Supabase 绿 + OpenCode mono 字体。作者 ">Designed in Apple tile rhythm + Supabase green + OpenCode mono. Mad

Network accessline 484

<span data-en="Designed in Apple tile rhythm + Supabase green + OpenCode mono. Made by " data-zh="Apple 节奏 + Supabase 绿 + OpenCode mono 字体。作者 ">Designed in Apple tile rhythm + Supabase green + OpenCode mono. Made by </span>         <a href=

Network accessline 485

<a href="https://github.com/yzfly" target="_blank" style="color:var(--green);font-weight:500">云中江树</a>.

Network accessline 487

</div>     <div class="foot-links">       <a href="https://github.com/yzfly/awesome-design-html" target="_blank">GitHub</a>

Network accessline 488

<div class="foot-links">       <a href="https://github.com/yzfly/awesome-design-html" target="_blank">GitHub</a>       <a href="https://github.com/yzfly/awesome-design-html#readme" target="_blank" data-en="README" data-zh="文档">README</a>

Network accessline 489

<a href="https://github.com/yzfly/awesome-design-html" target="_blank">GitHub</a>

Network accessline 490

<a href="https://github.com/yzfly/awesome-design-html#readme" target="_blank" data-en="README" data-zh="文档">README</a>

Network accessline 491

<a href="https://github.com/yzfly/awesome-design-html/blob/main/LICENSE" target="_blank">LICENSE</a>

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 230 facts

Executable script in code of a file that runs.github/scripts/capture-thumbnails.sh:1High confidence
Network access in prose of documentationREADME.md:3Low confidence
Network access in prose of documentationREADME.md:7Low confidence
Network access in prose of documentationREADME.md:8Low confidence
Network access in prose of documentationREADME.md:10Low confidence
Network access in prose of documentationREADME.md:11Low confidence
Network access in prose of documentationREADME.md:12Low confidence
Network access in prose of documentationREADME.md:13Low confidence
Network access in prose of documentationREADME.md:14Low confidence
Network access in prose of documentationREADME.md:15Low confidence
Network access in prose of documentationREADME.md:17Low confidence
Network access in prose of documentationREADME.md:18Low confidence
Network access in code of documentationREADME.md:40Low confidence
Network access in prose of documentationREADME.md:55Low confidence
Network access in prose of documentationREADME.md:57Low confidence
Network access in prose of documentationREADME.md:86Low confidence
Network access in prose of documentationREADME.md:87Low confidence
Network access in prose of documentationREADME.md:88Low confidence
Network access in prose of documentationREADME.md:89Low confidence
Network access in prose of documentationREADME.md:90Low confidence
Network access in prose of documentationREADME.md:91Low confidence
Network access in prose of documentationREADME.md:92Low confidence
Network access in prose of documentationREADME.md:93Low confidence
Network access in prose of documentationREADME.md:94Low confidence
Network access in prose of documentationREADME.md:95Low confidence
Network access in prose of documentationREADME.md:102Low confidence
Network access in prose of documentationREADME.md:103Low confidence
Network access in prose of documentationREADME.md:104Low confidence
Network access in prose of documentationREADME.md:105Low confidence
Network access in prose of documentationREADME.md:106Low confidence
Network access in prose of documentationREADME.md:107Low confidence
Network access in prose of documentationREADME.md:108Low confidence
Network access in prose of documentationREADME.md:109Low confidence
Network access in prose of documentationREADME.md:110Low confidence
Network access in prose of documentationREADME.md:111Low confidence
Network access in prose of documentationREADME.md:118Low confidence
Network access in prose of documentationREADME.md:119Low confidence
Network access in prose of documentationREADME.md:120Low confidence
Network access in prose of documentationREADME.md:121Low confidence
Network access in prose of documentationREADME.md:122Low confidence
Network access in prose of documentationREADME.md:123Low confidence
Network access in prose of documentationREADME.md:124Low confidence
Network access in prose of documentationREADME.md:125Low confidence
Network access in prose of documentationREADME.md:126Low confidence
Network access in prose of documentationREADME.md:127Low confidence
Network access in prose of documentationREADME.md:134Low confidence
Network access in prose of documentationREADME.md:135Low confidence
Network access in prose of documentationREADME.md:136Low confidence
Network access in prose of documentationREADME.md:137Low confidence
Network access in prose of documentationREADME.md:138Low confidence

and 180 more

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

yzfly/awesome-design-html

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

awesome-design-html

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

.github/assets/banner.svg

.github/scripts/capture-thumbnails.sh

LICENSE

README.md

README.zh-CN.md

SKILL.md

assets/ios/design.airbnb-ios.html

assets/ios/design.apple-music-ios.html

assets/ios/design.chatgpt-ios.html

assets/ios/design.discord-ios.html

assets/ios/design.doordash-ios.html

assets/ios/design.duolingo-ios.html

assets/ios/design.hinge-ios.html

assets/ios/design.instagram-ios.html

assets/ios/design.netflix-ios.html

assets/ios/design.notion-ios.html

assets/ios/design.robinhood-ios.html

assets/ios/design.snapchat-ios.html

assets/ios/design.spotify-ios.html

assets/ios/design.starbucks-ios.html

assets/ios/design.telegram-ios.html

assets/ios/design.threads-ios.html

assets/ios/design.tiktok-ios.html

assets/ios/design.tinder-ios.html

assets/ios/design.uber-ios.html

assets/ios/design.whatsapp-ios.html

assets/ios/design.x-twitter-ios.html

assets/ios/design.youtube-ios.html

assets/web/design.airbnb.html

assets/web/design.airtable.html

assets/web/design.alipay.html

assets/web/design.aliyun.html

assets/web/design.apple.html

assets/web/design.bilibili.html

assets/web/design.binance.html

assets/web/design.bmw-m.html

assets/web/design.bmw.html

assets/web/design.browseros.html

assets/web/design.bugatti.html

assets/web/design.bun.html

assets/web/design.cal.html

assets/web/design.claude.html

assets/web/design.clay.html

assets/web/design.clickhouse.html

assets/web/design.cohere.html

assets/web/design.coinbase.html

assets/web/design.composio.html

assets/web/design.cursor.html

assets/web/design.deepseek.html

assets/web/design.dingtalk.html

assets/web/design.doubao.html

assets/web/design.douyin.html

assets/web/design.elevenlabs.html

assets/web/design.expo.html

assets/web/design.feishu.html

assets/web/design.ferrari.html

assets/web/design.figma.html

assets/web/design.framer.html

assets/web/design.hashicorp.html

assets/web/design.ibm.html

assets/web/design.intercom.html

assets/web/design.kimi.html

`SKILL.md`

`.github/assets/banner.svg`

`.github/scripts/capture-thumbnails.sh`

`LICENSE`

`README.md`

`README.zh-CN.md`

`SKILL.md`

`assets/ios/design.airbnb-ios.html`

`assets/ios/design.apple-music-ios.html`

`assets/ios/design.chatgpt-ios.html`

`assets/ios/design.discord-ios.html`

`assets/ios/design.doordash-ios.html`

`assets/ios/design.duolingo-ios.html`

`assets/ios/design.hinge-ios.html`

`assets/ios/design.instagram-ios.html`

`assets/ios/design.netflix-ios.html`

`assets/ios/design.notion-ios.html`

`assets/ios/design.robinhood-ios.html`

`assets/ios/design.snapchat-ios.html`

`assets/ios/design.spotify-ios.html`

`assets/ios/design.starbucks-ios.html`

`assets/ios/design.telegram-ios.html`

`assets/ios/design.threads-ios.html`

`assets/ios/design.tiktok-ios.html`

`assets/ios/design.tinder-ios.html`

`assets/ios/design.uber-ios.html`

`assets/ios/design.whatsapp-ios.html`

`assets/ios/design.x-twitter-ios.html`

`assets/ios/design.youtube-ios.html`

`assets/web/design.airbnb.html`

`assets/web/design.airtable.html`

`assets/web/design.alipay.html`

`assets/web/design.aliyun.html`

`assets/web/design.apple.html`

`assets/web/design.bilibili.html`

`assets/web/design.binance.html`

`assets/web/design.bmw-m.html`

`assets/web/design.bmw.html`

`assets/web/design.browseros.html`

`assets/web/design.bugatti.html`

`assets/web/design.bun.html`

`assets/web/design.cal.html`

`assets/web/design.claude.html`

`assets/web/design.clay.html`

`assets/web/design.clickhouse.html`

`assets/web/design.cohere.html`

`assets/web/design.coinbase.html`

`assets/web/design.composio.html`

`assets/web/design.cursor.html`

`assets/web/design.deepseek.html`

`assets/web/design.dingtalk.html`

`assets/web/design.doubao.html`

`assets/web/design.douyin.html`

`assets/web/design.elevenlabs.html`

`assets/web/design.expo.html`

`assets/web/design.feishu.html`

`assets/web/design.ferrari.html`

`assets/web/design.figma.html`

`assets/web/design.framer.html`

`assets/web/design.hashicorp.html`

`assets/web/design.ibm.html`

`assets/web/design.intercom.html`

`assets/web/design.kimi.html`

`assets/web/design.kraken.html`

`assets/web/design.lamborghini.html`

`assets/web/design.li-auto.html`

`assets/web/design.linear.html`

`assets/web/design.lovable.html`

`assets/web/design.mastercard.html`

`assets/web/design.meta.html`

`assets/web/design.mihoyo.html`

`assets/web/design.minimax.html`

`assets/web/design.mintlify.html`

`assets/web/design.miro.html`

`assets/web/design.mistral.html`

`assets/web/design.mongodb.html`

`assets/web/design.nike.html`

`assets/web/design.nio.html`

`assets/web/design.notion.html`

`assets/web/design.nvidia.html`