Precise
Use intentional hierarchy, alignment, and repetition. Every element earns its place.
Brand system / 01
One.Everywhere.
A cohesive system for creating 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 / 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.
03 / 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.
04 / Color
Black, white, and exactly enough.
Neutral contrast owns the brand. Functional color communicates meaning; merchant color stays inside merchant content.
Angle Black
#050505Graphite
#666666Mist
#EEEEEEWhite
#FFFFFFInformation
#0070F3Success
#17A673Warning
#C47A0AError
#D12F3FFunctional only. Semantic colors never become campaign themes, decorative gradients, or product identities.
05 / 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.
06 / 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
4812162432486407 / Interface
Quiet until action matters.
Angle interfaces use neutral surfaces, crisp borders, concise labels, and clear state changes. Decoration never competes with the task.
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.
08 / 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.
09 / 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.
10 / 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.
11 / 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.
12 / 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.
13 / 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.