Button
Starts an immediate action or advances a focused flow.
Angle product system / Visual draft 0.1
Every interface starts here.
A complete working catalog for refining the controls, patterns, and interactions shared across Angle products.
Core primitives45Default building blocks
Composed patterns6Reusable product structures
Extended decisions15Specialized and replaced
One visual workbench. Sixty-six decisions.
Everything below is intentionally local and editable. We will refine the system here before packaging or distributing it to Angle applications.
66 / 66 surfaces
Actions
4 standardsForms
16 standardsCheckbox
Selects independent options or confirms an explicit agreement.
Radio Group
Chooses exactly one option from a visible set.
Open standard
Switch
Changes a persistent binary setting immediately.
Open standard
Slider
Selects an approximate value within a known range.
Open standard
Input
Collects a short, single-line value.
Open standard
Textarea
Collects longer freeform content.
Open standard
Label
Names a control and defines what information is expected.
Program name Required
Labels use sentence case and remain visible after entry.
Field
Provides the canonical anatomy for labels, controls, help, and validation.
Open standard
Input Group
Combines an input with a prefix, suffix, icon, or adjacent action.
Open standard
Native Select
Uses the platform picker for a compact list of options.
Open standard
Select
Chooses one option from a styled list.
Open standard
Combobox
Searches and chooses from a long or dynamic option set.
Calendar
Presents dates for selection or reference.
August 2026
MTWTFSS
Input OTP
Collects a short one-time verification code.
Open standard
Date Picker
Combines date entry, a calendar, and validation.
August 2026
MTWTFSS
Questionnaire
Guides someone through a deliberate sequence of questions.
Question 1 of 3
What should members earn?Overlays
12 standardsAccordion
Expands sections in a vertically stacked information set.
How store credit works
Angle uses Shopify’s native store credit so value stays clear and usable online or in store.
Where members see rewards
Angle uses Shopify’s native store credit so value stays clear and usable online or in store.
When credit expires
Angle uses Shopify’s native store credit so value stays clear and usable online or in store.
Collapsible
Shows or hides one supporting region.
Advanced conditions
Dialog
Focuses a contained task without leaving the current context.
Open standard
Alert Dialog
Requires confirmation before an irreversible or high-impact action.
Open standard
Drawer
Brings a temporary task up from the lower edge, especially on touch screens.
Filter members
Sheet
Opens supporting content from a side edge while preserving page context.
Member profileAvery Morgan
Popover
Displays compact interactive content anchored to a trigger.
Add filter
Filter members by
Tooltip
Provides a short explanation for an unfamiliar control.
Copy member ID
Dropdown Menu
Presents contextual actions from a compact trigger.
Hover Card
Previews useful information without opening a new context.
AMAvery MorganEpic member since 2024
$1,842 lifetime value · 12 orders
Context Menu
Exposes actions related to a specific object at the pointer location.
Right-click member row
Menubar
Organizes application-level commands into persistent menus.
Data display
21 standardsCard
Groups content that must be understood and acted on as one unit.
Updated after the member’s latest return.
Item
Represents one object in a list with metadata and an optional action.
AMAvery Morganavery@example.com · Epic tierActive
Separator
Creates a quiet structural boundary between related regions.
Program settings
Member experience
Member experience
or
AdvancedAspect Ratio
Reserves predictable space for media before it loads.
16:9
Merchant storyMedia keeps its frame before loading.
Direction
Establishes left-to-right or right-to-left reading and control behavior.
LTRMember activity
RTLنشاط العضو
Alert
Communicates a relevant status, warning, or recovery path in context.
Program saved as a draft
Publish when the member experience is ready.
Badge
Displays compact status, category, or quality information.
ActiveRareEpicDraft
Progress
Shows determinate completion toward a known result.
Epic tier progress72%
$280 more in eligible spend
Empty
Explains why a useful region has no content and what to do next.
No members match these filters
Clear a filter or search for a different customer.
Skeleton
Preserves layout while content is loading.
Spinner
Indicates brief indeterminate activity.
Updating member value…
Sonner
Confirms brief outcomes without interrupting the current task.
Program publishedMembers can now see their benefits.
Table
Presents structured values that benefit from row and column comparison.
| Member | Event | Value | Status |
|---|---|---|---|
| Avery Morgan | Credit issued | $24.00 | Complete |
| Jamie Chen | Tier changed | Epic | Complete |
| Robin Hale | Return | −$18.40 | Review |
Avatar
Represents a person or organization in compact interface contexts.
AM
JC
AMJCRH+8
Kbd
Displays a keyboard key or shortcut.
Open command menu⌘+K
Typography
Defines the hierarchy and rhythm of product content.
Display / 48
Recognize every customer.
Body / 16Build a loyalty experience that adapts to the member, their value, and the moment.
MEMBER_VALUE $284.20 +18.4%Data Table
Combines tabular comparison with sorting, filtering, selection, and row actions.
| Member | Tier | Value | |
|---|---|---|---|
| Avery Morgan | Epic | $1,842 | |
| Jamie Chen | Rare | $980 | |
| Robin Hale | Common | $220 |
Chart
Makes a trend, comparison, or distribution easier to understand than a table alone.
Returning member value$284.20+18.4% this period
1234567
Carousel
Browses a short sequence of visual peers in constrained space.
01 / 03Store credit
$128.40 available
Scroll Area
Constrains overflow inside a defined supporting region.
01
Credit issuedAugust 7, 2026
02
Member joinedAugust 6, 2026
03
Tier advancedAugust 5, 2026
04
Wallet addedAugust 4, 2026
05
Credit issuedAugust 3, 2026
06
Member joinedAugust 2, 2026
07
Tier advancedAugust 1, 2026
08
Wallet addedAugust 1, 2026
Resizable
Lets people allocate space between adjacent work regions.
Conversation
5 standardsAttachment
Represents a file added to a message, task, or record.
Bubble
Groups one conversational turn with its author and state.
Angle
Your member import is ready to review.
10:42 AMYou
Show me any rows that need attention.
10:43 AM · SentMarker
Marks a boundary, event, or unread position in a message stream.
3 new messages
Today · 10:42 AM
Message
Displays one complete conversational contribution and its actions.
I found three members whose imported email addresses need review before enrollment.
Message Scroller
Keeps a growing message history readable while new content arrives.
The import contains 284 members.
Check the file for anything that needs attention.
New messages
Three email addresses need review.
System decisions
2 standardsForm
Upstream abstraction replaced by Angle’s Field anatomy and explicit adapters.
Angle decision / Replace
Compose with Field.
Keep one visual and accessibility contract, then connect the form library required by the product.
Toast
Duplicate notification abstraction replaced by Sonner.
Angle decision / Replace
Use Sonner.
One notification system means one placement, timing model, accessibility behavior, and upgrade path.
Changes savedProgram settings are up to date.