# Bizar Ro · Design system migration spec

> Source: https://bizar.ro  ·  Curated by OpenDesign  ·  en

> This site exemplifies how bold typography and stark contrast can create a powerful, premium brand identity.

## 1. Identity DNA

Bizar Ro treats its identity like a high-fashion editorial magazine: each element is chosen for maximum graphic impact, and nothing exists merely to decorate. The system's stark monochrome and geometric type are its signature, making the site feel both premium and avant-garde.

**One-liner:** A bold, experimental portfolio using high-contrast typography and stark monochrome to create a premium, avant-garde aesthetic.
**Keywords:** bold · experimental · editorial · high-contrast · custom
**Analogy:** A high-fashion editorial magazine

## 2. Color

The palette is an exercise in absolute contrast. Pure black and pure white are the only actors on this stage, creating a graphic tension that frames every typographic element.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Stark monochrome

This commitment to a binary palette is non-negotiable; it is the foundation of the entire system's high-contrast authority.

## 3. Typography

Typographic voice is defined by FK Grotesk Neue and a strict rule of uppercase setting. The system uses negative tracking and tight leading on large display type to create dense, impactful blocks of text that feel engineered rather than set.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 1.0 | 400 | -1.875px | Large display text |
| heading | 37.5px | 1.0 | 400 | -1.875px | Section headings |
| subheading | 30px | 1.2 | 400 | -0.75px | Subheadings |
| body | 13.5px | 1.6 | 400 | -0.75px | Body text |

**Type rules:**
- All text is uppercase
- Negative letter-spacing on large text
- Tight line-heights on display text

## 4. Spacing

Spacing adheres to an 8px grid, but its application is asymmetric, not rigidly mathematical. Rhythm is established through generous, deliberate emptiness that allows typographic elements to dominate.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px grid based on the 18.75px padding values

## 5. Surfaces

Surfaces are rendered as stark, flat planes of black or white. Depth is implied only through 1px solid white borders and the sheer scale of typographic elements, not through shadow or gradient.

- **Radius:** sm 4px · md 5px · lg 8px · pill 999px
- **Borders:** 1px solid white

## 6. Layout

The layout skeleton is built from large, asymmetric blocks that break conventional grids. These massive containers are often filled with equally massive typographic elements, letting content scale dictate the visual hierarchy.

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

**Skeleton:** Large asymmetric blocks with massive typographic elements

## 7. Motion & Interaction

Motion is a utility for revealing content, not for decoration. Smooth fades and scroll-triggered reveals are employed with restraint, ensuring animation serves clarity and pace rather than spectacle.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth fade-ins
  - Scroll-triggered reveals

- **Hover:** Subtle scale or color shift on interactive elements
- **Click:** Immediate feedback with minimal animation
- **Transition:** Smooth transitions on all elements
- **Keyboard:** Standard keyboard navigation support

## 8. Voice & Don'ts

The editorial voice is confident and direct, using short, impactful headlines in uppercase. It avoids playful language, passive constructions, and any suggestion of decoration, aligning verbal tone with the stark visual system.

- **Tone:** Confident, bold, and experimental
- **Headline style:** Short, impactful, and uppercase
- **CTA style:** Direct and action-oriented
- **Avoid:** Playful language / Excessive exclamation / Passive voice

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp, geometric shapes
- ❌ don't use multiple colors — screenshot shows strict black and white
- ❌ don't use small, timid typography — screenshot shows massive, dominant type
- ❌ don't use decorative elements — screenshot shows stark, minimal visuals
- ❌ don't use serif fonts — screenshot shows geometric sans-serif
- ❌ don't use busy layouts — screenshot shows large, empty spaces

The system deliberately avoids rounded corners, multiple colors, serif fonts, and busy layouts, defining itself as much by what it excludes as by what it includes.

## System Prompt (paste into AI tool)

```
This is a bold, experimental portfolio site for a creative technologist. It uses a stark monochrome palette with pure black (#000000) and white (#FFFFFF). The typography is dominated by massive, geometric sans-serif type (FK Grotesk Neue) with tight negative letter-spacing and uppercase text. Layouts are asymmetric and minimalist, relying on large typographic elements to create visual impact. Key features include a custom logo with experimental letterforms, high-contrast borders, and a premium, avant-garde aesthetic. Avoid rounded corners, multiple colors, small typography, decorative elements, serif fonts, and busy layouts.
```