1 files changed, 36 insertions, 0 deletions
diff --git a/src/demos/TypographyDemo.tsx b/src/demos/TypographyDemo.tsx
new file mode 100644
index 0000000..75842d9
--- /dev/null
+++ b/src/demos/TypographyDemo.tsx
@@ -0,0 +1,36 @@
+import { Blockquote } from '@astryxdesign/core/Blockquote'
+import { CodeBlock } from '@astryxdesign/core/CodeBlock'
+import { Divider } from '@astryxdesign/core/Divider'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Text } from '@astryxdesign/core/Text'
+import { VStack } from '@astryxdesign/core/VStack'
+
+const SNIPPET = `const theme = defineTheme({
+  name: 'ocean',
+  tokens: {'--color-accent': '#0077B6'},
+})`
+
+export function TypographyDemo() {
+  return (
+    <VStack gap={3}>
+      <VStack gap={1}>
+        <Heading level={3}>清晰的内容层级</Heading>
+        <Text type="body" color="secondary" as="p">
+          标题、正文、辅助文字和代码共享同一套字体与节奏，让界面在中文和英文下都保持稳定。
+        </Text>
+      </VStack>
+      <Blockquote cite="Astryx 设计原则">
+        把复杂性留在系统里，把清晰留给界面。
+      </Blockquote>
+      <Divider />
+      <CodeBlock
+        code={SNIPPET}
+        language="tsx"
+        title="theme.ts"
+        hasLineNumbers={false}
+        width="100%"
+        size="sm"
+      />
+    </VStack>
+  )
+}