00
Wushu Unlimited is one of the top three wushu schools for children in the United States. This style guide documents the visual identity for the new website, reflecting a deliberate step forward from the current design. Where the existing site relies on bright primary colors to communicate energy and friendliness, the new direction is more refined.
The goal is to signal that this is a high-level, professional training environment, one that takes both the art and the athletes seriously, while remaining warm and welcoming to families.
Deep charcoal tones anchor the palette and project confidence. A warm gold accent communicates achievement and prestige. Muted program area colors keep the elemental identities visible without competing with the overall professional feel. Poppins replaces the current font and brings better readability and a polished, friendly character that fits where this school is headed.
武术无界是全美顶尖的三大儿童武术学校之一。本风格指南记录了新网站的视觉形象，体现了对现有设计的有意升级。现有网站通过鲜艳的原色传递活力与亲切感，而新的设计方向则更加精致内敛。
我们的目标是传递出这是一个高水平、专业化训练环境的信号，一个认真对待武术本身与运动员发展的地方，同时对家庭保持温暖与欢迎的态度。
深炭灰色的色调奠定了整体基调，彰显自信与权威。温暖的金色点缀传递成就感与尊贵气质。低饱和度的项目区域色彩保留了各自的元素特征，同时不影响整体的专业感。Poppins字体取代了当前网站所用字体，带来更好的可读性和精致而友好的气质，与学校的发展方向高度契合。
01
A color palette is the set of carefully selected colors that define how the brand looks everywhere it appears: on the website, in printed materials, and in any digital communication. Using these colors consistently is what makes a brand feel cohesive and intentional rather than random or assembled.
配色方案是一组经过精心挑选的颜色，定义了品牌在各个场合的视觉呈现方式，包括网站、印刷材料及其他数字传播渠道。一致地使用这些颜色，是品牌视觉形象显得统一而有设计感的关键。
The primary color is the foundation of the brand. It appears in the navigation bar, page headings, body text, primary buttons, and any element where strong readability and authority are needed. The deep charcoal-navy communicates professionalism and stability while remaining warmer and more approachable than a stark pure black.
主色调是品牌的视觉基础，用于导航栏、页面标题、正文、主要按钮以及所有需要强可读性与权威感的元素。深炭灰海军蓝传递出专业与稳重感，同时比纯黑色更温暖、更具亲和力。
The accent color is used sparingly to add warmth, highlight important actions, and communicate achievement. It appears on call-to-action buttons, eyebrow labels, focus states, and decorative elements. Gold signals excellence and prestige, qualities aligned with Wushu Unlimited's standing as an elite school. The current site uses a bright yellow accent. Gold is the deliberate evolution of that choice. Where yellow reads as energetic and airy, gold is grounded and stable, with connotations of affluence and earned achievement that better match where this school stands. Because gold is a light color, white text does not have enough contrast against it at normal reading sizes; dark text should always be used when gold is a background color.
强调色少量使用，用于增添温暖感、突出重要操作并传递成就感。它出现在号召性按钮、眉题标签、焦点状态及装饰元素上。金色象征卓越与尊贵，与武术无界作为精英学校的定位高度契合。由于金色本身亮度较高，以金色为背景时请始终使用深色文字，以确保清晰可读。
Each of the four program areas has its own color identity, associated with a natural element. These colors are used in a limited, intentional way: for tabs, badges, category labels, and small visual indicators. They are deliberately muted from the vivid colors on the current site to maintain a professional and cohesive look when viewed together.
四个项目分区各自拥有独特的色彩标识，与自然元素相对应。这些颜色以有限且有意的方式使用，用于标签页、徽章、分类标签和小型视觉指示器。与原网站鲜艳的色彩相比，它们经过刻意调和，以在整体视觉中呈现出专业、协调的效果。
Note: Element color assignments (fire/water/earth/air) are based on the current site's icon and section naming. Please confirm these associations are correct before we finalize.
The neutral colors handle the practical work of building pages: backgrounds, borders, dividers, secondary text, and placeholder states. Warm white gives the page background a soft, inviting quality rather than the clinical feel of a pure bright white. The gray scale provides structure and hierarchy throughout the layout without competing with the brand colors.
中性色承担页面构建的实用功能：背景、边框、分隔线、次要文字和占位符状态。温暖的白色赋予页面背景柔和、宜人的质感，比纯白色更少生硬感。灰色梯度在不与品牌色竞争的前提下，提供页面的层次感与结构感。
02
Typography is the system of text styles used consistently across the website. Every heading level, body size, and label style is defined here so the site reads clearly and cohesively from top to bottom. We selected Poppins, a geometric sans-serif typeface loaded from Google Fonts, for several reasons: it reads clearly at all sizes, including small text on mobile devices; its slightly rounded letterforms feel friendly and approachable, which matters for a school serving children and families; and it carries a subtle polish that fits the more refined direction of this redesign. Compared to the font currently on the Wushu Unlimited website, Poppins is more readable, more modern, and better matched to where the brand is headed.
字体排版是网站中统一使用的字体样式系统。每个标题级别、正文尺寸和标签样式均在此处定义，确保网站从上到下呈现一致的阅读体验。我们选择了Poppins字体（通过Google Fonts加载），原因如下：它在各种尺寸下（包括手机上的小字）均清晰易读；其圆润的字形给人友好、亲切的感觉，对儿童和家庭尤为重要；同时具有一种微妙的精致感，契合本次改版的整体设计方向。与武术无界现有网站所用字体相比，Poppins可读性更强、更现代，也更符合品牌未来的发展方向。
This is body copy. Wushu Unlimited offers Chinese martial arts training for students of all ages and skill levels. Our coaches are world-class competitors and dedicated instructors who are passionate about sharing this art with the next generation.
Classes available Monday through Saturday. Drop-in and monthly memberships available. Contact us for a free trial class.
Photo: 2024 National Wushu Championship · Alhambra, CA
03
UI components (user interface components) are the interactive building blocks of the website: the buttons, links, form fields, checkboxes, and other elements that visitors will click, tap, or fill out. Seeing them together here confirms that their visual style is consistent with the overall brand, and that every interactive element on the site feels like it belongs to the same family.
UI组件（用户界面组件）是网站的交互构成元素，包括按钮、链接、表单字段、复选框等用户将点击、轻触或填写的元素。在此统一展示，是为了确认其视觉风格与整体品牌保持一致，确保网站上每个交互元素都给人一种归属同一体系的感觉。
Hover states are active: primary lightens, accent darkens, outline fills with navy. Disabled state is non-interactive.
Inline hyperlinks use dark gold with underline, brightening to gold base on hover. Bold text uses 700 weight. Italic text is available for emphasis or citations.
行内超链接使用深金色配下划线，鼠标悬停时变为金色基调。粗体文字采用700字重。斜体文字可用于强调或引用说明。
Click into a text field to see the gold focus ring. Checked states use the gold accent.
04
Web accessibility means building websites that work for everyone, including people with low vision, color blindness, or other visual impairments, and those who use assistive technologies like screen readers. The color combinations on this site have been tested against WCAG 2.1 Level AA, which is the current industry standard for accessibility compliance.
Search rankings: Accessible websites are better structured and easier for search engines to read, which directly contributes to higher rankings on Google. More families find you without paid ads.
Better for everyone: Higher contrast and clear type benefit all users, not just those with disabilities. A parent reading the site on their phone in a sunny parking lot has the same need for legible text as someone using a screen magnifier.
In the United States, websites open to the public are subject to the Americans with Disabilities Act (ADA). Businesses that fail to meet basic accessibility standards have faced lawsuits and fines. Schools and service businesses are among the most commonly targeted. Building with accessibility from the start removes this risk entirely and protects the business going forward.
网页无障碍设计确保所有人都能使用网站，包括有视觉障碍、色觉缺陷或其他视力障碍的用户，以及使用屏幕阅读器等辅助技术的用户。以下色彩组合已通过WCAG 2.1 AA级标准验证，即当前行业公认的无障碍合规标准。
搜索排名：无障碍网站结构更完善，搜索引擎抓取更便捷，直接有助于在Google等平台获得更高自然排名，让更多家庭无需付费广告即可找到您。
提升所有用户体验：高对比度与清晰字体使所有用户受益，而不仅限于残障人士。在停车场阳光直射下用手机查看网站的家长，与使用屏幕放大镜的用户有着同等的可读性需求。
在美国，面向公众开放的网站须遵守《美国残障人士法案》(ADA)。未能达到基本无障碍标准的企业已面临诉讼和罚款处罚，学校和服务类企业是受波及最多的群体之一。从项目启动之初便以无障碍为前提进行构建，可从根本上规避这一法律风险，并为企业的长远发展提供保障。
Pass status and contrast ratios appear in each panel header. Large text = 18px semi-bold or 24px bold (WCAG threshold for AA Large, 3:1). Normal text = 16px regular (AA Normal, 4.5:1).
05
This section contains the technical specifications used during website development. You do not need to review this in detail. It is included here for transparency and so you are aware of the system behind the design. Your development team will reference these directly when building the site.
本节包含网站开发过程中使用的技术规范。您无需详细查阅本节内容，它仅作为参考信息提供，让您了解设计系统的底层架构。您的开发团队在构建网站时将直接引用这些内容。
Consistent measurements applied to padding, margins, and layout gaps throughout the site.
Complete index of every design token, its value, and intended role. Referenced directly during development.
| Variable | Value | Role |
|---|---|---|
| Colors, Primary (ACSS primary slot) | ||
| --color-primary-ultra-dark | #0F111A | Deepest navy, dark hero sections |
| --color-primary-dark | #171922 | Dark navy, footer background |
| --color-primary | #1E2235 | Primary brand, nav, headings, primary buttons, links |
| --color-primary-light | #2E3550 | Hover state, button hover, active nav item |
| --color-primary-ultra-light | #E8E9F0 | Tinted backgrounds, callout boxes, table headers |
| Colors, Accent / Gold (ACSS accent slot) | ||
| --color-accent-ultra-dark | #6B5600 | Deep gold, high contrast text on light gold bg |
| --color-accent-dark | #997200 | Hover/pressed state for accent elements |
| --color-accent | #C9A840 | Warm gold, CTAs, eyebrows, focus rings |
| --color-accent-light | #E0CC84 | Light gold, highlights, icon fills |
| --color-accent-ultra-light | #FAF5E4 | Gold tinted backgrounds, callout panels |
| Colors, Program Areas (custom supplemental, no ACSS slot) | ||
| --color-area-fire-dark | #8A4F47 | Fire dark, hover state |
| --color-area-fire | #B86B60 | Children's Wushu, tabs, badges, chips only |
| --color-area-fire-light | #E0BEB8 | Fire light, subtle tint backgrounds |
| --color-area-water-dark | #2E677E | Water dark, hover state |
| --color-area-water | #4B8FA6 | After School Program, tabs, badges, chips only |
| --color-area-water-light | #B8D8E6 | Water light, subtle tint backgrounds |
| --color-area-earth-dark | #3D5D28 | Earth dark, hover state |
| --color-area-earth | #5D8A3C | Adult Wushu, tabs, badges, chips only |
| --color-area-earth-light | #BDD6AD | Earth light, subtle tint backgrounds |
| --color-area-air-dark | #864030 | Air dark, hover state |
| --color-area-air | #C05838 | Self Defense, tabs, badges, chips only |
| --color-area-air-light | #E8B4A0 | Air light, subtle tint backgrounds |
| Colors, Neutrals & Semantic | ||
| --color-white | #F9F7F4 | Warm White, page backgrounds, card fills |
| --color-gray-100 | #EBEBEB | Dividers, disabled backgrounds |
| --color-gray-500 | #9A9A9A | Placeholder text, muted icons |
| --color-gray-800 | #4A4A4A | Secondary body text |
| --color-text | #1C1A18 | Default text color |
| --color-text-muted | #5A5A72 | Supporting/secondary text, labels |
| --color-link | #997200 | Inline hyperlinks, gold dark |
| --color-link-hover | #C9A840 | Link hover state, gold base |
| --color-focus | #C9A840 | Keyboard focus rings, gold accent |
| Typography | ||
| --font-primary / --font-body | 'Poppins', sans-serif | |
| --text-h1 / h2 / h3 / h4 | 48 / 36 / 28 / 22px | Heading scale |
| --text-body / sm / xs | 16 / 14 / 12px | Body text scale |
| Spacing | ||
| --space-xs through --space-2xl | 0.5rem – 4rem | Layout spacing scale |
| Components | ||
| --radius-button / --radius-input | 8px | Rounded corners, all interactive elements |
ACSS slot mapping: --color-primary maps to the ACSS primary slot. --color-accent maps to the ACSS accent slot. --color-area-* variables are custom supplemental with no ACSS slot; define them in Global CSS or inline in Etch sections.