skills.rest
engineai-nz
engineai-nzOFFICIAL
Explore all skills by this author →
WebsiteGitHub

brand

Applies Engine AI's complete brand system to UI and marketing deliverables.

Updated Mar 22, 2026
Search Tags:#typography#design system#brand identity#ui design#tone of voice#motion guidelines
One-click install
npx skills add https://github.com/engineai-nz/engineai-skills --skill brand-engineai-nz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand
Source: https://github.com/engineai-nz/engineai-skills/tree/main/brand
Command: npx skills add https://github.com/engineai-nz/engineai-skills --skill brand-engineai-nz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent, off-brand UI and copy by giving you a single source of truth for Engine AI’s visual identity, component patterns, motion, and tone of voice.

Core Features & Use Cases

  • Brand system tokens: Provides color palette, typography (Inter + JetBrains Mono), spacing, radii, borders, selection/scrollbar styling, and background/atmosphere rules.
  • UI component patterns: Defines navigation, cards (including glass effects), buttons, and form input styling that keeps every screen visually coherent.
  • Interaction & motion rules: Specifies scroll-trigger animations, keyframes, hover behavior, and count-up triggers for premium, minimal motion.
  • Copy + tone guidelines: Enforces direct, grounded Engine AI voice with NZ English phrasing to match the visual system.
  • Assets reference: Points to the canonical logo and image/video assets so outputs stay consistent with the live site.

Quick Start

Apply the Engine AI brand system to the UI you are building by following the palette, typography, component, motion, and tone rules in this skill, referencing the site engineai.co.nz as the source of truth.

Frequently Asked Questions about brand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain brand identity consistency across UI components and marketing pages?▼

Maintain brand identity consistency by applying standardized design system tokens for colors, typography, spacing, and component styling. Using a single source of truth prevents off-brand UI by enforcing coherent visual rules, layout patterns, and tone of voice across all deliverables.

How do I apply typography and color tokens to match a specific website's design system?▼

Apply typography and color tokens by referencing Inter and JetBrains Mono fonts alongside predefined color palettes and spacing rules. This standardizes UI outputs to match the target site exactly, ensuring every component, proposal, and visual deliverable remains visually coherent.

What is included in a complete brand identity system for UI design?▼

A complete brand identity system for UI design includes color palette tokens, typography rules, layout patterns, component styling, motion behaviors, and tone of voice guidelines. It provides operational requirements for navigation, cards, buttons, and form inputs to keep screens consistent.

Can I use predefined motion guidelines and interaction rules for premium UI animations?▼

Use predefined motion guidelines to implement scroll-triggered animations, keyframes, hover behaviors, and count-up triggers. Specifying these interaction rules ensures premium, minimal motion across UI components while maintaining a cohesive visual identity.

Does this brand identity system enforce tone of voice and copy guidelines alongside visual rules?▼

This brand identity system enforces tone of voice and copy guidelines alongside visual rules. It specifies direct, grounded phrasing using NZ English to ensure all text outputs match the standardized visual system and maintain overall brand consistency.

What are the limitations of applying a predefined brand system to custom UI layouts?▼

Limitations of applying a predefined brand system include strict adherence to specified color tokens, typography, and component patterns. Outputs must match the canonical website's visual identity, which restricts arbitrary styling deviating from the established design system rules.

Related Skills

Explore More Design & Creative Skills→
kftofkftof

ui-kit-brand-explorer

Generate six logo directions and seven brand assets for a UI kit.

Community
Advanced
jarredkennyjarredkenny
19

frontend-design

Define typography, color systems, motion, and layout for frontend interfaces.

Community
Advanced
daffy0208daffy0208
34

animation-designer

Implement motion design improvements for React web applications using Framer Motion, CSS, Tailwind, and GSAP.

Community
Intermediate
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate