← OpenDesign CURATED · OPEN · FREE
Squadeasy
A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection.
Consumer Friendly Mobile UI App UI Warm
01
Identity DNA
employee engagement approachable dynamic connection warm
A friendly community bulletin board with vibrant, overlapping photos and bold, encouraging messages.
02
Color
#FF5A8FAccent
#000000Ink
#666666Ink soft
#E1C19EBG
rgba(0,0,0,0.12)Line
Warm and vibrant palette emphasizing human connection and approachability.
03
Typography
grotesque-sans · humanist-sans
display 80px · 900heading 56px · 700body 16px · 400Use uppercase for all major headlines · Use extreme weight (900) for primary display text · Tight letter spacing (-2px) for large headlines
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous padding (40px 24px 140px 24px) creates breathing room around large content blocks.
05
Surfaces
sm · 4px
md · 14px
lg · 100px
pill · 100px
1px solid black on active elements
rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width hero section with overlapping, rotated images and centered text
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
Transform animations for image rotations (0.2s) · Opacity fades for section reveals (0.4s - 0.8s)
Scale transform on interactive elements · Immediate visual feedback
08
Components
button Pill-shaped buttons with high-contrast colors (black bg/white text or neon yellow bg/black text) card Overlapping, rotated image cards with soft shadows and organic shapes chip N/A input N/A hero Full-width section with dynamic, overlapping images and bold, centered typography 09
Voice & Don'ts
Tone Enthusiastic, encouraging, and human-centric Headlines Bold, uppercase declarations that create urgency and excitement CTAs Clear, action-oriented (DEMANDER UNE DÉMO) with directional arrows Don't use a cold, corporate color palette — screenshot shows warm, human-centric colors instead Don't use thin, lightweight typography — screenshot shows ultra-bold, high-impact fonts Don't create rigid, grid-locked layouts — screenshot shows organic, overlapping, rotated images Don't use small, cramped spacing — screenshot shows generous padding and breathing room Don't use subtle, muted buttons — screenshot shows high-contrast, pill-shaped CTAs with neon accents Don't avoid photography — screenshot uses multiple dynamic, human-focused photos throughout Avoid: Corporate jargon Avoid: Passive voice Avoid: Small, timid typography 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection. Key colors include warm beige (#E1C19E) backgrounds, black (#000000) typography, vibrant pink (#FF5A8F) accents, and neon yellow (#E4FF60) highlights. Typography features ultra-bold grotesque-sans for display text with tight letter spacing, and clean humanist-sans for body content. Critical design rules: embrace overlapping, rotated images for organic energy; use extreme typographic weight for maximum impact; maintain generous spacing and breathing room; avoid cold corporate aesthetics, thin fonts, rigid grid layouts, small cramped spacing, subtle buttons, and avoid human photography. The system emphasizes enthusiastic, encouraging communication with action-oriented CTAs.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site effectively demonstrates how to create a warm, approachable brand personality through bold typography, dynamic photography, and vibrant color choices that break conventional corporate design patterns.
