---
title: "Tailorgame visual design standard"
updated: 2026-11-07
language: en
canonical: "https://tailorgame.com/design-system"
description: "The mandatory Tailorgame Satin 3D standard for platform artwork."
---

# Tailorgame visual design standard

**Tailorgame Satin 3D is mandatory for all future platform-authored visual assets.** The user approved this platform-wide direction on November 7, 2026. It covers interface icons, illustrations, game covers, badges, game identities, promotional/social artwork and avatar presets. The approved sculpted controller, trophy and wand establish the reference quality. This guide records the design decision; publication and validation evidence belong in the relevant release records.

Read this guide before creating or replacing artwork. Use the icon implementation guide (repository: `docs/icon-system.md`) for component/export details, the root agent guidance (repository: `AGENTS.md`) for repository rules, and each game's `docs/games/<slug>/agent.md` for its identity and behavior.

## The visual language

Create believable three-dimensional objects with broad rounded bevels, soft molded volume, satin reflections and a clear silhouette. They should look tactile and carefully made, with enough restraint to remain readable in an interface. Lighting and form convey depth; outlines, artificial drop shadows and gradients painted onto flat symbols do not fulfill the standard.

Use the approved assets as visual references before generation:

- `public/images/icons/gamepad-satin-v1-256.webp`: rounded volume, satin lime surfaces, dark forest recesses and lavender controls.
- `public/images/icons/trophy-satin-v1-256.webp`: sculpted folds, ivory highlights and a restrained violet edge.
- `public/images/icons/wand-satin-v1-256.webp`: coherent material across lime and violet, broad highlights and a readable diagonal silhouette.
- `public/images/icons/sculpted-v2/`: the current small-symbol family and normalized size variants.

| Foundation | Standard |
| --- | --- |
| Platform surfaces | Deep forest `#101412`, `#171c1a` and `#1b211e`; subtle dividers `#2b322d` |
| Primary accent | Satin lime, aligned with `#c6f96a`; naturally shaded highlights and bevels may vary |
| Light material and text | Warm ivory aligned with `#f3f5ef`; avoid harsh white glare that erases form |
| Secondary accent | Restrained violet aligned with `#c4b5fa`; use as a supporting material, seam or edge |
| Recesses and depth | Deep forest shading; preserve detail without heavy black outlines |
| Light | One soft studio key from upper left, gentle fill and controlled highlights; consistent across a family |
| Camera | Compact symbols use an almost orthographic front view, with slight visible thickness; scenes may use perspective while retaining the same material and light |
| Finish | Satin enamel or soft sculpted material; avoid mirror chrome, noisy roughness, excessive bloom and generic flat clip art |

Use the existing typography, spacing and surface tokens in `app/design-system.css`. Artwork complements readable native text and controls; it does not require rasterizing UI copy or changing established layouts.

## Apply the style to each asset

| Asset | Required treatment |
| --- | --- |
| UI icons | One recognizable canonical silhouette, chunky proportions, few details and genuine depth. Use the shared semantic components for navigation, actions, status and game controls. Keep tiny holes and gaps open at the actual rendered size. |
| Feature illustrations | Extend the same physical material into a meaningful object or small coherent scene. Let scale support richer detail without adding unrelated props or decoration. |
| Badges and rewards | Give the achievement a distinctive sculpted shape. Keep the meaning legible at compact sizes; use accompanying text for levels, amounts and conditions. |
| Game logos and compact icons | Create an original game-specific concept and recognizable silhouette within the shared material language. Preserve readable game lettering, a distinct compact mark and separation from the corporate logo. A recolored or renamed existing asset is insufficient. |
| Game covers and editorial images | Build an original scene that explains the game or article. Use deliberate composition, depth, lighting and clear focal objects; provide safe crops for every consuming card. Game-specific colors and materials may support its theme while lime/ivory/violet and the sculpted finish connect it to the platform. |
| Promotional and social artwork | Use the approved corporate identity, generous text-safe space and a purposeful 3D focal subject. Preserve title readability at thumbnail size and safe margins for the target crop. |
| Avatar presets | Use friendly, polished soft 3D portraits with natural varied skin tones, hairstyles and recognizable expressions. Carry platform colors in clothing, accessories or the existing rings; do not recolor skin to the brand palette. Preserve stable preset IDs and the profile image contract. |

Each new game still requires its own logo, compact icon and cover. Compare the catalog before choosing a concept. Shared materials unify distinct games; they are not permission to reuse a cover, generic badge or silhouette for every title. Record the concept and actual placements in the game's guide.

## Preserve identity and user content

- Keep the approved folded-ribbon `t`/play corporate mark and ivory/lime wordmark unchanged, using `components/homepage/logo.tsx` and versioned artwork in `public/images/brand/`. Preserve proportions and colors. Do not regenerate, retype or embellish the corporate logo to match a new asset.
- Preserve provider names, recognizable trademark shapes and identifying colors. Provider-owned sign-in surfaces stay under their existing provider contract. Platform material treatment must not make a provider ambiguous.
- Keep game suit meanings, red/black card distinctions, player markers and other non-color gameplay cues. Aesthetic consistency must not change rules or make states indistinguishable.
- User-uploaded photos, avatars and cover images remain the user's content. Do not automatically stylize, recolor or replace them. Existing validation, crop, persistence and privacy behavior remains authoritative.
- Existing approved game identities and portraits retain their identity when improved. Apply this standard to new or deliberately revised platform artwork, and verify the intended result before replacing a versioned asset.

## Transparent artwork, sizing and delivery

For standalone icons and cutout illustrations, request a **true transparent alpha background**. The empty canvas and holes must be transparent, not a checkerboard, matte, tinted rectangle, vignette or diffuse glow. Do not bake a tile, floor, pedestal, outer cast shadow, text or watermark into a compact symbol. Inspect the result on both forest and lime; alpha metadata alone does not prove a clean cutout.

Center the complete silhouette and preserve its aspect ratio. Compact icons occupy about 88% of the square, with approximately 6% transparent padding on each side. Use near-front views and broad detail so the object survives reduction. Full scene covers use an intentional opaque background and crop-safe composition instead of the icon padding rule.

| Delivery | Size and format guidance |
| --- | --- |
| Regular icons | Versioned transparent WebP at 64, 128 and 256px; verify at 16/24px, plus smaller actual consumers such as 9px suit corners |
| Large cutout illustrations | Preserve the original PNG; provide alpha-preserving WebP derivatives sized for the actual placement and display density |
| Game/editorial covers | Preserve the original; create versioned responsive variants at the dimensions and aspect ratios used by the catalog, detail and social surfaces |
| Avatar presets | Follow `components/profile/AGENTS.md` and the stable preset registry; inspect the smallest account avatar and profile selection tiles |
| Social images | Deliver the exact metadata dimensions; use renderer-supported local PNG when required, and inspect the final rendered response |

Keep assets inside the repository, use explicit rendered dimensions and responsive sources, and avoid full-resolution generation output in small controls. Do not rely on remote generation URLs or private cache paths at runtime. Sharp may perform bounded trimming, resizing and format conversion while preserving alpha; it is not a substitute for generating or correcting the artwork itself. Use the image generation tool for substantive visual edits.

## Accessibility and real-screen verification

- Keep clear accessible control names, decorative hiding, keyboard focus and target sizes. A rich image must not become the only explanation of a control, error, selected state or reward.
- Raster colors do not inherit `currentColor`. Use the shared material contrast rules for light surfaces: `data-tg-icon-tone="ink"` on light wrappers and `data-tg-icon-tone="original"` on nested dark badges. Preserve provider color and verify the closest surface actually behind the icon.
- Keep selected/rest states distinguishable through the existing text, pressed state, marker or shape. Do not rely only on a subtle saturation change.
- In forced-colors mode, retain the tested system-color vector fallback for icons. It is an accessibility path; normal rendering uses the 3D artwork. Honor reduced motion and retain spinner/RTL behavior.
- Check real desktop, 390px and 320px layouts, relevant RTL layouts, small-size recognition, crop boundaries, image loading, contrast on dark and light surfaces, and keyboard interaction. Inspect administrator surfaces and generated social images where they consume the asset.
- Verify the actual game board and artwork as well as navigation. A shared header is not evidence that in-game marks, suits or covers are correct.

## Generation and provenance

Use the built-in image generation workflow for new realistic 3D artwork. Generate each distinct subject separately and inspect the approved reference images first. Keep the precise prompt, reference roles, tool/mode, original source, source hash, dimensions, alpha status, processing steps, variant paths/hashes, intended placements, and visual verification evidence with the asset. Preserve rejected attempts when they explain an accepted revision. Reused orientations and selected states must be documented as aliases, not additional generated originals.

Keep icons under the versioned icon asset/provenance directories and run the existing exporter after changes. Record game artwork in `docs/games/<slug>/agent.md` and link it from the daily record. Store execution evidence in `docs/maintenance-log.md` and release-specific records. Distinguish local creation, source merge, staged verification and canonical publication; this style decision does not itself establish any deployment.

Use this prompt template, replacing every bracketed item with the actual brief:

```text
Use case: stylized-concept.
Asset type and placement: [icon / illustration / badge / game identity / cover /
social image / avatar preset], for [surface and actual rendered sizes].
Reference images: [approved local assets; identify each as style reference,
identity reference or edit target, and specify what must remain unchanged].
Subject: [one precise, recognizable subject or coherent game-specific scene].
Style: Tailorgame Satin 3D; realistic sculpted physical volume, broad rounded
bevels, satin lime enamel and warm ivory, deep-forest recesses, restrained
lavender accents. [For a provider, preserve its identifying colors and shape;
for a portrait, preserve natural skin tones and specified character identity.]
Light: soft studio key from upper left, gentle fill, controlled highlights.
Camera: [near-orthographic front view for a compact icon / purposeful scene view].
Composition: [complete centered silhouette at 88% occupancy with 6% padding /
target aspect ratio, focal hierarchy, text-safe area and required cover crops].
Background: [true transparent alpha, including holes, with no glow or shadow
outside the physical object / intentional opaque scene background].
Text: [none, or exact approved game-specific text with readability requirements].
Keep: [canonical symbol meaning, identity, proportions, specific gameplay cues].
Avoid: flat vector appearance, stock clip art, excessive detail, harsh glare,
unrequested props, watermark, fake transparency and clipped silhouettes.
```

Review the generated image against the brief before integrating it. If a symbol is unclear, a crop fails or a background glow remains, correct the image and repeat the actual-size check; do not substitute a flat placeholder or claim the asset complete from a source preview alone.