# Unlirice Ooo · Design system migration spec

> Source: https://unlirice.ooo  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of experimental web design that completely abandons traditional UI patterns in favor of a purely artistic, collage-based visual language.

## 1. Identity DNA

Unlirice Ooo operates as a floating digital collage of fragmented memories. It rejects the stability of a grid for a dynamic composition where photographic elements are scattered across a stark, white void.

**One-liner:** A highly experimental and expressive photographic portfolio that rejects traditional grids in favor of dynamic, floating compositions.
**Keywords:** experimental · collage · photographic · floating · dynamic
**Analogy:** A floating digital collage of fragmented memories

## 2. Color

The color system is a strict monochrome UI. This deliberate absence of color in the interface ensures the vibrant, full-color photographic content holds absolute primacy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict monochrome UI to allow the colorful photographic content to take center stage without competition.

The principle is a quiet canvas, not a competing voice.

## 3. Typography

Typography serves as a structural anchor, not a decorative element. Geometric-sans for display and humanist-sans for body are used exclusively at a Regular (400) weight to maintain a clean, brutalist baseline.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 160px | 0.9 | 400 | -2px | massive brand signature at the bottom of the viewport |
| heading | 28px | 1.15 | 400 | 0px | section numbers or minimal metadata |
| body | 16px | 1.4 | 400 | 0px | standard UI text and system elements |

**Type rules:**
- Use massive, oversized typography to anchor the floating chaotic elements.
- Maintain a strict weight of 400 (Regular) across almost all elements to preserve a clean, quiet baseline.
- Avoid decorative or italicized text to maintain a stark, brutalist aesthetic.

## 4. Spacing

Spacing follows an irregular rhythm, abandoning predictable measures for the fluid placement of floating elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** irregular

## 5. Surfaces

The interface is defined by a complete absence of depth cues. There are no shadows, no borders, and no container backgrounds, reinforcing the collage aesthetic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** none

## 6. Layout

The layout is a fluid, non-grid canvas. Circular image elements are placed using absolute positioning or CSS transforms, creating a dynamic and unaligned scatter across the viewport.

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

**Skeleton:** A fluid, non-grid canvas where elements are placed using absolute positioning or CSS transforms to create a floating effect.

## 7. Motion & Interaction

Motion is slow and deliberate, characterized by long, smooth opacity transitions and subtle floating effects. The philosophy is to create a dreamlike, fluid experience rather than a reactive UI.

- **Durations:** micro 220ms · small 400ms · medium 2000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Long, smooth opacity transitions (2s) for element reveals
  - Cubic-bezier easing for interactive state changes
  - Continuous subtle floating or parallax movements

- **Hover:** Elements may change state via a pointer cursor, often triggering subtle scaling or opacity shifts.
- **Click:** Direct interaction with floating photographic elements.
- **Transition:** Global use of 'all' transitions with a focus on smooth, extended durations.
- **Keyboard:** Standard browser navigation for links.

## 8. Voice & Don'ts

The editorial voice is abstract, minimal, and non-verbal. Headlines are massive, stark, and devoid of emotional inflection, while calls to action are subtle or absent.

- **Tone:** Abstract, minimal, and non-verbal.
- **Headline style:** Massive, stark, and strictly lowercase or uppercase without emotional inflection.
- **CTA style:** Subtle or entirely absent, relying on the visual composition to guide the user.
- **Avoid:** Conversational UI / Marketing jargon / Dense paragraphs / Explicit navigation labels

### Don'ts
- ❌ Don't use standard UI containers — screenshot shows floating circular elements without borders or shadows.
- ❌ Don't use a traditional grid system — screenshot shows elements scattered across the viewport in a fluid, non-aligned manner.
- ❌ Don't use varied font weights — screenshot shows almost exclusively Regular (400) weight text.
- ❌ Don't use background colors other than white — screenshot shows a strict white (#FFFFFF) background.
- ❌ Don't use standard rounded rectangles for buttons or cards — screenshot shows purely circular or elliptical crops.
- ❌ Don't use busy or textured backgrounds — screenshot shows a clean, stark white void.

The system deliberately avoids conversational UI, marketing jargon, and any explicit navigation labels.

## System Prompt (paste into AI tool)

```
A highly experimental and expressive photographic portfolio. Positioning: An abstract, artistic canvas that prioritizes visual exploration over standard UI patterns. Key hex colors: #FFFFFF background and #000000 foreground. Font categories: geometric-sans for display and humanist-sans for body, both strictly at Regular (400) weight. Critical donts: Do not use standard grid layouts; do not apply heavy borders, shadows, or container backgrounds; do not use bold or italic typography. The system relies on fluid, absolute positioning and long opacity transitions to create a dynamic, floating experience.
```