| name | brand-alignment |
| description | Ensures every website element — layout, messaging, navigation, imagery, CTAs — reflects the client's brand identity and speaks clearly to their ideal customer. Use before and during page building to validate that the site feels intentional, cohesive, and trustworthy. |
Brand Alignment Skill
The website is a brand experience, not just a marketing tool. Every choice — from layout to language to navigation — contributes to how the business is perceived. This skill ensures the site feels intentional and cohesive rather than generic or misaligned.
Before Building: Brand Discovery
Read these files in order and extract the brand signals:
docs/company-profile.md — who they are, what they do, what makes them different
docs/style-brief.md — mood, personality, visual direction
docs/services.md — what they offer and how they describe it
- All other
docs/*.md — tone patterns, recurring themes, language choices
Answer these questions before generating any page:
Who Is the Ideal Customer?
The ideal customer determines everything. Identify from the docs:
- What questions do they need answered first?
- How much context or explanation do they need?
- What language feels accessible and appropriate to them?
- What kind of reassurance builds their trust?
A website that tries to speak to everyone ends up speaking clearly to no one. Every layout decision, content emphasis, and CTA should serve the identified audience.
What Is the Brand Position?
Extract from the content:
- What they do — in one clear sentence
- Who they do it for — specific audience, not "everyone"
- What makes their approach different — the genuine differentiator
- What feeling they want to create — trust, warmth, authority, innovation, approachability
If the docs do not make these clear, note the gaps and work with what is available. Never fabricate a brand position.
Homepage: Set Expectations Immediately
The homepage is the most important brand moment. Visitors must quickly understand:
- What the business does
- Who it serves
- What makes the approach different
- What to do next
Homepage Brand Checklist
Brand clarity on the homepage reduces friction. When people do not have to work to understand the business, they stay and explore.
Messaging Consistency Across Pages
The brand voice must remain consistent even as content changes. Every page should feel like it belongs to the same business.
Check Consistency Across
| Page Type | Brand Voice Must Convey |
|---|
| Services | Competence, clarity about what is included and who benefits |
| About | Authenticity, human connection, credibility |
| Team | Warmth, professionalism, approachability |
| Testimonials | Social proof that reinforces the brand promise |
| FAQ | Helpfulness, transparency, respect for the visitor's time |
| Contact | Accessibility, willingness to engage, clear next steps |
Voice Drift Warning Signs
Stop and correct if you notice:
- A service page sounds corporate while the about page sounds casual
- CTAs shift between aggressive and passive across pages
- Some pages use industry jargon while others use plain language
- Tone becomes impersonal on pages with less source content
When a docs/*.md file has thin content, maintain the established voice rather than filling gaps with generic language.
Visual Branding: Consistency and Restraint
Visual branding works best when it supports readability and understanding. Restraint is more effective than decoration.
Visual Consistency Rules
Apply uniformly across every page:
- Colours — use the design-system palette consistently; do not introduce new colours per page
- Typography — same heading/body fonts everywhere; consistent sizing hierarchy
- Spacing — uniform section padding, card gaps, and content margins
- Image treatment — same border-radius, same hover behaviour, same aspect ratio approach
- Component patterns — buttons, cards, and sections should look identical in style across all pages
Visual Restraint Rules
- Do not add decorative elements that do not serve comprehension
- Do not use more than one accent colour for emphasis on a single page
- Do not vary section layouts dramatically between pages without reason
- Let whitespace do the work — generous spacing communicates confidence
- Fewer visual ideas executed consistently outperform many ideas applied inconsistently
Navigation and User Flow
How people move through the website is part of the brand experience. Clear navigation communicates confidence and respect for the visitor's time.
Navigation Brand Standards
- Primary navigation — only pages that matter most to the ideal customer; typically 4-6 items
- Page ordering — reflects the visitor's decision journey, not the business's internal structure
- Labels — use language the visitor would use, not internal terminology
- Contact/CTA — always accessible, never buried
User Flow Validation
For each page, verify the visitor can easily:
Overly complex menus or buried information creates frustration. If the business has many services, group them logically rather than listing everything in the main navigation.
Calls to Action: Guide, Do Not Pressure
CTAs should feel natural to the brand, not forced or aggressive.
CTA Language by Brand Personality
| Brand Feels | CTA Style | Examples |
|---|
| Professional, established | Confident and clear | "Schedule a Consultation", "Request a Proposal" |
| Warm, approachable | Inviting and supportive | "Get in Touch", "Let Us Help You" |
| Innovative, forward-thinking | Action-oriented | "Start Your Project", "Explore Our Approach" |
| Community-focused | Inclusive and welcoming | "Join the Programme", "Become a Member" |
CTA Placement Rules
- Every page must have at least one clear CTA
- The primary CTA should appear above the fold and again at the page bottom
- Secondary CTAs (e.g., "Find Out More") can guide exploration within the site
- CTA wording must be consistent — do not use "Contact Us" on one page and "Reach Out" on another for the same action
- Never use manipulative language ("Don't miss out!", "Last chance!", "Act now!")
Content Emphasis: What to Prioritise
Not all information is equally important. Brand alignment means choosing what to emphasise based on what the ideal customer needs.
Prioritisation Framework
For each page, rank content by:
- What builds understanding — what they do, how it works
- What builds trust — credentials, testimonials, track record, team
- What enables action — how to contact, what happens next, pricing clarity
- What provides depth — detailed descriptions, case studies, FAQs
Lead with understanding, then trust, then action. Depth supports but does not lead.
What to Omit or De-emphasise
- Internal company milestones that do not matter to the visitor
- Awards or certifications the audience would not recognise
- Technical details that belong in a conversation, not a homepage
- History sections that are longer than the service descriptions
Common Brand Misalignment Pitfalls
Watch for and correct these patterns:
| Pitfall | Problem | Correction |
|---|
| Trying to look bigger than they are | Creates distrust when reality does not match | Present the business honestly; small and focused is a strength |
| Aesthetics over usability | Beautiful pages that confuse visitors | Prioritise clarity; design serves understanding |
| Generic messaging | "We are passionate about delivering excellence" | Use specific language from the client's own docs |
| Visual inconsistency | Each page feels like a different website | Apply the same component patterns and spacing everywhere |
| Buried CTAs | Visitors cannot figure out how to take action | Primary action visible on every page, above the fold |
| Speaking to everyone | Vague value propositions that resonate with no one | Address the identified ideal customer directly |
Validation: The Brand Coherence Check
After building all pages, review the complete site against these questions:
- Could a visitor describe what this business does after 10 seconds on the homepage?
- Does every page feel like it belongs to the same business?
- Is the tone consistent from the first heading to the last footer link?
- Would the ideal customer feel that this site was made for them?
- Are CTAs clear, consistent, and easy to find on every page?
- Does the visual treatment support the content, or compete with it?
- Can a visitor reach the contact page or primary action from any page in one click?
If any answer is no, identify the specific pages or sections that break coherence and correct them before proceeding to the deploy skill.
How This Skill Relates to Others
- east-african-english governs the language and tone of the words
- design-system governs the visual identity (fonts, colours, spacing)
- brand-alignment (this skill) ensures both work together to create a coherent brand experience that serves the ideal customer
This skill validates the decisions made by design-system and the content generated by page-builder. It is a quality gate — read the brand signals first, then verify alignment throughout the build.