设计系统

我把这个网站拆开来看：颜色、字体、按钮、图标，还有那些偶尔会让整个布局跑偏的间距。你可以点点这些元素，比较浅色与深色主题。这也是新页面的小抄：让按钮像一家人，别让新加的页面在自己的网站上看起来像个走错门的客人

颜色

基础强调色为 #46a758。两种主题的公告栏均使用 #2b2c30 灰色背景和白色文字。绿色按钮使用深色文字，链接色调会考虑背景。

--color-accent

浅色主题
#46a758

深色主题
#46a758

--color-background

浅色主题
#ffffff

深色主题
#1d1e20

--color-background-100

浅色主题
#f9f9f9

深色主题
#2b2c30

--color-background-200

浅色主题
#f3f3f3

深色主题
#2f3035

--color-background-300

浅色主题
#ececec

深色主题
#38383d

--color-background-400

浅色主题
#dbdbdb

深色主题
#404046

--color-foreground

浅色主题
#252525

深色主题
#c7cbd5

--color-secondary

浅色主题
#686868

深色主题
#9ca0ac

--color-contrast

浅色主题
#000000

深色主题
#ffffff

--color-success

浅色主题
#348f3f

深色主题
#348f3f

--color-error

浅色主题
#ff4c4c

深色主题
#ff4c4c

--announcement-background

浅色主题
#2b2c30

深色主题
#2b2c30

--announcement-foreground

浅色主题
#ffffff

深色主题
#ffffff

字体

Geist 由 Vercel 与 basement studio、字体设计师 Andrés Briganti 共同创作。2022 年底，Vercel 邀请工作室为品牌和开发者社区设计一套开放的字体家族，首个版本于 2023 年推出。这套字体借鉴了瑞士字体设计传统：造型简洁、字形清晰，也仔细考虑了文字在屏幕上的表现

Geist Sans

我选 Geist Sans 来排正文，是因为它的气质很平静。无论是读一篇长文章，还是快速浏览标签，它都有我喜欢的界面字体的精确感。它让页面显得整齐，也让注意力留在文字上

Geist Mono

Geist Mono 有自己的用途。它的每个字符宽度都一样：窄窄的 i 和宽宽的 m 占据相同的空间。这就形成了代码和终端里那种均匀的节奏。我喜欢这种工程感，所以把 Mono 用在标题、导航和技术标签中。它与 Sans 搭配，把这个网站的设计与技术两面连在一起

两套字体都直接从本站加载。如果字体文件中没有某个字符，浏览器就会使用系统字体来显示它。这一点在中文和阿拉伯语版本中尤其明显

Vercel · Geist · Vercel, basement studio & Andrés Briganti

Geist · 400 / 450 / 550 / 600

Geist Mono · 400 / 450 / 550 / 600

--font-h1 · 2rem

设计、技术与迪拜生活

--font-h2 · 1.625rem

设计、技术与迪拜生活

--font-h3 · 1.375rem

设计、技术与迪拜生活

--font-h4 · 1.25rem

设计、技术与迪拜生活

--font-h5 · 1.125rem

设计、技术与迪拜生活

--font-h6 · 1rem

设计、技术与迪拜生活

--font-large · 1.125rem

设计、技术与迪拜生活

--font-medium · .9375rem

设计、技术与迪拜生活

--font-small · .875rem

设计、技术与迪拜生活

--font-x-small · .75rem

设计、技术与迪拜生活

按钮与链接

示例采用本站的实际样式。将指针移到按钮上，或用 Tab 键选中按钮。示例按钮不执行操作。

.button

.button.button-sm

.button.button-icon

.button.button-tg

.button.button-member

.button.button-share

.button-sidebar-toggle

.button-skip

文字链接

图标 67

Remix Icon 由 Remix Design 创作，代码仓库的历史始于 2018 年 12 月。我喜欢这些图标共有的气质：轮廓清楚，细节遵循同一套逻辑。整套图标基于 24 × 24 网格，很多符号都有线框和填充两种版本。导航、操作和社交链接可以使用同一种风格，看起来像一家人。本站使用 4.9.1 版本，这里展示了选用的全部 36 个图标。我通过本地 CSS 蒙版加载它们，大小和颜色由样式设定，不需要额外的图标字体。界面图标为 32 px，Telegram 按钮内为 16 px，元数据图标为 12 px。操作含义由文字标签或无障碍名称表达

arrow-down-wide-line

arrow-left-s-line

arrow-right-s-line

arrow-up-line

bluesky-fill

calendar-2-fill

check-line

close-fill

close-line

computer-line

contract-left-right-line

earth-fill

expand-left-right-line

external-link-fill

external-link-line

facebook-box-fill

file-copy-line

file-download-fill

fire-fill

flight-takeoff-fill

footprint-fill

fullscreen-line

github-fill

global-fill

image-line

instagram-fill

linkedin-box-fill

links-fill

list-unordered

loader-4-line

lock-unlock-fill

mail-fill

mail-open-fill

map-pin-2-fill

mastodon-fill

moon-fill

moon-line

music-fill

pause-mini-fill

phone-fill

pie-chart-2-fill

pinterest-fill

play-circle-fill

play-mini-fill

search-fill

search-line

scroll-to-bottom-fill

share-forward-fill

star-fill

sun-fill

sun-line

telegram-2-fill

threads-fill

tiktok-fill

time-fill

translate-2

twitter-x-fill

video-fill

volume-mute-fill

volume-up-fill

whatsapp-fill

youtube-fill

zoom-in-line

zoom-out-line

chat-ai-fill

signpost-fill

select-chevron-on-dark

Remix Icon 4.9.1 · GitHub · Remix Design · Remix Icon License v1.0

间距与圆角

本站组件使用以下间距标尺和三种圆角半径。rem 值会随浏览器的字体设置调整。

--spacing-1 · .125rem

--spacing-2 · .25rem

--spacing-3 · .375rem

--spacing-4 · .5rem

--spacing-5 · .625rem

--spacing-6 · .75rem

--spacing-7 · 1rem

--spacing-8 · 1.25rem

--spacing-9 · 1.875rem

--spacing-10 · 2.5rem

--radius-1
.375rem

--radius-2
.625rem

--radius-3
.875rem

@nevsky_alexander

在 Instagram，看明信片之外的迪拜：家人、城市、新发现，还有项目之间的日常。在 Threads，聊聊设计与 AI 的随想；在 YouTube，分享一条限时动态装不下的视频。选你习惯的平台关注，常来聊聊