Precise
Use intentional hierarchy, alignment, and repetition. Every element earns its place.
Brand systemVersion 1.02026
Brand system
Standards for creating consistent products, stories, and experiences with precision.
01 / Principles
Precision with purpose.
The Angle system balances technical clarity with human outcomes. These principles guide every interface, deck, campaign, and conversation.
Direct
Say what matters in the fewest useful words. Make the next action unmistakable.
Premium
Create confidence through restraint, craft, and attention to small details.
Human
Lead with customer outcomes and real behavior, not machinery or internal terminology.
02 / Contextual design
Fewer screens. More relevance.
Contextual design is Angle’s approach to reducing interface sprawl. One stable surface responds to the user’s role, state, goal, and moment—bringing forward what matters now without sending people through a maze of separate screens.
CONTEXTUAL DESIGN
ONE SURFACE / MANY MOMENTSDashboardNorthstar GoodsOperator view
RoleOperatorStateSetup incompleteMomentFirst session
PRIMARY PRIORITY / NOW
Connect your store.
Bring customer and order activity into Angle before building your program./settings/integrations/shopifyConnectionNot started
Members—
ProgramDraft
01Connect your store
02Import customers
03Build your program
WHY THIS CHANGED
The first useful action is completing the data connection.
01 / Stable frameKeep the mental model intact.Navigation, structure, and familiar controls stay put so adaptation never feels like a different product.
02 / Adaptive priorityDesign for the moment.Reorder content and change the primary action when role, product state, intent, or urgency makes something else more useful.
03 / Clear reasoningMake change understandable.Use explicit signals and plain language. People should know why an action is being shown and where it will take them.
Contextual does not mean unpredictable. Never rearrange controls mid-interaction, hide necessary access, or use opaque recommendations to manufacture engagement. Define the inputs, states, hierarchy, action label, and destination as a deterministic system that can be explained and tested.
03 / Architecture
One masterbrand.
Angle products share one identity. Product names explain capability; they do not create separate visual brands.
MasterbrandAngle Store CreditProduct descriptor
Angle WalletProduct descriptor
Angle MembershipProduct descriptor
Angle ReferralsProduct descriptor
Angle EventsProduct descriptor
Do
Use “Angle + descriptor” for products and capabilities.
Avoid
Creating a new logo, typeface, or signature color for each feature.
04 / Logo
The symbol and the name.
The Angle wordmark is the primary expression of our name. The A symbol is its compact counterpart—a forward, open form built from a single geometric gesture.
Primary wordmarkReverse
Light background1×1×
Wordmark first
Use the wordmark when introducing Angle, on presentation covers, in external communications, and anywhere the symbol may not be recognized on its own.
Clearspace
The A is uniformly scaled to 50% inside a 1:1 black tile. Keep at least one quarter of the tile width clear on every side.
Minimum size
Use the complete tile at 24 px or larger on screens and 5 mm or larger in print. Use the wordmark when recognition would otherwise be ambiguous.
Do
Use the black square with the white A on every white or light background.
Avoid
Placing a freestanding black A on white, or stretching, outlining, glowing, or rotating the mark.
05 / Color
Black, white, then rarity.
Black and white own the Angle identity. When color carries meaning, use the World of Warcraft item-quality spectrum as a shared language for value, status, and progression.
Angle Black
#050505Graphite
#666666Mist
#EEEEEEWhite
#FFFFFF01 / FoundationIdentity stays monochrome.Use black, white, and neutral gray for Angle-owned surfaces, typography, navigation, and the logo.
02 / QualityColor signals relative value.Use the item-quality sequence consistently so a color means the same level of rarity across every product.
03 / RestraintAccents never take over.Apply quality color to compact indicators, borders, labels, charts, and moments of recognition—not entire branded surfaces.
Item-quality spectrum
A fixed progression from de-emphasized to exceptional.
ANGLE / QUALITY 00—07Poor
#9D9D9DDe-emphasized or lowest-value
Common
#FFFFFFDefault and widely available
Uncommon
#1EFF00Positive progress or earned value
Rare
#0070DDSelected, notable, or advanced
Epic
#A335EEPremium or high-tier
Legendary
#FF8000Major milestone or highest tier
Artifact
#E6CC80Exceptional and enduring
Heirloom
#00CCFFLegacy or account-wide value
Color reinforces meaning; it never carries meaning alone. Pair every quality color with a name, icon, tier, or value. Keep destructive and safety-critical states explicitly labeled rather than forcing them into the rarity scale.
06 / Typography
Hierarchy before decoration.
Use Inter for every interface and communication. Use JetBrains Mono sparingly for identifiers, metrics, timestamps, and technical details.
Display / 72
Built for loyalty.
Heading / 40
Recognize every customer.
Copy / 18
Angle brings store credit, membership, wallet passes, and experiences into one connected relationship.
Mono / 13
MEMBER_VALUE $284.20 +18.4%
Do
Use restrained weights, tight display tracking, and comfortable body leading.
Avoid
Mixing type families or setting long paragraphs in monospace.
07 / Grid & layout
Structure you can feel.
A visible grid gives Angle work rhythm and precision. It should organize content without competing with it.
12 columns.
One system.
One system.
24 px mobile gutter
40 px desktop gutter
40 px desktop gutter
4812162432486408 / Containment
Open by default.
Angle interfaces begin as open compositions. Grid, spacing, alignment, typography, and contrast establish the hierarchy; visible boundaries enter only when removing them would reduce comprehension or operability.
Member value
$284.20Available across wallet and store creditSpacing, alignment, and type already express the relationship. No perimeter is needed.
Issue store credit$50.00
One boundary makes a consequential, atomic interaction easier to understand and operate.
Member value$284.20
A section shell, card, nested card, radius, divider, and shadow repeat the same grouping.
Escalation ladder
Stop as soon as the relationship is clear.
- 01Spacing
- 02Alignment & grid
- 03Typography
- 04Surface change
- 05Local divider
- 06Bounded container
- 07Elevation / overlay
Perimeter deletionRemove each boundary. If nothing becomes harder to understand or use, keep it removed.
Squint testContent hierarchy should read before the boxes do.
One boundaryUse one separation mechanism instead of stacking border, fill, radius, divider, and shadow.
NestingPassive sections have zero nested containers. Every exception needs an interaction, state, ownership, density, or modal reason.
09 / Interface
Quiet until action matters.
Angle interfaces use open surfaces, concise labels, and clear state changes. Add a border or surface only when it makes a real relationship or behavior easier to understand.
Member overviewActive
Available store credit$128.40Updated just now
01Use a single clear primary action.
02Let spacing and type establish hierarchy.
03Pair status color with a text label.
10 / Imagery
Frame the world. Don’t repaint it.
Merchant photography and product imagery should feel true to their source. Angle supplies structure, typography, and context.
EditorialPeople, places, and participation.
ProductClear, useful, and in context.
DataEvidence with a point of view.
Do
Use honest contrast, purposeful crops, and real customer context.
Avoid
Heavy duotones, generic stock imagery, or decorative AI texture.
11 / Agents
Give intelligence a presence.
Agents are a growing roster of embodied helpers that make Angle’s intelligence contextual, expressive, and memorable. They appear with a clear purpose, produce the right prop for the moment, and leave before personality competes with the work.
ANGLE AGENT ROSTER / PROOF 02DIMENSIONAL CHARACTER STUDY / CONTROLLED VIEW
Active roster
02UnassignedProtocol available
03UnassignedProtocol available
04UnassignedProtocol available
MOVE TO OBSERVE / SELECT FOR HAPPY
Contextual prop systemThe Astral Ray notices the moment, circles the right prop, and guides attention toward one useful next action.
PROPCredit Shard
WHY NOW
A high-value member has not returned in 45 days.
PresenceFloat quietly and wait. The Astral Ray never performs for attention or competes with the primary task.
PersonalityExpress puppy-like curiosity through banking, eye direction, and brief movement. Happiness may escape as one buoyant aerial loop.
RarityUse the full particle-traced swirl only for exceptional milestones. Its scarcity is what makes the moment special.
The Retention Protocol agent is intentionally unnamed. Its form is an Astral Ray: a patient galactic familiar that floats nearby and waits to be useful. Eye direction, gentle banking, and a slow fin stroke carry most of its expression. One buoyant aerial loop may escape when it is happy; a lazy bank can pass a quiet moment. Reserve the full particle-traced swirl for exceptional milestones—its rarity is what makes it special. Future agents may change protocol and personality without changing this rule: presence should support the work, never compete with it.
12 / Plasmoids
A sign of good fortune.
Plasmoids are rare, sentient creatures that move through Angle’s products and world. Curious but elusive, they reveal themselves only occasionally. A sighting is understood as a sign of good fortune—a quiet signal that something valuable, surprising, or joyful is close.
PLASMOID
ANGLE UNIVERSE / RARE SIGHTING001 / OBSERVED ENTITYMeaningA Plasmoid sighting signals luck, discovery, reward, or a welcome turn in the journey.
BehaviorAt rest, they hold position with only subtle internal motion. Enter a Plasmoid’s personal space and it glides away in one long, smooth motion, sensing the limits of its space and curving naturally before it reaches them. Catch one and it will swell, shake, then jet in two or three angry directions.
AppearancesLet them emerge at rare moments of discovery, celebration, transition, or delight. Their scarcity preserves their meaning.
Their origins are unknown. Visually, Plasmoids live on Angle Black, move slowly, and carry colors from the item-quality spectrum. Never use them as logos, routine interface decoration, or status feedback. Always provide a still sighting when reduced motion is requested or WebGL is unavailable.
13 / Flow particles
The system, briefly exposed.
Flow Particles are tiny microns of data moving beneath every Angle product. Most of the time, the interface holds them out of sight. Occasionally, a harmless glitch thins the surface and the current becomes visible—a fleeting look at the living fabric behind the system.
FLOW PARTICLES
TRACE / SYSTEM VEILFor a moment,
the system shows through.
MeaningFlow Particles reveal the connective current carrying value, activity, and momentum through Angle.
BehaviorThey travel in continuous fields, bending around exchanges and gathering briefly where the system is most active.
SightingsUse a glimpse at rare transitions, hidden states, or moments when the boundary between interface and infrastructure becomes thin.
Flow Particles are not literal customer records, and a sighting never implies exposed personal data or a broken product. Keep fields abstract, temporary, and non-interactive. Use one field at a time, preserve the black frame, and provide a still trace for reduced motion or unavailable WebGL.
14 / Warp
Between here and elsewhere.
Warp is the sensation of passing through the system at impossible speed. Angle uses it when transporting someone into a genuinely different product context—turning navigation into a brief journey through time and space.
WARP
TRANSIT / CONTEXT SHIFTLeave one context.
Arrive in another.
MeaningWarp marks a true contextual crossing: the user is leaving one part of the Angle universe and arriving somewhere meaningfully different.
BehaviorBegin controlled, accelerate toward the viewer, and resolve decisively into the destination. The movement should feel fast, dimensional, and inevitable.
UseReserve it for full-context transitions, hidden worlds, or rare jumps between major product areas—not ordinary navigation.
Warp is a transition, never a loading screen or a reason to delay the destination. Keep the full passage between 700 and 1,000 milliseconds, use a monochrome field on Angle Black, and never place controls or essential copy inside it. Replace the journey with a direct crossfade when reduced motion is requested.
15 / Astral plane
Let people move through depth.
When Angle presents an object in 3D, it should respond to the person viewing it. Give people direct control across the object’s X, Y, and Z axes so they can inspect every side instead of watching a fixed animation.
3D OBJECT
DIRECT MANIPULATION / X Y ZIf it has depth,
let people move it.
AxesSupport inspection across X, Y, and Z. Do not lock a dimensional object to a single turntable view unless its shape requires it.
InputUse drag and touch to rotate, wheel and pinch to zoom, and provide keyboard equivalents for every essential movement.
RecoveryKeep focus visible, preserve the object in frame, and provide a predictable reset to its useful default orientation.
Interaction should improve understanding, not gate it. Label the available controls, keep nearby navigation usable, and provide an equivalent static view when 3D rendering is unavailable. Reduced motion removes autonomous movement—not direct manipulation initiated by the user.
16 / Motion
Move with intention.
Motion explains hierarchy and state. Use short, direct transitions that feel engineered rather than theatrical.
Fast
120 msPress, hover, focus
Base
200 msPanels, menus, state
Slow
360 msPage-level reveals
Reduced motion is part of the design. Preserve meaning and state while removing non-essential movement.
17 / Voice
Clear, capable, human.
Angle speaks like an experienced operator: concise, specific, optimistic, and comfortable with complexity without exposing it.
Reward your best customers.
Lead with the outcome. Use active voice and concrete nouns.
Give members 10% back as store credit.
Prefer a real mechanism or result over a broad promise.
Choose a date to send this reward.
Labels should explain the next action, not the interface itself.
Something went wrong. Try again.
State the problem calmly and provide a useful recovery path.
Partners
Tools
20 / Applications
One system, many surfaces.
Use the same foundations across software and creative work. Templates change format, not identity.
ProductMember
overview
overview
PresentationRetention
is a system./ 2026
is a system.
/ 20265.3×more customer value
Case study / 01Ruffwear
Pack Perks
Pack Perks
Building loyalty for dogs and their people.
21 / Resources
Built to be used.
Download approved assets directly. Do not recreate the symbol from screenshots or substitute a lookalike.
The supplied A artwork is currently the approved web master for this library. Replace it with the final trademark-ready vector master before broad external distribution.
22 / Governance
A living standard.
The brand system should become more useful over time without becoming more complicated.
OwnerAngle Brand
Approves identity, voice, and creative exceptions.
Version1.0 / Foundations
Initial system for web, software, and presentations.
Change ruleUpdate the source
Change the library and skill together—never patch one downstream asset.