CURATED · OPEN · FREE

Littletroop

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

AgencyPlayful3DExperimentalExpressive

Littletroop screenshot

↓ Download design system (60 MB)Open in OpenDesign

Visit: https://littletroop.com

📦 Browse pack contents →

01

Identity DNA

craftcultureimaginationplayful3D

A playful digital toybox showcasing immersive 3D studio work.

02

Color

#000000Ink

#ffffffBG

rgba(0,0,0,0.1)Line

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

03

Typography

grotesque-sans

display76px · 250

04

Spacing

4px

8px

16px

20px

24px

30px

40px

60px

89px

Fluid grid with specific padding for floating UI elements.

05

Surfaces

sm · 4px

md · 8px

lg · 50px

pill · 999px

Thin 1px solid lines for subtle horizontal dividers.

06

Layout

1920container

12columns

20pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Interactive 3D rotation on hero elements · Seamless scroll transitions between full-bleed project showcases

Standard pointer cursor with text-based feedback. · Direct navigation via underlined text links.

08

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.

09

Voice & Don'ts

Tone Confident, creative, and slightly eccentric.
Headlines Bold, tightly tracked sans-serif statements.
CTAs Minimalist text-only links like 'View Project'.

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.
Avoid: Standard grid layouts
Avoid: Heavy borders or shadows
Avoid: Conventional card structures

10

Inside the pack — real screenshots

Littletroop — 桌面首屏（hero） — 桌面首屏（hero）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Littletroop — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko