---
title: "Little Troop design system"
variant: extended
source: https://littletroop.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/littletroop-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Little Troop · Design System

> A quiet canvas for bold, image-led work.

**Theme:** light · **Industry:** design · **Source:** https://littletroop.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Little Troop presents a sprawling design portfolio on a clean white canvas, with restrained navigation and expressive project imagery. Compact Arial Narrow typography and generous open space keep attention on the work rather than interface decoration.

## North star

Keep the interface monochrome and typographically compact so the portfolio imagery—not the chrome—commands attention.

## Overview

The visual strategy is deliberately restrained: white (#ffffff) fills the page, while black (#000000) handles the primary text and fine structural rules. The measured palette is only two colours; saturated hues and photographic tones belong to project artwork, not the site chrome. Arial Narrow supplies compact, legible navigation and captions, letting the irregular project imagery carry the personality. The opening view places a large, circular video-like media feature between sparse top navigation and small descriptive text near the lower edges. Further down, a dense five-column project index gives way to widely spaced, individually framed portfolio images. The layout alternates between compact information and expansive media, using open white space as a consistent separator. Interfaces stay flat and understated: no measured shadows, decorative gradients, or coloured CTA surfaces. Reproduce the contrast between minimal controls and richly varied, full-bleed-feeling portfolio visuals without borrowing colours from the artwork as interface tokens.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and open space surrounding navigation, text, and project imagery. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary text and structural rules; navigation and headings read crisply against white. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Arial Narrow | `--font-body` | webfont | 400, 700 | Site-wide type for body copy, navigation, links, and buttons. | Roboto Condensed |

- **Arial Narrow:** Compact narrow sans; measured weights 400 and 700. Navigation and button text are bold, with no measured tracking or uppercase transform.

### Type scale — Major Third (ratio ≈ 1.25, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 14px | 400 | 1.14 | 0 | — | Arial Narrow | Studio introduction and supporting project descriptions. |
| button | 14px | 700 | 0.86 | 0 | — | Arial Narrow | Compact bold labels for small interface actions. |
| nav | 14px | 700 | 0.86 | 0 | — | Arial Narrow | Top-level navigation labels such as Work and News. |
| link | 14px | 700 | 1.14 | 0 | — | Arial Narrow | Project titles and linked portfolio captions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 8, 12, 20, 100 px.
- Section rhythm 89px · element gap 20px · card padding — · max content width —.

The opening section spans the viewport, with navigation distributed across the top and a dominant circular media element centered below it. Small studio and current-work notes sit near opposite lower corners. The project index uses a five-column grid, then transitions into individually presented portfolio images. Keep alignments crisp but allow artwork to vary in scale and orientation. The measured page has comfortable density and generous section separation; no maximum content width was measured.

## Shape & elevation

- Radius: xs `50px`
- No box shadows measured: the page is flat.

The interface is flat: no measured shadows or gradients define its hierarchy. Black hairlines and typography provide structure against the white canvas, while project artwork supplies visual depth internally. Keep layering limited to media itself; avoid adding cards, drop shadows, or decorative surface effects.

## Imagery

Portfolio media is the page’s main colour source: project thumbnails include branding, packaging, campaigns, and product work. The opening uses a large circular, video-like image with a distorted perspective. Later work appears as large, often angled compositions against white, without interface frames. Treat imagery as individual artwork and avoid sampling its colours for site-wide UI.

## Components

### Top navigation

Four widely distributed text links—Work, News, Info, Contact—sit across the top on white, using compact bold Arial Narrow styling.

### Opening media

A large circular, immersive media feature anchors the first viewport, surrounded by generous white space rather than a coloured container.

### Studio introduction

A short studio description sits near the lower-left edge of the opening area in small, compact text.

### Current work note

A small right-aligned current-project label and description balance the studio introduction at the lower-right.

### Project index

A dense five-column gallery pairs project thumbnails with short linked captions; artwork supplies colour while the surrounding interface stays monochrome.

### Project spotlight

Large portfolio images are presented individually with substantial white space, varying in framing and orientation.

### Measured component styles

- **Primary button** (“News”): transparent background · text #ffffff · radius 0px · padding 0px · 700 14px Arial Narrow
- **Link** (“Branding and campaign for MoMA Family Fe”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Arial Narrow
- **Navigation item** (“Work”): transparent background · text #ffffff · radius 0px · padding 0px · 700 14px Arial Narrow

## Do

- Use white as the uninterrupted page canvas.
- Use black for core text and structural hairlines.
- Set interface text in a narrow sans-serif style.
- Keep navigation small, bold, and plainly presented.
- Let portfolio artwork provide nearly all interface-adjacent colour.
- Alternate dense project browsing with spacious media presentation.

## Don't

- Do not promote illustration colours into the site palette.
- Do not add gradients or shadows to create hierarchy.
- Do not enclose every project in a decorative card.
- Do not let interface controls compete with featured imagery.
- Do not impose uniform framing on expressive project artwork.
- Do not add oversized display typography absent from the measured interface.

## Agent prompt

Build a new portfolio page in the Little Troop visual style. Use Gallery White (#ffffff) as the full-page canvas and Studio Ink (#000000) for primary text and fine structural rules; keep the site chrome monochrome. Use a narrow sans-serif such as Roboto Condensed as a free substitute for Arial Narrow, with compact regular body text and bold navigation or action labels. Place simple text navigation across the top, then give the featured work ample space and visual prominence. For browsing, use a compact multi-column project index with brief captions, followed by larger, individually framed work. Allow images to vary in colour, scale, and orientation; treat their hues as artwork rather than UI tokens. Keep surfaces flat, avoid shadows and gradients, and use generous whitespace to separate content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Viewport-wide opening with distributed top navigation, centered circular media, edge-aligned notes, and a five-column project index below. | Top-level text navigation, Project index filtering, Linked project thumbnails | White canvas, Black text and hairlines, Compact condensed typography, Large expressive media |

## Source CSS custom properties (selected)

```css
--border-radius: 30px;
--clr-accent: #8bc3bd;
--font-arial-narrow: "Arial Narrow",sans-serif;
--font-times-now: "Times Now",sans-serif;
--font-helvetica: "HelveticaNeueLT",sans-serif;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/littletroop-com