Ray Mascot — Style Variants
The same Ray mascot rendered through 15 different visual languages. Two purposes:
- Visual literacy. Same character, different style — what changes? Look at the deltas to see what each design movement actually does to a form.
- Brand asset library. Pull from these for newsletter headers, blog illustration, social posts, sub-property thumbnails, anywhere a styled Ray fits the surface.
Source mascot: vibrant pop-art / Murakami-influenced bot blob (red / yellow / pink / blue / black). Each variant preserves the silhouette (rounded head, antenna ball, big eyes, blob limbs) and re-skins it in the target style.
Generated 2026-04-23 via xAI Grok image API (grok-imagine-image). All variants single-shot, no retries.
Variants
| Style | Image | Glossary | What it teaches |
|---|---|---|---|
| Swiss style (International Typographic) |  | [Swiss style](/vault/06-reference/concepts/design-vocabulary-glossary#Swiss style International Typographic Style/) | Grid as armature; restraint as expression. Helvetica + red + black + math. |
| Brutalism (web) |  | [Brutalism](/vault/06-reference/concepts/design-vocabulary-glossary#Brutalism web/) | Anti-design as design. What “no styling” looks like when chosen on purpose. |
| Neumorphism |  | Neumorphism | Dual-shadow embossing. Beautiful in stills, contrast-broken in practice. |
| Glassmorphism |  | Glassmorphism | Frosted-glass translucency. The visionOS / Big Sur surface treatment. |
| Claymorphism |  | Claymorphism | Pinch-able pastel 3D. Friendly and consumer-y; the kid-app default. |
| Skeuomorphism |  | Skeuomorphism | Mimic real materials. Brushed aluminum, stitched leather, glass eyes. |
| Flat design |  | [Flat design](/vault/06-reference/concepts/design-vocabulary-glossary#Flat design/) | Strip ornament. Solid blocks, no shadows, geometric silhouettes. |
| Material Design |  | [Material Design](/vault/06-reference/concepts/design-vocabulary-glossary#Material Design/) | Physical-metaphor cards with elevation. Google’s design grammar. |
| Modern minimalism |  | [Modern minimalism](/vault/06-reference/concepts/design-vocabulary-glossary#Modern minimalism/) | Off-white + warm gray + one accent. The Stripe / Linear / Vercel look. |
| Apple-style premium |  | [Apple premium](/vault/06-reference/concepts/design-vocabulary-glossary#Apple-style premium product/) | Hero-product photography on black. Premium positioning via negative space. |
| Bauhaus |  | Bauhaus | Reduce form to circles, squares, triangles in red/yellow/blue. |
| Memphis design |  | [Memphis](/vault/06-reference/concepts/design-vocabulary-glossary#Memphis design/) | 1980s postmodern chaos. Squiggles, confetti, clashing pinks/teals. |
| Cyberpunk / glitch |  | [Cyberpunk glitch](/vault/06-reference/concepts/design-vocabulary-glossary#Cyberpunk glitch/) | Neon + RGB shift + scanlines. Datamosh as decoration. |
| Hand-drawn / notebook |  | [Notebook sketch](/vault/06-reference/concepts/design-vocabulary-glossary#Hand-drawn notebook/) | Wobbled contours, marker washes, cream paper. Concept-sketch warmth. |
| Editorial engraving |  | [Editorial engraving](/vault/06-reference/concepts/design-vocabulary-glossary#Editorial engraving/) | Hedcut crosshatch. WSJ portraits + 1890s Atlantic illustration. |
How to use
- Learning a term: open this README beside the glossary. Read the definition, then look at Ray. The image fixes the abstraction.
- Picking a style for a surface: browse the table, find the energy that fits, copy the slug into prompts or briefs (“render it in
claymorphismstyle”). - Pulling assets: PNGs are at
/Users/ray/rdco-vault/06-reference/design-mood-board/ray-mascot-variants/<slug>.png. Use directly or as illustration reference.
Re-generation
To re-generate a variant or add a new style, the prompts are in /tmp/gen-mascots.sh (regenerate the script if needed) — pull the xAI key with XAI_KEY=$(op read "op://Ray Agent/xAI Grok API/api_key") and POST to https://api.x.ai/v1/images/generations with {"model":"grok-imagine-image","prompt":"...","n":1}. ~$0.20 per image.