Living Reference · v1.0

Design System

The visual language, component library, and design tokens behind 灵性时光 — every token and component, rendered live on this page.

11 sections · Tailwind v4 · Motion

01

Logo

The brand mark and wordmark. Keep clear space around the mark and avoid recoloring.

Brand logo72px
Brand logo40px
Brand logo灵性时光
Lockup

02

Colors

Brand color tokens derived from CSS custom properties and Tailwind utilities.

Text tokens

text-major

Brand purple — accents & CTAs

text-minor

Primary content text

text-light

Muted / secondary text

Background tokens

bg-basement

Component surface

bg-melody

Hover / elevated surface

CSS var tokens

--color-code-border

Border / dividers

--color-code-basement

Code / panel bg

03

Palette

The full set of accent color families. Each swatch maps to a --color-* custom property.

Semantic pastels

fruit-orange
leaf-green
sky-blue
violet-purple
cute-pink
charm-rose
vigor-yellow

Code accents

code-violet
code-pink
code-blue
code-orange
code-neutral

Gold scale

gold-light
gold-medium
gold-primary
gold-bright
gold-dark
gold-glow

04

Typography

Typefaces, scale, and inline formatting used throughout the site.

font-acorn

The quick brown fox jumps

font-pattaya

灵性时光 · Spiritual Time

font-xswanf

西山晚风诗卷

Body / Prose

This is a typical body paragraph. It uses the default system font stack at 14px with relaxed line-height for comfortable reading. The color token text-minor is used for primary content.

Heading Scale

Heading 1 — 36px

Heading 2 — 30px

Heading 3 — 24px

Heading 4 — 20px

Heading 5 — 16px

Inline Formatting

Use InlineBlock for inline code snippets. Use font-mono for monospace labels. Use text-major to highlight brand accent text.

05

Buttons

All button variants, sizes, icon placements, and interactive states.

Variants

Sizes

With icons

States

06

Form Controls

Interactive Switch, Checkbox, and RadioGroup components. All states are live.

Switch

Checkbox

Radio Group

Selected: option-a

07

Cards

Content card variants — with title, footer actions, icon content, and hover control.

Basic Card

A simple card with a title and body content. Hover to see the subtle lift effect.

Card with Footer

This card has a footer area with action buttons separated by a border.

No title card

Cards without a title render clean content directly.

Hover disabled

Hover is disabled — this card stays static. Useful for non-interactive contexts.

Wide Card

A wider card spanning both columns. The grid adapts to available space. Footer shows metadata.

3 minutes ago

08

Feedback & Inline

Callout banners for all alert types, Badge chips, and InlineBlock code formatting.

Callouts

Info — general information or a helpful tip for the reader.
Success — the operation completed successfully. All systems nominal.
Warning — proceed with caution. This action may have side effects.
Danger — destructive or irreversible action. Double-check before continuing.

Badges

designengineeringopen sourcefeaturedlatest

InlineBlock

Use InlineBlock to highlight code snippets, token names like --color-major, or short technical strings inline within prose without breaking reading flow.

09

Details / Summary

A collapsible disclosure for optional or long-form content. Animated open/close.

This one starts open
Pass defaultOpen to render the disclosure expanded on mount. The chevron rotates and the body height animates smoothly, respecting reduced-motion settings.

10

Code Block

Static syntax-highlighted blocks plus an interactive Sandpack playground.

Basic

1
export function greet(name: string) {
2
  return `Hello, ${name}!`;
3
}
4


5
console.log(greet("灵性时光"));

With title & line highlighting

useCounter.ts

1
import { useState } from "react";
2


3
export function useCounter(initial = 0) {
4
  const [count, setCount] = useState(initial);
5
  return { count, inc: () => setCount((c) => c + 1) };
6
}

Interactive (Sandpack)

Loading playground…

11

Gallery

A horizontal image carousel with prev/next, dot indicators, and arrow-key navigation.