# Starface · Design system migration spec

> Source: https://starface.world  ·  Curated by OpenDesign  ·  en

> A defining example of Gen Z 'ugly-cute' aesthetics, blending brutalist layout principles with hyper-playful pop colors.

## 1. Identity DNA

The Starface design system is an exercise in controlled chaos, where brutalist grid structure meets the unrestrained energy of pop art. It's an identity that doesn't just accommodate playfulness—it engineers it through a strict vocabulary of high-saturation color, stark borders, and monospaced type.

**One-liner:** A high-energy, playful e-commerce experience for skincare that treats products like fun collectibles.
**Keywords:** playful · youthful · bold · fun · skincare
**Analogy:** A loud, energetic teen magazine meets a pop-art candy store.

## 2. Color

The color strategy is one of bold declaration, not subtle suggestion. Electric yellow, magenta, and green are deployed as solid, full-bleed fields, their impact amplified by the structural black that contains them.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDFF00` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--accent` | `#FF00D3` | single accent |
| `--line` | `rgba(0,0,0,0.2)` | divider |

**Color principle:** High-saturation color blocking using a signature electric yellow, vibrant magenta, and bright green against stark black borders.

Every color decision reinforces the core principle: high-saturation blocks create visual excitement, while black provides the necessary graphic contrast to keep the system coherent.

## 3. Typography

Typographic voice is split between two distinct personalities: the heavy, rounded sans-serif shouts product names with graphic weight, while the monospaced text delivers all other information with a utilitarian, digital-native clarity. All text is lowercase, reinforcing a casual, unpretentious tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 700 | -1px | product titles and brand name |
| body | 16px | 1.8 | 400 | 0px | descriptions and UI text |

**Type rules:**
- Text is consistently lowercase.
- Monospace is used for almost all functional and descriptive text.
- Heavy, bold, rounded sans-serif is used for impactful headers.

## 4. Spacing

Spacing operates on a strict internal rhythm, most visibly in the consistent 25px padding that gives every card its uniform internal frame.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent internal padding (25px) within cards maintains a uniform rhythm despite varied card sizes.

## 5. Surfaces

Surfaces are defined by absence and stark presence. There are no soft shadows or depth cues; instead, every element is a flat plane of color held in place by bold, 2px black borders.

- **Radius:** sm 4px · md 16px · lg 24px · pill 999px
- **Shadows:**
  - none
- **Borders:** Bold, 2px black borders or solid black structural gaps define every element and separate color blocks.

## 6. Layout

The layout is built on a rigid, full-bleed grid of solid-colored blocks. Thick black lines or structural gaps act as the system's mortar, separating each content cell into a distinct graphic statement.

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

**Skeleton:** A rigid, full-bleed grid of solid color blocks separated by thick black lines.

## 7. Motion & Interaction

Motion is purposeful and minimal, serving feedback rather than flourish. Hover states use subtle scaling or opacity changes to acknowledge interaction, while transitions are smooth and immediate to maintain the site's energetic pace.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Subtle scaling on hover for product images.
  - Opacity fade-in for smooth transitions.

- **Hover:** Subtle transform scaling or opacity changes on interactive elements.
- **Click:** Immediate, crisp feedback with no heavy lag.
- **Transition:** Smooth opacity and transform animations.
- **Keyboard:** Standard focus outlines adapted to the high-contrast, black-bordered aesthetic.

## 8. Voice & Don'ts

The editorial voice is intentionally casual, friendly, and chaotic, using internet slang and lowercase text to speak directly and without formality. Headlines are short and punchy; calls-to-action are direct and action-oriented.

- **Tone:** Incredibly casual, friendly, and slightly chaotic, using internet slang and emojis.
- **Headline style:** Short, punchy, lowercase, and enthusiastic.
- **CTA style:** Direct, lowercase, and action-oriented.
- **Avoid:** formal language / uppercase text / serif fonts / muted colors / complex sentences

### Don'ts
- ❌ don't use serif fonts — screenshot shows exclusively monospace and geometric rounded sans-serif types.
- ❌ don't use uppercase text — screenshot shows text is entirely lowercase.
- ❌ don't use subtle gray borders — screenshot shows bold, solid black structural lines.
- ❌ don't use complex shadows — screenshot shows flat color blocks with no depth effects.
- ❌ don't use muted or pastel color palettes — screenshot shows highly saturated, neon-like primary colors.
- ❌ don't use dense text blocks — screenshot shows short, punchy, and highly scannable copy.

The system explicitly rejects serif fonts, uppercase text, muted palettes, complex shadows, and dense copy, cementing its identity through deliberate subtraction.

## System Prompt (paste into AI tool)

```
This is a playful, high-energy DTC e-commerce site for a Gen Z skincare brand. It uses a vibrant, high-contrast color palette centered around a signature electric yellow (#FDFF00), bold magenta (#FF00D3), and stark black (#000000). The typography combines a heavy, geometric rounded sans-serif for impactful headings with a clean monospace font for all descriptive body text, always rendered in lowercase. The layout is a rigid grid of solid color blocks separated by thick black lines or gaps, creating a bold, graphic aesthetic. Critical donts: never use serif fonts, never use uppercase text, and never use subtle gray borders or soft drop shadows; the brand relies on thick black outlines and flat color for all structural definition.
```
