CURATED · OPEN · FREE

Mire Studio

A vibrant, expressive design studio portfolio showcasing work through bold colors and massive typography.

StudioExpressiveBold TypographyCurationGallery

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://mire.studio

📦 Browse pack contents →

Identity DNA

Graphic DesignArt DirectionVisual IdentityStudio

A bold, colorful portfolio gallery with oversized, overlapping typography.

Color

#000000Ink

#4F4F4FInk soft

#FFFFFFBG

#4C4C4CMuted

rgba(0, 0, 0, 0)Line

High-chroma, saturated palettes applied in large geometric blocks and overlapping typography.

Typography

geometric-sans

display400px · 600
body14px · 400

Use PP Pangram Sans Rounded for all text elements. · Display logotype uses extreme scale and overlapping fills. · Body text is small, rounded, and highly legible against colored blocks.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding within rounded color blocks; tight spacing between overlapping elements.

Surfaces

sm · 4px

md · 20px

lg · 25px

pill · 999px

None; shapes defined by solid color blocks and overlapping typography.

rgba(84, 84, 84, 0.23) 0px 0px 20px 0px

Layout

1920container

2columns

768breakpoints

Full-bleed grid of large rounded rectangular blocks with massive overlapping type.

Motion & Interaction

220msmicro

500mssmall

800msmedium

cubic-bezier(0.25, 1, 0.5, 1)easing

Sequential staggered transitions for grid blocks. · Parallax-like overlapping of large type elements.

Cursor changes to pointer over interactive elements; potential color or scale shifts. · Immediate navigation to project details.

Components

button Small, rounded pill buttons with white background and dark text.
card Large, full-bleed rounded rectangles filled with solid colors or project imagery.
chip Small, rounded white labels overlapping project imagery.
hero Dynamic, multi-colored grid of blocks with massive overlapping logotype and descriptive text.

Voice & Don'ts

Tone Confident, bold, and artistic.
Headlines Massive, overlapping, colorful, and expressive.
CTAs Minimal, rounded, and understated.

Don't use muted or low-contrast color palettes — screenshot shows bold, high-saturation color blocks.
Don't use small, rigid typography — screenshot shows massive, overlapping logotype elements.
Don't use sharp corners on containers — screenshot shows heavily rounded corners (20-25px radius).
Don't use complex drop shadows or 3D effects — screenshot shows flat color blocks with minimal, soft shadows.
Don't use traditional, strictly aligned grid systems — screenshot shows overlapping, dynamic layout with massive type.
Don't use generic or corporate design language — screenshot shows an expressive, artistic studio portfolio.
Avoid: Subtle or muted palettes
Avoid: Small, delicate typography
Avoid: Rigid, strictly aligned grids
Avoid: Generic corporate language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is the portfolio site for Mire, a graphic design and art direction studio. The design DNA is defined by bold, high-saturation color blocks (yellow, blue, green, pink) and massive, overlapping logotype elements using PP Pangram Sans Rounded. The layout is a full-bleed grid of large, rounded rectangular cards. Key colors are #FFFFFF (background), #4F4F4F (quiet text), and #000000 (primary text), with the vibrant block colors as dominant accents. Typography is geometric sans, used at extreme scales for the display logotype and small scales for navigation and labels. Critical donts: never use muted palettes, never use small display text, never use sharp corners, never use complex shadows, and never use rigid, corporate-style grids.

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