Give one thing priority.
Each section has one main message. A headline, product image, or comparison decision leads; everything else supports it.
PtaKaro / Brand & interface system / v1.0
Clarity.
In every detail.
A complete working foundation for how PtaKaro looks, feels, moves, and helps people choose.
Designed to feel simple.
Look closer ↗
Space is part of the interface.01 FoundationsIdentity, color, type, space02 ComponentsLive examples and source03 BehaviorMotion, states, accessibility04 EvidenceMeasured reference details
01 / The idea
Quiet design. Clear decisions.
Apple’s references are the study material. PtaKaro’s identity, content, and product purpose make the resulting system its own.
Use space deliberately.
Large section gaps separate ideas. Smaller, consistent gaps bind labels to values and actions to the content they affect.
Reveal detail progressively.
Keep the first view useful and calm. Let people open a story, expand specifications, or inspect a comparison when they need depth.
Make patterns predictable.
A button looks and behaves like a button. Repeated cards align; repeated controls keep the same location and states.
Let content create contrast.
Use white, near-white, ink, and generous negative space as the default. Lime is a selective brand accent, not a page-wide fill.
Move with a purpose.
Motion acknowledges input, connects states, or reveals hierarchy. Avoid perpetual decoration and unnecessary scroll hijacking.
This is the design foundation for future PtaKaro work. The earlier Apple page recreations remain available as study pages; this guide documents the system to apply to PtaKaro’s own experiences.
02 / Brand identity
Recognizable, without shouting.
Keep the approved lowercase wordmark and open-shoulder “p” symbol. Build the interface around them, rather than redrawing the mark.
Primary / Ink on whiteReverse / White on inkSymbol / Ink on lime| Rule | PtaKaro standard |
|---|---|
| Clear space | Keep at least half the symbol height around the mark. Never let another label, edge, or icon enter that space. |
| Minimum digital size | Wordmark: 104px wide. Symbol: 20px. Use the dedicated favicon at 16–32px. |
| Placement | Align the wordmark with the content gutter. Use one main brand mark in a view; avoid repeating it in every component. |
| Contrast | Ink on white, paper, or lime. White or lime on ink. Avoid lime text on white. |
| Do not | Stretch, outline, rotate, add shadows to, or rebuild the wordmark with typed text. |
| Asset formats | SVG for interface and print masters. PNG for platforms requiring raster. ICO and PNG for browser icons. |
03 / Color
A restrained palette, with a pulse.
The core brand colors stay intact. A neutral interface scale carries most of the content; semantic colors communicate meaning.
Click a swatch to copy its value. Brand ink and lime are identity colors; Apple-like neutrals and blue utility links are deliberate PtaKaro UI adaptations.
Color roles, not isolated hex codes.
| Role | Light surface | Dark surface | Usage |
|---|---|---|---|
| Primary text | #101827 | #F5F5F7 | Headlines, values, important labels |
| Secondary text | #536071 | #BDC4CE | Descriptions, help text, secondary metadata |
| Tertiary text | #6E6E73 | #A9B0BA | Small supporting labels; check contrast |
| Surface | #FFFFFF | #101827 | Default content canvas |
| Subtle surface | #F5F5F7 | #1C2738 | Section alternation, quiet cards, grouped controls |
| Border | #D2D2D7 | #495365 | Decorative separators; use the stronger control border for fields |
| Control border | #86868B | #929AA8 | Meaningful field and control boundaries |
| Primary action | Ink / white text | White / ink text | Main action in an ordinary decision area |
| Brand accent | Lime / ink text | Lime / ink text | Selected brand moments, not warnings or errors |
| Links / focus | #0066CC | #86BFFF / #8FC5FF | Navigation, focus visibility; do not rely on color alone |
Contrast workbench
Readable by design.The quick brown fox jumps over the lazy dog.
04 / Typography
Hierarchy you can feel.
Use a native system sans for the product interface. Keep Plus Jakarta Sans for brand-led communication and the approved identity; use Noto Sans Arabic for Urdu and Arabic.
Display / 80 → 64 → 48
Less, but clearer.
Section / 56 → 48 → 28
Room for the important things.
Card title / 28 → 24 → 21
A headline with a purpose.
Body / 17 / 25
Make the product understandable before asking someone to make a decision. Short paragraphs and a steady reading rhythm do more than extra decoration.
Brand voice / Plus Jakarta Sans
Find what fits you.
Urdu / Noto Sans Arabic / generous line height
اپنے لیے بہتر انتخاب کریں۔
| Role | Desktop | Tablet | Mobile | Weight |
|---|---|---|---|---|
| Display | 80 / 84px | 64 / 68px | 48 / 52px | 600 |
| Section headline | 56 / 60px | 48 / 52px | 28 / 32px | 600 |
| Card title | 28 / 32px | 24 / 28px | 21 / 25px | 600 |
| Lead paragraph | 21 / 29px | 21 / 29px | 19 / 27px | 400 |
| Body | 17 / 25px | 17 / 25px | 17 / 25px | 400 |
| Compact / helper | 14 / 20px | 14 / 20px | 14 / 20px | 400–600 |
| Caption / legal | 12 / 16px | 12 / 16px | 12 / 16px | 400 |
These sizes follow the measured marketing hierarchy. Tracking is font-dependent: the live Apple page uses SF Pro-specific values. PtaKaro defaults to modest negative tracking only on headings; never copy SF Pro tracking blindly into another font. Do not bundle Apple’s proprietary fonts.
05 / Space & rhythm
Breathing room is a system.
Use a 4px base with an 8px working rhythm. Small spaces connect related elements; large spaces mark a change in subject.
| Relationship | Desktop | Mobile |
|---|---|---|
| Icon to label | 8px | 8px |
| Label to input / metadata to value | 8px | 8px |
| Title to short description | 12–16px | 12–16px |
| Paired actions | 16–24px | 16px |
| Card interior | 32px | 24px |
| Cards in a gallery | 24px | 20px |
| Section title to content | 48px | 32px |
| Between major sections | 120px; 160px for major narrative breaks | 64–80px |
| Outer content gutter | 6.25vw, with a content maximum | 6.25vw; about 24px at 390px |
Feel the difference
Same content. Different rhythm.
Let the idea breathe.
Spacing tells people what belongs together, and what matters next.
06 / Layout
Four densities. One visual language.
The reference pages are not built from one universal grid. Choose a layout mode for the task, then preserve its internal rhythm.
Marketing / story
Wide visual stages, generous headlines, horizontal feature galleries, and 120–160px section spacing. Give each story a clear beginning and end.
Store / discovery
Repeated shelves, consistent card heights, purposeful partial-card previews, and a direct path from discovery to details.
Comparison / decision
Stable columns, matched rows, grouped specifications, sticky model selection, and smaller typography. Alignment is the primary visual structure.
App detail / inspection
A clear identity header, compact information ribbon, screenshot shelves, ratings, disclosures, and a sidebar that collapses on mobile.
| Layout token | Recommendation | Why |
|---|---|---|
| Content width | 87.5vw with max-width: 1440px | Retains a consistent optical gutter across desktop sizes |
| Reading width | max-width: 680px, usually 55–70 characters | Prevents wide paragraphs becoming difficult to track |
| Grid | 12 desktop columns; 8 tablet; 4 mobile | Use for alignment, not as a reason to fill every column |
| Card rows | Use equal media areas and stable copy zones | Align CTAs without forcing every paragraph to the same length |
| Full bleed | Let media span the viewport only for a deliberate hero or gallery | Creates emphasis when used selectively |
07 / Surfaces & depth
Depth, used sparingly.
Most separation comes from space and tonal surfaces. Borders and shadows should explain grouping or interactivity.
Control12px · 1px border
Card24px · quiet shadow
Feature28px · immersive surface
Overlay28px · clear elevation
| Element | Radius | Depth treatment |
|---|---|---|
| Tiny labels / tooltip | 6–8px | No shadow or a restrained shadow |
| Inputs / compact rows | 12px | 1px border; focus ring on interaction |
| Collection folder | 20px | Quiet outline; subtle lift when interactive |
| Standard card | 24px | 0 4px 14px / 4% ink |
| Feature / modal | 28px | Feature: no shadow by default. Modal: 0 20px 80px / 20% ink |
| Pill / icon control | 999px / 50% | Surface color distinguishes state |
| Interactive card hover | Same radius | 0 8px 28px / 9% ink; a 4px lift |
Measured references differ: Mac store cards use an 18px radius and a 1.01 hover scale; iPhone feature cards use 28px and a width-dependent hover scale. PtaKaro’s standardized 24px/28px surfaces above are intentional adaptations.
08 / Component library
Built to use, not just look at.
Every specimen includes working states, usage guidance, and copyable HTML. The component stylesheet and behavior script are included in the downloadable kit.
09 / Actions
One clear next step.
A CTA is a decision, not decoration. Match the visual weight of the button to the importance of the action.
| State | Appearance | Behavior |
|---|---|---|
| Default | Ink or lime fill; clear, concise verb | Use a real button for actions and a link for navigation |
| Hover | Slight change in fill; no dramatic glow | Only on hover-capable devices |
| Pressed | Scale to 0.98 | Immediate acknowledgment; restore on release |
| Keyboard focus | Visible 2px blue outline with 4px offset | Never remove the focus indicator |
| Disabled | Quieter fill and text; no movement | Use disabled; explain why if it is not obvious |
| Loading | Keep width stable; spinner with text | Set aria-busy; prevent duplicate submission |
| Destructive | Red, separated from ordinary actions | Name the affected object; provide confirmation for irreversible actions |
Label actions with the outcome: “Compare models”, “Save collection”, “Download guide”. Avoid ambiguous “Submit”, decorative ALL CAPS, and multiple primary buttons competing in the same card.
10 / Card anatomy
A container with a job.
Use the card type that matches the information. Product cards, feature stories, guides, reviews, and services have different content needs.
A useful category
One idea.
Clearly presented.
2A short description helps people decide whether to go deeper.
34- Context
A small category or status sets expectations without competing with the title.
- Headline & media
Lead with a benefit or recognizable product. Reserve image dimensions and protect its focal point.
- Supporting detail
Keep copy concise. Across a product row, align equivalent facts and prices.
- Action
Use one clear primary interaction. Avoid nesting buttons inside a clickable card link.
Content-first card
White or near-white surface, short copy, soft corners. Use for services, guides, and neutral information.
Immersive story card
Full-bleed imagery with carefully checked contrast. Put an explicit reveal control in a predictable corner.
Product card
A stable image stage, product name, finish choices, price or key fact, then action. Product imagery gets visual priority.
11 / Folders & collections
Save things in a place that makes sense.
Folders are a PtaKaro extension, built from the same quiet card language. Use them for shortlists, exports, saved comparisons, or reference files.
| State | Rule |
|---|---|
| Default | Folder shape, clear collection name, honest item count |
| Hover | Small lift and slightly stronger shadow |
| Selected | Persistent outline and subtle brand-tinted surface; announce selection |
| Empty | Explain what can be added and offer one useful action |
| Renaming | Keep the current value; support Escape to cancel and Enter to save |
| Shared / private | Use a text label and appropriate icon, not color alone |
| Loading / error | Reserve the folder dimensions; keep the name visible and expose retry |
Folder, collection-management, and application error states are proposed extensions. They are not claimed to be components copied from the supplied Apple pages.
13 / Galleries
More to explore, without more clutter.
A gallery lets people browse related items while preserving a clean vertical story. The content must remain usable with touch, mouse, and keyboard.
Visible continuation
Show part of the next card. Keep the leading card aligned to the content gutter and use stable gaps.
Manual control first
Support swipe, wheel/trackpad, focus, and named previous/next controls. A gallery must not require autoplay.
Motion with control
When autoplay is appropriate, provide pause; pause when the page is hidden. Do not autoplay under reduced motion.
Announce meaningful state
Expose the current slide or tab and its name. Do not continuously announce decorative timing updates.
14 / Comparison
Alignment does the heavy lifting.
The Watch reference is a different design problem: people need to compare corresponding facts without remembering values from another column.
| Element | PtaKaro rule |
|---|---|
| Model selectors | Keep selectors attached to their columns and sticky below the global header |
| Product identity | Consistent image area, product name, finish, price, and action |
| Specification rows | Match row heights across all models; use explicit row and column headers |
| Groups | Separate major categories with generous space and a strong section label |
| Missing / unavailable | Use an em dash with an accessible explanation where necessary; never imply a zero |
| Mobile | Prioritize two columns; provide clear model swapping rather than squeezing three or more columns |
| URL state | For production, encode model choices in the URL so a comparison can be shared and reopened |
| Difference emphasis | Use subtle emphasis and text meaning; do not turn the whole table into bright status colors |
15 / Input & validation
Make the right thing easy.
Use clear labels, useful defaults, and feedback where the action happens. Preserve people’s work when something goes wrong.
Label the task
A field label stays visible after typing. A helper explains format or consequences; it does not repeat the label.
Validate respectfully
Point to the exact problem and correction. Use inline feedback after an appropriate interaction, not while every first character is typed.
Honor platform behavior
Use native input types, autocomplete attributes, selects, and date/number behavior when appropriate.
Keep focus logical
Tab order follows the visible flow. On submit failure, summarize errors and move focus to the summary or first invalid field.
16 / Disclosure & overlays
Depth, on demand.
Use an accordion for supporting inline detail; use a modal for a focused story or task that benefits from keeping the page behind it.
| Requirement | Implementation |
|---|---|
| Open | Remember the trigger; place focus on a useful element or a focusable dialog heading |
| Within | Keep focus inside a modal; background content is inert through native dialog behavior |
| Close | Visible close button and Escape; backdrop close only when no work would be lost |
| Return | Restore focus to the original trigger and preserve page position |
| Scrolling | Keep the overlay within the viewport; its body scrolls while the close action remains reachable |
| Small screens | Reduce side margins and padding; preserve an obvious edge and close control |
| Reduced motion | Open immediately or with a brief fade; avoid large sliding movement |
17 / Feedback
Acknowledge. Explain. Recover.
Good feedback is close to the action and proportionate to its importance. Give a meaningful next step when something cannot be completed.
| Situation | Preferred pattern | Avoid |
|---|---|---|
| Action completed | Brief status toast or inline success | Blocking confirmation for every small action |
| Recoverable failure | Persistent inline message with retry | A disappearing toast with no way to recover |
| Loading list | Skeleton matching the final geometry | Layout jumps or fabricated progress percentages |
| Long measurable task | Progress bar with actual percentage and label | A spinner that hides how much work remains |
| No saved items | Calm empty state with one action | Treating empty as an error |
| No search results | Keep query and filters; suggest a specific adjustment | Deleting the query or showing only “Nothing found” |
18 / Motion
You should feel it, not watch it.
Motion establishes cause and effect. Reference animations are recorded in the evidence audit; the controls below demonstrate PtaKaro’s implementation defaults.
160ms · cubic-bezier(.2, 0, 0, 1)
Small moves.Clear meaning.
| Token / purpose | PtaKaro default | Curve / properties |
|---|---|---|
| Fast feedback | 160ms | cubic-bezier(.2, 0, 0, 1) / color, background, small press scale |
| State change | 200ms | cubic-bezier(.2, 0, 0, 1) / thumb movement, subtle state changes |
| Card hover | 300ms | cubic-bezier(0, 0, .5, 1) / translateY(-4px), shadow |
| Section entrance | 600ms | cubic-bezier(.16, 1, .3, 1) / opacity and 24px translation |
| Gallery transition | 600ms maximum where animated | Native scroll behavior; do not fight touch momentum |
| PtaKaro dialog entrance | 300ms | cubic-bezier(.16, 1, .3, 1) / opacity and 16px translation |
| Reduced motion | 0ms for nonessential movement | Static, immediately visible content; no shimmer, spin, autoplay, or transform |
Measured Apple iPhone behavior is distinct: 300ms card easing, a width-dependent 6px hover expansion, 100ms linear icon-control feedback, and an 800ms modal timeline. PtaKaro uses shorter dialogs and a restrained card lift as its own defaults. Avoid animating layout dimensions unless necessary; favor transform and opacity.
19 / Iconography
Small, precise, consistent.
Use one simple line-icon family with a 24px artboard, 1.5px strokes, and rounded caps. Icons support meaning; they do not replace labels.
| Rule | Application |
|---|---|
| Base size | 24px. Use 16–20px next to compact text and 32–48px for a feature symbol. |
| Hit target | The artwork may be 24px; its interactive area should usually be at least 44px. |
| Stroke | 1.5px at 24px. Scale consistently; do not mix filled and outlined styles casually. |
| Alignment | Optically align with the text’s center, not the entire line box if it looks wrong. |
| Accessibility | Decorative SVG: aria-hidden. Icon-only button: accessible name. State is expressed in text or ARIA. |
| Direction | Mirror directional arrows for RTL when they express reading/navigation flow; preserve universal symbols. |
20 / Imagery & composition
Let the subject be the hero.
The references devote substantial space to products and screenshots. Crop deliberately, reserve dimensions, and keep supporting copy out of the focal area.
Product cutout
Use a clean, neutral stage with generous space around the object. Keep equivalent products at consistent optical scale.
Immersive story
A full-bleed image needs a known focal point and verified text contrast. Art-direct the mobile crop instead of simply shrinking desktop.
App screenshot
Preserve the screen aspect ratio and legible content. Screenshots form a shelf with consistent height, not arbitrary thumbnail crops.
Brand artwork
Use the PtaKaro mark and simple lime/ink geometry selectively. Avoid decorative blobs or gradients on every section.
| Asset rule | Implementation |
|---|---|
| Formats | AVIF/WebP where supported, optimized JPEG/PNG fallback, SVG for logos and simple icons |
| Responsive source | Use picture/srcset for different crop needs, not just different resolutions |
| Dimensions | Set width/height or aspect-ratio to reserve the final space |
| Loading | Eager-load the main hero image; lazy-load below-the-fold images |
| Alt text | Describe meaningful content; use empty alt for decorative imagery and avoid repeating adjacent text |
| Text in image | Keep important copy as HTML whenever possible so it can scale, translate, and be read |
21 / Responsive behavior
Recompose. Don’t just shrink.
The same hierarchy should remain clear at every width, even when the layout changes. Test long labels, zoom, keyboard focus, and actual touch targets.
Example PtaKaro sectionA little more room
A little more room
to choose well.
A strong headline, useful details, and one clear next step.
Product story
Useful detail
Next discovery
| Range | Typography | Layout / behavior |
|---|---|---|
| Small ≤734px | 48px display, 28px section, 21px card | Single-column stories; galleries remain scrollable; two comparison columns; collapsed global navigation |
| Medium 735–1068px | 64px display, 48px section, 24px card | Reduce card widths; maintain gutters and copy legibility; simplify secondary navigation |
| Large ≥1069px | 80px display, 56px section, 28px card | Wide narrative stages; multiple visible cards; three comparison columns; full navigation |
| Very wide | Maintain content maximums | Avoid letting reading widths or card interiors grow without limit |
| Zoom / large text | Allow text wrapping and reflow | Never clip important labels or depend on a fixed card height for variable content |
734px and 1068px are the observed marketing breakpoints. App Store and global navigation use their own responsive thresholds. PtaKaro components should respond to their available space as well as viewport width.
22 / Accessibility
Clean design must be usable design.
The visual system is complete only when its states, hierarchy, and controls work without a mouse, animation, perfect vision, or a large screen.
| Area | Implementation standard |
|---|---|
| Contrast | Target at least 4.5:1 for ordinary text and 3:1 for large text and meaningful UI boundaries; use the contrast workbench. |
| Keyboard | Every interactive control is reachable in a logical order, with visible focus and no keyboard trap outside a modal. |
| Touch | Aim for 44×44px targets; compact visuals may have a larger invisible hit area. |
| Semantics | Use links for destinations, buttons for actions, headings for structure, and native controls where appropriate. |
| Dialogs | Name the dialog, contain focus, support Escape, restore focus, and keep the close action reachable. |
| Tabs | Roving tab index, selected state, named panel relationship, and arrow/Home/End support. |
| Announcements | Use polite status messages for completed actions; reserve assertive alerts for time-sensitive errors. |
| Reduced motion | Honor prefers-reduced-motion and keep content fully visible without animation. |
| RTL / localization | Use logical properties where possible; test long translations and right-to-left reading order. |
| Responsive zoom | Check at 200% text scaling and narrow widths; prevent horizontal page overflow except intentional data/gallery regions. |
TabMove between controlsEnterActivateEscClose a dialog← →Switch tabs
23 / Content & voice
Plain words. Useful meaning.
Sound calm, informed, and helpful. Describe the benefit, show the fact, and name the next action.
| Instead of | Use | Why |
|---|---|---|
| Unlock an unparalleled experience | Find the phone that fits you. | Concrete and human |
| Submit | Save collection | Names the outcome |
| Oops! Something went wrong! | Couldn’t save. Your changes are still here. Try again. | Explains the problem and recovery |
| Click here | Compare camera features | Makes the destination clear |
| No data | No saved devices yet. Explore devices to start a shortlist. | Explains how to move forward |
| BEST DEAL EVER | A sourced price with date, currency, and availability | Avoids unsupported claims |
Headlines
One idea, ideally 3–8 words. Sentence case, purposeful line breaks, and no forced cleverness when clarity is needed.
Descriptions
Lead with useful information. Keep card descriptions to 1–3 short lines when possible; use disclosure for more.
Numbers & evidence
Show currency, units, and comparison context. Clearly label examples; do not fabricate reviews, ratings, stock, or savings.
Interface labels
Use consistent nouns for the same object. “Collection” should not become “folder” or “list” unpredictably in the same workflow.
24 / Page recipes
From components to complete pages.
A good page has a progression. These recipes preserve the different strengths of the five references while replacing their content with PtaKaro’s own.
Discovery homepage
- Quiet global header
- One strong hero and paired CTA
- Focused product/category story
- Editorial or feature gallery
- Useful comparison entry
- Grouped footer
Alternate white and subtle surfaces. Keep the first screen focused on a clear promise.
Product family
- Page title + chapter navigation
- Large highlight gallery
- Aligned product lineup
- Reasons or buying guidance
- Feature stories in dialogs
- Compatibility / FAQ disclosure
Use breadth first, depth on demand. Avoid turning every section into a sales banner.
Browse & shop
- Clear page title
- Local section navigation
- Consistent product shelves
- Buying guide shelf
- Service and support patterns
- Legal details in quiet footer
Keep product data, imagery, and action positions consistent from one shelf to the next.
Compare
- Context and helper copy
- Sticky model selectors
- Matched product identities
- Grouped specification rows
- Source notes and caveats
- Shareable selection state
Preserve row alignment and model identity. Make the mobile two-column experience deliberate.
App or detail page
- Identity + concise summary
- Information ribbon
- Screenshot gallery
- Description and release notes
- Reviews with attribution
- Privacy, accessibility, information
Use more compact spacing while retaining clear section borders and readable long-form detail.
Saved collections
- Title and creation action
- Search + view control
- Folder grid or list
- Selection and batch actions
- Empty / error / loading states
- Detail view and export action
A proposed PtaKaro application pattern using the same surfaces, controls, and feedback language.
25 / Implementation
A system that survives the handoff.
Use the CSS variables and semantic component classes as the shared contract. The examples are buildless HTML, CSS, and JavaScript, so they can be adapted to any application stack.
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css">
<script src="components.js" defer></script>
<section class="pkd">
<button class="pkd-btn accent">Compare models</button>
</section>| Contract | Rule |
|---|---|
| Tokens | Use semantic variables such as --pk-text, --pk-surface, and --pk-action before raw colors. |
| Namespacing | Reusable primitives use pkd- classes. Avoid global component styles that unexpectedly change unrelated pages. |
| Variants | Compose explicit variants such as accent, secondary, small, and soft; do not create a new one-off style for every card. |
| States | Use disabled, aria-expanded, aria-selected, aria-pressed, and aria-invalid to make state machine-readable. |
| Data | Example actions demonstrate behavior locally. Connect real save, search, share, and export actions to the application’s data layer. |
| Performance | Reserve image geometry; prefer CSS transitions on transform and opacity; defer nonessential JavaScript. |
| Versioning | This is v1.0. Change token values centrally, record the reason, and check every affected component and responsive mode. |
| Evidence | The reference audit is a study snapshot, not an assertion that every Apple page shares one universal specification. |
The component library deliberately separates styling from business behavior. Demo toasts, example prices, sample reviews, and local selections are teaching examples—not claims of a working commerce backend.
26 / Complete component specification
The details behind each pattern.
Search the deeper component inventory for anatomy, variants, states, responsive behavior, accessibility, motion, and source selectors. Observed patterns and proposed extensions are labeled separately.
27 / Reference audit
Measured, then adapted.
Five reference experiences were inspected through saved source, linked CSS/JavaScript, and browser-computed styles at representative widths. The raw evidence is retained with the system.
Apple homepage ↗Hero hierarchy, tiles, editorial rhythm, footeriPhone ↗Family navigation, cards, galleries, dialogs, compatibilityShop Mac ↗Product shelves, card variants, hover depthWatch comparison ↗Selectors, column alignment, specification densityApp Store detail ↗Identity ribbon, screenshots, reviews, disclosures
| Observed reference value | Context | PtaKaro interpretation |
|---|---|---|
| 80/64/48px display headline | iPhone at 1440/834/390px widths | Retain the scale; use native system sans for interface text |
| 56/48/28px section title | iPhone responsive section hierarchy | Keep a distinct section level rather than shrinking all text uniformly |
| 87.5% viewport content width | iPhone .viewport-content | Use 6.25vw side gutters and cap very wide content |
| 372×680 / 344×628 / 260×480px | iPhone feature cards across three breakpoints | Preserve the tall editorial shape; allow content-led height where copy varies |
| 28px radius; 32/28/24px copy inset | iPhone feature card | Use 28px feature surfaces and responsive padding |
| 18px radius; 1.01 hover scale | Mac store cards | Standardize PtaKaro utility cards to 24px; use a restrained lift |
| 300ms cubic-bezier(0,0,.5,1) | iPhone card hover | Retain easing for card feedback |
| (card width + 6) / card width | iPhone hover calculation in JavaScript | Record as source behavior, not a universal 1.01 scale |
| 800ms easeInOutCubic modal timeline | iPhone rich modal JavaScript | Use shorter 300ms PtaKaro dialog entrance; honor reduced motion |
| 980px source pill radius | Apple buttons | Use 999px as a semantic full-pill token |
| 100ms linear control feedback | iPhone card and paddle controls | Use 160ms brand feedback for consistency |
Scope: five supplied page families, their retained source assets, and representative responsive styles. Closed, hidden, conditional, experimental, regional, and future states can differ. CSS and JavaScript evidence is labeled separately from browser observations. Source analysis includes CSS rules, targeted JavaScript behavior, and browser measurements.
28 / The complete handoff
Take the system with you.
Everything needed to inspect, reuse, and extend the guide is saved here. The master package contains the guide, live examples, component code, tokens, icons, brand assets, font licenses, and research.
Complete packagePtaKaro Design System v1.0
Guide + component library + design tokens + assets + source audit
Download ZIP ↓Design tokensMachine-readable JSON ↓CSS variablesFoundations and responsive values ↓Component stylesNamespaced reusable CSS ↓HTML specimensEvery interactive example ↓Component behaviorAccessible interaction helpers ↓Brand assetsLogos, symbols, social and favicon ↓Written guidelinesPortable Markdown reference ↓