---
version: alpha
name: LUUP
description: 日本の電動マイクロモビリティシェアリングブランド。「街じゅうを『駅前化』するインフラをつくる」をミッションに掲げ、ティール系グリーンと白を軸にしたクリーン＆テクノロジカルなビジュアルアイデンティティ。
sources:
  - https://luup.sc/
  - https://luup.sc/wp-content/themes/luup-2023/assets/css/style.css?ver=20260407
notes:
  - ブランドプライマリカラーは CSS 中で最頻出の #00B6AC（51回）。Bulma の is-primary は #00D1B2 に設定されているが、実際のサイトでは #00B6AC が支配的。
  - フォント Roobert はローカルホスト配信（woff2）。外部埋め込み不可のため、代替として Inter または DM Sans を推奨。
  - Bulma CSS フレームワーク + カスタム WordPress テーマ（luup-2023）ベース。
  - /brand/ および /press/ はアクセス不可（404）。ロゴ使用ガイドラインは公式プレスキットを要確認。
  - 画像・写真は著作権により再利用不可。デモでは SVG プレースホルダーを使用。

colors:
  primary: "#00B6AC"
  primary-light: "#00D1B2"
  primary-hover: "#00B89C"
  primary-active: "#009D94"
  primary-dark: "#00947E"
  primary-darkest: "#00837C"
  surface-teal-50: "#EBFFFC"
  surface-teal-100: "#D1FFF8"
  text-primary: "#0A0A0A"
  text-secondary: "#313636"
  text-muted: "#4A4A4A"
  text-light: "#666666"
  neutral-lightest: "#F2F2F2"
  neutral-light: "#DADEE6"
  neutral-mid: "#CBD0DC"
  neutral-border: "#B5B5B5"
  surface-white: "#FFFFFF"
  surface-dark: "#121212"
  surface-near-black: "#0A0A0A"

typography:
  display:
    fontFamily: '"Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif'
    fontSize: "3.5rem"
    fontWeight: 700
    lineHeight: 1.2
  h1:
    fontFamily: '"Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif'
    fontSize: "2.5rem"
    fontWeight: 700
    lineHeight: 1.3
  h2:
    fontFamily: '"Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif'
    fontSize: "2rem"
    fontWeight: 700
    lineHeight: 1.4
  h3:
    fontFamily: '"Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif'
    fontSize: "1.5rem"
    fontWeight: 600
    lineHeight: 1.4
  body:
    fontFamily: '"Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif'
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.4

rounded:
  none: "0"
  small: "2px"
  default: "4px"
  medium: "8px"
  large: "10px"
  pill: "28px"
  pill-large: "54px"
  full: "9999px"

spacing:
  base: "0.25rem"
  xs: "0.5rem"
  sm: "0.75rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "2rem"
  xxl: "3rem"
  section: "4rem"
  section-large: "6rem"

components:
  button-primary:
    backgroundColor: "#00B6AC"
    color: "#FFFFFF"
    borderRadius: "28px"
    fontFamily: "{typography.body.fontFamily}"
    fontWeight: 600
    fontSize: "1rem"
    padding: "0.75em 1.5em"
    hover-backgroundColor: "#00B89C"
  button-outline:
    backgroundColor: "transparent"
    color: "#00B6AC"
    border: "2px solid #00B6AC"
    borderRadius: "28px"
    hover-backgroundColor: "#EBFFFC"
  button-dark:
    backgroundColor: "#0A0A0A"
    color: "#FFFFFF"
    borderRadius: "28px"
  card:
    backgroundColor: "#FFFFFF"
    borderRadius: "10px"
    overflow: "hidden"
    imageHoverTransform: "scale(1.2)"
    imageTransition: "0.5s"
    contentHoverDecoration: "underline"
  tag:
    backgroundColor: "#DADEE6"
    color: "#313636"
    borderRadius: "4px"
    fontSize: "0.75rem"
    padding: "0.25em 0.75em"
  navbar:
    backgroundColor: "#FFFFFF"
    height: "3rem"
    position: "sticky"
    zIndex: 30
    linkColor: "#0A0A0A"
    linkHoverBackground: "#F2F2F2"
  input:
    borderRadius: "4px"
    border: "1px solid #DADEE6"
    focusBorder: "#00B6AC"
    fontSize: "1rem"
    padding: "0.5em 0.75em"
  section-teal:
    backgroundColor: "#EBFFFC"
    borderTop: "none"
---

## Overview

LUUP（株式会社Luup）は日本の電動マイクロモビリティシェアリングサービス。電動キックボード・電動アシスト自転車の短距離移動インフラを提供し、「街じゅうを『駅前化』するインフラをつくる」をコーポレートミッションに掲げる。

ビジュアルアイデンティティは **ティール（青緑）を基軸** にし、白・黒と組み合わせることで清潔感・テクノロジー感・持続可能性を表現する。グラフィックは余白を活かしたミニマルレイアウトで、日本のプロダクトUIらしい情報密度を保ちつつも開放感がある。


## Colors

| トークン | 値 | 用途 |
|---|---|---|
| `primary` | `#00B6AC` | CTA ボタン、アクセントリンク、アイコン — ブランドの主役色 |
| `primary-light` | `#00D1B2` | ホバー演出、ライトな強調 |
| `primary-hover` | `#00B89C` | ボタン hover/active 状態 |
| `primary-active` | `#009D94` | pressed / visited |
| `primary-dark` | `#00947E` | ダークモード・コントラスト強化が必要な場面 |
| `surface-teal-50` | `#EBFFFC` | セクション背景、カードtint |
| `surface-teal-100` | `#D1FFF8` | より強調したtint |
| `text-primary` | `#0A0A0A` | 本文・見出し |
| `text-secondary` | `#313636` | サブテキスト |
| `text-muted` | `#4A4A4A` | キャプション、補足 |
| `neutral-light` | `#DADEE6` | タグ背景、ボーダー、区切り線 |
| `neutral-mid` | `#CBD0DC` | ホバー背景 |
| `neutral-border` | `#B5B5B5` | カード枠線 |
| `surface-white` | `#FFFFFF` | ページ・ナビ背景 |
| `surface-dark` | `#121212` | ダークセクション背景 |

**注意点**:
- プライマリカラーはティール系の中でも `#00B6AC` が最も使用頻度が高い（純テキストで51回、背景で38回）
- Bulma の `is-primary` は `#00D1B2` に設定されているが、カスタム UI では `#00B6AC` が優先される
- カラーは白黒との二色使いが多く、グラデーションはほぼ使用されない


## Typography

### フォントスタック

**Latin / 数字向け（ブランドフォント）**: Roobert
- ローカル配信 woff2、Light(300) / Regular(500) / Bold(700) の3ウェイト
- 外部埋め込み不可のため、パブリックプロジェクトでは **Inter** または **DM Sans** を代替推奨

**Japanese**: `"Hiragino Sans", "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic"`

**実装フルスタック**:
```css
font-family: "Roobert", "Noto Sans JP", "Yu Gothic", "YuGothic",
             "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo",
             "MS PGothic", sans-serif;
```

### タイポグラフィスケール

| ロール | サイズ | ウェイト | 用途 |
|---|---|---|---|
| Display | 3.5rem / 56px | 700 | ファーストビュー大見出し |
| H1 | 2.5rem / 40px | 700 | ページタイトル |
| H2 | 2rem / 32px | 700 | セクション見出し |
| H3 | 1.5rem / 24px | 600 | カード見出し、小セクション |
| Body | 1rem / 16px | 400 | 本文 |
| Body Small | 0.875rem / 14px | 400 | キャプション、ラベル |
| Label/Tag | 0.75rem / 12px | 500 | タグ、バッジ |

行間は基本 `1.5`、見出しは `1.2〜1.4`。


## Layout

- **フレームワーク**: Bulma CSS（カラム・フレックスレイアウト）
- **コンテナ幅**: `is-max-widescreen`（最大 1216px）
- **ブレイクポイント**:
  - Mobile: ≤ 768px
  - Tablet: 769px〜1023px
  - Desktop: ≥ 1024px
  - Widescreen: ≥ 1216px
- **セクション間余白**: 4rem〜6rem（デスクトップ）/ 2rem〜3rem（モバイル）
- **カラムガップ**: 0.75rem〜1.5rem（Bulma 変数）

ページ構造（トップページ）:
1. Sticky Navbar（白背景、ロゴ左・CTA右）
2. Hero（フルスクリーン画像 + テキストオーバーレイ + アプリDLボタン）
3. Why LUUP（3カラム: インフラ・安全・サステナビリティ）
4. ポート紹介セクション（薄ティール背景）
5. サービス概要（リンクカード群）
6. ニュースグリッド（サムネイル + タグ + タイトル）
7. ポート設置CTA
8. アプリDLセクション
9. フッター（ダーク背景）


## Components

### ナビゲーションバー
```
[LUUP ロゴ]  Why LUUP | Service | Port Map | Safety | News | Company   [アプリDL▶]
```
- 白背景 sticky、高さ 3rem、z-index 30
- モバイルはハンバーガーアイコンに折り畳む
- アプリ DL ボタンはプライマリボタンで常時表示

### ボタン

**Primary**
```css
background-color: #00B6AC;
color: #fff;
border-radius: 28px;        /* pill shape */
font-weight: 600;
padding: 0.75em 1.5em;
```
hover: `#00B89C` / active: `#009D94`

**Outline**
```css
background: transparent;
color: #00B6AC;
border: 2px solid #00B6AC;
border-radius: 28px;
```

**Dark (App Store style)**
```css
background-color: #0A0A0A;
color: #fff;
border-radius: 28px;
```

### カード
```css
background: #fff;
border-radius: 10px;
overflow: hidden;
/* img hover */
img { transition: 0.5s; }
&:hover img { transform: scale(1.2); }
&:hover .content { text-decoration: underline; }
```

サムネイル比率は 16:9（news）または正方形（feature）。

### タグ / バッジ
```css
background-color: #DADEE6;
color: #313636;
border-radius: 4px;
font-size: 0.75rem;
padding: 0.25em 0.75em;
```

### フォーム入力
```css
border: 1px solid #DADEE6;
border-radius: 4px;
padding: 0.5em 0.75em;
font-size: 1rem;
/* focus */
border-color: #00B6AC;
outline: none;
```

### セクション背景バリエーション
| バリアント | 色 | 使用場面 |
|---|---|---|
| White | `#FFFFFF` | デフォルト |
| Teal-tint | `#EBFFFC` | ポートCTA、注目セクション |
| Light gray | `#F2F2F2` | 区切り・補足セクション |
| Near-black | `#0A0A0A` | フッター、ダーク強調 |


## Imagery

**写真スタイル**:
- 実際の路上・都市空間での電動スクーター・自転車の利用シーン
- 自然光、明るいトーン、日本の都市景観（東京・大阪・京都など）
- 人物は若年〜中年の多様な属性、安心感と利便性を訴求
- WebP フォーマット（-pc.webp / -mobile.webp でレスポンシブ）

**アイコン**:
- シンプルなラインアイコン、Bulma `.icon` クラス内に配置
- カテゴリ: スクーター、自転車、地図ピン、アプリ、安全ヘルメット

**禁止事項**:
- 過激なスタント・危険走行のイメージ
- 混雑した密集シーン（安全コミュニケーションと相反）


## Logo And Usage

- ロゴタイプ: "LUUP"（全大文字、Roobert Bold ベース）
- 公式ロゴ素材は https://luup.sc/ のプレスキット（要申請）から取得
- カラー使用: ティール (#00B6AC) on 白背景、または白 on ダーク背景
- 単色モノクロ（黒・白）使用可
- 最小サイズ: 80px 幅以上
- クリアスペース: ロゴ高さの 50% 以上を周囲に確保

**禁止**:
- ロゴの変形・回転・斜体化
- 非ブランドカラーでの使用
- テキストの上に重ねること（コントラスト確保のため除く）


## Do's and Don'ts

### Do
- ティールカラーは白背景と組み合わせる（コントラスト比確保）
- ボタンは pill 形状（border-radius: 28px〜54px）を使う
- 日本語テキストは Noto Sans JP / Hiragino Sans を確実に fallback に含める
- セクション区切りには余白（4rem 以上）を取り、密集を避ける
- 画像はホバー時に scale(1.2) でズームさせることでインタラクティブ性を演出
- ニュースカードにはカテゴリタグ（#DADEE6 背景）を付ける

### Don't
- プライマリカラーを背景と前景で同系色に使う（可読性低下）
- border-radius を 0 や矩形のままボタンに使う（ブランドらしくない）
- 小サイズ（12px 未満）で Roobert を使う（日本語 fallback が効かない）
- 複数のティール濃度を隣接させる（#00B6AC と #00D1B2 を並べない）
- 背景画像の上に直接テキストを置く（オーバーレイか枠なし）
- フッター以外でダーク背景 (#0A0A0A) を広範に使う