opencloud/.agents/skills/naive-ui-design-typography/SKILL.md

name, description, metadata

name	description	metadata
naive-ui-design-typography	Typography design specifications for Naive UI. Invoke when user needs to understand font conventions, font-family settings, or text styling guidelines.	author version jiaiyan 1.0.0

Typography Design Specifications

Naive UI creates font conventions to ensure the best presentation across different platforms. Typography is an art that enhances readability and visual hierarchy.

When to Use

• Understanding font conventions
• Applying consistent text styles
• Setting font-family for cross-platform compatibility
• Managing font sizes and line heights
• Using typography components

---

Font Family

Naive UI uses a carefully selected font stack for optimal cross-platform display.

Sans-serif Font (Default)

font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, 
             "Segoe UI", sans-serif, "Apple Color Emoji", 
             "Segoe UI Emoji", "Segoe UI Symbol";

Monospace Font

font-family: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace;

Font Stack Explanation

Font	Platform	Purpose
v-sans	All	Custom sans-serif font (can be configured)
system-ui	All	System UI font
-apple-system	macOS/iOS	Apple system font
BlinkMacSystemFont	macOS	Chrome on macOS
Segoe UI	Windows	Windows system font
Apple Color Emoji	macOS/iOS	Emoji support
Segoe UI Emoji	Windows	Emoji support

---

Font Sizes

Naive UI provides standardized font size variables for different contexts.

CSS Variable	Value	Usage
--font-size	14px	Base body text
--font-size-mini	12px	Mini text, tiny labels
--font-size-tiny	12px	Tiny text
--font-size-small	14px	Small text
--font-size-medium	14px	Medium text
--font-size-large	15px	Large text
--font-size-huge	16px	Huge text

Usage Examples

<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>

<template>
  <p :style="{ fontSize: themeVars.fontSize }">Base text</p>
  <span :style="{ fontSize: themeVars.fontSizeMini }">Mini text</span>
</template>

---

Font Weight

CSS Variable	Value	Usage
--font-weight	400	Normal text weight
--font-weight-strong	500	Emphasized text

<template>
  <n-el style="font-weight: var(--font-weight-strong)">
    Strong text
  </n-el>
</template>

---

Line Height

CSS Variable	Value	Usage
--line-height	1.6	Default line height for body text

---

Header Typography

Naive UI provides typography components with predefined header styles.

Header Font Sizes

Level	Font Size	Margin
H1	30px	28px 0 20px 0
H2	22px	28px 0 20px 0
H3	18px	28px 0 20px 0
H4	16px	28px 0 18px 0
H5	16px	28px 0 18px 0
H6	16px	28px 0 18px 0

Header Components

<template>
  <n-h1>Heading 1</n-h1>
  <n-h2>Heading 2</n-h2>
  <n-h3>Heading 3</n-h3>
  <n-h4>Heading 4</n-h4>
  <n-h5>Heading 5</n-h5>
  <n-h6>Heading 6</n-h6>
</template>

Header with Prefix Bar

Headers can display a colored bar prefix for visual emphasis.

<template>
  <n-h1 prefix="bar">Heading with bar</n-h1>
  <n-h2 prefix="bar" align-text>Aligned heading</n-h2>
  <n-h3 prefix="bar" type="success">Success heading</n-h3>
</template>

---

Text Component

Naive UI provides a Text component for styled text display.

Text Types

<template>
  <n-text>Default text</n-text>
  <n-text type="primary">Primary text</n-text>
  <n-text type="success">Success text</n-text>
  <n-text type="info">Info text</n-text>
  <n-text type="warning">Warning text</n-text>
  <n-text type="error">Error text</n-text>
</template>

Text Depth

<template>
  <n-text>Primary depth (default)</n-text>
  <n-text depth="2">Secondary depth</n-text>
  <n-text depth="3">Tertiary depth</n-text>
</template>

Text with Tag

<template>
  <n-text tag="div">Text as div</n-text>
  <n-text tag="span">Text as span</n-text>
  <n-text tag="label">Text as label</n-text>
</template>

---

Paragraph Component

<template>
  <n-p>
    This is a paragraph with proper spacing and typography.
    Naive UI provides consistent text styling across components.
  </n-p>
</template>

---

Other Typography Components

Anchor (Link)

<template>
  <n-a href="https://example.com">Link text</n-a>
</template>

Horizontal Rule

<template>
  <n-hr />
</template>

Lists

<template>
  <n-ul>
    <n-li>Unordered list item 1</n-li>
    <n-li>Unordered list item 2</n-li>
  </n-ul>
  
  <n-ol>
    <n-li>Ordered list item 1</n-li>
    <n-li>Ordered list item 2</n-li>
  </n-ol>
</template>

Blockquote

<template>
  <n-blockquote>
    <n-p>This is a blockquote with proper styling.</n-p>
  </n-blockquote>
</template>

---

CSS Variables Summary

:root {
  --font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", sans-serif;
  --font-family-mono: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace;
  
  --font-size: 14px;
  --font-size-mini: 12px;
  --font-size-tiny: 12px;
  --font-size-small: 14px;
  --font-size-medium: 14px;
  --font-size-large: 15px;
  --font-size-huge: 16px;
  
  --font-weight: 400;
  --font-weight-strong: 500;
  
  --line-height: 1.6;
}

---

Component Heights

Naive UI uses standardized heights for form controls and interactive elements.

CSS Variable	Value	Usage
--height-mini	16px	Mini size controls
--height-tiny	22px	Tiny size controls
--height-small	28px	Small size controls
--height-medium	34px	Medium size controls (default)
--height-large	40px	Large size controls
--height-huge	46px	Huge size controls

---

Best Practices

1. Use Typography Components: Use n-h1 through n-h6, n-p, n-text for consistent styling
2. Cross-Platform: The font stack ensures consistent display across platforms
3. Hierarchy: Use font sizes and depths to establish visual hierarchy
4. Line Height: Maintain readable line height (1.6) for body text
5. Dark Mode: Typography automatically adjusts in dark mode
6. Semantic HTML: Use appropriate tags (tag prop) for accessibility

---

Related Resources

Resource	Description
Typography Components	Full typography documentation
useThemeVars	Access theme variables
Color Design	Text color variables
Border Design	Related design specifications