# Ujjo · Design system migration spec

> Source: https://ujjo.com  ·  Curated by OpenDesign  ·  en

> The site is worth including for its unapologetic use of high-contrast color and traditional serif typography in a modern, flat web layout.

## 1. Identity DNA

Ujjo treats the browser window like a magazine spread, bisected into two flat fields of color that set the stage for every interaction. The analogy is architectural: a building with two contrasting facades, each unadorned and structurally honest, demanding attention through proportion and material rather than decoration.

**One-liner:** High-contrast editorial interface utilizing a bold neon green and dark gray split-background with sharp typographic accents.
**Keywords:** Bold · Editorial · Minimal · High-Contrast
**Analogy:** A sleek digital magazine or editorial platform with a striking split-tone layout.

## 2. Color

The palette is a two-tone engine: a single vibrant neon green against deep dark grays, with pure black for typographic work. The contrast is not subtle—it is the system's primary visual event.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#212121` | main background |
| `--bg-soft` | `#303030` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#1A1A1A` | placeholder |
| `--accent` | `#3FD300` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Extreme contrast between vibrant neon green and deep dark grays, using black for primary text.

The governing principle is stark juxtaposition; there are no transitional hues or soft gradients to mediate the boundary.

## 3. Typography

Typography is the singular, authoritative voice, rendered entirely in serif typefaces across both display and body roles. Heavy weights are employed not for decoration but as a structural tool to establish hierarchy.

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 900 | -0.5px | Main titles |
| heading | 24px | 1.3 | 700 | 0px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Paragraph text |

**Type rules:**
- Serif typefaces dominate for both display and body text.
- Heavy weights (700-900) are used frequently for emphasis and headers.

## 4. Spacing

A strict 4px base grid establishes the underlying rhythm, with deliberate, generous padding reserved for headline elements to give them spatial prominence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous padding around headline elements.

## 5. Surfaces

Surfaces are defined by absolute flatness and sharp, rectangular geometry. Depth is rejected; there are no shadows, gradients, or border-radius to soften any edge.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible border radius; sharp rectangular edges on all surface elements.

## 6. Layout

The fundamental layout skeleton is a split-background field, vertically dividing the viewport into two distinct color zones. Content blocks are then overlaid as flat, geometric regions of text or color, maintaining the sharp division.

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

**Skeleton:** A split-background layout (left neon green, right dark gray) with overlaid content blocks.

## 7. Motion & Interaction

Motion is treated as a pragmatic utility, not a narrative device. Standard CSS transitions provide immediate, subtle feedback on interactive elements without becoming part of the visual experience.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Standard CSS transitions applied to interactive elements.

- **Hover:** Standard text link hover effects via CSS transitions.
- **Click:** Default pointer cursor for interactive elements.
- **Transition:** All elements have a standard 'all' transition property applied.
- **Keyboard:** Standard browser focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative and direct, matching the typographic boldness. Headlines are often uppercase or heavily weighted serif, and calls to action remain simple, underlined text links.

- **Tone:** Authoritative, bold, and direct, suitable for sports news.
- **Headline style:** Uppercase or heavily weighted serif type.
- **CTA style:** Standard inline text links.
- **Avoid:** Playful or rounded elements / Soft or pastel color palettes / Heavy drop shadows

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular edges on all elements.
- ❌ Don't use sans-serif fonts — screenshot shows serif fonts (Times New Roman) for all text.
- ❌ Don't use soft pastel colors — screenshot shows high-contrast neon green and dark grays.
- ❌ Don't apply drop shadows — screenshot shows completely flat, 2D surface styling.
- ❌ Don't center all text — screenshot shows left-aligned content blocks.
- ❌ Don't use colorful button shapes — screenshot shows simple underlined text links instead.

The system deliberately forgoes playful elements, rounded forms, soft color palettes, and any illusion of depth.

## System Prompt (paste into AI tool)

```
This site features a bold, high-contrast editorial layout characterized by a striking split-background of neon green (#3FD300) and dark gray (#212121). Typography is strictly serif-based (Times New Roman) with heavy weights (700-900) used for emphasis. The design is completely flat with no border-radius, drop shadows, or soft gradients. Key hex colors include #3FD300, #000000, and #212121. Critical donts include: never use rounded corners, never use sans-serif fonts, and never apply drop shadows or soft pastel palettes. The layout relies on sharp geometric blocks and left-aligned text.
```