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

# Tableland · Design System

> Pastel landscapes meet a dark, developer-first core

**Theme:** dark · **Industry:** devtools · **Source:** https://tableland.xyz/ · **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._

Tableland pairs a soft, illustrated pastel hero with a deep green-black interface built for developers. Poppins typography, compact code examples, feature summaries, testimonials, and community-built demos make the technical product approachable.

## North star

Let a spacious, pastel illustrated hero open into a disciplined dark developer interface, keeping code and content more prominent than decoration.

## Overview

The page contrasts a light, illustrated hero with a deep green-black canvas that carries through the feature, community, example, and footer sections. The measured hero band uses #e4cbf2; its pastel landscape and warm cliff artwork add visual character, while the screenshots show that illustration colours are artwork rather than the core interface palette. Poppins is the main voice: rounded, approachable sans-serif headings and light-weight body copy keep technical content from feeling dense. The opening pairs a prominent headline with a dark terminal panel, supporting paragraph, and compact CTA. Below, centered section headings introduce restrained grids of features, testimonials, and project examples. Cards use dark green surfaces and muted borders instead of heavy shadows. Spacing is generous between major blocks, with tighter, orderly groupings inside card grids. Teal links and muted text provide quiet contrast; coral and green accents appear sparingly.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Evergreen | `#101e1e` | `--color-deep-evergreen` | brand | Main page canvas and the dark ground for feature, community, examples, and footer sections. |
| Harbor Teal | `#75b6b5` | `--color-harbor-teal` | accent | Teal navigation and link emphasis against the dark canvas. |
| Pine Surface | `#162929` | `--color-pine-surface` | surface | Dark card and button surface, plus borders and the separate CTA band. |
| Cloud Text | `#e6e8e8` | `--color-cloud-text` | neutral | Primary light text and headings on dark sections. |
| Frost Light | `#e0e2e2` | `--color-frost-light` | neutral | Inverse light surface and text detail; subordinate to the main dark interface. |
| Lilac Sky | `#e4cbf2` | `--color-lilac-sky` | brand | Pastel hero section band behind the headline and landscape artwork. |
| Slate Moss | `#3b4949` | `--color-slate-moss` | surface | Raised testimonial card backgrounds within the dark community section. |
| Mist Sage | `#718b8b` | `--color-mist-sage` | semantic | Muted supporting copy, secondary headings, and subdued link text. |
| Canyon Coral | `#f4706b` | `--color-canyon-coral` | accent | Small accent text on the dark header CTA; also occurs in the hero illustration. |
| Soft Black | `#1a1a1a` | `--color-soft-black` | neutral | Header CTA background and dark text details, including elements in the light hero. |
| Signal Mint | `#0be291` | `--color-signal-mint` | accent | Sparing green accent in heading content; not a major section or surface colour. |

### Semantic aliases

`--color-canvas` → `#101e1e` (Deep Evergreen) · `--color-surface` → `#e4cbf2` (Lilac Sky) · `--color-surface-2` → `#162929` (Pine Surface) · `--color-surface-3` → `#3b4949` (Slate Moss) · `--color-surface-4` → `#e0e2e2` (Frost Light) · `--color-text` → `#e6e8e8` (Cloud Text) · `--color-text-muted` → `#718b8b` (Mist Sage) · `--color-text-subtle` → `#75b6b5` (Harbor Teal) · `--color-border` → `#162929` (Pine Surface) · `--color-accent` → `#75b6b5` (Harbor Teal) · `--color-accent-2` → `#f4706b` (Canyon Coral) · `--color-accent-3` → `#0be291` (Signal Mint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6e8e8` | `#101e1e` | 13.92:1 | AAA |
| `#e6e8e8` | `#e4cbf2` | 1.21:1 | fail |
| `#e6e8e8` | `#162929` | 12.34:1 | AAA |
| `#e6e8e8` | `#3b4949` | 7.64:1 | AAA |
| `#718b8b` | `#101e1e` | 4.7:1 | AA |
| `#718b8b` | `#e4cbf2` | 2.45:1 | fail |
| `#718b8b` | `#162929` | 4.17:1 | AA-large |
| `#718b8b` | `#3b4949` | 2.58:1 | fail |
| `#75b6b5` | `#101e1e` | 7.43:1 | AAA |
| `#75b6b5` | `#e4cbf2` | 1.55:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Poppins_51684b | `--font-body` | webfont | 300, 400, 700, 500 | Site-wide interface, navigation, headings, body copy, links, and buttons. | Poppins |
| monospace | `--font-mono` | system | 300 | Terminal commands and code-like content. | Roboto Mono |

- **__Poppins_51684b:** Rounded sans-serif; uses light body and navigation alongside regular headings. Keep text mostly in sentence case; uppercase is reserved for selected CTAs and eyebrow text.
- **monospace:** Light monospace treatment for compact code, visually contained in a dark terminal panel.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | 0 | — | __Poppins_51684b | Primary hero headline. |
| h2 | 30px | 400 | 1.2 | 0 | — | __Poppins_51684b | Major feature and section headings. |
| h3 | 24px | 400 | 1.33 | 0 | — | __Poppins_51684b | Feature titles and project card headings. |
| h4 | 22px | 300 | 1.45 | 0 | — | __Poppins_51684b | Supporting subheadings and smaller section introductions. |
| body | 14px | 300 | 1.43 | 0 | — | __Poppins_51684b | Explanatory copy, feature descriptions, and page text. |
| caption | 12px | 400 | 1.33 | 0 | — | __Poppins_51684b | Compact secondary metadata and small supporting labels. |
| button | 14px | 400 | 1.43 | 0 | — | __Poppins_51684b | CTA and action labels. |
| nav | 12px | 300 | 1.33 | 0 | — | __Poppins_51684b | Header navigation links. |
| link | 12px | 400 | 1.33 | 0 | — | __Poppins_51684b | Inline links and card actions. |
| code | 12px | 300 | 1.33 | 0 | — | monospace | Terminal commands and technical examples. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 32, 40, 80, 144 px.
- Section rhythm 128px · element gap 40px · card padding 24px · max content width 1280px.

The page uses a centered, spacious composition within a measured 1280px maximum width. The hero is left-aligned, with a narrow text-and-terminal column balanced by large landscape artwork. Subsequent dark sections alternate between a four-column feature layout, a centered testimonial grid, and a three-column project grid. Major sections have generous separation; card content remains compact and orderly. A distinct CTA band precedes a multi-column footer. Keep headings visually clear and avoid filling the broad areas of dark canvas with unnecessary content.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `50%` · xs `4px` · sm `8px` · md `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The visual language is mostly flat: large colour bands and subtle dark card surfaces establish hierarchy without measured shadows. Feature and example cards use dark green surfaces, while testimonials are more visibly lifted in slate green. Borders are sparse and dark, with occasional fine section dividers. Keep layering restrained and reserve stronger contrast for the terminal panel and CTA.

## Imagery

The hero uses a large, stylized landscape illustration: pastel sky and warm coral-purple rock formations frame the content rather than depict a literal product screenshot. Dark terminal content supplies the technical product cue. Lower sections rely on small icons, profile imagery, and community project cards, not large photography. Preserve the illustration’s pastel contrast and keep decorative artwork from overpowering text or code.

## Components

### Header navigation

Compact links sit across the hero’s upper edge; the dark Enter Studio control contrasts with the pastel background.

### Hero terminal

A broad, rounded dark panel contains small monospace command output beneath a left-aligned headline.

### Primary CTA

Dark green-black button with light uppercase label and arrow; a separate header CTA uses coral text on near-black.

### Feature grid

Small icon-led feature summaries arranged across a dark section, with muted copy and understated Learn more links.

### Testimonial cards

Community quotes sit in a multi-column grid of slate-green cards with profile details and light text.

### Example project cards

Community-built project examples appear in a three-column dark grid with compact descriptions, repository details, and View code actions.

### Footer

A dark multi-column link directory groups product, resources, developers, rigs, and network destinations.

### Measured component styles

- **Primary button** (“View code”): background #162929 · text #ffffff · radius 4px · padding 4px 8px · 400 12px __Poppins_51684b
- **Secondary button** (“Enter Studio”): background #1a1a1a · text #f4706b · radius 12px · padding 8px 24px · 400 14px __Poppins_51684b
- **Link** (“@juanbenet “The @textileio team is aweso”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px __Poppins_51684b
- **Card** (“@juanbenet “The @textileio team is aweso”): background #3b4949 · text #ffffff · radius 8px · padding 24px · 400 16px __Poppins_51684b
- **Navigation item** (“Application Data”): transparent background · text #75b6b5 · radius 0px · padding 0px · 300 12px __Poppins_51684b

## Do

- Use Deep Evergreen #101e1e as the main canvas for content sections.
- Keep the opening hero pastel and illustration-led.
- Use Poppins for interface text and a monospace face for code.
- Give major sections generous breathing room.
- Use teal for restrained links and navigation emphasis.
- Group technical content into clear, compact cards.
- Keep surface contrast subtle and shadows minimal.

## Don't

- Do not extend the pastel hero palette across every section.
- Do not use coral or mint as dominant interface colours.
- Do not add heavy shadows or glossy effects.
- Do not crowd the hero with multiple competing headlines.
- Do not make code look like ordinary body copy.
- Do not replace the illustrated landscape with generic stock photography.

## Agent prompt

Build a new Tableland-style developer page with a spacious, confident hierarchy. Use Deep Evergreen (#101e1e) for the main canvas and Pine Surface (#162929) for cards, borders, and dark controls. Reserve Lilac Sky (#e4cbf2) for a light illustrated opening or featured band; treat coral landscape colours as artwork, not the core UI palette. Set interface text in Poppins, with light-weight supporting copy, and use monospace for terminal examples. Use Harbor Teal (#75b6b5) for selective links and navigation, Mist Sage (#718b8b) for muted copy, and Cloud Text (#e6e8e8) for primary text on dark backgrounds. Build clear grids for features or examples, a compact terminal panel, understated card treatments, and generous spacing between sections. Keep shadows absent or barely perceptible and accents sparse.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pastel full-width band; left-aligned headline, terminal, copy, and CTA beside landscape artwork. | top navigation, terminal preview, primary CTA | pastel background, illustrated landscape, dark code panel, rounded button |
| 2 | feature-grid | Dark section with a left-aligned introduction and icon-led feature summaries arranged in columns. | feature discovery, Learn more links | dark canvas, compact icons, muted supporting text |
| 3 | testimonials | Centered heading above a wide grid of community quote cards on the dark canvas. | social proof, community link | slate-green cards, profile imagery, light quote text |
| 4 | product-grid | Centered heading and intro above a three-column grid of project cards, followed by a GitHub link. | browse examples, repository actions | dark project cards, compact metadata, View code links |
| 5 | cta | Full-width dark teal band with a single centered action. | conversion CTA | contrasting surface band, centered rounded button |
| 6 | footer | Dark footer with brand mark and social icons alongside grouped link columns. | grouped navigation, social links | multi-column links, small headings, compact text |

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