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

# TinyFaces · Design System

> Soft editorial design for collectible 3D characters

**Theme:** light · **Industry:** crypto · **Source:** https://nft.tinyfac.es/ · **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._

TinyFaces pairs an understated editorial layout with a vivid parade of generative 3D characters. Warm off-white space and expressive serif headlines keep the NFT collection approachable while navy, sage, and pastel blocks organize the story.

## North star

Let the generative characters supply the color and personality; keep the interface calm, editorial, and spacious.

## Overview

The page uses a warm, nearly white canvas (#f4f4f2) as a quiet frame for colorful character art, with dark charcoal (#212529) carrying navigation, body copy, and controls. Large Migra serif headlines create an editorial voice; Inter handles compact uppercase labels, buttons, and readable explanatory text. The opening is image-led: a continuous, tightly cropped parade of rounded character cards and a repeating sold-out ticker establish the collection before the text narrative begins. Introductory content uses a two-column arrangement, followed by pastel feature panels in blue, pink, and sage. A deep navy gallery band sharply separates the carousel from the FAQ, while hairline rules keep accordion rows light. Broad section spacing gives each story beat room, and the final beige community panel returns to characterful, oversized typography. Keep gradients and ornamental UI out of the system; the characters provide the visual richness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#212529` | `--color-soft-ink` | neutral | Primary text, navigation, dark pill buttons, outlined social CTA, and the default icon color. |
| Gallery White | `#f4f4f2` | `--color-gallery-white` | surface | Main page canvas, text-section background, and the contrasting label color on dark buttons. |
| Gallery Navy | `#142855` | `--color-gallery-navy` | brand | Full-width character carousel band and its contrasting light heading and controls. |
| Quiet Rule | `#d4d5d4` | `--color-quiet-rule` | neutral | Thin separators around FAQ rows and understated card outlines. |
| Warm Sand | `#c7b19c` | `--color-warm-sand` | accent | Warm beige surface tone in the community artwork; secondary, not the general page canvas. |
| Sage Field | `#8d9876` | `--color-sage-field` | accent | Large environmental-impact feature panel behind character imagery. |
| Powder Blue | `#a0b1cd` | `--color-powder-blue` | accent | Background of the unique-character feature card; keep as a panel color rather than a global UI accent. |
| Petal Blush | `#e5cce0` | `--color-petal-blush` | accent | Pastel feature-card background visible in the character-story panels. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Small measured highlight use, including light text or button details; not the main page canvas. |

### Semantic aliases

`--color-canvas` → `#f4f4f2` (Gallery White) · `--color-surface` → `#142855` (Gallery Navy) · `--color-surface-2` → `#c7b19c` (Warm Sand) · `--color-surface-3` → `#8d9876` (Sage Field) · `--color-surface-4` → `#a0b1cd` (Powder Blue) · `--color-text` → `#212529` (Soft Ink) · `--color-border` → `#d4d5d4` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#212529` | `#f4f4f2` | 14.01:1 | AAA |
| `#212529` | `#142855` | 1.08:1 | fail |
| `#212529` | `#c7b19c` | 7.49:1 | AAA |
| `#212529` | `#8d9876` | 5.06:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 300, 500, 400 | Navigation, body copy, uppercase labels, FAQ text, buttons, and links. | Inter |
| Migra | `--font-display` | webfont | 500 | Display headlines and large editorial titles. | Cormorant Garamond |

- **Inter:** Use restrained weights; compact labels are uppercase with noticeably expanded tracking.
- **Migra:** Medium-weight expressive serif; mix upright and italic words in prominent headlines.

### Type scale — Custom (ratio ≈ 1.679, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 500 | 1.1 | 0 | — | Migra | Oversized editorial headline treatment in the community finale. |
| h1 | 64px | 500 | 1.1 | 0 | — | Migra | Primary editorial headline introducing the collection. |
| h2 | 50px | 500 | 1 | 0 | — | Migra | Major section headings, including FAQ and community titles. |
| h3 | 24px | 300 | 1.5 | 0 | — | Inter | Feature-card titles and smaller section-level headlines. |
| h4 | 20px | 300 | 1.5 | 0 | — | Inter | Secondary explanatory headings and subheads. |
| body | 14px | 500 | 1.5 | 0.079em | uppercase | Inter | Compact, tracked uppercase labels and repeating collection ticker text. |
| button | 16px | 500 | 2.88 | 0 | — | Inter | Wallet, purchase, and community action labels. |
| link | 16px | 300 | 1.5 | 0 | — | Inter | Navigation links and lighter-weight inline actions. |
| eyebrow | 14px | 500 | 1.5 | 0.079em | uppercase | Inter | Short uppercase labels that introduce content or collection status. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 20, 32, 48, 64 px.
- Section rhythm 32px · element gap 16px · card padding 16px · max content width 1230px.

Use a centered content frame with a measured maximum width of 1230px, while letting the opening character parade and major background bands span broadly. The opening navigation sits above a horizontal, cropped card strip. Follow it with a two-column editorial intro, pastel feature cards, and a full-width navy gallery. Return to a two-column FAQ, then finish with a broad community panel. Comfortable spacing and a 32px section-gap measure keep the page airy rather than dense.

## Shape & elevation

- Radius: button `9999px` · card `10px` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is mostly flat: no measured shadows or gradients define the design. Separation comes from full-width navy and pastel background fields, generous whitespace, rounded character-image cards, and fine gray FAQ rules. Buttons are capsule-shaped; FAQ rows remain open and minimally framed rather than elevated card surfaces.

## Imagery

The defining imagery is softly lit, generative 3D character art with distinctive outfits, accessories, and varied skin tones. Show figures front-on in rounded rectangular portrait cards, often cropped around the torso; arrange them in a repeating horizontal parade or carousel. Feature panels can use a single character against a flat pastel field, with the environmental story using a larger figure crop. The captured page also contains a small video element, but the visual language is character-led rather than video-led.

## Components

### Top navigation

Place social icons at the left, a compact centered wordmark, and navigation links plus dark capsule wallet and Buy actions at the right.

### Character parade

Run rounded portrait cards in horizontal rows beneath the navigation, with varied character backgrounds and a repeating sold-out status ticker below.

### Editorial introduction

Pair a large Migra serif headline with short Inter explanatory copy in a two-column layout on the off-white canvas.

### Feature panels

Use blue, blush, and sage panels for collection attributes, rarity, and environmental messaging; combine short text with prominently cropped character imagery.

### Gallery carousel

Set a light serif heading and circular outline navigation controls on a #142855 band above a row of portrait cards.

### FAQ accordion

Use a large serif title beside simple question rows, fine #d4d5d4 separators, and plus-shaped expand controls.

### Community CTA

Finish with a sand-toned character panel, oversized serif community heading, concise copy, and compact pill-shaped social actions.

### Measured component styles

- **Primary button** (“Buy”): background #212529 · text #f4f4f2 · radius 23px · padding 0px 20px · 500 16px Inter
- **Secondary button** (“Follow on Twitter”): transparent background · text #212529 · border 1px solid #212529 · radius 23px · padding 0px 20px · 500 16px Inter
- **Link** (“Roadmap”): transparent background · text #212529 · radius 0px · padding 0px · 300 16px Inter
- **Card** (“What’s an NFT?”): transparent background · text #212529 · border 1px solid #d4d5d4 · radius 0px · padding 32px 0px · 500 16px Inter

## Do

- Use #f4f4f2 as the dominant canvas.
- Reserve Migra-style serif typography for display headlines.
- Let Inter handle navigation, body copy, and controls.
- Make character artwork the main source of color and personality.
- Use #142855 as a deliberate full-width gallery band.
- Keep FAQ dividers fine and visually quiet.

## Don't

- Do not add gradients or strong drop shadows.
- Do not turn every content block into a bordered card.
- Do not use saturated UI colors to compete with character artwork.
- Do not replace the editorial serif headlines with generic sans-serif display type.
- Do not crowd the sections; preserve generous breathing room.
- Do not use the pastel feature colors as an unstructured page-wide background.

## Agent prompt

Build a new page in the TinyFaces visual style: an editorial, airy canvas using Gallery White (#f4f4f2), Soft Ink (#212529), and carefully placed color panels. Use an expressive Migra-like serif for large headlines and Inter for navigation, explanatory copy, uppercase labels, and pill buttons. Let distinctive, softly lit 3D character portraits dominate the imagery, presented in rounded gallery cards and selected pastel feature panels. Use Gallery Navy (#142855) for a strong full-width showcase section, with Powder Blue (#a0b1cd), Petal Blush (#e5cce0), and Sage Field (#8d9876) reserved for story cards. Keep layouts spacious and editorial, with clear two-column text sections, quiet divider rules, and a simple FAQ. Avoid gradients, heavy shadows, dense UI, and extra decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top navigation above a wide, multi-row strip of character portraits and a repeating status ticker. | Social links, Wallet connection, Purchase CTA, Scrolling collection status | Centered wordmark, Rounded portrait cards, Dark pill buttons, Ticker text |
| 2 | feature-split | Two-column editorial block with a large serif headline opposite a concise descriptive paragraph. | Brand introduction, Editorial scan path | Large serif headline, Light sans-serif copy, Off-white background |
| 3 | feature-grid | Two pastel feature cards followed by a wide sage panel with character artwork. | Collection attributes, Rarity explanation, Environmental story | Pastel backgrounds, Serif card titles, Character image crops, Asymmetric panel sizing |
| 4 | gallery | Short heading row and carousel controls within a full-width navy band. | Browse featured characters, Carousel navigation | Light serif title, Circular outline arrows, Dark navy surface |
| 5 | gallery | Six-column image row inside the navy gallery section. | Horizontal character browsing | Portrait image cards, Consistent rounded corners, Navy gutters |
| 6 | faq | Large serif heading in the left column and a vertical stack of questions in the right. | Expandable answers, Question scanning | Plus expand controls, Fine gray row rules, Minimal off-white surface |
| 7 | cta | Wide sand-toned closing panel with oversized headline and a character image to the side. | Join Discord, Follow on Twitter | Oversized serif headline, Compact pill actions, Large character crop |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--theme-ui-colors-text: #212529;
--theme-ui-colors-textDarkGrey: #808080;
--theme-ui-colors-textGrey: #C9C9C9;
--theme-ui-colors-textInversedSoft: #F4DDBE;
--theme-ui-colors-textInversed: #FFFFFF;
--theme-ui-colors-backgroundBright: #FFFFFF;
--theme-ui-colors-background: #F4F4F2;
--theme-ui-colors-backgroundInversed: #212529;
--theme-ui-colors-backgroundDeepGrey: #BEB0BA;
--theme-ui-colors-backgroundBeige: #E9DFD5;
--theme-ui-colors-backgroundBlue: #CADEEB;
--theme-ui-colors-modal: RGBA(33,37,41,0.63);
--theme-ui-colors-backgroundDark: #142855;
--theme-ui-colors-primary: #ED4A29;
--theme-ui-colors-backgroundSunset: #EAD7B0;
--theme-ui-colors-backgroundPink: #E9D5D5;
--theme-ui-colors-secondary: #212529;
--theme-ui-colors-disabled: #CFCFCD;
--theme-ui-colors-muted: #f6f6f6;
--theme-ui-colors-border: #D4D5D4;
```

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