CURATED · OPEN · FREE

Layers

A curated platform for designers to share and explore layered UI components and portfolios.

designcommunity

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://layers.to

📦 Browse pack contents →

Identity DNA

design curationlayersportfoliocommunity

A digital gallery for UI/UX designers to showcase and discover layered design assets.

Color

#000000Ink

#64748BInk soft

#FFFFFFBG

#94A3B8Muted

rgba(229, 231, 235, 1)Line

Minimalist, high-contrast black and white with subtle gray hierarchy for a clean, gallery-like experience.

Typography

grotesque-sans

display36px · 500
body16px · 400
caption14px · 400

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base with 8px, 12px, and 16px increments for spacing and gaps.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgb(229, 231, 235) for subtle separation and card borders.

rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset · rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Responsive grid layout with a left sidebar, main content area, and right sidebar for jobs and ads.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover for interactive elements (0.15s) · Fade transitions for modal overlays (0.5s)

Subtle background color change or border emphasis on interactive elements. · Standard pointer cursor on interactive elements.

Components

button Minimal, rounded corners (12px), often with border and hover state. Primary uses solid black, secondary uses white with border.
card Clean white cards with 12px border-radius, subtle 1px inset border, and image previews.
chip Tag-like elements with rounded corners (9999px), used for filtering categories.
input Search bar with rounded corners and subtle border.
hero Grid of content cards showcasing various design projects and assets.

Voice & Don'ts

Tone Professional, clean, and focused on design community and curation.
Headlines Concise, capitalized for tags, bold for titles.
CTAs Simple, action-oriented buttons with clear labels.

Don't use complex gradients — screenshot shows clean, solid backgrounds with minimal color.
Don't implement dark mode — screenshot shows exclusively light theme with white backgrounds.
Don't use decorative serif fonts — screenshot shows consistent use of sans-serif typography.
Don't add heavy drop shadows — screenshot shows subtle inset borders instead of prominent shadows.
Don't use vibrant accent colors — screenshot maintains a strictly monochromatic palette with occasional brand colors in content.
Don't create cluttered layouts — screenshot demonstrates generous white space and clear visual hierarchy.
Avoid: Playful or informal language
Avoid: Overly decorative elements
Avoid: Cluttered layouts

Inside the pack — real screenshots

Layers — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Layers.to is a curated design gallery platform for UI/UX designers. The visual system uses a minimalist black and white palette with #000000 ink on #FFFFFF background, supplemented by subtle gray hierarchy (#64748B, #94A3B8). Typography is exclusively grotesque-sans (Inter family) at 16px base with 400 weight. Layout follows a 12-column grid with 24px gutters and 1280px max container width. Critical donts: Never use dark mode (screenshot shows only light theme), avoid decorative serifs (only sans-serif used), and prevent heavy shadows (uses subtle inset borders instead). The interface prioritizes clean card-based layouts with 12px border-radius and minimal interactive states.

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