---
name: Littletroop
description: "Excellent example of a studio portfolio that uses experimental 3D WebGL elements as the primary storytelling device."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 76px
    lineHeight: 0.79
    fontWeight: 250
    letterSpacing: "-5px"

rounded:
  sm: 4px
  md: 8px
  lg: 50px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 30px
  3xl: 40px

---

## Overview

Experimental design studio portfolio featuring playful 3D interactive spheres and bold typography.

*A playful digital toybox showcasing immersive 3D studio work.*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Fluid grid with specific padding for floating UI elements.

## Elevation & Depth

- Borders: Thin 1px solid lines for subtle horizontal dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 50px
- `pill`: 999px

## Components

- **button:** Text-only navigation links with bold weight and no background.
- **card:** Flat, large-scale project imagery without traditional card containers.
- **hero:** Massive, interactive 3D sphere or graphic that dominates the viewport.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```