現場で使う ダークモード デザインシステム LPパーツ9選

まずはこの配色だけで組んだ一枚のランディングページを、上から下まで実際にスクロールしてみてください。ヒーローからフッターまで明るさが一度も揺れずに保たれているかが、このスタイルを見分ける一番の手がかりです。

上の画面を組み立てた9つの部品は、下のグリッドでひとつずつ個別に開いて確認できます。並び順は、訪問者が実際にページを追う流れ——最初に目を引かれ、ざっと見渡し、値段を確かめ、信頼できるか判断し、行動へ移り、登録する——そのままにしてあります。

自動再生 · タイルを押すとその項目へ · すべて1つのzip

• 01 製品モックアップ+グローヒーロー
• 02 ブラースティッキーナビ
• 03 枠ハイライトカード
• 04 モノスペースラベルリスト
• 05 強調プランのグロー
• 06 ロゴウォール+引用
• 07 グラデーション枠帯
• 08 4列ダークフッター
• 09 ゴースト/プライマリボタン

01ヒーロー

濃いインク色の背景の上にブラウザクロームを模したモックアップウィンドウを浮かべ、その奥に青いグローをひとつだけ静かに滲ませます。ウィンドウの中の見出しとCTAボタンも一緒にゆっくり浮き上がっては沈み、視線を画面の中央へ集めます。

<section class="relative overflow-hidden rounded-card border border-line bg-ink p-2 shadow-raised">
  <span class="glow pointer-events-none absolute left-1/2 top-0 h-96 w-96
               -translate-x-1/2"></span>
  <div class="flex gap-1.5 px-3 py-2">
    <span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
    <span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
  </div>
  <div class="relative flex flex-col gap-3 px-6 pb-10 pt-8">
    <p class="text-xs font-bold uppercase tracking-wide text-accent">Console</p>
    <h2 class="text-2xl font-bold text-cream">한 화면에서 배포까지</h2>
    <button class="w-fit rounded-pill bg-accent px-5 py-2 text-sm font-bold text-cream">
      무료로 시작
    </button>
  </div>
</section>

02ナビゲーション

backdrop-filterでぼかした丸みの強いナビバーの中で、現在地を示す小さなピルがメニュー項目の間を静かに滑ります。ブランド名とCTAボタンはバーの両端に固定されており、ピルだけが動く構成です。

<nav class="flex items-center gap-4 rounded-pill bg-ink/90 border border-line
            backdrop-blur px-3 py-2 shadow-raised">
  <span class="pl-3 font-display font-extrabold text-sm text-cream">Vantage</span>
  <div class="relative flex flex-1 rounded-pill bg-cream/5 p-1">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-accent"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2 text-cream">홈</span>
    <span class="relative z-10 flex-1 text-center text-xs py-2 text-cream/70">기능</span>
  </div>
  <button class="rounded-pill bg-accent px-4 py-2 text-xs font-bold text-cream">시작</button>
</nav>

03カードグリッド

ダークカードを並べたグリッドで、枠線がカードごとに順に青く明るくなっては沈み、視線をグリッドの端まで導きます。全部のカードが同時に光るのではなく、一つずつ順番に回る点がこの部品の要点です。

<div class="grid grid-cols-2 gap-gutter">
  <div class="rounded-card border border-line bg-cream/[.03] p-6
              transition-colors hover:border-accent">
    <span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
    <p class="text-sm font-semibold text-cream">자동 배포</p>
  </div>
  <div class="rounded-card border border-line bg-cream/[.03] p-6
              transition-colors hover:border-accent">
    <span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
    <p class="text-sm font-semibold text-cream">이슈 추적</p>
  </div>
</div>

04機能一覧

機能ごとにモノスペース書体の番号ラベルを添え、リストの行が下からひとつずつ、せり上がるように現れます。番号がコードエディターの行番号のように見えるため、開発者向けツールという印象が強まります。

<ul class="flex flex-col gap-2 rounded-card border border-line bg-cream/[.03] p-4">
  <li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
    <span class="font-mono text-xs font-bold text-accent">01</span>
    <span class="text-sm font-semibold text-cream">실시간 협업 편집</span>
  </li>
  <li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
    <span class="font-mono text-xs font-bold text-accent">02</span>
    <span class="text-sm font-semibold text-cream">키보드 전용 커맨드바</span>
  </li>
</ul>

05料金

おすすめプランのカードだけに青いグローの枠を巻き、静かに膨らんでは縮む、呼吸のような動きを与えます。表を組まなくても、どのプランを推しているかが一目で伝わります。

<div class="relative flex-[1.1] rounded-card border-2 border-accent
            bg-cream/[.03] p-6 pt-8 shadow-glow">
  <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
               text-xs font-bold text-cream">추천</span>
  <p class="font-bold text-cream">프로</p>
  <p class="mt-1 text-sm text-cream/60">월 19,000원</p>
</div>

06お客様の声

薄くしたパートナーロゴの列の下に引用カードをひとつ置き、ロゴが順番に明るくなっては薄くなることで信頼を積み重ねます。ロゴを完全な色のまま並べると広告バナーのように見えるため、あえて明るさを16%まで落としてあります。

<div class="rounded-card border border-line bg-cream/[.03] p-6">
  <div class="mb-5 flex justify-between gap-3 opacity-60">
    <span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
    <span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
  </div>
  <blockquote class="border-t border-line pt-4">
    <p class="text-sm font-semibold text-cream">
      &ldquo;온보딩 문서 없이도 팀 전체가 하루 만에 옮겨 왔어요.&rdquo;
    </p>
  </blockquote>
</div>

07CTA帯

CTA帯の枠を包むグラデーションの線がゆっくり回転し、縁だけが光るバッジのように見えます。conic-gradientを枠より大きく敷いて回転させ、内側のカードで2pxだけ残して隠す仕組みです。

<div class="relative overflow-hidden rounded-card border border-accent/40
            bg-cream/[.03] px-10 py-12 text-center shadow-glow">
  <h3 class="mx-auto max-w-md text-3xl font-extrabold text-cream">
    지금 팀을 옮겨 보세요
  </h3>
  <button class="mt-6 rounded-pill bg-accent px-6 py-3 text-sm font-bold text-cream">
    무료로 시작
  </button>
</div>

08フッター

4列に分けたリンク群が左から順に薄く浮かび上がり、暗いフッターを埋めていきます。区切り線を引かず、列と列の余白だけで領域を分けています。

<footer class="grid grid-cols-4 gap-gutter border-t border-line py-10">
  <div>
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">제품</p>
    <p class="text-sm text-cream/70">기능</p>
  </div>
  <div>
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">회사</p>
    <p class="text-sm text-cream/70">소개</p>
  </div>
</footer>

09ボタン・入力

プライマリボタンの青いグローと入力欄のフォーカスリング状の枠は、ホバーやフォーカスに関係なく自動で大きくなったり小さくなったりを繰り返し、ゴーストボタンだけは枠線をまとったまま動きません。三つの角丸をカードと同じ値にそろえ、画面全体を一つの規格に見せています。

<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card border
            border-line bg-cream/[.03] p-6 sm:flex-row">
  <label class="relative flex-1 rounded-control border border-line bg-cream/5">
    <input class="w-full rounded-control bg-transparent px-4 py-3 text-sm
                  text-cream outline-none" type="email" placeholder="이메일 주소">
  </label>
  <button class="rounded-control bg-accent px-5 py-3 text-sm font-bold text-cream">
    가입하기
  </button>
</form>

tailwind.config カスタム

上で見た9つの部品と一枚のランディングページは、すべて下のtheme.extendひとつだけを参照しています。背景・強調色・角丸・影の値をここで書き換えると、画面全体の色調が一度に揃って変わります。

theme: {
  extend: {
    colors: {
      ink: "#17141a",
      cream: "#fff7e6",
      accent: "#2f6df6",
      line: "rgba(255,247,230,.08)",
    },
    fontFamily: {
      display: ["'Inter'", "system-ui", "sans-serif"],
      body: ["'Inter'", "system-ui", "sans-serif"],
    },
    borderRadius: { control: "12px", card: "16px", pill: "999px" },
    boxShadow: {
      raised: "0 14px 24px rgba(23,20,26,.32)",
      glow: "0 0 40px rgba(47,109,246,.35)",
    },
    spacing: { gutter: "16px" },
  },
},

バイブコーディング プロンプト

上の設定をプロジェクトに貼り付けたあとは、Claude CodeやCursorに次のような短い指示を渡すだけで十分です。プロンプトの全文はzipのprompt.mdに入っています。

배경은 ink(#17141a) 하나. 카드도 순백이 아니라 ink 위에 옅은 cream 오버레이(3~5%)로 만든다.
강조가 필요한 곳(버튼·추천 배지·포커스 링)에만 accent(#2f6df6)를 쓴다.
두 번째 강조색을 넣지 않는다. 반경은 rounded-card·rounded-pill·rounded-control 세 값만 쓴다.

この指示をそのままpage/index.htmlへ適用し、1280pxのビューポートでページ全体をキャプチャした結果を残しました。

どこで壊れるか — 落とし穴

このスタイルでいちばん多い落とし穴は、背景色をtheme()関数で直接指定することです。Tailwind Play CDNはbg-inkのようにコンパイル済みのユーティリティクラスの中にあるtheme()の値は正しく扱いますが、<style>タグの中に直接書いたbackground: theme('colors.ink')は無視され、既定の白背景へ黙って戻ってしまいます。

このプロジェクトも最初は<body>の背景を<style>タグのtheme()で指定していたため、一枚のランディングページ全体が白背景でレンダリングされ、料金カードのtext-cream/60の文字がほとんど読めない状態でスクリーンショットに残るところでした。<body class="bg-ink">のようにコンパイルされるユーティリティクラスへ書き換えてから、ようやくインク色の背景が正しく適用されました。

二つ目の落とし穴は角丸の値です。カードごとにrounded-card・rounded-pill・rounded-controlから外れた任意のpx値を使うと、画面全体が一つのシステムではなく、複数のサイトを継ぎ足したように見えてしまいます。9つの部品と一枚のランディングページを丸ごと収めたzipには鍵がかかっていて、そのパスワードはwdu6yd23です。本文の下にあるボタンから、そのままダウンロードできます。

三つ目の落とし穴は320pxのような狭い画面です。01のヒーローモックアップの内側の余白を固定pxで指定すると、狭い画面ではカードの高さがビューポートを超えて縦スクロールバーが現れます。余白をclamp()に置き換えると、幅に応じて自然に縮むようになります。

アクセシビリティ

9つのデモはすべてMDNのprefers-reduced-motionのページが定めるメディアクエリで包んであり、動作を減らす設定を有効にした訪問者には回転・グロー・スライドのような動きの代わりに、静止した最終状態だけが見えます。02のピルはtranslateX(0)、05のグローの枠は薄さ20%、07の回転は止まった状態のグラデーション枠というように、部品ごとに残る最終状態はそれぞれ異なります。色だけで意味を伝える02のピルや06のロゴブロックにはaria-hidden属性を付けて装飾として扱い、現在地やパートナー名といった実際の意味は必ずテキストとして隣に置いています。

このスタイル以外のトレンドが気になる場合はデザイントレンドのカテゴリーを、このサイトがどんな場所かはサイト紹介ページにまとめてあります。

FAQ

Linearのロゴや商標をそのまま使ってもいいですか？

いいえ。ここで紹介した部品はLinear.appのロゴ・商標・実際の画面をコピーしたものではなく、濃い背景と青い強調色、モノスペースのラベルといった一般的な配色とレイアウトの考え方だけを参考にしています。デモに登場するブランド名はすべて架空の名前(Vantage)に置き換えてあります。

ライトモードのサイトでもこの配色は使えますか？

使えます。inkとcreamの役割を入れ替えるだけで成立しますが、accentという強調色をひとつだけに絞るという考え方は、背景が明るくても暗くても変えないでください。強調色を二つ以上使うと、どの要素が重要なのか伝わらなくなります。

Tailwindを使わずに素のCSSだけで再現できますか？

はい。zipに入っているtokens.cssを読み込むだけで再現できます。このファイルはtailwind.config.jsと同じ値を--color-inkや--color-accentのようなCSS変数へ書き出したもので、クラス名の代わりにvar(--color-accent)と直接参照すれば同じ配色を保てます。