厳選・オープン・無料

Recess

遊び心のある浮遊感と、モダンなミニマリズムを融合したプレミアム飲料ブランドのウェブサイト。

beveragedtc
Recess のスクリーンショット
↓ デザインシステムをダウンロード (26 MB)OpenDesign で開く

オリジナル: https://www.takearecess.com

📦 パックの中身を見る →

01

デザイン DNA

落ち着いたモダン遊び心のあるリフレッシングミニマリスト

現代的なミニマリズムと、遊び心のある浮遊感ある要素を融合させた、落ち着きと洗練を備えた飲料ブランド。

02

カラー

#25385BInk
#394A6AInk soft
#C8D8FFBG
#E8F0FFBG soft
rgba(37, 56, 91, 1)Line

可読性のために、高コントラストの濃紺テキストを配置した柔らかなパステル背景。

03

タイポグラフィ

grotesque-sans

大きな見出しには文字間隔を狭め、固体的なタイポグラフィーブロックを形成します。 · 異なるフォントサイズにおいて一定の行間を維持し、リズムのある読みやすさを実現します。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

標準的なウェブの間隔を提供する、一定の4pxベーススケール。

05

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

sm · 0px
md · 4px
lg · 12px
pill · 999px

ボタンやインプットには、実線2pxの濃紺ボーダーを設定。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

左側にテキスト、右側に画像を配置した非対称ヒーローレイアウト。

07

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

150msmicro
300mssmall
600msmedium
cubic-bezier(0.175, 0.885, 0.32, 1.275)easing

hover時の、滑らかなopacityとtransformのトランジション。 · 背景要素に対するparallax風の効果。

控えめな色やopacityの変化。 · 明確なカスタムクリックアニメーションは設定されていません。

08

コンポーネント

09

文体と禁止事項

10

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

Recess — 桌面首屏（hero）
桌面首屏（hero）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Recess — 移动首屏
移动首屏

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

11

System Prompt

ポジショニング：モダンで健康志向の消費者をターゲットとする、プレミアムで遊び心のある飲料ブランド。主要なHEXカラー：#C8D8FF（背景）、#25385B（インク）、#163BF3（アクセントブルー）、#A8B2FF（ソフト背景）。フォントカテゴリ：太くモダンな印象を与える、個性的なgrotesque-sans。重要な禁止事項：ダークモードを使用せず、複雑なグリッドを避け、重いシャドウを使用しないこと。ブランドのリラックスしたエネルギーを反映し、声のトーンはカジュアルで力強くあること。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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