[ { "id": "button-primary", "name": "Primary action", "category": "Actions", "html": "
", "note": "One dominant action per decision area. The ink button is the everyday default; lime marks a deliberate brand moment.", "tokens": "44px minimum · 22px horizontal padding · full pill", "source": "iPhone / homepage button anatomy; PtaKaro colors" }, { "id": "button-secondary", "name": "Secondary & text actions", "category": "Actions", "html": "
", "note": "Use a secondary action beside a primary CTA; a text action is useful for navigation with less visual weight.", "tokens": "1px border · 16–24px action gap", "source": "iPhone paired CTA pattern" }, { "id": "button-sizes", "name": "Button sizes", "category": "Actions", "html": "
", "note": "Compact buttons belong in dense toolbars. Standalone mobile controls still need a 44px touch target, using wrapper padding when needed.", "tokens": "40 / 44 / 52px · 14 / 17 / 17px text", "source": "PtaKaro size adaptation" }, { "id": "button-states", "name": "Button states", "category": "Actions", "html": "
", "note": "Hover changes surface; press compresses 2%; focus remains distinct from selection. Keep a useful label during loading.", "tokens": "160ms feedback · 2px focus outline · disabled semantic attribute", "source": "Source state mechanics; loading proposed extension" }, { "id": "icon-actions", "name": "Icon actions & tooltips", "category": "Actions", "html": "
Copy link
", "note": "Every icon-only action needs an accessible name. Tooltips supplement that name and appear on hover and keyboard focus.", "tokens": "24px icon · 44px hit area · circular surface", "source": "iPhone card controls and paddle navigation" }, { "id": "product-card", "name": "Product card", "category": "Cards", "html": "
Example product

Device profile

One clear benefit.
Room for the product to breathe.

", "note": "Reserve a consistent image area. Align names, color choices, descriptions, and CTAs across a shelf. Use current, sourced product data in production.", "tokens": "24px radius · 32px padding · 230px image area", "source": "Mac product shelf + iPhone lineup" }, { "id": "feature-card", "name": "Immersive feature card", "category": "Cards", "html": "
Built around you

Less noise.
More clarity.

", "note": "One story, one image focus, one reveal action. Keep the headline readable against every crop. Avoid covering the focal point.", "tokens": "28px radius · 32px inset · plus at bottom right", "source": "iPhone feature gallery" }, { "id": "editorial-card", "name": "Editorial card", "category": "Cards", "html": "

Buying guide · Example

Find your kind of phone.

A short, useful introduction to the decision.

", "note": "Use editorial cards for explanation and discovery, with a clear category, concise title, and one next step.", "tokens": "24px radius · 28px copy inset · no heavy border", "source": "Mac shopping guide cards" }, { "id": "benefit-card", "name": "Benefit & service card", "category": "Cards", "html": "

Details you can compare.

Keep the benefit short, specific, and easy to scan.

", "note": "A supporting benefit should explain a concrete experience. Do not turn every card into a banner with competing CTAs.", "tokens": "24px radius · 28px title · 17px body", "source": "Mac store difference + iPhone shopping benefits" }, { "id": "review-card", "name": "Review card", "category": "Cards", "html": "
★★★★☆Sample review

A clearer way to choose.

This sample demonstrates the shape of a review: a short title, readable excerpt, and quieter author metadata.

Example user · Illustrative content

", "note": "Separate the review title, rating, excerpt, and attribution. Examples in this guide are labeled and are not customer testimonials.", "tokens": "21px title · 17px body · 12px metadata", "source": "App Store reviews" }, { "id": "app-card", "name": "App or compact item", "category": "Cards", "html": "
\"PtaKaro
PtaKaro Library
Example app card
", "note": "A compact identity row uses a square icon, two levels of copy, and a single trailing action.", "tokens": "64px icon · 16px gap · 40px compact action", "source": "App Store app identity and related-app shelves" }, { "id": "collection-folder", "name": "Collection folder", "category": "Collections", "html": "
", "note": "A PtaKaro extension for organizing saved products or files. The folder shape signals a collection, not a single product. Selection is demonstrated locally.", "tokens": "20px radius · 24px inset · named item count", "source": "Proposed extension from store grouping and card mechanics" }, { "id": "folder-row", "name": "Folder list row", "category": "Collections", "html": "
Comparison exports
Example collection · 4 items
", "note": "Use list rows when names, dates, or file sizes matter more than artwork. Keep the folder icon and text baseline consistent.", "tokens": "44px action · 12px radius · 18px vertical inset", "source": "Proposed PtaKaro collection pattern" }, { "id": "global-navigation", "name": "Global navigation", "category": "Navigation", "html": "", "note": "Keep the global bar quiet, stable, and predictable. Collapse to an explicitly labeled menu on narrow screens.", "tokens": "60px PtaKaro header · 13px links · restrained divider", "source": "Apple global navigation adapted to PtaKaro" }, { "id": "breadcrumbs", "name": "Breadcrumb trail", "category": "Navigation", "html": "", "note": "Expose the current location with a short path. Decorative chevrons stay out of the accessible name.", "tokens": "12px text · 10px gap", "source": "Apple global footer breadcrumb" }, { "id": "tabs", "name": "Tabs", "category": "Navigation", "html": "
Start with the main story and the most useful details.
", "note": "Tabs switch panels in the same context. Use left/right arrows, Home, and End; one tab is in the tab order.", "tokens": "44px minimum · 2px active indicator", "source": "Adapted from source platform and gallery navigation" }, { "id": "segmented-control", "name": "Segmented control", "category": "Navigation", "html": "
", "note": "Use a segmented control for a small, mutually exclusive set of choices. Selected is a persistent state, not the same as hover.", "tokens": "4px inner gutter · 40px segment · pill container", "source": "App Store platform choice / PtaKaro density extension" }, { "id": "pagination", "name": "Pagination", "category": "Navigation", "html": "", "note": "Use explicit pages for result sets; use arrows and swipe for a gallery. Disable unavailable directions.", "tokens": "44px targets · tabular numeric labels", "source": "Proposed extension using source paddle mechanics" }, { "id": "search-field", "name": "Search field", "category": "Inputs", "html": "", "note": "A visible label explains scope. Provide useful empty results; do not use the placeholder as the only label.", "tokens": "52px height · 12px radius · 17px input", "source": "Global search + App Store sidebar search" }, { "id": "text-fields", "name": "Text field & validation", "category": "Inputs", "html": "
", "note": "Explain the correction next to the field and preserve the value. Validation should identify the problem without blame.", "tokens": "52px input · 8px label gap · 12px helper", "source": "Proposed form pattern adapted to source controls" }, { "id": "select-control", "name": "Select & model picker", "category": "Inputs", "html": "", "note": "Prefer a native select for accessible keyboard and mobile behavior. Keep comparison selectors above their columns.", "tokens": "52px height · 1px outline · 12px radius", "source": "Watch model selector" }, { "id": "choice-controls", "name": "Checkboxes & radio buttons", "category": "Inputs", "html": "
Example view
", "note": "Checkboxes allow independent choices. Radios represent one choice in a labeled group. Keep the whole label clickable.", "tokens": "20px indicator · 44px row target · 12px gap", "source": "Proposed comparison controls" }, { "id": "switch", "name": "Switch", "category": "Inputs", "html": "", "note": "A switch applies an immediate on/off setting. Use a checkbox for agreement or a choice submitted later.", "tokens": "44×26px track · 22px thumb · 200ms movement", "source": "Proposed PtaKaro control" }, { "id": "stepper", "name": "Quantity stepper", "category": "Inputs", "html": "
1
", "note": "Keep a clear minimum and maximum; disable the exhausted direction and announce value changes.", "tokens": "44px controls · tabular numbers · 12px border radius", "source": "Proposed commerce control" }, { "id": "accordion", "name": "Accordion", "category": "Overlays", "html": "
What belongs in the first view?

The essential decision. Put the key fact, product, or next step in view; reveal supporting explanation when requested.

How much information should a card hold?

One topic, a concise title, a small amount of supporting text, and one primary interaction.

", "note": "Use disclosure for supporting detail. Native details elements provide keyboard access and expanded state without extra ARIA.", "tokens": "21px summary · 20px vertical spacing · fine divider", "source": "iPhone ecosystem accordion / app detail disclosure" }, { "id": "modal", "name": "Detail dialog", "category": "Overlays", "html": "", "note": "A modal keeps the surrounding page in place. Trap focus, support Escape, include a visible close action, and return focus to its trigger.", "tokens": "28px radius · 48px content inset · 85dvh maximum", "source": "iPhone feature overlays + App Store review dialog" }, { "id": "menu", "name": "Action menu", "category": "Overlays", "html": "
", "note": "These example actions remain ordinary buttons. Add menu/menubar ARIA only when the full menu keyboard interaction is implemented.", "tokens": "16px outer radius · 8px padding · 40px rows", "source": "Proposed collection action pattern" }, { "id": "alerts", "name": "Status messages", "category": "Feedback", "html": "
Collection savedYour changes are ready.
One detail needs attentionReview the highlighted field.
Couldn’t save this timeYour changes are still here. Try again.
", "note": "Pair color with an icon and clear text. Error copy explains what happened, what remains safe, and what to do next.", "tokens": "12px radius · 18×20px padding · 14px text", "source": "Proposed system feedback" }, { "id": "toast", "name": "Confirmation toast", "category": "Feedback", "html": "", "note": "Use brief non-blocking feedback for a completed action. Keep critical errors persistent in context instead of hiding them in a toast.", "tokens": "16px radius · 14px copy · 4 second display", "source": "Proposed completion feedback" }, { "id": "loading", "name": "Loading & progress", "category": "Feedback", "html": "
65%
", "note": "Reserve the final content dimensions before assets arrive. Use actual progress only when it is measurable. Reduced motion removes shimmer.", "tokens": "1.8s skeleton cycle · 6px progress track", "source": "Proposed loading behavior; source reserved media geometry" }, { "id": "empty-state", "name": "Empty & zero results", "category": "Feedback", "html": "

Your shortlist starts here.

Save a device while exploring, then find it in this collection.

", "note": "Describe the current state, explain how to change it, and offer one relevant action. Empty is not an error.", "tokens": "44px illustration · 24px title · 15px description", "source": "Proposed saved-collection state" }, { "id": "badges", "name": "Labels, badges & metadata", "category": "Data", "html": "
NewSavedExample specificationUpdated today · Sample
", "note": "Use badges sparingly to mark meaningful status. Metadata remains quieter than the headline and primary action.", "tokens": "12px text · pill tag · semantic color pairing", "source": "iPhone new label + App Store metadata" }, { "id": "rating-metrics", "name": "Ratings & metrics", "category": "Data", "html": "
4.5Example rating
24Example devices
★★★★☆Sample rating
", "note": "Use tabular numerals, consistent units, and quieter descriptors. Numbers in this specimen are illustrative.", "tokens": "36px metric · 12px descriptor · consistent baseline", "source": "App Store information ribbon" }, { "id": "comparison-table", "name": "Comparison table", "category": "Data", "html": "
Example comparison structure
FeatureModel AModel B
DisplayCompactLarge
FinishInkSilver
Best forEveryday useMore screen space
", "note": "Comparisons rely on alignment, not decorative cards. Every feature stays in the same row with named column and row headers.", "tokens": "16px row inset · fine rules · aligned columns", "source": "Watch comparison matrix" }, { "id": "list-row", "name": "Content list row", "category": "Data", "html": "", "note": "Dense information should still have a clear leading element, primary label, secondary label, and trailing metadata.", "tokens": "44px leading element · 16px gaps · 1px divider", "source": "App Store information density / proposed saved list" }, { "id": "gallery", "name": "Horizontal gallery", "category": "Layout", "html": "
Example 1

Look closer.

One clear idea with its own breathing room.

Example 2

Compare clearly.

One clear idea with its own breathing room.

Example 3

Choose calmly.

One clear idea with its own breathing room.

", "note": "Allow touch scroll and keyboard access. A partial next card suggests more content; arrows never replace scrolling.", "tokens": "24px desktop gap · 20px mobile gap · scroll snap", "source": "iPhone and Mac card galleries" }, { "id": "footer", "name": "Footer & utility navigation", "category": "Layout", "html": "", "note": "Group footer links by purpose. Reduce contrast and type size without sacrificing legibility; stack or disclose groups on mobile.", "tokens": "12px utility type · 32px group gap · subtle background", "source": "Apple footer navigation" } ]