CURATED · OPEN · FREE

ToyFight

A playful yet premium creative agency website with a retro-gaming inspired aesthetic.

studiocreative

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://toyfight.co

📦 Browse pack contents →

Identity DNA

PlayfulRetro-FuturisticStudioCreativeOriginal

A design studio that blends 8-bit gaming nostalgia with high-end creative services.

Color

#0D0D0EInk

#FAF6EFInk soft

#F1E7E7BG

#E9E3F3BG quiet

rgba(13,13,14,1)Line

Warm, soft neutral backgrounds contrasted with high-contrast dark ink.

Typography

monospaced · condensed-sans

display56px · 400
heading46px · 400
body18px · 400
caption14px · 500
micro10px · 500

Use monospaced font for major headings to reinforce the retro-tech aesthetic. · Use condensed sans-serif for body and UI text. · Uppercase small labels with wide tracking.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace to allow bold typography and 3D elements to breathe.

Surfaces

sm · 2px

md · 4px

lg · 16px

pill · 999px

1px solid #0D0D0E

0 4px 12px rgba(0,0,0,0.05)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric, scattered layout with overlapping elements and generous padding.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Smooth transitions for color and background changes. · Complex transform animations for 3D objects. · Scroll-triggered entrance animations.

Subtle color shifts and transforms on interactive elements. · Immediate visual feedback with active states.

Components

button Pill-shaped or rounded-rectangle buttons with light backgrounds and dark borders.
card Dark background cards showcasing portfolio work.
chip Small pill-shaped labels for tags and categories.
input Clean text inputs with bottom borders.
hero Large 3D interactive object paired with scattered, bold typography blocks.

Voice & Don'ts

Tone Confident, playful, and slightly irreverent.
Headlines Bold, fragmented statements with strong personality.
CTAs Direct and playful, often using unconventional labels.

Don't use generic sans-serif fonts for display text — screenshot shows monospaced and condensed faces.
Don't apply rigid, symmetrical layouts — screenshot shows scattered, overlapping elements.
Don't use cold, clinical color palettes — screenshot shows warm, soft neutrals like #F1E7E7.
Don't avoid 3D and playful elements — screenshot prominently features a 3D game console.
Don't use thin, delicate borders — screenshot shows solid, confident 1px borders.
Don't make typography uniform in size — screenshot shows extreme variation from 10px to 56px.
Avoid: Boring corporate speak
Avoid: Overly formal language
Avoid: Generic design jargon

Inside the pack — real screenshots

ToyFight — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a premium creative agency website blending retro-gaming nostalgia with high-end design services. The palette centers on warm, soft neutrals (#F1E7E7, #FAF6EF) contrasted with deep ink (#0D0D0E). Typography uses monospaced faces for display headlines and condensed sans-serif for body text, creating a distinct retro-tech feel. The layout is asymmetric and playful, featuring scattered text blocks, 3D interactive elements, and generous whitespace. Critical constraints: Never use generic sans-serif fonts for display text; always embrace scattered, overlapping layouts instead of rigid grids; maintain the warm, soft color palette and avoid cold, clinical tones. The design balances playfulness with premium craftsmanship.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko