# Mire Studio · Design system migration spec

> Source: https://mire.studio  ·  Curated by OpenDesign  ·  en

> A visually striking example of expressive, gallery-style portfolio design using massive typography and bold color blocks.

## 1. Identity DNA

Mire Studio's design system operates like a gallery wall painted in primary colors, where typography doesn't label the work but becomes the work itself. The identity is built on a single, unapologetic principle: bold chromatic blocks and oversized, overlapping letterforms are the primary compositional elements.

**One-liner:** A vibrant, expressive design studio portfolio showcasing work through bold colors and massive typography.
**Keywords:** Graphic Design · Art Direction · Visual Identity · Studio
**Analogy:** A bold, colorful portfolio gallery with oversized, overlapping typography.

## 2. Color

Color is applied not as an accent but as a structural material—large, saturated blocks of yellow, blue, green, and pink define the site's architecture. The palette is high-chroma by design, creating immediate visual impact through geometric juxtaposition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#4F4F4F` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#4F4F4F` | secondary text |
| `--muted` | `#4C4C4C` | placeholder |
| `--line` | `rgba(0, 0, 0, 0)` | divider |

**Color principle:** High-chroma, saturated palettes applied in large geometric blocks and overlapping typography.

The principle is saturation as substance; color blocks are the foundational surfaces upon which all other elements are placed.

## 3. Typography

The typographic voice is unified and geometric, using PP Pangram Sans Rounded for all text to maintain a consistent, rounded, and modern character. Scale is the primary expressive tool, creating a dramatic hierarchy from a massive, viewport-spanning logotype down to small, highly legible body text.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 400px | 0.85 | 600 | 0px | Massive overlapping logotype 'mire' spanning the viewport |
| body | 14px | 1.15 | 400 | 0px | Navigation links, project labels, and descriptive text |

**Type rules:**
- 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.

## 4. Spacing

The rhythm is defined by a duality: generous internal padding within rounded color blocks contrasted with tight, overlapping spacing between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding within rounded color blocks; tight spacing between overlapping elements.

## 5. Surfaces

Depth is suggested through minimal means—a single, soft shadow layer applied to containers—while form is defined entirely by solid color and overlapping type. Borders are absent; the sharp definition comes from the edge of a color block or the silhouette of a letterform.

- **Radius:** sm 4px · md 20px · lg 25px · pill 999px
- **Shadows:**
  - rgba(84, 84, 84, 0.23) 0px 0px 20px 0px
- **Borders:** None; shapes defined by solid color blocks and overlapping typography.

## 6. Layout

The layout skeleton is a full-bleed grid of large, rounded rectangular blocks, arranged with intentional overlap. This structure is then dynamically interrupted and layered with massive logotype elements that span the viewport width, creating a sense of organized chaos.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 2 columns, gutter 0px
- **Breakpoints:** 768 px

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

## 7. Motion & Interaction

Motion reinforces the gallery-like presentation, with grid blocks transitioning in a staggered sequence. The primary effect is parallax-like, achieved through the overlapping and shifting of large typographic elements during scroll or page transition.

- **Durations:** micro 220ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Sequential staggered transitions for grid blocks.
  - Parallax-like overlapping of large type elements.

- **Hover:** Cursor changes to pointer over interactive elements; potential color or scale shifts.
- **Click:** Immediate navigation to project details.
- **Transition:** All elements transition smoothly (0.5s) with staggered delays.
- **Keyboard:** Standard tab navigation through links and interactive blocks.

## 8. Voice & Don'ts

The editorial voice is confident and artistic, mirroring the visual boldness. CTA language is minimal and understated, a quiet counterpoint to the expressive visual system.

- **Tone:** Confident, bold, and artistic.
- **Headline style:** Massive, overlapping, colorful, and expressive.
- **CTA style:** Minimal, rounded, and understated.
- **Avoid:** Subtle or muted palettes / Small, delicate typography / Rigid, strictly aligned grids / Generic corporate language

### Don'ts
- ❌ 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.

The system deliberately avoids subtlety, corporate formality, and any visual language that would subordinate its core graphic identity.

## System Prompt (paste into AI tool)

```
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.
```