Components
Typography
The typographic voices, named so prose can ask for one: display and heading ride the song-serif, the rest ride the hei. Nothing here is decorative — hierarchy is size, weight, and space.
#Basic usage
以光为影
The paper-and-ink system
Interfaces are warm paper, content is ink, hierarchy is light.
Surfaces are never pure white; the ground rests in ambient shade. Primary actions default to ink — monochrome, solemn — with mineral-pigment accents switchable by theme.
Revised autumn 2026 · Typeset in the eastern studio
SECTION IV — MOTION GRAMMAR
<script setup lang="ts">
import { Typography } from "@bysages/vue";
</script>
<template>
<div class="grid gap-4 max-w-144">
<Typography.Display>以光为影</Typography.Display>
<Typography.Heading>The paper-and-ink system</Typography.Heading>
<Typography.Lead>
Interfaces are warm paper, content is ink, hierarchy is light.
</Typography.Lead>
<Typography.Body>
Surfaces are never pure white; the ground rests in ambient shade. Primary actions default to
ink — monochrome, solemn — with mineral-pigment accents switchable by theme.
</Typography.Body>
<Typography.Muted>Revised autumn 2026 · Typeset in the eastern studio</Typography.Muted>
<Typography.Label>SECTION IV — MOTION GRAMMAR</Typography.Label>
</div>
</template>
#Props
#TypographyDisplay
A styled part — no props of its own; it takes the anatomy's shared styling.
#TypographyHeading
A styled part — no props of its own; it takes the anatomy's shared styling.
#TypographyLead
A styled part — no props of its own; it takes the anatomy's shared styling.
#TypographyBody
A styled part — no props of its own; it takes the anatomy's shared styling.
#TypographyMuted
A styled part — no props of its own; it takes the anatomy's shared styling.
#TypographyLabel
A styled part — no props of its own; it takes the anatomy's shared styling.