# Guste · Design system migration spec

> Source: https://guste.design  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a bold, minimalist studio portfolio that uses structured line art and strict borders to create a memorable and highly functional identity.

## 1. Identity DNA

Guste functions as a digital canvas where graphic design and illustration are exhibited with the clarity of a well-constructed gallery wall. The identity is built on a stark, high-contrast language that prioritizes the artwork itself, using structure to frame rather than decorate.

**One-liner:** A studio portfolio for graphic design and illustration services, emphasizing bold line art and curated art collections.
**Keywords:** graphic design · illustration · art · creative · identity
**Analogy:** A digital canvas showcasing bold, playful, and illustrative creative work.

## 2. Color

The color system operates on a principle of strict monochrome, reserving a small set of vivid swatches exclusively for interactive, functional purposes. This creates a clear hierarchy where the portfolio content exists in black and white, and user actions are signaled by a burst of distinct color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#1E1E1E` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast black and white with a functional palette of distinct colors for interactive elements.

This restraint ensures the palette never competes with the creative work it is meant to showcase.

## 3. Typography

Typography is set in a single geometric sans-serif, creating a consistent and utilitarian voice. The strict use of uppercase for all navigation and labels establishes a clean, structural rhythm that parallels the site's border-defined layout.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.125 | 400 | 0.5px | Main headings and hero text |
| body | 16px | 1.5 | 400 | 0px | Primary body copy |

**Type rules:**
- All text is uppercase for navigation and labels.
- Geometric sans-serif font family used consistently throughout.
- Light font weight (400) is standard for most text elements.

## 4. Spacing

Spacing follows a precise 4px grid, establishing a predictable rhythm that underpins the entire composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous 64px padding for section containers.

## 5. Surfaces

Surfaces are defined by absence and line, not depth. The system rejects drop shadows and gradients in favor of flat planes and prominent 2px black borders that act as the primary architectural element.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Solid 2px black borders define all major containers and sections.

## 6. Layout

The layout is a rigid, box-based grid where sections are explicitly separated by solid black borders. This creates a clear, compartmentalized structure that guides the eye through different categories of work and information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Boxy, grid-based layout with prominent 2px black borders separating sections.

## 7. Motion & Interaction

Motion is applied with functional minimalism, used only to clarify interactive state changes. Transitions are smooth and linear, lasting between 0.15s and 0.3s, providing feedback without introducing unnecessary flourish.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth transitions for hover states and interactive elements.

- **Hover:** Pointer cursor changes on interactive elements.
- **Click:** Visual feedback via cursor change (zoom-in on images).
- **Transition:** Standardized 0.15s-0.3s transitions for UI elements.
- **Keyboard:** Standard focus and navigation implied.

## 8. Voice & Don'ts

The editorial voice is direct and professional, using clear, descriptive headlines and action-oriented uppercase calls to action. The system deliberately avoids corporate jargon and visual clutter in favor of straightforward communication.

- **Tone:** Direct, professional, and creative.
- **Headline style:** Clear, descriptive sentences in title case.
- **CTA style:** Action-oriented and uppercase (e.g., CONNECT, STORE).
- **Avoid:** Overly corporate jargon / Cluttered layouts / Loud or neon accent colors

### Don'ts
- ❌ don't use drop shadows — screenshot shows flat, border-defined surfaces instead
- ❌ don't use rounded corners on containers — screenshot shows sharp, 0px radius boxes
- ❌ don't use gradient backgrounds — screenshot shows solid white or light gray
- ❌ don't use a third font for accents — screenshot shows consistent use of a single geometric sans
- ❌ don't use subtle 1px borders — screenshot shows prominent 2px black borders
- ❌ don't use multi-column text blocks in the hero — screenshot shows single, large headline

The design explicitly avoids drop shadows, rounded corners, and gradient backgrounds, committing fully to its flat, border-defined aesthetic.

## System Prompt (paste into AI tool)

```
A portfolio website for a graphic design and illustration studio, utilizing a stark, high-contrast black-and-white aesthetic with a clean geometric sans-serif typeface. The design is anchored by solid 2px black borders that define sections and containers, creating a structured, grid-like layout. Key colors are #FFFFFF for the background, #000000 for ink and borders, and #1E1E1E for secondary text, with a small functional palette of bright swatches for interactive color selection. Critical don'ts: avoid using drop shadows, rounded corners on containers, or gradient backgrounds, as the design strictly uses flat surfaces and sharp edges. The tone is professional yet playful, relying on bold line-art illustrations and curated gallery displays.
```