Black and white design systems
Brands and apps whose main color is black, white or gray, including Apple, GitHub and Notion. The family comes from each file's primary or accent color; open a file to see its full palette.
73 files, page 1 of 2
Files
Apple
UI Skillbook · SF Pro Display
Product-first marketing with huge photography, SF Pro headlines and near-silent UI chrome.
GitHub
UI Skillbook · Mona Sans
Primer: a functional, information-dense system with neutral grays, blue links and clear state colors.
Notion
UI Skillbook · Inter
Document-first minimalism: warm off-black text, almost no chrome, and content blocks that do the layout.
Vercel
UI Skillbook · Geist
Strict black-and-white developer aesthetic built on Geist, hairline borders and a grid you can almost see.
Microsoft FAST
Official
The design system shared by Microsoft FAST's example apps, written as semantic CSS tokens for type, spacing, color and light and dark themes.
Bilibili
Brands · Hiragino
Bilibili describes itself as a leading video community for young generations in China, organised around users, high-quality content, creators, and the emotional bonds between them. The supplied 2026-07-13 desktop…
Framer
Brands · Inter
A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single…
Gangnamunni (강남언니)
Brands · PretendardVariable
강남언니 is a Korean consumer service for finding and comparing medical-procedure information, hospitals, and event prices. Its current public product routes put this research task ahead of ornamental branding: the…
Gaudiy
Brands · Noto Sans JP
Gaudiy (株式会社Gaudiy Group) is a Tokyo Web3 fan-community platform — the maker of Gaudiy Fanlink, backed by Sony Group and Bandai Namco — and its public surfaces wear a deliberately monochrome, almost defiant "glitch"…
Hashicorp
Brands · hashicorpSans
An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act…
IICOMBINED
Brands · gentleMonsterSerif
IICOMBINED (아이아이컴바인드) is the Korean company behind the eyewear brand Gentle Monster. Its own site introduces it as "the innovative global company which has fundamentally different paradigm for retailing business",…
Kia
Brands · Kia Signature Bold
Kia (기아) is the Korean carmaker Kia Corporation, whose heritage archive traces its story back to 1944. Kia describes that history as a line of movement — from bicycles to cars, electric vehicles and purpose-built…
Mintlify
Brands · Inter
Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade…
Miro
Brands · Roobert PRO
Miro presents itself as the AI-powered visual workspace through a confident, almost playful brand voice — anchored by its signature canary yellow wordmark over white canvas, broken open by colorful pastel feature…
Mistral Ai
Brands · Inter
Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal "sunset stripe" bar that closes every page. The…
Mongodb
Brands · Euclid Circular A
MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with bright MongoDB green CTAs paired with stark white documentation surfaces. The signature green pill button is unmistakable across…
Musinsa (무신사)
Brands · Pretendard
Musinsa is a Korean fashion platform that began with sneaker photographs and street snaps, then grew into a marketplace and content ecosystem for Korean fashion brands. Its current public storefront capture is…
NHN
Brands · Pretendard
NHN is a Korean IT group whose public corporate presence connects a long Hangame-era history with businesses in games, payments and advertising, technology, commerce, and content. Its current brand expression is…
Ollama
Brands · Inter
Ollama is a developer platform for getting open models running locally, through an app, CLI, API, and integrations. Its public product marketing surface makes that technical proposition feel deliberately direct: a…
Runway
Brands · DM Sans
Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech…
Squarespace
Brands · Clarkson
Squarespace is the definitive case study in editorial minimalism as a product philosophy. The homepage opens on an immersive full-screen hero video set against pure black (#000000) — not a dark navy, not a charcoal,…
Warp
Brands · Inter
An inspired interpretation of Warp's design language — an agentic terminal-and-development-environment brand whose surface is a warm near-charcoal canvas (a tint warmer than pure black), broken only by clean Inter…
롯데ON
Brands · Pretendard
롯데ON은 롯데 계열 상품과 오픈마켓 상품을 한 곳에서 검색·구매하도록 만든 통합 이커머스 플랫폼이며, 백화점·그로서리·전자제품·브랜드 상품을 발견하는 흐름을 함께 다룬다. 공식 기업 소개는 1996년 롯데닷컴에서 시작한 온라인 종합쇼핑의 계보와 2020년 4월 롯데ON 출범을 연결하고, 현재 서비스는 오프라인 유통 인프라와 온라인 경험을 결합한 쇼핑을 지향한다. 그 결과로 보이는…
ソフトバンク
Brands · Hiragino
SoftBank Corp. is the operating telecommunications company established in 1986, providing mobile communications, devices, fixed-line services, and internet access. Its official history traces a route through Japan…
チームラボ
Brands
teamLab is an interdisciplinary art collective formed in 2001, bringing artists, programmers, engineers, CG animators, mathematicians, architects, and graphic designers together around work that crosses art, science,…
and wander（アンドワンダー）
Japan · helvetica neue
and wander（https://www.andwander.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。
ATON
Japan · AkkuratLLWeb
ATON（https://aton-tokyo.com/）のデザイン仕様書。 2026-05-19 取得の computed style に基づく。
AURALEE（オーラリー）
Japan · Marcellus
AURALEE 公式サイト（https://auralee.jp/）のデザイン仕様書。 デザイナー・岩井良太による 2015 年設立の日本のコンテンポラリーファッションブランド。 上質な素材と独自の風合いで国内外から高く評価される。 実サイトの computed style 実測（2026-05-08 取得）に基づく。
cado（カドー）
Japan · Helvetica
cado（https://cado.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。
Cle de Peau Beaute
Japan · Noto Sans JP
Shiseido のラグジュアリービューティーライン「Cle de Peau Beaute」公式サイト（https://www.cledepeau-beaute.com/jp/）のデザイン仕様書。 「鍵」を意味するフランス語ブランド名にふさわしい、抑制されたエレガンスと光の質感が特徴。 実サイトの computed style に基づいて記述。
DECORTE
Japan · Noto Serif JP
DECORTE（https://www.decorte.com/）のデザイン仕様書。 KOSE の最高峰ラグジュアリーコスメティクスブランド。実サイトの computed style に基づく。
GANZO
Japan · Rokkitt
GANZO 公式サイト（https://www.ganzo.ne.jp/）のデザイン仕様書。 日本最高峰のレザーブランド。コードバン、ブライドルレザーなど最上級の素材を、熟練の職人が仕立てる。 「一切の妥協を許さないものづくり」を掲げ、財布・鞄・革小物を展開。 実サイトの computed style 実測（2026-05-22 取得）に基づく。
Goldwin（ゴールドウイン）
Japan · Untitled Sans
Goldwin（https://www.goldwin.co.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。
HASAMI PORCELAIN
Japan · UniversLTStd-BoldCn
HASAMI PORCELAINのデザイン仕様書。
Hender Scheme（エンダースキーマ）
Japan · Futura
Hender Scheme 公式サイト（https://www.henderscheme.com/）のデザイン仕様書。 柏崎亮が 2010 年に設立した日本のハンドクラフトレザーブランド。ブランド名は "gender" に由来し、 社会的・文化的な差異を超えるものづくりを志向する。ヌメ革（植物タンニンなめし）を中心素材とし、 経年変化（エイジング）を楽しむプロダクト哲学で知られる。 実サイトの computed style 実測（20…
HIGASHIYA
Japan · Granjon LT W01 Roman
HIGASHIYA（https://www.higashiya.com/）のデザイン仕様書。 Puppeteer による computed style 実測値（2026-05-08 取得）に基づく。 SIMPLICITY の緒方慎一郎が手がける和菓子ブランド。銀座・南青山に店舗を持つ。 伝統的な和菓子を現代のライフスタイルに合わせて再解釈したブランドで、 サイトデザインはギャラリーの展示空間を思わせる極度にミニマルな佇まい。
HOSOO / 細尾 (hosoo.co.jp)
Japan · Heldane Display
HOSOO / 細尾 (hosoo.co.jp)のデザイン仕様書。
IPSA（イプサ）
Japan · MFW-HiraKakuProN-W3
IPSA（https://www.ipsa.co.jp/）のデザイン仕様書。 資生堂グループのパーソナライズドスキンケアブランド。肌診断に基づく "ME" ローションのカスタマイズシステムで知られる。 ブランド哲学: 「人の美しさは、生命力がつくりだすもの」。 実サイトの computed style 実測（2026-05-09 取得）に基づく。
JILL STUART Beauty
Japan · Inter Tight
JILL STUART Beauty（https://www.jillstuart-beauty.com/）のデザイン仕様書。 "sweets cosmetics" を掲げるフェミニン・ラグジュアリーコスメブランド。プリンセスのような甘く華やかな世界観を、ウォームピンクベージュの配色と明朝体・セリフ体の繊細なタイポグラフィで表現している。 実サイトの computed style 実測（2026-05-21 取得）に基づく。
Karimoku New Standard（カリモク ニュースタンダード）
Japan · a-otf-futo-go-b101-pr6n
Karimoku New Standard 公式サイト（https://www.karimoku-newstandard.jp/）のデザイン仕様書。 2009 年に老舗木製家具メーカー「カリモク家具」が設立した、新しい日本の家具デザインを提案するブランド。 国内外のデザイナーと共同で広葉樹の未利用材を活用した高品質な家具を作る。 実サイトの computed style 実測（2026-05-08 取得）に基づく。
Kyocera (京セラ)
Japan · 游ゴシック体
京セラ株式会社（https://www.kyocera.co.jp/）のデザイン仕様書。 実サイトのCSS computed style に基づく。CSS Custom Properties は使用されていない。
Landscape Products (ランドスケーププロダクツ)
Japan · Noto Sans JP
Landscape Products (ランドスケーププロダクツ)のデザイン仕様書。
LEXUS
Japan · Nobel
LEXUS（https://lexus.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。
mt masking tape (KAMOI KAKOSHI)
Japan · FOT-筑紫ゴシック Pr5N D
mt masking tape（https://www.masking-tape.jp/）のデザイン仕様書。 実サイトの computed style に基づく（2026-05-09 取得）。 カモ井加工紙が展開するマスキングテープブランド。プレミアム日本語フォント（FOT-筑紫ゴシック Pr5N D）を採用した、職人的・クラフト的なデザインシステム。
NOHGA HOTEL（ノーガホテル）
Japan · Hiragino Sans
NOHGA HOTEL（ノーガホテル / https://www.nohgahotel.com/）のデザイン仕様書。 上野・秋葉原・清水（京都）に展開する、アート／音楽／ガストロノミーをテーマにした 野村不動産グループのライフスタイル（ブティック）ホテル。「その地域と深くつながること」を掲げ、 地域のデザイナー・アーティストと連携した家具・アート・音楽で滞在を編む。 最大の特徴は チャコールグレー（#54565a / #53565a）…
OSAJI（オサジ）
Japan · Noto Sans Japanese
OSAJI（https://osaji.net/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。
Pen Online（ペンオンライン）
Japan · OptimaNovaLTPro-Medium
Pen Online 公式サイト（https://www.pen-online.jp/）のデザイン仕様書。 1998 年創刊、CCCメディアハウス発行のカルチャー・デザイン誌『Pen』のオンライン版。 実サイトの computed style 実測（2026-05-08 取得）に基づく。
ReFa
Japan · Yakuhanjp
ReFa（https://refa.net/）のデザイン仕様書。MTGが展開するプレミアム美容デバイスブランド。 実サイトのCSS computed style に基づく。取得日: 2026-05-09