DESIGN SYSTEM PREVIEW

いのちのてざわりを感じる場所
農業・食・アート・自然が一体となったサステナブルファーム

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


01 / Colors

カラーパレット — カテゴリカラーコーディング

Category Colors(ブランドの核心)
INFORMATION
#829a2a
オリーブグリーン — 最頻出
EAT / DINING
#eeb200
ウォームアンバー — 食
PEOPLE
#949490
ウォームグレー — 人
EXPERIENCE
#89b2c9
スカイブルー — 体験
ART
#dc8f74
テラコッタ — アート
EVENT
#4082ab
ディープブルー — イベント
SUSTAINABILITY
#5f9133
ディープグリーン
FARM
#9eaf19
ライムグリーン — 農園
STAY
#a8aaa9
ミディアムグレー — 宿泊
OTHER
#dcdedd
ライトグレー — その他
Neutral
Black
#000000
本文テキスト・見出し
Nav Background
#eff4f8
ナビゲーション背景
Light Gray
#dcdedd
ボーダー・区切り
White
#ffffff
ページ背景・カード
Brand / Highlight
Primary
#829a2a
オリーブグリーン(基調色)
Highlight
#ffff00
強調・アテンション
Semantic
Success
#5f9133
成功・完了
Danger
#c04040
エラー・削除
Warning
#d4960a
警告・注意

02 / Typography

タイポグラフィ階層 — 実測値

コンテンツ見出し — H1 Content (14px/700)
14px / weight 700 / line-height 1.71 / letter-spacing 0.1emNoto Sans JP
ナビゲーションラベル — Nav Label (15px/700)
15px / weight 700 / line-height 1.5 / letter-spacing 0.1emナビゲーション
案内タグ — Info Tag (15px/500)
15px / weight 500 / line-height 1.5 / letter-spacing 0.087em施設案内
施設情報 — Info Detail (14px/500)
14px / weight 500 / line-height 1.5 / letter-spacing 0.093em施設情報
[レストラン] — Nav Category (13px/500)
13px / weight 500 / line-height 1.23 / letter-spacing 0.115emナビカテゴリ
KURKKU FIELDS クルックフィールズ — Logo (13px/700)
13px / weight 700 / line-height 1.23 / letter-spacing 0.1emロゴ
デフォルトテキスト — Body Default (13px/400)
13px / weight 400 / line-height 1.23 / letter-spacing 0.1emページ全体
本文テキスト — 農園の静けさを反映した、広い行間と字間。line-height: 2.0 は日本語サイトでもかなり広い部類に入ります。コンテンツが呼吸するような余白感を生み出し、読みやすさと穏やかな印象を両立しています。ABCabc 123
12px / weight 400 / line-height 2.0 / letter-spacing 0.1em記事・説明文
ONLINE SHOP · RESERVATION · ACCESS — EN Label (10px/700)
10px / weight 700 / letter-spacing 0.065emHelvetica stack / 欧文 UI ラベル
フッターテキスト — Footer (11px/400)
11px / weight 400 / line-height 1.5 / letter-spacing 0.045emフッター

記事ページの組版サンプル

大地に触れ、いのちのてざわりを知る

千葉県木更津市の広大な敷地に広がる農園では、有機農業を実践しています。季節の野菜が育つ畑を歩き、土に触れ、収穫を体験する。それは単なる農業体験ではなく、自然の循環の中に自分を置き直す時間です。

アートと自然が交差する風景

草間彌生やカミーユ・アンロをはじめとするアーティストの作品が、森や丘の中に点在しています。屋外のアート作品は、天候や季節によって表情を変え、訪れるたびに新しい発見をもたらします。自然とアートの境界が溶けあう場所です。

農園から食卓へ、その日の恵みを味わう

敷地内のレストランでは、併設農園で朝収穫された野菜をその日のうちに調理します。シェフが素材の力を最大限に引き出す料理は、食べることの意味を問い直すきっかけになるでしょう。


04 / Buttons

ボタンバリエーション

お知らせを見る
Category CTA (INFORMATION)
レストランを予約
Category CTA (EAT)
イベント情報
Category CTA (EVENT)
詳しく見る
Outline
アクセスはこちら
Text Link (underline)
ONLINE SHOP
EN Label Button
FARM
Category Badge
ART
Category Badge
EXPERIENCE
Category Badge
SUSTAINABILITY
Category Badge
STAY
Category Badge

05 / Cards

トピックカード — カテゴリカラーコーディング

FARM
FARM

有機野菜の収穫体験

季節の野菜を自分の手で収穫する。土に触れ、いのちの循環を体感するプログラム。

2026.05.09
ART
ART

森のアートインスタレーション

自然の中に佇むアート作品。季節や天候によって表情を変える、屋外展示の魅力。

2026.04.22
EAT
EAT

農園レストランの新メニュー

朝採れ野菜をシェフが仕立てる、畑から食卓への最短距離。旬の恵みを味わう特別なひととき。

2026.04.15
EVENT
EVENT

初夏の音楽祭

緑に囲まれた野外ステージで、自然と音楽が融合するイベントを開催します。

2026.06.01
EXPERIENCE
EXPERIENCE

自然観察プログラム

敷地内に生息する動植物を専門ガイドと共に観察。里山の生態系を学ぶ体験型プログラム。

2026.03.28
SUSTAINABILITY
SUSTAINABILITY

循環型農業への取り組み

コンポスト、太陽光発電、水の再利用。持続可能な暮らしの実験場としての農園の姿。

2026.03.10
INFORMATION
INFORMATION

営業時間・アクセスのご案内

開園時間、休園日、駐車場情報など、ご来園に必要な基本情報をまとめています。

2026.05.01
STAY
STAY

コテージ宿泊プラン

星空の下で過ごす一夜。農園の朝食付き宿泊で、自然のリズムに身を委ねる体験を。

2026.02.20
PEOPLE
PEOPLE

農園スタッフの日常

土と向き合い、いのちを育てる人々。農園で働くスタッフの想いと日々の仕事を紹介します。

2026.02.05

06 / Forms

フォーム要素

デフォルト — border: #dcdedd, radius: 0
フォーカス — border: #829a2a (INFORMATION green)
電話番号の形式が正しくありません
エラー — border: #c04040 (danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none / border のみ
Level 1: Card
2px 4px 5px 0px rgba(4,0,0,0.3)
Level 2: Hover
4px 8px 10px 0px rgba(4,0,0,0.3)
Card Shadow の特徴: X オフセット 2px で右下方向の光源。色は rgba(4,0,0,0.3) で純黒ではなくわずかに暖色寄り。アースカラーパレットとの調和を意図。border-radius は全要素 0px(直角)。

08 / Layout

グリッド & スペーシング

3-Column Grid
INFORMATION
EAT
ART
2-Column Grid
EXPERIENCE
EVENT
Spacing Scale
4px (XS)
8px (S)
16px (M)
24px (L)
48px (XL)
80px (XXL)
Border Radius
0px
全要素で border-radius: 0 を適用。角丸は一切使用しない。直角のシャープさが、自然素材の「素朴さ」とのコントラストを演出。