# Littletroop · Design system migration spec

> Source: https://littletroop.com  ·  Curated by OpenDesign  ·  en

> Excellent example of a studio portfolio that uses experimental 3D WebGL elements as the primary storytelling device.

## 1. Identity DNA

Little Troop operates as a playful digital toybox, where immersive 3D studio work takes center stage. The system is built to showcase craft, culture, and imagination through a stark canvas that lets interactive elements breathe.

**One-liner:** Experimental design studio portfolio featuring playful 3D interactive spheres and bold typography.
**Keywords:** craft · culture · imagination · playful · 3D
**Analogy:** A playful digital toybox showcasing immersive 3D studio work.

## 2. Color

The palette is a minimalist study in contrast, using a pure white canvas as a neutral stage. This allows the vibrant, interactive 3D hero elements to serve as the primary visual focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Stark minimalist canvas that lets the colorful, interactive 3D hero elements serve as the primary visual focus.

The principle is strict: the background remains passive, a clean void that does not compete with the colorful focal points.

## 3. Typography

Typography speaks in a confident, slightly eccentric voice, relying on a thin grotesque-sans for both display and body text. Headlines are bold, tightly tracked statements, while navigation is distilled to simple, text-only links.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 76px | 0.79 | 250 | -5px | Hero display text |

## 4. Spacing

Rhythm is established not through rigid columns, but a fluid grid that supports the floating, non-grid-based arrangement of elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 40 / 60 / 89 px
- **Rhythm:** Fluid grid with specific padding for floating UI elements.

## 5. Surfaces

Depth is created through layering, not decoration. Surfaces are flat, with only thin 1px solid lines serving as subtle dividers where needed.

- **Radius:** sm 4px · md 8px · lg 50px · pill 999px
- **Borders:** Thin 1px solid lines for subtle horizontal dividers.

## 6. Layout

The layout is a full-bleed, non-grid skeleton, with navigation text anchored to the corners of the viewport. The composition always resolves to a single, central 3D focal point that dominates the screen.

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

**Skeleton:** Full-bleed layout with floating corner navigation and central 3D focal point.

## 7. Motion & Interaction

Motion is inherent to the experience, driven by interactive 3D rotation on hero elements and seamless scroll transitions. All changes are applied globally to maintain a fluid, continuous state.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Interactive 3D rotation on hero elements
  - Seamless scroll transitions between full-bleed project showcases

- **Hover:** Standard pointer cursor with text-based feedback.
- **Click:** Direct navigation via underlined text links.
- **Transition:** All transitions applied globally for smooth state changes.
- **Keyboard:** Standard tab-based navigation.

## 8. Voice & Don'ts

The editorial voice is confident and direct, using bold headlines and minimalist text links like 'View Project' to navigate. Descriptive copy is left-aligned and presented inline, avoiding conventional structures.

- **Tone:** Confident, creative, and slightly eccentric.
- **Headline style:** Bold, tightly tracked sans-serif statements.
- **CTA style:** Minimalist text-only links like 'View Project'.
- **Avoid:** Standard grid layouts / Heavy borders or shadows / Conventional card structures

### Don'ts
- ❌ Don't use dense grids — screenshot shows full-bleed, single-focus layouts.
- ❌ Don't use drop shadows or heavy borders — screenshot shows completely flat typography.
- ❌ Don't use muted background colors — screenshot shows a pure white (#ffffff) canvas.
- ❌ Don't center-align body text — screenshot shows left-aligned descriptive copy.
- ❌ Don't use standard bullet points — screenshot shows inline, comma-separated tags.
- ❌ Don't use decorative icons for navigation — screenshot shows simple text links.

This system deliberately rejects dense grids, drop shadows, heavy borders, and standard card containers to preserve its experimental character.

## System Prompt (paste into AI tool)

```
Little Troop is a playful, experimental design studio portfolio characterized by massive, interactive 3D hero elements that dominate a stark white (#ffffff) canvas. The typography relies on a thin grotesque-sans (Arial Narrow) for both display and body text, using tight tracking and bold weights for navigation. The layout is entirely fluid and non-grid-based, with floating text anchored to the corners of the viewport. Critical donts: never apply drop shadows or heavy borders, never use a grid for layout, and never hide the primary interactive 3D elements behind standard UI containers.
```