asu-visual-style

Applies ASU brand colors, typography, logo rules, and accessibility standards to video and image assets.

Updated Sep 22, 2026
One-click install
npx skills add https://github.com/napatne/LIVE-Workspace --skill asu-visual-style-napatne
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: asu-visual-style
Source: https://github.com/napatne/LIVE-Workspace/tree/main/.agents/skills/asu-visual-style
Command: npx skills add https://github.com/napatne/LIVE-Workspace --skill asu-visual-style-napatne

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing colors, fonts, type sizes, and logo placements for ASU-branded videos often leads to guesswork, invented palettes, and accessibility failures like low-contrast text or missing captions. This Skill provides verified, cited ASU brand and accessibility values so every visual decision is defensible and traceable to a published source. ## Core Features & Use Cases - Verified Color Palette: Full ASU palette with measured contrast ratios, four banned combinations, and a copy-paste TypeScript theme block for Remotion videos. - Typography Rules: Arial-only font stack, approved weights (400/700), video-specific type scale, and ASU's spacing rules (1.5 line height, 80-character line cap). - Logo Governance: Hard rules on official PNG files, clear space, minimum sizes, and forbidden modifications including shape animation. - Accessibility Checklist: Caption requirements, contrast computation script, and a pre-delivery checklist meeting WCAG 2.1 AA. - Use Case: When building a Remotion explainer video for an ASU department, consult this Skill before setting any color or font to get the starter theme, avoid the #747474 contrast trap, and confirm caption formatting. ## Quick Start Ask the assistant to apply the ASU visual style theme and check all colors and captions against the accessibility rules before rendering the video.

Frequently Asked Questions about asu-visual-style

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

FAQPage Schema
How do I apply ASU brand colors to a Remotion video?▼

Copy the starter theme block into your project and read values through a React context, never by importing THEME directly. Resolve the theme once at the composition root so the person can switch palettes during refinement with a prop change.

What font does ASU require for video content?▼

ASU's brand guide names Arial as the primary digital and system font for non-Adobe applications, and forbids additional fonts. Use only weights 400 and 700, since other weights are browser-synthesized and render poorly.

Can I use ASU gold as text color on a white background?▼

No. Gold on white measures 1.57:1 contrast, far below the 4.5:1 minimum, and ASU bans it outright. Gold is a fill color only; use it behind shapes and highlights, never as text on light backgrounds.

Does ASU require captions on videos?▼

Yes. ASU requires edited auto-captions or manual captions on new recorded video shown to students, employees, or the public, aiming for 95% accuracy. Generate captions from the script text rather than transcribing audio.

Can I recreate or animate the ASU logo in code?▼

No. ASU forbids scanning or recreating the logo, and SVG is not an approved format. Use an official PNG file, and only fade it in or move it as a rigid unit; never reshape, spin, or build it up stroke by stroke.

Why does ASU Gray #747474 fail accessibility checks?▼

ASU Gray #747474 passes on pure white at 4.67:1 but fails at 4.44:1 on the warm off-white background #FBF9F4 used in this project. Use Gray 2 #484848 instead, which achieves 8.69:1 on either background.