CURATED · OPEN · FREE

Create Video

A microblogging social platform designed for rapid information exchange and public discourse.

SocialCleanConsumerMobile UITypography
Create Video screenshot
↓ Download design system (17 MB)Open in OpenDesign

Visit: https://create.video

📦 Browse pack contents →

01

Identity DNA

SocialTimelineProfileFeed

A digital public square for sharing short-form content and updates.

02

Color

#1D9BF0Accent
#0F141AInk
#52636FInk soft
#FFFFFFBG
#BACBD4BG soft
rgba(228, 234, 236, 1)Line

A high-contrast, content-first palette prioritizing readability with a single vibrant blue accent for interactive elements.

03

Typography

grotesque-sans

Use a consistent grotesque-sans family (TwitterChirp) for all text. · Maintain a 15px base size for readability. · Use 700 weight for emphasis on names and titles.

04

Spacing

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

Standard vertical rhythm based on a 4px grid, with 16px and 24px being primary gutters.

05

Surfaces

sm · 4px
md · 14px
lg · 16px
pill · 9999px

1px solid #E4EAEC

0px 4px 12px 0px rgba(0, 0, 0, 0.08)

06

Layout

1265container
3columns
30pxgutter
768 / 1024breakpoints

Three-column layout: Left sidebar for navigation, center column for the main feed, and a right column for suggestions and links.

07

Motion & Interaction

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background-color transitions on hover and focus. · Subtle opacity changes for interactive elements.

Background color changes slightly (e.g., to #F7F9F9) and text color transitions. · Immediate visual feedback through color change.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

A microblogging social platform for real-time public conversation. The design is clean and functional, prioritizing content with a white background (#FFFFFF), deep ink (#0F141A) for text, and a single vibrant blue accent (#1D9BF0) for interactive elements. Typography is a consistent grotesque-sans family at a 15px base size. Critical donts: Never use serif fonts or heavy drop shadows, avoid a dark mode aesthetic, and never use multiple accent colors. The layout is a structured three-column grid, and interactions are characterized by smooth, subtle color transitions on hover.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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