Letters
屋外診療所での午前中の診察――柔らかな青い天井の下、清潔な白い診察台には、青い手術器具が散乱している。
Lettersは、医療文書作成ツールです。まず、グラデーションのかかったオープンスカイのヘッダー（穏やかで雰囲気のある青いストライプが落ち着いた臨床的な雰囲気を作り出します）から始まり、その後、清潔感のある白いワークスペースへと移行します。システムはモノクロームスタイルで設計されています。清潔感のある白いキャンバス、ほぼ黒に近いテキスト（#070709）、暗い錠剤型のコールトゥアクション、そしてかすかな影の上に浮かぶ丸みを帯びたカード。明るい青（#2597d0）は、アイコン、マイクログラフィック、波形プレーヤーなどの機能的な句読点のために確保されており、ボタンや大きな塗りつぶしには使用されていません。タイポグラフィには、Open Rundeという幾何学的なヒューマニストサンセリフが使用されています。大きな画面サイズ（80pxで-0.04em）では文字間隔がかなり広くなり、ヘッダーがしっかりとしたブロック状に圧縮されます。コンポーネントは、医療機器のように軽やかな印象を与えます。薄いベゼル、ゆったりとしたカード間隔、錠剤型のボタン、そして控えめな高さの使用により、空を模したヘッダーが感情的な効果を発揮します。
スカイブルーのグラデーションがページ全体に広がるホームページには、中央にタイトルとサブテキスト、その下にコールトゥアクションボタンが配置されています。ページは、セクション間に十分な間隔（80～120ピクセル）が空いた白いコンテンツエリアへとスムーズに移行します。特集セクションでは、同じ比率の大きな丸みを帯びたカード（半径18～32ピクセル）が2列グリッドで配置されています。セクションの見出しは常に中央揃えで、カードグリッドの上に1列で配置されています。ナビゲーションは、中央にリンク群、右揃えのログインアクションが配置された固定の白いトップバーです。全体的なリズムは、雰囲気のあるメインストライプが1本続き、その後、白と#f5f5f5のセクションが交互に配置され、垂直方向のゆとりが一定に保たれています。サイドバーもメガメニューも非対称レイアウトもなく、ページは落ち着いた対称的な列のように感じられます。
ビジュアルデザインは、ほぼ完全に製品のユーザーインターフェースに焦点を当てており、ライフスタイル写真や抽象的な3Dレンダリングは一切使用されていません。ビジュアル言語は、アプリのネイティブインターフェースを紹介する製品カードを中心に構築されています。ドキュメントの「Before」と「After」の比較、点線の境界線のある読み込みエリア、波形の形をしたオーディオプレーヤーなどが含まれます。唯一の雰囲気のあるビジュアル要素は、メイン画像の空のグラデーションです。アイコンは、均一な線幅の単色#2597d0ラインアイコン（封筒、マイク、チェックマーク）で、塗りつぶしのバリエーションはありません。イラストスタイルは控えめです。製品のモックアップは白い背景に表示され、奥行きを出すためにわずかに回転させていますが、急激に傾けることはありません。手書き風フォント（The Doctor）は、唯一の有機的/手作りの要素であり、「Before」カードの臨床的な手書きを想起させるためだけに使用されています。
パレット
ブランド
- Surgical Blue
#2597d0— アイコン、マイクアイコン、音波プレーヤー、そして小さな機能的なアクセントが、インターフェース全体を通して単一の色調を作り出している。
中性
- Obsidian
#070709— 本文、塗りつぶされたコールトゥアクションボタン、および暗いUI要素には、白い背景とのコントラストを和らげるために、純粋な#000ではなく、ほぼ黒に近い色が選ばれています。 - Paper White
#ffffff— ページ背景、カード表面、ボタンテキストは、メイン要素の下にあるすべてのセクションの主要なキャンバスとなります。 - Cloud Gray
#f5f5f5— 追加のカード表面とセクションの背景により、機能的なブロックがメインのキャンバスから分離されます。 - Sky Tint
#d7e6f5— 段ボール製の額縁の色合いと、表面のほとんど目立たない青みが、灰色ではなく、雰囲気のある印象を与えている。 - Charcoal
#60606c— メインテキスト、サブテキスト、そして控えめな境界線。見出し以外のコンテンツには、ニュートラルな色が基調色として使用されます。 - Slate
#8b8b8b— 軽微なテキストと非アクティブな境界線の状態 - 場所を示すため、また障害のある人がアクセスしやすいようにするために使用されます。
タイポグラフィ
12～80ピクセル・8段階
- sans-serif — 交換： Inter · 概要 400, 700 · sans-serif - 抽出されたデータには含まれているが、AIによって説明されていない。
- Open Runde — 交換： Inter Tight · 概要 400, 500, 600, 700, 900 · 見出しやナビゲーションのメインフォントは、幾何学的なヒューマニスト体で、大きなサイズでは文字間隔が狭くなります。80pxで-0.04emにすることで、見出しが単一の力強いブロックに圧縮されます。すべての見出し、ナビゲーション、および大きなテキストに使用してください。
- Inter — 交換： system-ui · 概要 400, 500 · 補助的な本文およびUIテキスト – 小さな見出し、ナビゲーション要素、インラインリンクなど、よりニュートラルな読み心地が求められる場合に使用します。Open Rundeと組み合わせることで、階層的なコントラストを生み出すことができます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 12-16px |
| ボタンの半径 | 100px |
| カード半径 | 18px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80-120px |
| ページ幅 | 1200px |
AI がLettersスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Integrated Biosciences — 真夜中の生物発光実験室
- Mintlify — ガラスのテーブルの上に広がる雲の庭園。手描きの空とドキュメンタリー映像が共に額装されている――ページが修道院のような白へと消えていく前に、色彩とコンセプトがぶつかり合う唯一の場所だ。
- Gleap — 温かみのあるクリーム色を基調に、グラファイトのアクセントを効かせたワークスペース。マットブラックのインクのドットが、リネンの建築の上に浮かんでいるように見えるスタジオ。
- Render — デザインはつや消しアルミニウム製です。インターフェースは、余白、細い線、そして操作に視線を引きつける一本の紫色の線など、すっきりとした幾何学的な設計図書のような印象を与えます。
- Grafbase — 冷たい大理石に描かれたエンジニアリング図面
- Slash — 金箔の帳簿が付いた真夜中の金庫
- Modal — 暗いサーバー室にある蛍光端末 ― 唯一の光源は鮮やかな緑色
- Whimsical — ラベンダー色の背景に深みのあるプラム色のインクで描かれた、クリエイティブなスタジオノート。技術系のホワイトボードとしても使える万能アイテムです。
- AgentQL — 夜間、ターミナル上空に浮かぶオーロラ
- Alveos One — 川石でできた居心地の良い隠れ家――静かで柔らかな光に包まれた瞑想室には、琥珀色の柔らかな光の中に、グラファイトのオブジェが一つだけ置かれている。
- GitHub — 生物発光制御ポイントを備えた宇宙空間の司令パネル――暗く雰囲気のある作業空間で、たった一つの緑色の光が進むべき方向を示す。
- Buddy — 方眼紙に描かれた製図。白い描画面には、ほとんど見えないほどの黒いインクで方眼線が引かれ、蛍光ライムグリーンのマーキングと虹色に輝くグラデーションのストロークが施されている。