品牌网站设计生成器

Professional brand web asset generator that helps you quickly create website design systems aligned with your brand identity. Customize brand colors, fonts, typography, and button styles through an intuitive visual interface. Preview changes in real-time and generate complete brand design specifications with one click. Whether you're a designer, developer, or brand manager, easily create a unified and professional brand visual experience.

专业的品牌网站资产生成工具，帮助您快速创建符合品牌调性的网站设计系统。通过可视化界面自定义品牌颜色、字体、排版和按钮样式，实时预览效果，一键生成完整的品牌设计规范。无论您是设计师、开发者还是品牌管理者，都能轻松打造统一且专业的品牌视觉体验。

★

✔

Why Choose {{ brandName }}

Powerful brand design tool that helps you easily create professional and consistent brand visual systems. From colors to fonts, from typography to buttons, everything is under your control.

{{ brandName }} 的核心优势

强大的品牌设计工具，让您轻松创建专业且一致的品牌视觉系统。从颜色到字体，从排版到按钮，一切尽在掌控之中。

Typography System

Heading 1 – Hero

Heading 2 – Section Title

Heading 3 – Card Title

Heading 4 – Subheading

Heading 5 – Eyebrow

Heading 6 – Meta Label

Brand web asset generator is a professional brand design tool that helps you quickly create unified brand visual systems. Through an intuitive visual interface, you can easily configure brand colors, fonts, typography, and component styles, preview effects in real-time, and export complete design specification documents.

Learn more about brand design systems and design specification export.

Element	Font	Color
H1	{{ getTypographyFontValue('h1') }}	#{{ getTypographyColorValue('h1') }}
H2	{{ getTypographyFontValue('h2') }}	#{{ getTypographyColorValue('h2') }}
H3	{{ getTypographyFontValue('h3') }}	#{{ getTypographyColorValue('h3') }}
H4	{{ getTypographyFontValue('h4') }}	#{{ getTypographyColorValue('h4') }}
H5	{{ getTypographyFontValue('h5') }}	#{{ getTypographyColorValue('h5') }}
H6	{{ getTypographyFontValue('h6') }}	#{{ getTypographyColorValue('h6') }}
Body	{{ getTypographyFontValue('body') }}	#{{ getTypographyColorValue('body') }}
Link	{{ getTypographyFontValue('link') }}	#{{ getTypographyColorValue('link') }} #{{ getLinkHoverColorValue() }} hover

排版系统展示

一级标题 – 主标题

二级标题 – 章节标题

三级标题 – 卡片标题

四级标题 – 副标题

五级标题 – 标签文字

六级标题 – 元数据标签

品牌网站资产生成器是一款专业的品牌设计工具，帮助您快速创建统一的品牌视觉系统。通过直观的可视化界面，您可以轻松配置品牌颜色、字体、排版和组件样式，实时预览效果，并导出完整的设计规范文档。

了解更多关于品牌设计系统和设计规范导出的详细信息。

元素	字体	颜色
H1	{{ getTypographyFontValue('h1') }}	#{{ getTypographyColorValue('h1') }}
H2	{{ getTypographyFontValue('h2') }}	#{{ getTypographyColorValue('h2') }}
H3	{{ getTypographyFontValue('h3') }}	#{{ getTypographyColorValue('h3') }}
H4	{{ getTypographyFontValue('h4') }}	#{{ getTypographyColorValue('h4') }}
H5	{{ getTypographyFontValue('h5') }}	#{{ getTypographyColorValue('h5') }}
H6	{{ getTypographyFontValue('h6') }}	#{{ getTypographyColorValue('h6') }}
文本	{{ getTypographyFontValue('body') }}	#{{ getTypographyColorValue('body') }}
链接	{{ getTypographyFontValue('link') }}	#{{ getTypographyColorValue('link') }} #{{ getLinkHoverColorValue() }} hover

Button Styles

Property	Normal	Hover
All Properties	{{ getButtonStateCSS('normal') }} :hover { {{ getButtonStateCSS('hover') }} }

按钮样式展示

属性	正常	悬停
所有属性	{{ getButtonStateCSS('normal') }} :hover { {{ getButtonStateCSS('hover') }} }

Color Tokens

品牌颜色系统

Accent

主色调

{{ normalizeColorValue(themeColors.accent.value).toUpperCase() }}

Link

链接

Link Hover

链接悬停

{{ normalizeColorValue(themeColors.link.hoverValue || themeColors.link.value).toUpperCase() }}

Headings

标题

{{ normalizeColorValue(themeColors.headings.value).toUpperCase() }}

Body Text

正文文本

{{ normalizeColorValue(themeColors.bodyText.value).toUpperCase() }}

Border

边框

{{ normalizeColorValue(themeColors.border.value).toUpperCase() }}

Page Background

网站背景

{{ normalizeColorValue(surfaceColors.pageBg.value).toUpperCase() }}

Content Background

内容背景

{{ normalizeColorValue(surfaceColors.contentBg.value).toUpperCase() }}

字体样式

文本阴影

盒子阴影