ToyFight — Design System Reference

1. Visual Theme & Atmosphere

ToyFight brands itself as “The Unmistakably Original® Design Studio,” and the home page delivers on that line through typographic craft rather than visual noise. A warm off-white canvas (rgb(250, 246, 239)) replaces default web white, giving the page the tactile feel of newsprint or a gallery catalogue. A bespoke condensed display face pairs with a rasterized grotesk and a matching mono, so the site reads as an editorial publication first and a studio portfolio second. Off-palette accents — sugar pink, lavender, highlighter yellow — appear inside masked content blocks, never as UI chrome, so the neutral frame stays intact while the storytelling inside breaks into playfulness. The tone is confident, crafted, a little cheeky, and deeply self-assured in its typographic voice.

2. Color Palette & Roles

Foundation

• rgb(250, 246, 239) — page canvas (warm off-white / soft paper)
• rgb(241, 237, 231) — secondary surface (footer, TOS panels, card surfaces)
• rgb(13, 13, 14) — ink (text, borders, inverted button backgrounds)

Inverted / interactive

• rgb(13, 13, 14) bg + rgb(241, 237, 231) fg — the primary link/pill treatment (dark stamp on cream)
• Border matches foreground on inverted elements — a sealed, stamp-like feel

Playful accents (used inside masked content blocks only)

• rgb(233, 227, 243) — pale lavender
• rgb(255, 216, 245) — sugar pink
• rgb(255, 229, 0) — highlighter yellow
• rgb(255, 244, 144) — soft yellow
• rgb(253, 237, 212) — cream peach
• rgb(220, 220, 220) — neutral gray (mobile nav surface only)

Deep surfaces (overlays & media wrappers)

• rgb(61, 61, 64) — slate overlay (transition mask)
• rgb(28, 28, 30) — image wrap background
• rgb(13, 13, 14) — transition curtain (the ink again, used as a reveal mask)

The system is deliberately bi-tonal at the frame level — cream and ink — and polychrome only where content asks for it. Accents never become UI chrome; they live inside content.

3. Typography Rules

ToyFight runs three proprietary typefaces in tight rotation, all set at weight 400 — hierarchy is driven by face, size, and tracking, never by weight.

Typefaces

• SpeziaCondensed — the editorial voice: display headlines, long-form body text, links, buttons
• FKRasterGrotesk — the operational voice: sub-headings, captions, labels, inputs, UI chrome
• SpeziaMono — the metadata voice: timestamps, fine print (declared elsewhere in the system)

Scale

Principles

• Weight is a constant, not a variable. All differentiation comes from face-switching and size jumps.
• Condensed serif-adjacent display face (SpeziaCondensed) for emotional / editorial copy and interactive elements; a rasterized grotesk (FKRasterGrotesk) for anything structural.
• Fine print uses FKRasterGrotesk at 11px, set uppercase with +0.88px tracking — the rasterized texture survives at tiny sizes where a cleaner grotesk would feel generic.
• Negative tracking only on large FKRasterGrotesk (h3/h4). SpeziaCondensed is left at natural spacing because its condensed forms already carry the tension.

What’s absent: no webfont italics, no faux-bold, no serif body. Every lazy type trick has been removed from the palette.

4. Component Stylings

Links / pills (primary interactive element)

• Background: rgb(13, 13, 14) (ink)
• Text: rgb(241, 237, 231) (off-white)
• Border: same as text — a solid ink stamp on cream
• Focus state adds an auto outline at 1px; hover is unchanged (motion-free)

Secondary links (nav items)

• Transparent background, ink text, no border
• Focus ring is the only visible interaction — no hover transform, no color shift

Inputs

• Transparent background on the cream canvas
• Black text, black border — the field is defined by a hairline, not a filled surface
• 12px FKRasterGrotesk with normal tracking

Buttons

• Same SpeziaCondensed 18px as body links, inverted surface treatment

Border radius

• 64px, 999px, 2px, 4px — large pill radii on content blocks and masked labels, hairline radii on inputs/focus outlines.
• The overall shape language still reads rectilinear because radii live on specific content masks, not on chrome.

Shadows

• None detected. Depth is never soft.

5. Layout Principles

• Editorial grid with generous horizontal padding (~36.4px on header and footer) that frames content rather than letting it bleed edge-to-edge.
• Footer carries ~54px of top padding — the page ends with breathing room, not a flush cutoff.
• Breakpoints at 768 / 1024 / 1280 — a standard tablet → laptop → desktop set; nothing exotic, because the typography is doing the custom work.
• Horizontal rhythm is type-driven: long condensed headlines set the column width; the rasterized grotesk fills captions underneath.
• Videos and images are wrapped in dark surfaces (rgb(28, 28, 30) / rgb(13, 13, 14)), so media punches against the cream frame rather than blending with it.
• Body and section elements reset margins/padding to 0 — all spacing is delegated to the frame (header, footer, masked blocks).

6. Depth & Elevation

Depth is almost entirely flat. The only layering cues are:

• Surface swap — rgb(241, 237, 231) panels sit on top of the rgb(250, 246, 239) canvas (luminance 0.93 vs 0.96), a whisper-thin difference that reads as a subtle card without ever needing a shadow.
• Transition curtains — full-bleed ink panels (rgb(13, 13, 14), luminance 0.05) slide across as page-transition masks, creating depth through motion rather than static elevation.
• Media wrappers — deep charcoals (rgb(28, 28, 30) / rgb(61, 61, 64)) frame videos and images, giving them a cinema-like frame.

No box-shadow in the extracted system. ToyFight treats shadow as a smell, not a tool.

7. Do’s and Don’ts

Do

• Use rgb(250, 246, 239) as the base canvas — it carries the whole brand warmth.
• Hold every weight at 400 and let face + size do the hierarchy.
• Pair SpeziaCondensed with FKRasterGrotesk; never let one type do both jobs.
• Set fine print as 11px FKRasterGrotesk uppercase with positive tracking.
• Reserve accent colors (lavender, pink, yellow, peach) for masked content blocks, caption chips, or playful inline highlights.
• Frame media with a dark wrapper so it separates cleanly from the cream page.
• Use ink-on-cream pills for primary links/buttons; let secondary links be transparent with ink text.

Don’t

• Don’t introduce pure white (#ffffff) backgrounds — it kills the warmth.
• Don’t add drop-shadows for elevation — surface color swap is the system.
• Don’t use bold weights as emphasis; switch face or scale up instead.
• Don’t use accent colors as UI chrome (buttons, nav, borders) — they belong inside content.
• Don’t use a non-condensed serif or a rounded sans — the face pairing is the signature.
• Don’t rely on hover states for feedback; the site barely uses them. Use focus rings and motion-driven transitions instead.

8. Responsive Behavior

Three breakpoints: 768, 1024, 1280. Header padding of 36.4014px hints at a rem/clamp-based system underneath. On smaller screens, the site swaps in a dedicated mobile nav container (rgb(220, 220, 220) surface) — the one place gray appears as UI chrome rather than an accent inside content. Typography holds its character across sizes; a 36px condensed headline can compress to a still-expressive 28–32px without losing its voice because the face is doing the work.

9. Agent Prompt Guide

Build a UI that matches ToyFight’s design language.

Set the canvas to warm off-white rgb(250, 246, 239) and ink text rgb(13, 13, 14) — never pure white, never pure black. Use SpeziaCondensed for display, body, links, and buttons (all at 18–36px, weight 400), and FKRasterGrotesk for sub-heads, captions, UI labels, inputs, and fine print (11–12px, weight 400). Fine print should be uppercase with ~0.88px tracking. Hold every weight at 400; drive hierarchy by swapping typeface and scaling size. Primary links/buttons are a solid ink pill (rgb(13, 13, 14) bg, rgb(241, 237, 231) text) with matching border and no shadow. Secondary links are transparent with ink text — hover is near-invisible, let focus rings do the interaction signaling. Cards live on a rgb(241, 237, 231) surface — a whisper above the canvas, no shadow needed. Wrap media in a dark rgb(28, 28, 30) or rgb(13, 13, 14) frame so it punches against the cream page. Reserve sugar-pink, lavender, highlighter-yellow, and cream-peach accents for masked content blocks only — never for chrome. Keep corners mostly sharp; use 64px or 999px radii only on masked content chips. Let typography do the personality; let the palette stay quiet.

Generated by Sparkbites — extracted from live CSS analysis