🔔 Noetra によるフィジカル AI 向け国産マルチモーダル基盤モデル開発に参画 詳細 ›

現実世界を計算可能にし、
共に未来を創り出す

DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

01 / COLORS

有彩色は #1a4aff の 1 色だけ

Brand
PFN Blue
#1a4aff
唯一の主色。CTA・リンク・告知バーの枠
Deep Navy
#0d318f
Cookie バー専用。UI には持ち出さない
Neutral
Background
#ffffff
ページ地色。html/body に塗り指定は無い
Surface Tint
#f3f7ff
告知バーの面。青の最薄
Surface Gray
#f7f7f8
事業紹介カードの面
Ink
#000000
本文・ナビ。純黒を使う
Divider
#90a1b9
縦罫・区切り
Gradients — 面は background-image で塗る

このサイトは面を background-color で塗らない。ソリッドな青も「全ストップが同色のグラデーション」として書かれているため、background-color だけを読むと CTA も濃紺カードも「透明」に見える。

Heading Gradient
linear-gradient(160deg, #010947, #0043af 51.03%, #0046ff 99.04%)
＋ background-clip: text
Card Gradient（濃紺・5 ストップ）
linear-gradient(160deg, #01053f 20%, #001b6d 40%, #022d73 60%, #00237e 70%, #000a58 90%)
Radial（採用カード）
radial-gradient(circle at 76% 84%, #002fd7 0px, #000e7e 100%)
Solid-as-Gradient（CTA）
linear-gradient(160deg, #1a4aff 0px, #1a4aff 100%)
02 / TYPOGRAPHY — 実測値

字送りは「36px の境界」1 本の規則で決まる

サイズ帯letter-spacingline-height性格
≥ 36px0.03em1.3見出し。字間を締め、行を詰めて塊にする
16〜30px0.05em1.5本文・小見出し。字間を開き、行を空けて読ませる
≤ 14px0.05em1.3UI テキスト。字間は本文と同じ、行だけ詰める
ボタンnormal1.5唯一の例外。ピル／矩形の中で横に伸びないよう字間を切る
現実世界を計算可能にし
72px / 400 / line-height: 1.3 (93.6px) / letter-spacing: 0.03em (2.16px) / background-clip: textHero — color は transparent
幅広い産業領域にプロダクトを水平展開
48px / 400 / line-height: 1.3 (62.4px) / letter-spacing: 0.03em (1.44px)ステートメント（h2）
注目ニュース
36px / 400 / line-height: 1.3 (46.8px) / letter-spacing: 0.03em (1.08px)セクション見出し — 境界のちょうど上
最先端の技術を最適な形で実装
30px / 400 / line-height: 1.5 (45px) / letter-spacing: 0.05em (1.5px)リード — 境界のちょうど下。値が切り替わる
世界最高水準の AI 技術を擁するエンジニア・リサーチャー
24px / 400 / line-height: 1.5 (36px) / letter-spacing: 0.05em (1.2px)カード見出し（h3）
企業情報
20px / 500 / line-height: 1.5 (30px) / letter-spacing: 0.05em (1px)ドロワーの見出しリンク — 500 が出る唯一の箇所
PFN は自社が持つ計算基盤や最先端技術を応用し、各業界のドメイン知識と組み合わせることで、現実世界の課題を解ける形に落とし込んでいます。
18px / 400 / line-height: 1.5 (27px) / letter-spacing: 0.05em (0.9px)本文（大）
本文テキスト — 計算可能なものづくりでより効率よく、安全に、低環境負荷に。font-weight は 400 で通し、700 は一切使いません。強調はサイズ・グラデーション・面の暗さで作ります。
16px / 400 / line-height: 1.5 (24px) / letter-spacing: 0.05em (0.8px)本文の基準
2026.07.16 — グローバルナビ・日付などの UI テキスト
14px / 400 / line-height: 1.3 (18.2px) / letter-spacing: 0.05em (0.7px)UI — 行だけ詰める
03 / CARDS

白地セクション → 濃紺カード → 白地セクション の交互

半導体からアプリケーションまで、
AI 技術のバリューチェーンを垂直統合

Preferred Networks (PFN) は、AI 技術の研究開発から、自社設計の AI プロセッサ MN-Core、計算基盤、そして各産業向けのソリューションまでを一貫して手がけています。

業界一覧 企業情報 創業者メッセージ

PFN は新しい仲間を募集しています

2026.07.16
採用情報

製造業

計算可能なものづくりでより効率よく、安全に、低環境負荷に。

ロボティクス

現場の作業を学習し、変化に追従する自律システムを届ける。

ライフサイエンス

創薬・医療の探索空間を計算で圧縮する。

エンターテインメント

生成技術を制作の現場で使える形にする。

濃紺カードは radius 16px / overflow hidden。濃紺カードを 2 枚続けて置かず、白地を挟んでリズムを作る。

04 / BUTTONS

radius は 6px（ボタン）と 16px（カード）の 2 段だけ

お問い合わせ
Primary — 面はグラデ ＋ 1px rgba(0,0,0,.2)
事業内容
Secondary — 白地・枠なし・文字だけ青
ニュース一覧
Secondary（小）— 14px
業界一覧 企業情報 創業者メッセージ

On-Navy — 濃紺カード上の CTA。枠なし・radius 6px・14px

告知バー — サイト唯一のピル（radius 80px）

🔔 Noetra によるフィジカル AI 向け国産マルチモーダル基盤モデル開発に参画 詳細 ›

ピルはこの告知バーだけ。他の操作要素は必ず 6px の矩形にする。

05 / FORMS

フォーム要素

デフォルト — 1px solid rgba(0,0,0,0.2) / radius 6px
フォーカス — border: #1a4aff
エラー — border: #d62828（実装目安。#1a4aff と明度を揃える）
06 / ELEVATION — 実測値（影は 0 段）

奥行きは面の暗さで作る

地 #ffffff
ページ全体
薄い面 #f7f7f8
事業紹介カード
薄い面 #f3f7ff
告知バー
主役の面
濃紺グラデーションのカード。影の代わりに層を作る

box-shadow はサイト内に 1 つも存在しない。Mantine の --mantine-shadow-*（250 個の CSS 変数）はすべてライブラリ既定値で未使用。PFN の青 #1a4aff は Mantine のパレットに存在しない。

07 / LAYOUT

スペーシングとコンテンツ幅

1 · 4
2 · 8
3 · 12
4 · 16
6 · 24
8 · 32
12 · 48
20 · 80
Main Container 1200px 目安
Article 760px 目安