# PtaKaro — Brand & Interface System

Version 1.0 · October 2026



## Clarity. In every detail.


PtaKaro / Brand & interface system / v1.0

A complete working foundation for how PtaKaro looks, feels, moves, and helps people choose.

Five reference experiences studied. One coherent PtaKaro system. Desktop, tablet, mobile. Light and dark surfaces.


## Quiet design. Clear decisions.


01 / The idea

Apple’s references are the study material. PtaKaro’s identity, content, and product purpose make the resulting system its own.

Give one thing priority.

Each section has one main message. A headline, product image, or comparison decision leads; everything else supports it.

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.


## Recognizable, without shouting.


02 / Brand identity

Keep the approved lowercase wordmark and open-shoulder “p” symbol. Build the interface around them, rather than redrawing the mark.

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.


## A restrained palette, with a pulse.


03 / Color

The core brand colors stay intact. A neutral interface scale carries most of the content; semantic colors communicate meaning.

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




## Hierarchy you can feel.


04 / Typography

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.

Less, but clearer.

Room for the important things.

A headline with a purpose.

Make the product understandable before asking someone to make a decision. Short paragraphs and a steady reading rhythm do more than extra decoration.

Find what fits you.

اپنے لیے بہتر انتخاب کریں۔

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


## Breathing room is a system.


05 / Space & rhythm

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

Let the idea breathe.

Spacing tells people what belongs together, and what matters next.


## Four densities. One visual language.


06 / Layout

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


## Depth, used sparingly.


07 / Surfaces & depth

Most separation comes from space and tonal surfaces. Borders and shadows should explain grouping or interactivity.

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


## Built to use, not just look at.


08 / Component library

Every specimen includes working states, usage guidance, and copyable HTML. The component stylesheet and behavior script are included in the downloadable kit.




## One clear next step.


09 / Actions

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


## A container with a job.


10 / Card anatomy

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.

A short description helps people decide whether to go deeper.

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.


## Save things in a place that makes sense.


11 / Folders & collections

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


## Always know where you are.


12 / Navigation

Global navigation identifies the site. Local navigation identifies a page or product family. Tabs and filters control a view. Give each one a separate job.

Pattern | Desktop | Mobile

Global header | 60px PtaKaro bar, logo at gutter, short page links | Logo, optional search, named menu button; Escape and outside click close it

Product family navigation | Compact image labels in a horizontal row | Scrollable row; preserve partial next item and named arrows

Local sticky bar | Context title plus a small number of actions | Reduce actions; do not cover content or focus targets

Tabs | Underline selected panel; keyboard arrow support | Horizontal scroll if needed, never shrink labels until unreadable

Sidebar | Fixed or sticky within the page context | Replace with a compact contents disclosure or drawer

Footer | Small groups of purpose-based links | Stack or disclose groups; retain readable targets


## More to explore, without more clutter.


13 / Galleries

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.


## Alignment does the heavy lifting.


14 / Comparison

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


## Make the right thing easy.


15 / Input & validation

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.


## Depth, on demand.


16 / Disclosure & overlays

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


## Acknowledge. Explain. Recover.


17 / Feedback

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”


## You should feel it, not watch it.


18 / Motion

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)

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


## Small, precise, consistent.


19 / Iconography

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.


## Let the subject be the hero.


20 / Imagery & composition

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


## Recompose. Don’t just shrink.


21 / Responsive behavior

The same hierarchy should remain clear at every width, even when the layout changes. Test long labels, zoom, keyboard focus, and actual touch targets.

A little more room to choose well.

A strong headline, useful details, and one clear next step.

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


## Clean design must be usable design.


22 / Accessibility

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.


## Plain words. Useful meaning.


23 / Content & voice

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.


## From components to complete pages.


24 / Page recipes

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.


## A system that survives the handoff.


25 / Implementation

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.

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 details behind each pattern.


26 / Complete component specification

Search the deeper component inventory for anatomy, variants, states, responsive behavior, accessibility, motion, and source selectors. Observed patterns and proposed extensions are labeled separately.


## Measured, then adapted.


27 / Reference audit

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.

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


## Take the system with you.


28 / The complete handoff

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.

Guide + component library + design tokens + assets + source audit