---
name: Ujjo
description: "The site is worth including for its unapologetic use of high-contrast color and traditional serif typography in a modern, flat web layout."
version: alpha

colors:
  background: "#212121"
  primary: "#000000"
  tertiary: "#3FD300"
  neutral: "#1A1A1A"
  bg-soft: "#303030"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 900
    letterSpacing: "-0.5px"
  heading:
    fontFamily: transitional-serif
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

High-contrast editorial interface utilizing a bold neon green and dark gray split-background with sharp typographic accents.

*A sleek digital magazine or editorial platform with a striking split-tone layout.*

## Colors

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

- **Background (`#212121`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#3FD300`)** — uses `accent` token
- **Muted (`#1A1A1A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 4px base grid with generous padding around headline elements.

## Elevation & Depth

- Borders: No visible border radius; sharp rectangular edges on all surface elements.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Standard text links without visible button containers, relying on default styling.
- **card:** Content blocks presented as flat regions of color or text without distinct card boundaries.
- **hero:** A large split-tone background area with overlaid text blocks for the main title.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```