厳選・オープン・無料

Periodaisle

温かみのある大地色とインクルーシブな写真を使用する、サステナブルなピリオドケアのD2Cブランド。

01

デザイン DNA

友人のような温かみのある大地色のウェルネスブランド。

02

カラー

大地色のニュートラルとダークティールが、信頼感のある落ち着いた基盤を提供する。

03

タイポグラフィ

transitional-serif · humanist-sans

• display72px · 700
• heading24px · 700
• body14px · 400
• caption12px · 400

ナビゲーションとラベルには大文字を使用する。 · 本文テキストには可読性を高めるヒューマニスト・サンセリフを使用する。 · 大きな見出しにはエレガンスを加えるトランジショナル・セリフを使用する。

04

余白

標準の4pxグリッドに基づくが、ボタンやインプットには特定のパディングを上書きする。

05

サーフェス (角丸 / 影 / 罫線)

1px solid rgba(41,38,35,1.0)

0px 0px 0px 2px inset rgb(20, 71, 71) · 0px 0px 0px 2px inset rgb(255, 255, 251) · 0px 1px 0px 0px rgb(255, 255, 255)

06

レイアウト

フルワイドのヒーロー、積み重なるコンテンツブロック、クリーンな製品グリッド。

07

モーションとインタラクション

ホバーおよびフォーカス時の、カラーボックスシャドウの遷移。 · インタラクティブ要素のトランスフォーム遷移。

カラーチェンジとボックスシャドウの更新。 · 状態変化による視覚的フィードバック。

08

コンポーネント

• button インセットボックスシャドウによる触感を演出する、ピル型と矩形型。
• card 清潔でボーダレスなカードに、繊細な背景色の変化を加える。
• chip ティールの背景色でハイライトされる、シンプルなテキストラベル。
• input 細いボーダーと角丸の、シンプルな矩形インプット。
• hero 強いセリフ見出しを伴う、大規模で没入感のある写真。

09

文体と禁止事項

• トーン エンパワリングで、インクルーシブかつ率直。
• 見出し 明確なベネフィットを伝える、太字の大文字または大きなセリフ見出し。
• CTA 'Unlock'や'Shop'のような、直接的でアクション指向の動詞。

• 高彩度のネオンカラーを使用しない — スクリーンショットは#E9EEEAや#D3CEC5のような、落ち着いた大地色を示している。
• 純粋幾何学的なサンセリフフォントを使用しない — スクリーンショットは本文にヒューマニスト・サンセリフ（Montserrat）を使用している。
• 多くのレイヤーでUIを過度に複雑にしない — スクリーンショットは清潔でフラットな階層を示している。
• 主要要素に鋭くアグレッシブな角を使用しない — スクリーンショットは角丸の長方形とピル型を示している。
• everywhere に stark で臨床的な白の背景を使用しない — スクリーンショットは温かみのあるオフホワイト（#FFFFFB）を使用している。
• 完全にモノクロのパレットを使用しない — スクリーンショットは視覚的な興味を加えるダークティールのアクセント（#144747）を使用している。
• 避ける: 医学用語
• 避ける: 過度に臨床的な言葉遣い
• 避ける: アグレッシブな営業手法

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko