YunLeFun Design

YunLeFun Design is the design system of YunLeFun: shared principles, brand language, interaction guidelines, and the components, styles and documentation that implement them.

Design and UI

Concept	Question	In this project
Design	What brand, hierarchy and experience should the product express?	The YunLeFun/design repository and guidelines
UI	How are the visible, interactive interfaces implemented?	Styles, buttons, forms, navigation, dialogs and page compositions
@yunlefun/ui	How do Web projects reuse the design foundations?	Framework independent SCSS and --ylf-* variables
@yunlefun/vue	How do Vue projects reuse interactive controls?	Ylf* components and Nuxt integration

UI implements Design in the interface. The repository name describes the system; package names describe what you install. @yunlefun/design-monorepo is the private workspace root, not an application SDK.

Shared layers

YunLeFun Design
├── Guidelines: brand, hierarchy, interaction, copy and accessibility
├── Foundations: @yunlefun/ui colors, fonts, spacing, motion, radii, shadows and themes
├── Components: @yunlefun/vue Ylf* components
├── Compositions: customizable source distributed through Registry
└── Maintenance: metadata, utilities and documentation previews

Applications → consume foundations, components and compositions → own data and workflows

See Package responsibilities for directories and distribution, and Component architecture for implementation boundaries. Registry contains tokens, Button, Dialog and the pending AI agent components.

Brand direction: sky blue with vivid accents

YunLeFun serves people finding useful tools, trying applications and sharing creations. Interfaces should feel clear, light and playful, making content easy to find, states easy to understand and actions easy to complete.

• Sky blue handles everyday interactions: primary buttons, links, selections and focus.
• Solid accents default to sky blue. Sun yellow marks featured content; cyan, coral and pink identify content categories with a clear purpose. The accent variants share tone.
• Neutral surfaces carry prose and forms: sky white and blue gray by day, subdued blue gray at night.
• Semantic colors communicate success, warnings and errors consistently across applications.

Cloud scenes are optional brand modules. A homepage can highlight creations and atmosphere; settings should emphasize groups, fields and save feedback. Shared controls and hierarchy tie both to the same product family.

Fonts and decoration by purpose

Context	Font role	Visual intensity
Wordmark and brand hero	wordmark / display	Display fonts and a few solid accents
Page, section and card headings	heading	System sans serif; organize through size and spacing
Prose, buttons, forms and data	body	Readability and stable layout first

Radii distinguish controls from containers. Shadows express elevation. Motion responds to actions. Static information does not need lifting, glowing or continuous animation that suggests a click.

Sources of truth

Content	Maintained in
Principles, visual roles and usage	This page and Visual foundations
Executable theme values	packages/ui/styles/css-vars.scss
Public component APIs and behavior	packages/vue/components/Ylf*.vue and component documentation
Registry distribution relationships	Root registry.json
Component index	Metadata generated from component documentation
Product business rules	Each application repository

Update examples, documentation and generated Registry files with shared styles. Map legacy application variables through an adapter rather than maintaining another foundation theme.

Site navigation

Navigation components share the container, route links and site-switch trigger. Horizontal targets have an 8px gap and a minimum height of 44px, with 14px / 500 body text. Current pages use a sky-blue underline, hover uses a neutral background, and keyboard focus uses a 2px inset outline. Vertical navigation marks the current page with a soft blue background.

These states can coexist; do not collapse active, hover and focus-visible into the same fill and outer ring. Applications compute active; triggers read the menu's aria-expanded without storing duplicate open state. Authentication slots, mobile drawers and breakpoints remain application composition.

Current consistency

The documentation site consumes the shared controls itself: demo viewport and theme choices use YlfSegmentedControl; source and external-link actions use YlfButton and YlfTooltip; AG-UI forms use YlfInput and YlfSelect. Examples own application state and layout; the component library owns control appearance and interaction.

The shared VitePress theme adapts navigation typography, hover, focus and the 240ms moving underline. Only direct page links receive an underline; dropdown groups such as Ecosystem use text color for the current section and a chevron for expansion. It bundles the same Vue geometry used by YlfNavigation, without adding Sass or Reka dependencies. VitePress still owns search, language menus, mobile navigation, Markdown, tables and code blocks, styled with shared design tokens. The Editor specimen retains its own density; dedicated editor controls are not yet public components.

The shared library covers colors, fonts, spacing, reading widths, radii, shadows, motion and optional backgrounds. The logo matches the main site. Documentation uses the same tokens and real components, including an interactive theme preview. See Colors and components and Brand and interfaces.

The main site still has local --ui-*, some --ylf-*, and App* wrappers. Dependency upgrades, token mapping and page migration follow Application migration. A library update does not mean every deployed application has been redesigned.

Brand entrance buttons

A homepage or campaign can use one hero action per section: a deep blue-to-cyan gradient, white text and a soft shadow. Everyday primary actions stay solid sky blue. Values live in --ylf-hero-*; see Button.