UI Skillbook
2

Design systems set in Arial

Brands and apps whose DESIGN.md names Arial as a typeface, including 591, BBC and E.SUN Bank. Each file also lists the sizes, weights and colors that go with it, so your coding agent can match the whole style.

50 files, page 1 of 2

Files

591

Brands · Arial

591房屋交易網 (591 Fang Wu — Taiwan's dominant property marketplace) is a dense, information-first real-estate platform where practical utility overrides aesthetic refinement. The canvas is pure white (#ffffff) with warm…

BBC

Brands · BBC Reith Sans

BBC's digital presence is the world's most visited public-service broadcaster website — a global newsroom that has built its design language around uncompromising clarity, accessibility-first principles, and the…

E.SUN Bank

Brands · Noto Sans TC

E.SUN Bank (玉山銀行) is Taiwan's most digital-forward commercial bank, and its official website — esunbank.com — channels that reputation into a design language that is clean, credentialed, and warmly approachable…

Google

Brands · Google Sans

Google began as a search engine and now describes a product family used by billions; its stated mission is to organize the world's information and make it universally accessible and useful. That scope is expressed…

GOV.UK

Brands · GDS Transport

GOV.UK is the UK government's central digital platform — and its design system is one of the world's most influential public-sector design systems. The aesthetic is unmistakably utilitarian and accessibility-first:…

Mistral

Brands · Arial

Frontier AI platform design with sharp black foundations, a warm orange-to-yellow signature spectrum, and highly controlled enterprise product framing. Mistral combines open-model energy with direct, no-frills…

Nintendo 2001

Brands · Arial

An analysis of Nintendo.com's 2001 design language — a brushed-periwinkle "console chrome" interface where every panel is a beveled metal plate, navigation glows amber over a halftone-dotted carbon bar, and bold…

Olive Young

Brands · Montserrat

Olive Young is the CJ retail platform that grew from Korea’s first Beauty & Health store into an omnichannel beauty-and-wellness business. Its official history describes a move away from the traditional…

Qraft Technologies

Brands · Inter

Qraft Technologies (크래프트테크놀로지스) is a Seoul-headquartered AI-fintech that builds quantitative investment products — AI-managed ETFs, an AI hedge fund, and market-intelligence execution engines — and its homepage…

Sainsbury's

Brands · MaryAnn

Sainsbury's is a British supermarket that began, in its own words, when "John James and Mary Ann Sainsbury welcomed their first customer" in 1869, with the aim "to provide good quality food at affordable prices". J…

Steam

Brands · Motiva Sans

Digital gaming distribution platform with dark, immersive aesthetic. Navy blue gradients (#1b2838), Steam cyan accent (#66c0f4), and commerce-focused UI patterns for the world's largest PC gaming storefront.

Workday

Brands · Acid Grotesk

Workday is the enterprise cloud platform for HR, finance, and IT, and its public surface reads exactly the way enterprise software wants to be perceived in 2026 — calm, credible, and quietly confident rather than…

1616 / arita japan

Japan · Arial

1616 / arita japan（https://www.1616arita.jp/）のデザイン仕様書。 Creative Director: 柳原照弘（Teruhiro Yanagihara）。有田焼の伝統を現代デザインに昇華させたポーセリンブランド。 実サイトの computed style に基づく。WordPress サイト。

ASKUL (アスクル)

Japan · Arial

ASKUL (アスクル)のデザイン仕様書。

Audio-Technica

Japan · FP-ヒラギノ角ゴ ProN W6

オーディオテクニカ（https://www.audio-technica.co.jp/）のデザイン仕様書。 1962年創業のプロフェッショナルオーディオ機器メーカー。 Puppeteer による computed style 実測値（2026-05-26 取得）に基づく。

AXIS（アクシス）

Japan · AXIS ProN M

AXIS Web（https://www.axismag.jp/）のデザイン仕様書。 「デザインの視点で、人間の可能性や創造性を伝えるメディア」を掲げる、デザイン誌 AXIS のオンライン版。建築・プロダクト・グラフィック・テクノロジー等を横断するデザインジャーナリズム。 最大の特徴は 純白（#ffffff）の地に黒〜濃グレー（#000 / #333 / #666）だけで組む徹底したモノクローム と、Type Project の独自書…

BANDAI NAMCO Entertainment（バンダイナムコエンターテインメント）

Japan · Helvetica Neue

BANDAI NAMCO Entertainment（https://www.bandainamcoent.co.jp/）のデザイン仕様書。 日本を代表するゲーム・エンターテインメント企業。ドラゴンボール、ワンピース、ガンダム、パックマン等の IP を展開。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

BAYCREW'S STORE（ベイクルーズストア）

Japan · Hiragino Kaku Gothic Pro

BAYCREW'S STORE（https://baycrews.jp/）のデザイン仕様書。 日本最大級のマルチブランドファッションリテーラー。JOURNAL STANDARD、IENA、Deuxieme Classe、Spick and Span、EDIFICE、SLOBE IENA 等を擁するベイクルーズグループの公式EC。 実サイトの computed style 実測（2026-06-10 取得）に基づく。

Bridgestone (ブリヂストン)

Japan · Arial

Bridgestone（https://www.bridgestone.co.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。 自社カスタム書体 BridgestoneTypeTP-Regular を全面採用し、游ゴシック体ファーストのフォールバック、統一的な 1.64 行間比率、フラットで構造的なグレーパレットで「信頼・堅実なグローバル製造業」の印象を表現している。

CHOYA (チョーヤ梅酒)

Japan · Noto Serif JP

CHOYA 公式サイト (https://www.choya.co.jp/) のデザイン仕様書。 1914年創業の梅酒メーカー。「The CHOYA」「さらりとした梅酒」等で知られる日本を代表する梅酒ブランド。 明朝体見出し + ゴシック体本文の二書体構成で、老舗の品格と現代的な清潔感を両立。実サイトの computed style に基づいて記述。

DNP（大日本印刷）

Japan · YakuHanJP

DNP（大日本印刷）のデザイン仕様書。

Epson

Japan · Arial

Epson（https://www.epson.jp/）のデザイン仕様書。 実サイトのCSS computed style に基づく。CSS Custom Properties は使用されていない（レガシーな静的CSS構成）。

Hacoa（ハコア）

Japan · Arial

Hacoa（https://www.hacoa.com/）のデザイン仕様書。 福井・越前の木地職人集団「山口工芸」が 2001 年に立ち上げた、木製デザイン雑貨のブランド。木製キーボード・時計・iPhone ケースなど、無垢材を削り出したプロダクトを自社でデザインから製造まで一貫して手がける。 写真が主役で、UI はほぼ何もしない。全画面の木の写真にスクリムを敷き、その上に白文字と枠だけのピルを置く。彩度を持つ要素はアンバーのリンク …

HYKE

Japan · Helvetica

HYKE（https://hyke.jp/）のデザイン仕様書。 Shopify ベースのオンラインストア。実サイトの CSS Custom Properties および computed style に基づく。 A-OTF Gothic BBB Pro N（Morisawa / Adobe Fonts）はドメインライセンスのため、preview.html では Google Fonts の Zen Kaku Gothic New で代…

Ishinomaki Laboratory（石巻工房）

Japan · General Grotesque Mono Regular

Ishinomaki Laboratory / 石巻工房（https://ishinomaki-lab.org/）のデザイン仕様書。 2011年の東日本大震災の復興から生まれた、世界的に評価される日本の DIY 家具ブランド。素の合板（plywood）と最小限の直線で構成される、質実剛健なものづくりの思想がそのまま Web デザインになっている。 最大の特徴は モノスペース・グロテスク書体（General Grotesque Mono…

KALDI Coffee Farm

Japan · ヒラギノ角ゴ ProN W3

KALDI Coffee Farm (https://www.kaldi.co.jp/) のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は使用されていない。 コーポレートサイトと EC サイト (https://www.kaldi.co.jp/ec/) の2サイトを網羅。

Kalita (カリタ)

Japan · Questrial

Kalita 公式サイト (https://www.kalita.co.jp/) のデザイン仕様書。 1958年創業、横浜発のコーヒー機器総合メーカー。三つ穴ドリッパーに代表される「カリタ式」で知られる。 グレー #999999 のページ背景、シャープな直角コンポーネント、ゴーストボタンが特徴的な工業的デザイン。実サイトの computed style に基づいて記述。

KINTO（キントー）

Japan · Swis721

株式会社キントー（KINTO）公式オンラインストア（https://kinto.co.jp/）のデザイン仕様書。 1972 年創業、テーブルウェア・ドリンクウェア・インテリア小物のライフスタイルブランド。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

Komeda (コメダ珈琲店)

Japan · Arial

コメダ珈琲店（https://www.komeda.co.jp/）のデザイン仕様書。 実サイトの computed style に基づく。システムフォントのみ使用。

Mitsubishi Estate (mec.co.jp)

Japan · Century Gothic

Mitsubishi Estate (mec.co.jp)のデザイン仕様書。

OMRON (オムロン)

Japan · Roboto + Noto Sans JP

OMRON (https://www.omron.com/jp/ja/) のデザイン仕様書。 日本発のグローバル電子部品・ヘルスケアメーカー。FA（工場自動化）・制御機器・ヘルスケア（血圧計等）・社会システム事業を展開。 実サイトの computed style 実測 (2026-06-04 取得) に基づく。

OSAJI（オサジ）

Japan · Noto Sans Japanese

OSAJI（https://osaji.net/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

PARCO（パルコ）

Japan · NotoSansCJKjp

株式会社パルコ コーポレートサイト（https://www.parco.co.jp/）のデザイン仕様書。 1969年創業、渋谷・池袋・名古屋などの都市型商業施設を運営する流通企業。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

POPEYE Web

Japan · DM Sans

POPEYE Web（https://popeyemagazine.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

SAPPORO BEER（サッポロビール）

Japan · Arial

サッポロビール（https://www.sapporobeer.jp/）のデザイン仕様書。 1876年創業、北海道開拓使麦酒醸造所をルーツとする日本を代表するビールブランド。星のマークが象徴。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

THREE

Japan · akzidenz-grotesk

THREE（https://www.threecosmetics.com/）のデザイン仕様書。 ACRO Inc.（ポーラ・オルビスグループ）が展開するナチュラルコスメブランド。 実サイトの computed style に基づく。

Toshiba

Japan · Arial

東芝グローバルサイト（https://www.global.toshiba/jp.html）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は未使用。 AEM（Adobe Experience Manager）ベースの静的コーポレートサイト。

Wacom（ワコム）

Japan · Roboto

Wacom（https://www.wacom.com/ja-jp）のデザイン仕様書。 ペンタブレット・液晶ペンタブレットの世界的リーダー。クリエイター向けデジタルツールを提供する日本発テクノロジー企業。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

エスビー食品（S&B Foods）

Japan · Arial

エスビー食品（S&B Foods）のデザイン仕様書。

カゴメ（Kagome）

Japan · Inter

カゴメ（https://www.kagome.co.jp/）のデザイン仕様書。 日本を代表する食品・飲料メーカー。トマト製品・野菜ジュースを軸に「自然を、おいしく、楽しく。」を掲げる。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

グッドデザイン賞 / GOOD DESIGN AWARD（Gマーク）

Japan · Roboto Condensed + Gothic MB101 Bold

グッドデザイン賞（https://www.g-mark.org/）公式サイトのデザイン仕様書。 公益財団法人日本デザイン振興会が運営する、日本で唯一の総合的なデザイン評価制度。1957年から続く「Gマーク」を冠した、日本を代表するデザインアワード。 鮮烈な Gマーク赤 #c00014 をブランドの中心に置き、Roboto Condensed + Gothic MB101 Bold（Morisawa）の縦に締まった見出し書体と、Noto…

シチズンウオッチ (CITIZEN Watch)

Japan · Poppins

シチズンウオッチ（https://citizen.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

ユーグレナ（euglena）

Japan · Roboto

ユーグレナ（euglena）のデザイン仕様書。

代官山 蔦屋書店 (Daikanyama T-SITE)

Japan · Noto Sans Japanese

代官山 蔦屋書店（https://store.tsite.jp/daikanyama/）のデザイン仕様書。 2026-05-08 取得の computed style に基づく。

塩野義製薬（SHIONOGI）

Japan · Noto Sans JP

塩野義製薬（SHIONOGI）のデザイン仕様書。

日本郵船（NYK LINE）

Japan · Arial

日本郵船（NYK LINE）のデザイン仕様書。

森美術館 / Mori Art Museum（モリ美術館）

Japan · Hiragino Sans

森美術館（Mori Art Museum）公式サイト 日本語版（https://www.mori.art.museum/jp/）のデザイン仕様書。 1997 年構想・2003 年開館の現代アート専門館。六本木ヒルズ森タワー 53 階に位置する東京の代表的なコンテンポラリーアート美術館。 国際性・実験性・教育普及を 3 つの柱とする。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

能作（NOUSAKU）

Japan · Noto Sans Japanese

能作 公式サイト（https://www.nousaku.co.jp/）のデザイン仕様書。 1916年創業、富山県高岡市の鋳物メーカー。錫（すず）100%の曲がる器で知られる。 伝統的な鋳造技術と現代の暮らしを結ぶ「用の美」を体現するブランド。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

Other fonts