← GhostDrop

Design Components

GhostDropランディングページで使用しているカラー、タイポグラフィ、コンポーネントのリファレンスです。

Colors

プロジェクト全体で使用しているカラーパレット。Tailwind CSS v4 の @theme で定義。

Brand

Sumi (墨)

#1A1A1B

--color-sumi

Sumi Deep

#111112

--color-sumi-deep

Kohaku (琥珀)

#FFB347

--color-kohaku

Kohaku Dark

#D4872D

--color-kohaku-dark

Kasumi (霞)

#E8E4F0

--color-kasumi

Yuurei (幽霊)

#9B95AB

--color-yuurei

Surface

White

#FFFFFF

white

Washi (和紙)

#FAF9F7

--color-washi

Usugumo (薄雲)

#F5F5F7

--color-usugumo

Typography

フォントスタックとテキストサイズのスケール。

Font Stack

Inter, LINE Seed JP, system-ui, sans-serif

Scale

5xl見出し 5xl
4xl見出し 4xl
3xl見出し 3xl
2xl見出し 2xl
xl見出し xl
lg本文 lg
base本文 base
sm補助テキスト sm
xsキャプション xs

Components

ランディングページで使用しているUIコンポーネント。

Buttons

Glass Card

glass-card

半透明ガラス風カード。backdrop-blur + 微細ボーダー。

glass-card-hover

ホバーで浮き上がるインタラクション付き。

Badges

Release Badge一番人気ProCloud

Feature List Item

  • Freeの全機能
  • OCRテキスト認識
  • スタック無制限