TDesign

Difficulty:
Design System
TDesign Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 3px
md · 6px
lg · 9px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

TDesign is Tencent's open-source enterprise design system, aiming to craft 'work aesthetics' for designers and developers. It ships across Vue, React, and mini-programs, unfolds primary blue (#0052D9) into a 10-step palette with dark theme support, and pairs 6px radii and #E7E7E7 hairlines with 14px body for a calm, clean base. Tables, filters, and status tags are standard fixtures, with brand-tinted selection states.

TDesignDesign System

Prompt Template

Base Template
Design a TDesign-inspired interface. - Tencent design system shipping across Vue, React, and mini-programs; - #0052D9 primary blue with a 10-step palette and dark theme; - 6px radii, #E7E7E7 hairlines, 14px body type; - Enterprise admin patterns: tables, filters, and status tags; - Calm hierarchy with brand-tinted selection states. Colors: #0052D9, #E7E7E7, #F3F3F3, #000000 with #0052D9 accent. Typography: system-ui.

Variant Prompts

📱 Mobile
Design a mobile app with TDesign aesthetics. Use TDesign color identity with #0052D9 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with TDesign style. Use TDesign color identity with #0052D9 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with TDesign design language. Use TDesign color identity with #0052D9 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with TDesign visual identity. Use TDesign color identity with #0052D9 accents. Compelling, conversion-focused.

Usage Examples

TDesign Admin Console

Dashboard
Build an admin console with TDesign style: data tables, filter panels, status tags, and #0052D9 accent color.

TDesign CRM Screens

Web
Create CRM management screens with TDesign design language: customer tables, detail drawers, and calm enterprise hierarchy.

✅ Best For

  • Chinese enterprise apps
  • Vue and React
  • Admin consoles

❌ Avoid For

  • Overseas English-only products
  • Lightweight personal projects

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download