00 — Foundation 核となる5つの意思決定

Principles

デザインシステムは「値の集合」ではなく「意思決定の集合」です。 LEOSENSE の見た目を支える 5つのコア原則を、以下に明文化します。新しい画面/部品を作る際は、まずこれを参照してください。

01

Emphasis through color and motion, not font-family

強調は色と動きで。em は同じフォント・同じ太さで、色と下線アニメーションだけで強調する。フォント種類を変えると視線が字形の変化を追うことになり、疲れる。

02

Sky-blue hierarchy, ink-navy for text

ブランドは水色階層（blue-50〜900）。テキストは #0a2540 のインクネイビー。水色と白で構成された清潔さと、ネイビーの可読性のコントラストで "信頼" を表現。

03

Signature easing: `cubic-bezier(0.2, 0.8, 0.2, 1)`

すべての動きはこのイージング。立ち上がりが早く、減速がゆるやかな曲線。"安心感"と"機敏さ"を両立するブランドのシグネチャ。迷ったらこれ。

04

Generous whitespace over decorative density

装飾より余白。親近感は「呼吸する」デザインから生まれる。セクション間は最低 120px、カード内余白は 40-44pxを基本とする。

05

Underline-draw on emphasis

em の直下に、左から右へ描かれる細いグラデーションライン。静的な強調ではなく、スクロール時に "気がつく" 程度の上品なアクセント。クラフト感を添えつつノイズにならない。

01 — Tokens 23 colors / 4 gradients

Color

ブランドは水色階層（blue-50 → blue-900）。その横に、意味を持つ semantic colors（accent-text, bg, surface-dark）、テキスト階層 ink, そして境界線用のソフトブルーが並びます。

Brand — Sky Blue Scale

--color-blue-50

#EAF6FD

--color-blue-100

#D6ECFA

--color-blue-200

#AED9F5

--color-blue-300

#7CC1EC

--color-blue-400

#4AA8E0

PRIMARY

--color-blue-500

#2E9AD0

--color-blue-600

#1F7EB4

--color-blue-700

#186490

--color-blue-900

#0C3E62

Semantic

--color-accent-text

#1A6892

--color-bg

#FFFFFF

--color-bg-soft

#F5FAFF

--color-surface-dark

#061B30

Ink (Text Scale)

--color-ink

#0A2540

--color-ink-soft

#3B5A7A

--color-slate

#6A7D93

--color-slate-light

#9AABBD

Border

--color-border

#E4EEF7

--color-border-strong

#CCE0F1

Gradient

--gradient-brand

icons, stats

--gradient-brand-deep

CTA block

--gradient-brand-soft

icon bg

--gradient-underline

em underline

Do. テキスト内の強調は --color-accent-text を使う。
Don't. 本文の emphasis に --color-blue-500 は派手すぎる。視覚的ノイズになる。

02 — Tokens 4 families / 10 sizes

Typography

幾何的な Plus Jakarta Sans を Display に、親和性の高い DM Sans を Body に。日本語は Zen Kaku Gothic New で可読性と親しみを両立させ、Mono はラベルや数値に JetBrains Mono。

Font Families

--font-display Plus Jakarta Sans display & headings

地域と企業の、次の一手を共に

--font-body DM Sans body & UI

LEOSENSEは、採用支援・不動産仲介・空家活用を横断的に手がけるスタジオです。

--font-jp Zen Kaku Gothic New Japanese blocks

地方の、中小の、現場の。それぞれのローカルには、それぞれの物語があります。

--font-mono JetBrains Mono kickers, code

— 01 Services / Recruitment

Type Scale

--text-h1clamp(40px, 7.2vw, 100px)hero headline

H1 Display

--text-h2clamp(34px, 5vw, 60px)section headline

H2 Section Heading

--text-h3clamp(24px, 3vw, 38px)subsection

H3 Subheading

--text-h4clamp(20px, 2.4vw, 28px)card titles

H4 Card Title

--text-lg17pxintro / lead

リード文に使うサイズです。読みやすく、注目を集めます。

--text-body14.5pxbody default

本文の標準サイズ。ほとんどのテキストはこのサイズで組みます。

--text-sm12pxlabels / mono

— SMALL CAPTION LABEL

Weights

Aa

Regular
400

Aa

Medium
500

Aa

Semibold
600

Aa

Bold
700

Aa

Heavy
800

Emphasis Pattern

地域の、次の一手を。

Emphasis w/ underline accent same font · accent color · animated underline

Show code

HTML + CSS

/* Shared rule — applies everywhere em appears */
em {
  font-style: normal;            /* no italic */
  font-family: inherit;          /* same as parent */
  font-weight: inherit;          /* same as parent */
  color: var(--color-accent-text);
  position: relative;
}

/* Animated underline draws in on scroll */
h1 em::after, h2 em::after, blockquote em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.06em;
  height: 0.14em;
  background: var(--gradient-underline-accent);
  opacity: 0.32;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slowest) var(--ease-standard);
}
.in-view em::after { transform: scaleX(1); }

03 — Tokens 4px base scale

Spacing

4pxベースのスケール。コンテンツ内は space-4〜10、セクション間は section-py プリセットを使います。

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2080px

--space-2496px

--space-30120px

--space-40160px

Section Presets

Token	Value	Usage
`--section-py-sm`	80px	Compact sections, footer
`--section-py`	120px	Standard sections
`--section-py-lg`	160px	Hero, Philosophy

04 — Tokens 6 radii

Radius

角丸は親しみやすさのキー。カードは md（18px）をデフォルトに、大きな特徴カードは lg（28px）を使います。

xs

6px

sm

10px

md

18px

lg

28px

xl

36px

full

999px

05 — Tokens 4 elevations

Shadow

シャドウはすべてブルー寄りにティントされており、ブランドの透明感と統一感を維持します。ホバー時に md → lg へ持ち上がるのが標準パターン。

--shadow-sm

0 4px 14px rgba(12,62,98,0.06)

--shadow-md

0 10px 32px rgba(12,62,98,0.08)

--shadow-lg

0 24px 60px rgba(12,62,98,0.14)

--shadow-blue

0 20px 48px rgba(46,154,208,0.28)

06 — Tokens 5 easings / 6 durations / 8 patterns

Motion

動きはブランドの「人格」です。立ち上がりが早く、減速がゆるやかな ease-standard がLEOSENSEのシグネチャ曲線。迷ったらこれ。

Easing Curves（ホバーしてプレビュー）

--ease-standard ★

cubic-bezier(0.2, 0.8, 0.2, 1)

--ease-out

cubic-bezier(0, 0, 0.2, 1)

--ease-in

cubic-bezier(0.4, 0, 1, 1)

--ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

--ease-spring

cubic-bezier(0.3, 1.3, 0.4, 1)

Durations

Token	Value	Usage
`--duration-instant`	150ms	Color changes, state shifts
`--duration-fast`	250ms	Small UI transitions, hover color
`--duration-base`	350ms	Card hover lift, standard transitions
`--duration-slow`	500ms	Field row expansion, larger states
`--duration-slower`	700ms	Underline draw, line reveals
`--duration-slowest`	900ms	Full scroll reveal sequences

Named Patterns

Pattern	Description	Where
`fadeUp`	opacity 0→1 + translateY 32px→0	All reveal elements
`riseMask`	translateY 110%→0 inside overflow-hidden	Hero headlines
`hoverLift`	translateY 0→-8px + shadow md→lg	Service cards
`underlineDraw`	scaleX 0→1, left origin	em underline accents
`bob`	translateY loop, 5s ease-in-out	Floating chips
`orbFloat`	translate+scale loop, 12-16s	Background orbs
`ping`	scale 1→2.4 + opacity 1→0	Live-indicator pulse
`marquee`	linear infinite translateX	Ticker text scroll

07 — Library Lucide-style line icons

Icons

現サイトで使用中の主要アイコン。Lucide 風のシンプルなライン表現、ストローク幅 1.6、 24×24 viewBox が標準。

users

home

grid

monitor

arrow-right

arrow-upright

clock

08 — Library 10 components

Components

すべてのコンポーネントはトークンを参照します。ハードコードされた値は含みません。クラス名はすべて c- プレフィックス。

Kicker

— 01 Services

.c-kickersection intro label

Show code

HTML

<span class="c-kicker">— 01 Services</span>

Badge

NEW ローカルビジネスのDXパートナー

.c-badgehero badge with pulse indicator

Show code

HTML

<span class="c-badge">
  <span class="tag">NEW</span>
  <span>ローカルビジネスのDXパートナー</span>
  <span class="pulse"></span>
</span>

Tag / Chip

採用戦略媒体運用採用広報

.c-tagcategory chips

Button

.c-btn · .c-btn-primary · .c-btn-ghost · .c-btn-smCTA actions

Pill Navigation

L LEOSENSE

会社についてサービス事業領域お問い合わせ

.c-pillnavglass morphism sticky nav

Icon Frame

.c-iconframe / .c-iconframe.smgradient rounded squares for icons

Float Card

採用支援

Recruitment

.c-floatcardfloating feature card with icon

Avatar & Author Card

R

Reo Sumita

Founder / CEO

.c-avatar · .c-authorgradient avatar + author pill

Service Card（主力）

01 / Recruitment

採用支援 & コンサル

"採用できない"を構造から変える

求人媒体に頼らない採用設計、採用広報、運用代行まで。中小企業・地場企業のリアルな悩みに伴走型で応えるパートナー。

採用戦略媒体運用採用広報

.c-servicehover for lift + border glow

Field Row

N°01 中小企業の採用再設計 Recruitment Consulting

N°02 全国対応リモート仲介 Real Estate

.c-fieldrowhover for padding expand + arrow rotate

09 — Library Section-level templates

Patterns

コンポーネントを組み合わせたセクション単位のテンプレート。新しいページを作る際は、まずここから必要なパターンを選びます。

Pattern 01 — Section Header

— 02 Services

私たちのサービス。
すべては現場のために。

地域企業の複雑な課題に、分野を跨いで応えます。
窓口を一本化するから、設計も実装もスムーズに。

構造: Kicker → H2（em + gradient span） → 説明文3行以内
余白: section top padding = section-py-lg、header下マージン = space-20 (80px)

Pattern 02 — Stats Band (Dark)

— 03 Numbers

小さなスタジオが、縦横に越境する。

2022

創業年

5^domains

事業領域

100^%

リモート対応

∞

組み合わせ

Pattern 03 — CTA Block

— Let's talk

地域の、次の一手を。

採用のこと、不動産のこと、空家のこと、DXのこと。
事業の境目をまたがった相談、歓迎します。

Pattern 04 — Philosophy Quote

— 04 Vision

テクノロジーは、
地方の味方になれる。
大きな仕組みでなく、一件ずつを確実に動かすために。

R

Reo Sumita

Founder / CEO

応用: この4パターンの組み合わせでサイトのほぼ全セクションが構成できます。新しいページを作る際は、これらをコピーして中身を差し替える形でスタートしてください。

10 — Ops Claude Code Ready

Usage & Claude Code

デザインシステムを使って新しい画面を実装する手順と、Claude Code 等のエージェントに渡す際のプロンプト例。

1. 直接実装する場合

HTML

<link rel="stylesheet" href="./leosense-ds-tokens.css">

<style>
  .card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-base) var(--ease-standard);
  }
</style>

2. Claude Code に渡す場合

以下をプロンプトに含めると、LEOSENSE ブランドに一致した実装が生成されます。

Prompt

# LEOSENSE ブランド実装ルール

このプロジェクトには leosense-ds-tokens.css がある。
以下を厳守すること:

1. 色/余白/角丸/シャドウは全て CSS 変数 (--color-* 等) を参照。
   ハードコードされた hex 値 や px 値は禁止。

2. 強調 (em) は同じフォント・同じ太さ・色のみで表現。
   font-family や font-style の変更は禁止。

3. 動きは全て var(--ease-standard) を使う。
   これがブランドのシグネチャイージング。

4. セクション間の余白は var(--section-py) をデフォルトに。

5. 新規コンポーネントを作る際は、
   既存の .c-* コンポーネントのパターンに倣う。

参照ドキュメント:
- leosense-ds-tokens.css (全トークン)
- leosense-ds-guide.html (ビジュアルリファレンス)

3. Version Policy

Version	Scope	Stability
`1.x.x`	Corporate site のみ	Stable
`2.x.x`	+ Real Estate サイト統合	Planned
`3.x.x`	+ Brand foundation 層 (Voice & Tone, Writing)	Future

LEOSENSE Design System

Principles

Emphasis through color and motion, not font-family

Sky-blue hierarchy, ink-navy for text

Signature easing: cubic-bezier(0.2, 0.8, 0.2, 1)

Generous whitespace over decorative density

Underline-draw on emphasis

Color

Brand — Sky Blue Scale

Semantic

Ink (Text Scale)

Border

Gradient

Typography

Font Families

Type Scale

Weights

Emphasis Pattern

Spacing

Section Presets

Radius

Shadow

Motion

Easing Curves（ホバーしてプレビュー）

Durations

Named Patterns

Icons

Components

Kicker

Badge

Tag / Chip

Button

Pill Navigation

Icon Frame

Float Card

Avatar & Author Card

Service Card（主力）

採用支援 & コンサル

Field Row

Patterns

Pattern 01 — Section Header

私たちのサービス。 すべては現場のために。

Pattern 02 — Stats Band (Dark)

小さなスタジオが、縦横に越境する。

Pattern 03 — CTA Block

地域の、次の一手を。

Pattern 04 — Philosophy Quote

Usage & Claude Code

1. 直接実装する場合

2. Claude Code に渡す場合

3. Version Policy

Signature easing: `cubic-bezier(0.2, 0.8, 0.2, 1)`

私たちのサービス。
すべては現場のために。