UI Skillbook
2

Design systems set in Helvetica

Brands and apps whose DESIGN.md names Helvetica as a typeface, including 91APP, ABEMA and Datadog. Each file also lists the sizes, weights and colors that go with it, so your coding agent can match the whole style.

27 files

Files

91APP

Brands · Noto Sans TC

91APP carries the composure of retail infrastructure built to be trusted at scale — the brand of Taiwan's leading omnichannel OMO (online-merge-offline) commerce SaaS. Its identity rests on a deep structural navy…

ABEMA

Brands · Helvetica

ABEMA is Japan's "new future of television" — a free, ad-supported linear-streaming hybrid from CyberAgent — and its interface is one of the most committed dark-surface systems in consumer streaming. The canvas is…

Datadog

Brands · NationalWeb

Datadog is the rare observability platform that refuses to dress in blue. In a category — backend monitoring, APM, cloud security — where nearly every competitor reaches for the same trustworthy enterprise blue,…

Dell 1996

Brands · Helvetica

An inspired interpretation of Dell.com's 1996 design language — a catalog-era enterprise web design built around a literal black page frame, vivid flat color-block "ribbon cards" tinted in sage, salmon, periwinkle,…

Resend

Brands · Inter

Resend looks like a developer tool with the typography of an editorial. Every page opens on (#000000), and the loudest element on the canvas is not a button or a brand stamp — it's a 96px Domaine Display serif…

Snapchat

Brands · Ghost Sans

Snapchat's design identity is built around a single, electrifying fact: the world's most recognizable yellow (#FFFC00). This near-pure yellow — so saturated it reads like a safety signal and a celebration at once —…

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

Taiwan High Speed Rail

Brands · Noto Sans TC

Taiwan High Speed Rail (THSR, 台灣高鐵) operates Taiwan’s north–south high-speed rail service and frames itself as more than transport: a life-service platform built around safer, faster, more comfortable travel. Its…

Zoom

Brands · Happy Face Semi Bold

Zoom's website communicates confidence and clarity through a dual-surface palette — a deep, immersive midnight navy (#00053d) hero paired with a clean white (#ffffff) body — that creates a dramatic first impression…

ANREALAGE（アンリアレイジ）

Japan · Helvetica

ANREALAGE 公式オンラインショップ（https://www.anrealage.com/）のデザイン仕様書。 デザイナー森永邦彦が 2003 年に設立。ブランド名は A REAL — UN REAL — AGE の造語で、「日常（real）の中にある非日常（unreal）を見つけ、時代（age）を超えるデザイン」を志向する。テクノロジーと伝統的な手仕事を融合させるアヴァンギャルドな日本発ファッションブランド。 実サイトの co…

cado（カドー）

Japan · Helvetica

cado（https://cado.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

cowcamo（カウカモ）

Japan · Helvetica

cowcamo（https://cowcamo.jp/）のデザイン仕様書。 リノベーション済みマンションに特化した不動産マーケットプレイス。物件検索・詳細閲覧と、暮らしにまつわる読み物（マガジン）の二軸で構成される。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

Graphpaper（グラフペーパー）

Japan · Helvetica

Graphpaper（https://graphpaper-tokyo.com/）のデザイン仕様書。 南貴之が手がける東京のミニマル・ファッションブランド／セレクトショップ（Shopify ベースの EC）。 最大の特徴は Helvetica 一本槍の極小タイポグラフィ と 角丸を一切持たない直角（radius 0）の作り、そして 純白地 × ニアブラック #212121 × ヘアライン（#f1f1f1） で構成される徹底した余白設計…

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 で代…

KEYENCE（キーエンス）

Japan · source-han-sans-japanese

KEYENCE（キーエンス）のデザイン仕様書。

KURKKU FIELDS（クルックフィールズ）

Japan · Noto Sans JP

KURKKU FIELDS（https://kurkkufields.jp/）のデザイン仕様書。 千葉県木更津市の、農業・食・アート・自然体験が一体となったサステナブルファーム＆パーク。音楽プロデューサー小林武史が手がける「いのちのてざわり」をテーマにした複合施設。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

Nissin (日清食品グループ)

Japan · Aoto Gothic Regular

日清食品グループ 商品情報サイト（https://www.nissin.com/jp/）のデザイン仕様書。 実サイトの CSS（Tailwind CSS ベース + CSS Custom Properties デザイントークン）および TypeSquare カスタムフォントに基づく。

Pocari Sweat (pocarisweat.jp)

Japan · Helvetica

大塚製薬 ポカリスエット（https://pocarisweat.jp/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は使用されていない（クラシックな CSS 構成）。

sacai（サカイ）

Japan · Helvetica

sacai 公式サイト（https://www.sacai.jp/）のデザイン仕様書。 デザイナー阿部千登勢が 1999 年に立ち上げた東京発のファッションブランド。 既存のアイテムをハイブリッドに再構築する独自のデザイン言語で世界的に評価される。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

Square Enix

Japan · Helvetica

Square Enix Co., Ltd.（https://www.jp.square-enix.com/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ゲーム・出版物の総合情報ポータル。

TENTIAL

Japan · din-2014

TENTIAL（https://tential.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

Time & Style（タイムアンドスタイル）

Japan · Noto Sans JP

Time & Style（https://www.timeandstyle.com/jp/）のデザイン仕様書。 北海道旭川発、伝統的な日本のクラフトマンシップとモダンデザインを融合したプレミアム家具ブランド。 実サイトの computed style 実測（2026-06-06 取得）に基づく。

White Mountaineering

Japan · Helvetica

White Mountaineeringのデザイン仕様書。

うなぎの寝床（UNAGINO NEDOKO）

Japan · dnp-shuei-anti-std

うなぎの寝床（UNAGINO NEDOKO）のデザイン仕様書。

一保堂茶舗（IPPODO）

Japan · source-han-sans-japanese

一保堂茶舗（https://www.ippodo-tea.co.jp/）のデザイン仕様書。 Puppeteer による computed style 実測値（2026-05-21 取得）に基づく。 享保二年（1717）創業の京都の老舗茶舗。抹茶・玉露・煎茶・番茶・ほうじ茶など 日本茶を幅広く取り扱い、Shopify ベースのオンラインストアを運営する。 サイトデザインは「京の老舗の静かな品格」を、游明朝の見出しと 源ノ角ゴシック Li…

丸山珈琲（MARUYAMA COFFEE）

Japan · Noto Sans JP

株式会社丸山珈琲（https://www.maruyamacoffee.com/）のデザイン仕様書。 1991 年、長野県軽井沢に創業したスペシャルティコーヒーの焙煎・小売企業。バイヤーが産地に足を運ぶ「ダイレクトトレード」と、カップ・オブ・エクセレンス国際審査員を務める丸山健太郎氏で知られる。 最大の特徴は、ブランド色を純黒ではなく #231815 に置くこと。これは日本の DTP でスミベタに使われる標準値そのもので、印刷物のイン…

天童木工（Tendo Mokko）

Japan · Helvetica

天童木工株式会社（https://www.tendo-mokko.co.jp/）のデザイン仕様書。 1940年創業、山形・天童の家具メーカー。柳宗理「バタフライスツール」や 成形合板（Roll Press Wood）の名作家具で知られる、日本のモダンデザインの担い手。 実サイトの computed style 実測（2026-06-24 取得）に基づく。

Other fonts