これからの食卓、
これからの畑

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

詳しく見る DESIGN.md を読む

01 / Colors
COLORS

カラーパレット

Brand
Brand Green
#7B9437
CTA、リンク、ヒーロー
Brand Green Light
#B5C474
お問い合わせ等
Footer Green
#76952F
フッター背景
Hero Overlay
rgba(123,148,55,0.8)
ヒーロー半透明
Text
Text Primary
#333333
本文テキスト
Text Nav
#595757
ナビゲーション
Badge Gray
#89888C
カテゴリバッジ
Badge Light Gray
#A7A7A7
NEWS ボタン
Surface & Border
Background
#FFFFFF
ページ背景
Section BG
#F2F2F2
セクション背景
Border
#DDDDDD
区切り線

02 / Typography
TYPOGRAPHY

タイポグラフィ階層

STORY
Century Schoolbook (Playfair Display) / 60px / 700 / line-height: 1.2英字ディスプレイ
これからの食卓、これからの畑
Ryumin (Noto Serif JP) / 42px / 700 / line-height: 1.4Hero H2
サステナブルな食のサプライチェーン
Ryumin (Noto Serif JP) / 28px / 700 / line-height: 1.4セクション見出し
News & Release
Arial Black (Oswald) / 20px / 700 / line-height: 1.4 / letter-spacing: 3px英字セクション見出し
ヒーロー本文テキスト。大きめのサイズで、ゆったりとした行間で読みやすさを確保。ABCabc 123
ヒラギノ角ゴ (Noto Sans JP) / 20px / 400 / line-height: 1.8ヒーロー本文
ナビゲーションリンク
ヒラギノ角ゴ (Noto Sans JP) / 15px / 700 / line-height: 1.4ナビ
本文テキスト — 食に関する情報を正確に、読みやすくお届けします。行間 1.8 で日本語テキストの標準的な可読性を確保。ABCabc 123
ヒラギノ角ゴ (Noto Sans JP) / 14px / 400 / line-height: 1.8本文
フッターナビゲーション — 12px
ヒラギノ角ゴ (Noto Sans JP) / 12px / 400 / line-height: 1.8フッター
Detail
Arial Narrow Bold (Oswald) / 20px / 700 / letter-spacing: 4pxラベル
INFO RELEASE
Arial Narrow Bold (Oswald) / 12.6px / 700 / letter-spacing: 1.89pxカテゴリバッジ

ARTICLE

記事組版サンプル

持続可能な食のサプライチェーンを実現するために

私たちは「これからの食卓、これからの畑」をスローガンに、食に関する社会課題をビジネスの手法で解決することを目指しています。

生産者とともに歩む

全国の契約農家から届く有機野菜や特別栽培農産物を、独自の基準で品質管理し、お客さまの食卓にお届けしています。生産者の顔が見える安心感と、旬の味わいを大切にしています。

フードロスの削減にも取り組み、規格外の野菜を活用した商品開発や、需要予測による適切な仕入れを行っています。畑から食卓まで、サステナブルなサプライチェーンの構築に挑戦し続けます。

テクノロジーで食を変える

AIを活用した需要予測システムにより、最適な仕入れ量を実現し、フードロスを削減。また、定期便サービス「Kit Oisix」では、20分で主菜と副菜が完成するミールキットを提供し、忙しい家庭の食卓を豊かにしています。


04 / Buttons
BUTTONS

ボタンバリエーション

NEWS
Gray

Navigation Tabs

企業情報 IR情報 サステナビリティ ニュース

Badges

INFO RELEASE NEWS EVENT

05 / Cards
CARDS

カードコンポーネント

Oisix
RELEASE

有機野菜の定期便サービスをリニューアル

全国の契約農家から届く旬の有機野菜を、より手軽にお届けするための新プランを開始します。

2026.05.20
詳しく見る →
radish boya
INFO

フードロス削減プロジェクトの取り組み報告

規格外野菜の活用による年間フードロス削減量と、今後の目標についてご報告します。

2026.05.15
詳しく見る →
Daichi
NEWS

サステナビリティレポート 2026 を公開

食の安全と環境への配慮を両立する取り組みの進捗と、新たなビジョンについて。

2026.05.10
詳しく見る →

06 / Forms
FORMS

フォーム要素

デフォルト -- border: #DDDDDD, radius: 0px
フォーカス -- border: #7B9437 (brand green)
正しい電話番号を入力してください
エラー -- border: #c0392b

07 / Elevation
ELEVATION

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ。基調スタイル
Elevation 1
0 1px 3px rgba(0,0,0,0.1)
Elevation 2
0 4px 8px rgba(0,0,0,0.12)
Focus Ring
#7B9437 (brand green)

08 / Layout
LAYOUT

レイアウト & スペーシング

Content Widths

Main Content 960px
Article Body 640px

Spacing Scale

4px
8px
16px
24px
40px
80px