厳選・オープン・無料

Squadeasy

ダイナミックな写真と大胆なタイポグラフィでつながりを育む、温かみのある活気ある従業員エンゲージメントプラットフォーム。

ConsumerFriendlyMobile UIApp UIWarm
Squadeasy のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

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

📦 パックの中身を見る →

01

デザイン DNA

従業員エンゲージメント親しみやすいダイナミックつながり温かみ

鮮やかな画像を重ね合わせ、力強い応援メッセージが貼られた、フレンドリーなコミュニティ掲示板。

02

カラー

#FF5A8FAccent
#000000Ink
#666666Ink soft
#E1C19EBG
rgba(0,0,0,0.12)Line

人間のつながりと親しみやすさを強調した、温かく活気あるパレット。

03

タイポグラフィ

grotesque-sans · humanist-sans

すべての主要見出しは大文字を使用 · プライマリ表示テキストには極太ウェイト (900) を使用 · 大きな見出しには tightened letter spacing (-2px) を使用

04

余白

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

ゆったりとした余白 (40px 24px 140px 24px) により、大きなコンテンツブロックの周りに呼吸の余地を作り出す。

05

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

sm · 4px
md · 14px
lg · 100px
pill · 100px

アクティブな要素には1px solid black

rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

回転させた画像を重ね合わせ、中央揃えのテキストを持つフルワイドヒーローセクション

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

画像の回転のためのトランスフォームアニメーション (0.2s) · セクション表示のためのopacityフェード (0.4s - 0.8s)

インタラクティブ要素へのscaleトランスフォーム · 即座の視覚的フィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

温かみと活気のある従業員エンゲージメントプラットフォーム。ダイナミックな写真と大胆なタイポグラフィでつながりを育む。主なカラーは、温かみのあるベージュ (#E1C19E) の背景、黒 (#000000) のタイポグラフィ、鮮やかなピンク (#FF5A8F) のアクセント、ネオンイエロー (#E4FF60) のハイライト。タイポグラフィは、tightened letter spacingを持つウルトラボールドな grotesque-sans を表示テキストに、クリーンな humanist-sans を本文コンテンツに採用。重要なデザインルール：有機的なエネルギーを生むための、回転させた重ね合わせ画像の採用；最大のインパクトのための極太タイポグラフィの採用；ゆったりとした余白と呼吸の余地の維持；冷たいコーポレート美学、細いフォント、堅いグリッドレイアウト、小さく詰まった余白、控えめなボタン、人間の写真の回避。システムは、熱狂的で励ますコミュニケーションと、行動を促すCTAを重視する。

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

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

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

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