--- name: angle-brand description: Apply Angle's visual and verbal brand system to software, websites, presentations, documents, campaigns, social creative, video, diagrams, and AI-generated assets. --- # Angle Brand Create one recognizable Angle across product and creative work. ## Core rules - Treat Angle as one masterbrand. Use `Angle + descriptor` for product names. - Do not use the retired “One Angle. Everywhere.” working line as a headline or tagline. Lead with the approved wordmark and a specific message. - Treat the Angle wordmark as a critical primary asset. Use it when introducing Angle and use the A symbol as its compact counterpart. - On white or light backgrounds, always use the approved black square tile with the white A. Never place a freestanding black A on a light surface. - Keep the approved A uniformly scaled to 50% and centered inside a 1:1 tile, occupying about 46% of its width with generous negative space. Use the complete tile at 24 px or larger on screens. - Use `angle-tri-angle.svg` for the approved Tri-angle variation; do not recreate or rearrange its three symbols. - Use approved Angle artwork without stretching, rotating, outlining, glowing, recoloring, or replacing the wordmark with typed text. - Use Angle Black `#050505`, Graphite `#666666`, Mist `#EEEEEE`, and White `#FFFFFF` for identity. - Black and white own the Angle identity. Use the World of Warcraft item-quality spectrum as the fixed Angle rarity and progression system: Poor `#9D9D9D`, Common `#FFFFFF`, Uncommon `#1EFF00`, Rare `#0070DD`, Epic `#A335EE`, Legendary `#FF8000`, Artifact `#E6CC80`, and Heirloom `#00CCFF`. - Use item-quality color only for relative value, rarity, status, progression, compact indicators, borders, labels, charts, and moments of recognition. Never recolor the logo or turn an accent into a product identity or branded page background. - Preserve the quality sequence across products. Pair every color with a name, icon, tier, or value; keep destructive and safety-critical states explicitly labeled. Keep merchant color inside clearly framed merchant content. - Plasmoids are rare, sentient creatures in the Angle universe. Curious and elusive, their appearance signals luck, discovery, reward, or approaching good fortune. Treat them as living beings—not effects or mascots summoned on command—and preserve their mystery through scarce appearances. They are the sole sanctioned glow exception: one slowly morphing field of item-quality color on Angle Black. Never use them as logos, routine UI, status treatments, or backgrounds behind long copy. Pause them offscreen and provide reduced-motion and WebGL fallbacks. - Keep a Plasmoid spatially still at rest, with only subtle internal surface motion suggesting life; it should not rhythmically pulse, rotate, or travel on its own. A pointer inside its immediate visible halo prompts one smooth, extended glide away without changing the creature’s size, followed by a natural loss of speed. It should anticipate container boundaries, commit to a smooth turn, and curve back into open space instead of bouncing mechanically off an edge. The creature must remain reasonably clickable. A successful click makes it swell slightly, wiggle, and jet in two or three quick, erratic directions. Keep reactions optional, constrain proximity response to the visible creature and halo, and include a keyboard equivalent. - Flow Particles are tiny, non-sentient microns of data moving beneath Angle products. A rare, harmless glitch may expose this connective current as a sparse field of microscopic white and item-quality points. Never imply that they are literal customer records, exposed personal data, or a security failure. Do not use them as confetti, cursor trails, loading indicators, or default backgrounds. Pause them offscreen, cap pixel density and frame rate, and provide reduced-motion and WebGL fallbacks. - **Collapsing Timelines:** "An aether vapor trail of discarded possibilities, evaporating the moment a single path is chosen." This approved treatment uses the upright 32 px white Angle symbol as a fully functional fine-pointer cursor and emits one contained white WebGPU trail that evaporates within six seconds. It represents discarded possibilities around a chosen path and is distinct from Flow Particles. Reserve it for high-expression Angle-owned spaces, landmark entry pages, and contained brand demonstrations. Never block interaction or imply literal predictions or customer data. Pause it offscreen, cap pixel density and frame rate, keep the native cursor under reduced motion or unavailable WebGPU, restore it on exit or failure, and dispose all GPU and input resources. - Warp is a monochrome starfield transition reserved for transporting someone into a genuinely different product context. Begin controlled, accelerate toward the viewer, and resolve decisively within 700–1,000 ms. Never use it for routine navigation, as a loading screen, or to delay a ready destination. Replace it with a direct crossfade under reduced motion; pause guideline demonstrations offscreen and provide a WebGL fallback. - Make 3D objects directly inspectable across X, Y, and Z rather than presenting a fixed animation. Support pointer drag and touch rotation, wheel and pinch zoom, keyboard equivalents, visible focus, and a predictable reset. Keep the object in frame, label its controls, and never require manipulation to understand essential information. Reduced motion removes autonomous movement—not user-initiated manipulation. Pause offscreen, cap pixel density and frame rate, and provide a useful static fallback when WebGL is unavailable. - Use Geist Sans for interfaces and communication. Use Geist Mono for identifiers, metrics, timestamps, and code. - Use Geist Pixel Square sparingly for short expressive headlines or accents. Grid, Circle, Triangle, and Line are specimen alternatives; never use Pixel for body copy, forms, tables, navigation, or the Angle wordmark. - Preserve every specified identity and rarity hex value. Use the current Geist light/dark scales for all supporting interface colors: surfaces, borders, muted text, focus, information, success, warning, and error. Keep these semantic colors distinct from rarity and pair status with a label or icon. - Support System, Light, and Dark themes in the brand library; persist an explicit choice. Keep approved asset and expression canvases fixed to their intended background. - Documentation may use a single neutral rule to separate independently addressable standards. Use 6 px control and small-surface radii, 12 px raised-surface and overlay radii, and 16 px Fullscreen material radii; reserve elevation for menus and modal context. - Use 12-column desktop grids, single-column mobile flow, restrained radii, and generous negative space. Open canvas is the default; a one-pixel rule is a local tool, not page architecture. - Use the spacing scale `4, 8, 12, 16, 24, 32, 48, 64`. - Establish hierarchy in this order: spacing, alignment and grid, typography, subtle surface change, local divider, bounded container, then elevation or overlay. - Add a divider, surface, border, radius, or elevation only when it communicates a relationship or behavior that would otherwise be unclear. If removing the boundary does not reduce comprehension or operability, leave it out. - Use one separation mechanism per boundary. Passive sections have zero nested containers by default; a nested container requires an interactive, state, ownership, density, or modal reason. - Use shadow only for elevation or physical state. Neumorphism may describe a local interactive state, but it must never become page architecture. - Write in active voice with specific outcomes, concrete nouns, and a clear next action. - Preserve accessible contrast, focus, keyboard operation, labels, touch targets, and reduced-motion behavior. - Use current owner-supplied partner marks with equal optical prominence and generous clearspace. Prefer approved monochrome artwork when available, preserve official color when it is not, and never imply endorsement, sponsorship, exclusivity, or a deeper relationship than Angle can substantiate. - Keep Tools separate from Partners. Show only materially used implementation technologies, use their current monochrome marks with plain names and equal optical prominence, and remove retired tools instead of maintaining a historical badge wall. - Flag exceptions instead of inventing new brand rules. ## Brand library workspace Use `/brand` as one continuous, vertically scrollable document. All foundations and component families remain present; navigation and search jump to anchors, and the sidebar tracks the reading position. Keep component state across anchor navigation. Legacy component URLs redirect to the corresponding section. ## WATCHDOG™ Angle WATCHDOG™ is the approved exception to the shared-symbol rule, authorized with the supplied WATCHDOG™ asset set. It does not authorize separate logos for other features. - Always write `WATCHDOG™` in all caps with the trademark symbol on every occurrence, including headings, navigation, labels, and body copy. Introduce the name as `Angle WATCHDOG™`. Keep filenames and URLs unchanged. Use the supplied `WATCHDOG™` wordmark as artwork, including its trademark detail; never retype it. - Use the white symbol and wordmark on dark backgrounds and the black versions on light backgrounds. Preserve the original proportions and generous surrounding space. - Do not redraw, crop, recolor, stretch, rotate, outline, glow, or add effects to either mark. - Prefer SVG for scalable use. Transparent PNGs are available for tools that cannot use vectors. The two preview PNGs are reference sheets, not transparent masters. - The canonical public files are under `https://www.anglehq.com/brand/watchdog/`: `angle-watchdog-black.svg`, `angle-watchdog-white.svg`, `angle-watchdog-wordmark-black.svg`, and `angle-watchdog-wordmark-white.svg`. Each SVG has a corresponding `-transparent.png` export. - The four SVG masters are also bundled in the canonical skill package’s `assets/`. Preserve the standard Angle wordmark and A-symbol guidance for the masterbrand. ## Product and interface work - Use one obvious primary action per decision area. - Run perimeter deletion and squint tests during review. Content hierarchy must read before container geometry, and every remaining boundary must be necessary for comprehension or operability. - Treat `/brand/components` as the working standard for Angle-branded public web surfaces and shared interaction principles. Product application UI follows the separate `angle-product-ui` canon. - Prefer fewer, context-aware surfaces over duplicated screens. Keep navigation, structure, and familiar controls stable while adapting content priority and the primary action to the user’s role, product state, goal, and moment. - Define and test a deterministic context matrix: inputs, eligible states, priority, primary action label and destination, fallback, and expected result. Change the action label and destination together, preserve secondary access, never move controls mid-interaction, and provide a safe default for missing or uncertain signals. - Design default, hover, active, focus, disabled, loading, empty, success, and error states. - Give icons explicit square dimensions, center marks inside fixed control geometry, render compact examples without CSS scaling, and keep floating panels fully visible. - Preserve 44 px mobile targets, group navigation, local table overflow, and zero page-level horizontal overflow. - Demonstrate component states visually and run the desktop/mobile component browser gate for geometry, keyboard behavior, visible focus, and WCAG A/AA checks. - Use 120 ms for direct feedback, 200 ms for state changes, and no more than 360 ms for page reveals. - Keep merchant color inside merchant previews rather than Angle navigation or controls. ## Creative work - Use one focal idea per slide, page, post, or frame. - Use crop, scale, grid, and contrast before decorative effects. - Keep customer photography natural and truthful. - Balance partner marks optically with generous clearspace and a neutral divider. Never force an unapproved recolor to create a false shared identity. ## Verify Confirm the mark, colors, typography, product name, grid, copy, accessibility, partner treatment, and real output size before delivery. Use the full portable skill package at `skills/angle-brand/` when repository access is available.