ダークモードに最適なデザインスタイル
優れたダークモードは、ライトテーマの色を反転したものではありません。最初から暗い画面のために設計され、層のある黒に近い配色で奥行きを出し、文字とコントラストを読みやすく調整し、目を疲れさせずに光るアクセントを使います。Curioの以下のダークスタイルは、どれもAIがMCPまたはDESIGN.mdのダウンロードで適用できる完全なシステムです。
優れたダークスタイルの条件
優れたダークスタイルには共通点があります。複数の黒に近い色とグレーで平坦な暗闇ではなく奥行きを作り、真っ白なまぶしさを避けながら読める文字コントラストに調整し、暗い背景で発光して見えるアクセントカラーを選びます。難しいのはライトモードと同じく節度で、読みやすさを失わずに奥行きと雰囲気を出すことです。
以下はすべてテンプレートではなく、色、タイポグラフィ、余白、コンポーネント、ルールを含む完全なデザインシステムです。手作業で編集する必要はありません。AIに指定すれば、そのスタイルで画面を作ります。「What is it」で詳しいガイドを、「View spec」でシステムを確認できます。
The styles
-
1
Acid House Smiley (1988)
Rave energy hits first. Acid yellow on black, Anton caps, smiley glow.
-
2
Apple Fitness Rings Closed (2024)
Midnight feels exact. Magenta, green, and cyan rings lock onto OLED black.
-
3
Apple Liquid Glass 2024
Skeuomorphism, reborn for spatial. Frosted panels, specular highlights, depth as a design material.
-
4
Art Brut (Dubuffet, 1948)
Rawness crowds the frame. Mud brown, oxblood marks, and hand scrawl erase the margins.
-
5
Art Deco Jazz Age
Jazz Age glamour. Sunburst rays, stepped ziggurats, gold on black — Chrysler Building lobby in CSS.
-
6
Discord 2024
Blurple cozy. Charcoal grounds, illustrated characters — every surface says 'hang out, don't work'.
-
7
GitHub Dark
Code-first darkness. Cool-blue canvas, 1px borders, green/red diff lines.
-
8
Islamic Girih Tiles
Sacred geometry glows. Cobalt tile, turquoise stars, and gold strapwork repeat endlessly.
-
9
Jardin Majorelle Blue
Cobalt refuses restraint. Electric blue, glazed yellow and grid rhythm turn stucco into sun.
-
10
Kintsugi & Urushi Lacquer
Breakage becomes ceremony. Urushi black-brown carries gold seams and asymmetric type.
-
11
Linear 2024
Precision down to the millisecond. Near-black, indigo-violet accents, Inter Display, no decoration.
-
12
Mexican Día de Muertos (Marigold Ofrenda)
Joy outruns mourning. Marigold orange and magenta lattice blaze on velvet purple.
FAQ
本当にダーク向けのデザインですか、それともライトスタイルに切り替えを付けただけですか？
どれも最初から暗い画面のために設計されたスタイルです。配色、コントラスト、階層が暗い表面を前提としているため、ライトテーマを反転しただけの見た目にならず、奥行きと読みやすさを保てます。
これらのスタイルを適用するにはどうすればよいですか？
CurioのMCPサーバーをAIクライアント（Claude Code、Cursor、ChatGPTなど）に接続し、選んだスタイルでページやアプリを作るよう依頼します。または、そのスタイルのDESIGN.mdをダウンロードしてプロジェクトに追加します。