# Co Projects · Design system migration spec

> Source: https://co-projects.xyz  ·  Curated by OpenDesign  ·  en

> This site is worth including as an example of brutalist/minimalist web design that uses geometric forms as the primary visual language rather than traditional UI components.

## 1. Identity DNA

Co Projects operates with the clarity of an architectural model: a structure defined not by ornament, but by the stark relationship between form and void. It is a digital space where massive geometric shapes—circles, semicircles, and their divisions—function as the primary visual vocabulary. The result is a portfolio that feels less like a website and more like a bold graphic print, executed with rigorous minimalism.

**One-liner:** A minimalist, high-contrast portfolio site dominated by massive geometric forms.
**Keywords:** minimalist · geometric · experimental · brutalist · architectural
**Analogy:** A stark architectural model or a bold graphic print.

## 2. Color

The palette is a deliberate reduction to a strict binary: pure black (#000000) on pure white (#FFFFFF). This is not a default or a starting point, but a foundational constraint that forces composition and shape to carry all visual weight. Thin gray borders (rgb(229, 231, 235)) provide the only subtle separation, acting as the lightest possible structural lines.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(229, 231, 235, 1.0)` | divider |

**Color principle:** Strict binary palette: pure black (#000000) on pure white (#FFFFFF).

The principle is absolute: chromatic variation is a distraction from the essential dialogue between light and dark, form and emptiness.

## 3. Typography

Typography is handled by the 'Alpha' family in geometric sans-serif category, maintaining a uniform weight of 400 across all text elements. This consistency turns text into a neutral, architectural component—a material with the same properties as the geometric shapes it accompanies, rather than a voice with its own stylistic inflection.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | 0px | Headlines and large display text |
| body | 16px | 1.5 | 400 | 0px | Standard body text |

**Type rules:**
- Use 'Alpha' font family for primary display and body text
- Use 'Takt' font family for monospace elements
- Maintain consistent font-weight of 400 across all text elements

## 4. Spacing

Spacing is generous and deliberate, with large vertical gaps that give each geometric composition room to occupy the viewport as a singular, monumental object.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with large vertical gaps between major elements

## 5. Surfaces

Surfaces are flat and honest. There are no drop shadows, no gradients, and no textures. The depth is not simulated; it is inherent in the scale and placement of shapes against the white ground. Borders are reduced to the thinnest possible lines, a structural necessity rather than a decorative feature.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin 1px borders using rgb(229, 231, 235) for subtle separation

## 6. Layout

The layout skeleton is an asymmetric split, where massive geometric forms dominate the left and right of the frame. Minimal navigation—simple text links—sits at the top, a quiet functional overlay on the bold visual composition below.

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

**Skeleton:** Asymmetric split layout with massive geometric shapes on left and right, minimal navigation at top

## 7. Motion & Interaction

Motion philosophy is one of simplification and unity. All transitions are applied to all properties ('transition: all'), creating a consistent, unhurried pacing that focuses purely on changes in element visibility and position.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1.0)`
- **Patterns:**
  - All transitions applied to all properties (transition: all)
  - Simplified motion focusing on element visibility and position changes

- **Hover:** Cursor changes to pointer on interactive elements
- **Click:** Standard click behavior with transition animations
- **Transition:** All CSS properties animate with default timing
- **Keyboard:** Standard keyboard navigation support

## 8. Voice & Don'ts

The editorial voice is minimal, direct, and architectural. Headlines are not spoken; they are visualized through the large geometric shapes themselves, while calls to action are understated text links, rejecting the prominent button as a concept.

- **Tone:** Minimal, direct, architectural
- **Headline style:** Large geometric shapes serve as visual headlines
- **CTA style:** Understated text links rather than prominent buttons
- **Avoid:** Decorative elements or illustrations / Gradients or color variations / Complex navigation patterns / Text-heavy introductions / Rounded corners or soft edges

### Don'ts
- ❌ Don't add rounded corners — screenshot shows sharp, geometric edges on all shapes
- ❌ Don't introduce color variations — screenshot shows strictly black (#000000) and white (#FFFFFF)
- ❌ Don't use multiple font weights — screenshot shows consistent weight 400 throughout
- ❌ Don't add drop shadows — screenshot shows flat, 2D compositions without depth effects
- ❌ Don't create complex navigation menus — screenshot shows minimal text links at top
- ❌ Don't add decorative illustrations — screenshot uses only abstract geometric forms
- ❌ Don't use gradient backgrounds — screenshot shows solid white (#FFFFFF) background

The system deliberately avoids color, rounded corners, shadows, complex navigation, and decorative illustration to maintain its stark, geometric integrity.

## System Prompt (paste into AI tool)

```
Co Projects is a minimalist, experimental portfolio site using a stark black-and-white palette with massive geometric circle and semicircle compositions as the primary visual language. The design features pure white (#FFFFFF) background with solid black (#000000) geometric shapes and minimal navigation text. Typography uses the 'Alpha' font family in a geometric sans-serif category at weight 400, with 60px display size and 16px body text. The layout is asymmetric with generous whitespace and large vertical gaps. Key characteristics include: no color variations, no rounded corners, no shadows, no gradients, and minimal text content. Navigation consists of simple text links ('Co Projects', 'Builder', 'About') with pointer cursors. All transitions apply to all properties. The site avoids decorative elements, complex navigation, and text-heavy introductions, focusing instead on bold geometric forms as visual focal points.
```