CURATED · OPEN · FREE
About Meta
A premium corporate identity showcasing human connection through immersive photography.
Corporate Technology Gradient Premium Bold Typography
01
Identity DNA
connectivity future human innovation social
A polished glass and steel campus where photography and technology meet.
02
Color
#0064E0Accent
#1C1E21Ink
#1C2B33Ink soft
#FFFFFFBG
#F8F9FBBG soft
#385898Muted
rgba(28,30,33,1.0)Line
High-contrast brand blue against neutral corporate grays and vibrant lifestyle photography.
03
Typography
geometric-sans · humanist-sans
display 48px · 500headline 36px · 500body 18px · 400small 14px · 400Use Optimistic Display for primary headlines. · Use Optimistic Text for body copy and UI elements.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
72px
96px
160px
Generous whitespace separating hero sections and card grids.
05
Surfaces
sm · 4px
md · 24px
lg · 32px
pill · 100px
1px solid rgb(28, 30, 33) on UI elements, with frequent use of white space for separation.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width hero with floating imagery followed by a 3-column card grid.
07
Motion & Interaction
200ms micro
333ms small
800ms medium
cubic-bezier(0.53, 0, 0.28, 1) easing
Subtle opacity and background color transitions on interactive elements.
Background color changes on buttons and links with 0.2s ease-out transition. · Subtle opacity reduction (0.3s) on clickable areas.
08
Components
button Pill-shaped primary buttons with white text on brand blue, medium weight. card Image-heavy cards with rounded corners (24px/32px) and text descriptions below. chip Not prominently visible in this view. input Not prominently visible in this view. hero Full-width immersive section with large typography and overlapping photographic cards. 09
Voice & Don'ts
Tone Optimistic, visionary, and human-centric. Headlines Large, bold, and concise statements about the future of connection. CTAs Simple, direct commands like 'Our mission' or 'Read more'. don't use sharp, square corners — screenshot shows generous 24px and 32px radii on images and cards. don't use a dark mode aesthetic — screenshot shows predominantly white backgrounds with vibrant photographic accents. don't use a rigid, grid-heavy layout — screenshot shows overlapping, floating image cards in the hero section. don't use thin, elegant serifs — screenshot shows robust, medium-weight geometric sans-serif headlines. don't use muted, low-contrast text — screenshot shows deep charcoal text for maximum readability. don't use small, cramped buttons — screenshot shows large, pill-shaped primary action buttons. Avoid: Avoid overly technical jargon. Avoid: Avoid aggressive sales language. 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 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
This site is a premium corporate portfolio showcasing Meta's technology and vision through high-quality photography and bold typography. The primary accent is brand blue (#0064E0) against a clean white and light gray (#F8F9FB) background. The typography uses a custom geometric sans-serif (Optimistic Display) for headlines and a humanist sans-serif (Optimistic Text) for body copy. Critical donts include: avoid sharp corners as cards use 24px-32px radii; avoid dark mode as the site is predominantly light; avoid rigid grids as the hero features overlapping floating images. The design prioritizes human connection and optimistic futurism.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: The site is worth including for its sophisticated blend of corporate branding and expressive, human-centric photography with bold, clear typography.
