How Design Tokens Enable Consistent UI Across Platforms in Titian

1. Introduction

In traditional development, front‑end engineers must adapt designs to multiple platforms, manually copying colors, fonts, spacing, and other style properties, which greatly increases maintenance complexity. Titian introduces Design Tokens to abstract basic visual attributes (color, font, spacing, shadow) so they can be shared across platforms and devices, ensuring visual consistency and development efficiency.

2. Definition

Design Tokens are standardized, atomic design variables that represent visual and style elements such as colors, fonts, spacing, and shadows. They provide a common language for designers and developers, simplify system maintenance, and ensure visual consistency across projects.

3. Integration with Titian

The next version of Titian abstracts five key visual elements—corner radius, color, typography, spacing, and shadow—into tokens. These tokens form the foundation of a complete design system, helping designers create attractive, consistent, and understandable visual works.

Theme customization is achieved through CSS variables, offering three brand styles (trend, universal, affinity) and allowing unlimited theme variations via tokens. Global theme, component‑level, and dark‑mode customizations are supported.

4. Core Framework

TiConfigProvider enables global theme configuration by passing a

theme

prop. The Tokens formula parser merges and computes token values from various sources, while the Tokens attribute parser applies token values to component props, eliminating manual style handling and ensuring consistency.

5. Code Examples

<code>const token = {
  // modify base values, auto‑generate others
  fontSize: {
    default: 18,
    gradient: 2,
    t18: 18 // manual override
  },
  components: {
    button: { token: { fontSize: { default: 12 } } },
  },
}
</code>

React usage:

<code>import { useTheme, useToken } from '@titian-design/mobile-react';
export const App = () => {
  const theme = useTheme();
  console.log('Theme', theme);
  const token = useToken();
  const brandColor = token('theme.color.foundation.brand');
  return &lt;div style={{color: brandColor}}&gt;颜色&lt;/div&gt;;
}
</code>

Vue usage:

<code>&lt;template&gt;
  &lt;div :style="{color: brandColor}"&gt;颜色&lt;/div&gt;
&lt;/template&gt;
&lt;script lang="ts" setup&gt;
import { useTheme, useToken, TiButton } from '@titian-design/mobile-vue';
const theme = useTheme();
console.log('Theme', theme);
const token = useToken();
const brandColor = token('theme.color.foundation.brand');
&lt;/script&gt;
</code>

6. Design Tokens Editor

The editor on the Titian site lets users adjust colors, fonts, spacing, and other design elements in real time, preview changes instantly, and export the token configuration as a file for easy integration into projects, enhancing learning and speeding up customization.

7. Future Plans

Integration with the Weimob Design‑to‑Code System (WDCS) will promote the token‑based workflow across mobile front‑end development, enabling thousands of merchants to achieve “one‑store‑one‑style” customization and improve development efficiency.