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

# Sing Sing · Design System

> Warm, graphic restraint with a cinematic edge

**Theme:** dark · **Industry:** design · **Source:** https://www.sing-sing.co/ · **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._

Sing Sing’s homepage pairs a terracotta canvas with a large, animated-looking stripe motif and concise studio storytelling. Oversized wordmarks, restrained typography, and vivid project imagery give the page the feel of an art-directed studio portfolio.

## North star

Let a warm, uninterrupted canvas and one strong graphic gesture frame spacious, art-directed imagery and concise studio content.

## Overview

The visual identity is built around a single warm terracotta canvas, #b05b41, which fills the page rather than dividing it into conventional cards or bands. A fine horizontal stripe field creates a dense, dark-to-orange gradient gesture near the top; its brown and vivid orange tones are graphic accents, not a replacement for the page’s dominant background. Near-black #171717 carries the wordmark, navigation, and reading text. Typography contrasts a clean, contemporary sans for display and navigation with a more literary serif for studio prose. The layout uses broad open areas and deliberately unusual placement: the wordmark repeats across the width, while a large project image and compact introduction sit apart from one another. Project photography is vivid and art-directed, adding luminous orange and red against the quiet flat canvas. Spacing feels generous and the overall composition favors visual rhythm over conventional boxed content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Terracotta | `#b05b41` | `--color-studio-terracotta` | brand | Dominant page canvas, continuing behind the stripe motif, wordmark, introduction, and footer. |
| Soft Ink | `#171717` | `--color-soft-ink` | neutral | Primary wordmark, navigation, links, and text against the terracotta canvas. |
| Roasted Umber | `#4d2d22` | `--color-roasted-umber` | accent | Dark endpoint in the top horizontal stripe gradient; not a general text or surface color. |
| Signal Orange | `#eb5100` | `--color-signal-orange` | accent | Bright endpoint in the stripe gradient and a vivid graphic accent. |

### Semantic aliases

`--color-canvas` → `#b05b41` (Studio Terracotta) · `--color-text` → `#171717` (Soft Ink) · `--color-accent` → `#b05b41` (Studio Terracotta) · `--color-accent-2` → `#eb5100` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#b05b41` | 3.77:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(77, 45, 34) 41.9221%, rgb(235, 81, 0) 100%)`
- `linear-gradient(90deg, rgb(77, 45, 34) 41.9221%, rgb(235, 81, 0) 99.9999%)`
- `linear-gradient(90deg, rgb(77, 45, 34) 41.9199%, rgb(235, 81, 0) 99.9977%)`
- `linear-gradient(90deg, rgb(77, 45, 34) 41.8365%, rgb(235, 81, 0) 99.9144%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| untitledsans | `--font-display` | webfont | 400 | Display wordmark, navigation, and link text. | DM Sans |
| signifier | `--font-body` | webfont | 400 | Serif studio introduction and supporting prose. | Newsreader |

- **untitledsans:** Regular weight; display and navigation are tightly tracked, with mixed-case labels.
- **signifier:** Regular serif used sparingly for literary contrast in body copy.

### Type scale — Minor Third (ratio ≈ 1.205, base 19.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 23.5px | 400 | 1 | -0.025em | — | untitledsans | Large Sing Sing wordmark in the lower introductory area. |
| body | 19.5px | 400 | 1.2 | 0 | — | signifier | Serif studio description and compact supporting text. |
| nav | 23.5px | 400 | 1 | -0.025em | — | untitledsans | Index navigation label at the upper-right edge. |
| link | 22.5px | 400 | 1.22 | -0.02em | — | untitledsans | More link beneath the studio introduction. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 7, 35 px.
- Section rhythm 59px · element gap — · card padding — · max content width 1370px.

The page reads as one broad, single-column canvas rather than a card grid. A stripe graphic spans nearly the full content width near the top, with the Index link aligned to the upper right. Below, the wordmark repeats across the page width; project imagery sits to the left and a compact text block is positioned separately to the right. The measured maximum width is 1370px. Comfortable spacing and a measured section gap of 59px support the deliberately open composition.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The composition is predominantly flat: the terracotta canvas runs continuously behind text and media, with no measured shadows or card surfaces. Avoid adding depth through generic UI treatments. Separate elements through position, whitespace, image composition, and the thin horizontal stripe pattern rather than borders or rounded containers.

## Imagery

The homepage combines a graphic stripe field with vivid, art-directed project media. A featured image shows a sculptural, illuminated circular form and geometric architecture in saturated orange and red. Imagery is presented as a prominent rectangular composition rather than enclosed in a bordered card; the stripe gradient acts as graphic artwork. The broader studio portfolio includes film and photography, so preserve a cinematic, image-led sensibility.

## Components

### Index navigation

A small, near-black “Index” label sits at the upper-right edge of the canvas; keep it visually quiet beside the large graphic.

### Stripe graphic

A wide field of closely repeated horizontal bands transitions from #4d2d22 toward #eb5100 over the terracotta canvas.

### Wordmark

Large near-black “Sing” lettering is repeated across the width below the stripe field, using the clean sans display face.

### Featured project image

A vivid rectangular project image provides a strong visual anchor, with saturated orange light and sculptural forms.

### Studio introduction

A restrained serif text block sits separately from the image, followed by a near-black sans “More” link.

### Footer note

Small, understated studio/contact information rests on the same flat terracotta canvas.

### Measured component styles

- **Link** (“More”): transparent background · text #171717 · radius 0px · padding 0px · 400 22.5307px untitledsans
- **Navigation item** (“Index”): transparent background · text #171717 · radius 0px · padding 0px · 400 23.5102px untitledsans

## Do

- Use #b05b41 as the continuous page canvas.
- Keep the stripe gradient a prominent, graphic gesture.
- Set navigation and display lettering in the clean sans.
- Use the serif sparingly for studio prose.
- Pair bold project imagery with quiet surrounding space.
- Keep links and wordmarks near-black and unboxed.

## Don't

- Do not introduce unmeasured colors or generic neutral surfaces.
- Do not turn the page into a conventional card grid.
- Do not add shadows, borders, or rounded card treatments.
- Do not let bright orange replace the terracotta canvas.
- Do not crowd the imagery with dense supporting copy.
- Do not use a single typeface for every content role.

## Agent prompt

Build a new creative-studio page in Sing Sing’s visual language. Use Studio Terracotta (#b05b41) as a continuous canvas and Soft Ink (#171717) for navigation, display text, and links. Create one confident horizontal stripe graphic transitioning from Roasted Umber (#4d2d22) to Signal Orange (#eb5100); treat these as graphic accents, not broad UI surfaces. Use a clean sans similar to DM Sans for wordmarks and navigation, paired with a restrained literary serif similar to Newsreader for prose. Favor broad open composition, deliberate off-center placement, and large art-directed project imagery. Keep components flat and unboxed, with no shadows or rounded cards. Make the content feel like a studio portfolio: concise introduction, a clear project image, and quiet contact or navigation details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single continuous terracotta canvas; full-width stripe artwork above repeated wordmark, project image, and offset studio text. | Index navigation, Featured project link, Studio introduction | Horizontal stripe gradient, Repeated oversized wordmark, Flat warm canvas, Editorial image and text |

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