CURATED · OPEN · FREE

Sketch

A professional, high-contrast design platform that centers the user's work within a refined, dark-themed UI.

Design ToolsCleanProductPremiumCollaboration
Sketch screenshot
↓ Download design system (13 MB)Open in OpenDesign

Visit: https://sketch.com

📦 Browse pack contents →

01

Identity DNA

design-centricprofessionalfocusedinviting

A premium, focused toolkit that feels like a well-crafted studio environment.

02

Color

#212123Ink
#000000Ink soft
#f5f5f5BG
#ffffffBG soft
#f0f0f0BG quiet
#0000006bMuted
rgba(0,0,0,0.32)Line

High-contrast neutrals with a subtle warm gradient in the hero to create focus and depth.

03

Typography

transitional-serif · humanist-sans · monospace

Display font is a transitional serif with high contrast. · Body text uses a neutral humanist sans-serif. · Letter spacing is tightly tracked on large display sizes.

04

Spacing

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

Based on a 4px grid with generous whitespace for breathing room.

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 9999px

Subtle 1px borders in rgba(0,0,0,0.32) for definition.

rgba(0, 0, 0, 0.2) 0px 1px 4px 0px · rgba(0, 0, 0, 0.1) 0px 2px 4px 0px

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered content with generous padding and a clear visual hierarchy.

07

Motion & Interaction

125msmicro
200mssmall
400msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing

Fade-in on scroll · Smooth hover transitions

Subtle color or opacity changes on interactive elements. · Standard pointer cursor with immediate feedback.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

This is a premium design tool website positioned as a focused, professional toolkit for designers. Key hex colors include a light gray background (#f5f5f5), high-contrast dark ink (#212123), and subtle muted tones for secondary text. Typography features a transitional-serif for display headlines (like 'Designers, welcome home.') and a humanist-sans for body copy. Critical donts: 1. Don't use low-contrast text; the design relies on high legibility. 2. Don't use overly decorative fonts for body text; maintain clarity. 3. Don't clutter the layout; preserve the generous whitespace that creates focus. 4. Don't use harsh, bright accent colors for primary buttons; keep them dark and high-contrast. 5. Don't use sharp, square corners for components; use the established rounded corner system. 6. Don't use thin, light fonts for large headlines; use the high-contrast serif font for impact.

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