Skip to content
Message on TG

Design system

Here I’ve taken the site apart: colours, fonts, buttons, icons and the spacing that sometimes sends everything sideways. Try the elements and compare the light and dark themes. This doubles as a guide for new pages, so the buttons feel like one family and a new screen doesn’t look like a stranger on its own website

Colors

The base accent is #46a758. The announcement bar uses a #2b2c30 gray background and white text in both themes. Green buttons use dark text; link shades account for the background.

--color-accent
Light theme
#46a758
Dark theme
#46a758
--color-background
Light theme
#ffffff
Dark theme
#1d1e20
--color-background-100
Light theme
#f9f9f9
Dark theme
#2b2c30
--color-background-200
Light theme
#f3f3f3
Dark theme
#2f3035
--color-background-300
Light theme
#ececec
Dark theme
#38383d
--color-background-400
Light theme
#dbdbdb
Dark theme
#404046
--color-foreground
Light theme
#252525
Dark theme
#c7cbd5
--color-secondary
Light theme
#686868
Dark theme
#9ca0ac
--color-contrast
Light theme
#000000
Dark theme
#ffffff
--color-success
Light theme
#348f3f
Dark theme
#348f3f
--color-error
Light theme
#ff4c4c
Dark theme
#ff4c4c
--announcement-background
Light theme
#2b2c30
Dark theme
#2b2c30
--announcement-foreground
Light theme
#ffffff
Dark theme
#ffffff

Typography

Geist was created by Vercel with basement studio and type designer Andrés Briganti. In late 2022, Vercel asked the studio to design an open font family for its brand and developer community. The first release followed in 2023. The family draws on Swiss typography: simple forms, clear letter shapes and careful attention to how they work on screen

Geist Sans

I chose Geist Sans for the body text because of its calm character. It has the precision I like in interfaces, whether you are reading a long article or scanning labels. It keeps the page feeling composed and lets the text hold your attention

Geist Mono

Geist Mono has a role of its own. Every character takes up the same width: a narrow i gets as much space as a wide m. That creates the even rhythm you know from code and terminals. I like that engineering feel, so Mono appears in headings, navigation and technical labels. Alongside Sans, it connects two sides of this site: design and technology

Both fonts load directly from this site. When a character is missing from the font file, the browser uses a system font for it. This is particularly noticeable in the Chinese and Arabic editions

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

Geist · 400 / 450 / 550 / 600

Geist Mono · 400 / 450 / 550 / 600

--font-h1 · 2rem

Design, technology and life in Dubai

--font-h2 · 1.625rem

Design, technology and life in Dubai

--font-h3 · 1.375rem

Design, technology and life in Dubai

--font-h4 · 1.25rem

Design, technology and life in Dubai

--font-h5 · 1.125rem

Design, technology and life in Dubai

--font-h6 · 1rem

Design, technology and life in Dubai

--font-large · 1.125rem

Design, technology and life in Dubai

--font-medium · .9375rem

Design, technology and life in Dubai

--font-small · .875rem

Design, technology and life in Dubai

--font-x-small · .75rem

Design, technology and life in Dubai

Buttons and links

These samples use the site styles. Hover over a button or reach it with Tab. Sample buttons do not perform actions.

.button
.button.button-sm
.button.button-icon
.button.button-tg
.button.button-member
.button.button-share
.button-sidebar-toggle
.button-skip
Text link

Icons 67

Remix Icon is made by Remix Design; its repository history starts in December 2018. I like the shared character of these icons: clear silhouettes and a consistent approach to detail. The library uses a 24 × 24 grid, and many symbols come in outlined and filled versions. Navigation, actions and social links can share a style and feel related. This site uses version 4.9.1; all 36 selected icons are shown here. I load them as local CSS masks: styles set their size and colour, so no separate icon font is needed. Interface icons are 32 px, the Telegram button icon is 16 px, and metadata icons are 12 px. A label or accessible name communicates the action

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

Spacing and corners

The spacing scale and three corner radii are used throughout the site. Values in rem follow the browser font settings.

--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

On Instagram: Dubai beyond the postcard — family, the city, discoveries and life between projects. On Threads: thinking out loud about design and AI. On YouTube: videos that need more room than a story. Follow me wherever you feel at home, and let’s keep in touch

Threads • @nevsky_alexanderYouTube • @alexander_nevsky
Subscription 1 Subscription 2 Subscription 3
Subscription 4 Subscription 5 Subscription 6