Loyalty cards
Centered icon, short feature heading, and direct supporting copy.
TapTapp design system
Visual source of truth for the existing TapTapp brand, tokens, reusable components, and responsive UI patterns.
Reference map
Foundation
Brand colors and semantic tokens
TapTapp uses a deep-blue canvas, white content surfaces, and a focused cyan accent. Use semantic ploy tokens before reaching for a numbered color scale.
Global deep-blue canvas
ploy-neutral-primary
White content surface
ploy-neutral-secondary
Primary CTA and interactive cyan
ploy-accent-primary
Subtle decoration and highlights
ploy-accent-primary-200
Deep supporting accent
ploy-accent-tertiary
Light section background
ploy-background-inverse
Page surface
Start with bg-ploy-background-primary.
Content surface
Use bg-ploy-background-inverse or the shared Card.
Primary action
Reserve ploy-accent-primary for CTAs and highlights.
Foundation
Typography and type scale
Museo defines TapTapp headings. Museo300 handles body copy and navigation, while Museo500 supports short labels and eyebrows.
font-heading · Museo 700Sve kartice na telefonu
font-body · Museo300Clear supporting copy explains the feature, the action, and the benefit without adding decorative language.
font-eyebrow · Museo500Feature-first label
font-button · Museo300 600Responsive scale
| Role | Mobile | Tablet | Desktop |
|---|---|---|---|
| Hero heading | text-4xl | md:text-6xl | lg:text-7xl |
| Section heading | text-3xl | md:text-4xl | lg:text-5xl |
| Subsection heading | text-xl | md:text-2xl | lg:text-2xl |
| Body text | text-base | md:text-base | lg:text-lg |
| Eyebrow | text-sm | md:text-sm | lg:text-base |
Reusable UI
Buttons and cards
Use the shared Button and Card components. Their variants, focus states, borders, radius, and elevation already match the TapTapp system.
Button variants
rounded-button · 4pxshadow-ploy-buttonfocus-visible:ring-2Membership cards
Keep equal visual weight and consistent internal spacing across a set.
Tickets
Use one clear concept per card and avoid mixed actions inside the surface.
Cardrounded-card · 10pxborder · 1pxshadow-ploy-cardReusable UI
Icon, title, and description cards
This shared pattern keeps the icon in a fixed column and lets titles and descriptions use the remaining width. Longer copy wraps inside the content column instead of collapsing the card.
Four-card feature grid
Grid or list view
You have too many cards? The app has multiple views so you can easily explore saved cards and color them for easier distinction.
Register for backup
Save a backup of all your loyalty cards on your phone so a lost card does not stop you using your points.
Slim your wallet
Keep your cards on your phone and redeem your points without searching through a physical wallet.
We do not sell data
The app does not require registration to use your cards, and the business does not sell your data.
Two-column homepage layout
Scan a barcode
Almost any card has a barcode that can be scanned with TapTapp.
Import cards from the list
Take a look at the list to find your favourite brands and add a card without narrow wrapping.
Reusable UI
Form elements and inputs
Form fields use white surfaces on dark sections, clear labels, compact height, visible focus rings, and the shared primary action.
Input rules
- Keep labels visible. Do not rely on placeholder text as the label.
- Use a minimum control height of 44px for touch access.
- Use the accent focus ring and preserve native keyboard behavior.
- Keep form groups narrow enough to scan without long eye movement.
rounded-input · 8pxborder-ploy-input-borderring-ploy-accent-primaryStructure
Spacing, layout, borders, and elevation
Use the 58.75rem content width, responsive grids, generous section padding, and restrained elevation. TapTapp layouts should stay clear and centered rather than dense.
Spacing scale in use
gap-2
0.5rem
gap-4
1rem
p-6
1.5rem
p-8
2rem
py-16
4rem
md:py-24
6rem
Layout rules
max-w-[58.75rem]for standard page content.px-5for mobile page gutters.py-16 md:py-24for major section rhythm.grid gap-4 md:grid-cols-2 lg:grid-cols-3for card sets.
Button radius
radius-button · 4px
Card radius
radius-card · 10px
Input radius
radius-input · 8px
Grid layout variant
Use the same grid component with four items and the two-by-two layout.
layout="two-by-two"01
Two columns
Desktop layout uses two equal columns.
02
Two rows
Four items form two balanced rows.
03
Same cards
Card surface, radius, border, and shadow stay unchanged.
04
Same response
Cards remain one column on mobile and two from sm upward.
Visual language
Icons, decoration, and product imagery
Product screens stay high-fidelity and prominent. Supporting icons remain simple, while cyan plus signs fill negative space without competing with the main content.
Device mockup
Keep the app interface readable
Use transparent or clean-background device artwork, preserve its proportions, and let overlaps create depth.
Illustration treatment
Center the image inside a white or pale-cyan card. Avoid filters, heavy crops, and generic stock photography.
Icon treatment
Use Lucide for interface icons. Keep decorative brand illustrations as image assets.
Shared chrome
Navigation and footer patterns
The live navigation and footer on this page are the source examples. Reuse them directly instead of rebuilding their links, language behavior, menus, or mobile interactions.
TapTapp
Navbar
Fixed deep-blue header, white logo, compact uppercase links, desktop dropdowns, and a dedicated mobile menu.
Navbar
Footer
Deep-blue closing surface, grouped localized links, compact type, app identity, and generous vertical spacing.
Footer
Direct-answer pattern
What is the approved TapTapp answer section?
A direct-answer section starts with a plain-language definition, follows with left-aligned white answer cards, and ends with contextual links styled as primary actions. It uses the standard 58.75rem content width and semantic headings so people and answer engines can scan it reliably.
Answer first
State the useful answer before supporting detail, qualifiers, or navigation.
One topic per card
Use short headings and complete sentences. Keep the copy left aligned for fast scanning.
Contextual route links
Link to the next relevant TapTapp page with the shared primary button treatment.
Behavior
Responsive behavior
Build mobile first with CSS breakpoints. Preserve hierarchy and touch targets, stack content before shrinking it, and keep product imagery readable at every size.
Mobile
- Single-column flow
- 20px page gutters
- 44px minimum controls
- Centered or full-width imagery
Tablet
- Two-column layouts when clear
- Wider section padding
- Preserve readable line lengths
- Avoid squeezed three-card rows
Desktop
- 58.75rem content container
- Three-column card grids
- Prominent device mockups
- Generous 96px section rhythm
Use md: and lg: responsive variants. Do not use JavaScript viewport checks for layout.
Reusable content
FAQ and accordion
One shared FAQ structure supports white and light-gray section surfaces. This specimen shows the approved spacing, typography, card treatment, and interaction states.
Za korisnike
Kartice u telefonu
Dodajte karticu, otvorite je kada vam treba i proverite kako TapTapp postupa sa podacima.
Kako da dodam karticu skeniranjem?
Otvorite dodavanje kartice u TapTapp aplikaciji i skenirajte QR kod ili barkod sa fizičke kartice. Sačuvana digitalna kartica prikazuje kod koji možete da pokažete na prodajnom mestu.
Pogledajte kako kartice radeŠta ako kartica nema QR kod ili barkod?
Unesite broj kartice u aplikaciju. TapTapp će pripremiti kod koji možete da koristite na prodajnom mestu.
Kako da omogućim oporavak naloga?
Pratite dostupne opcije oporavka u aplikaciji i proverite da li su podaci za oporavak ažurni.
Gde stižu poruke i obaveštenja partnera?
Poruke i obaveštenja partnera prikazuju se u TapTapp aplikaciji kada ih partner omogući.
Koje podatke TapTapp obrađuje?
Detalji o obradi podataka opisani su u TapTapp politici privatnosti.
Guardrails
Approved patterns and anti-patterns
These rules protect the recognizable TapTapp visual language when new pages and components are added.
Approved
- Deep-blue page canvas with white or pale supporting sections.
- Shared white Card surfaces with subtle borders and soft elevation.
- Primary cyan actions with compact uppercase Museo labels.
- Feature-first headings and direct instructional copy.
- High-fidelity app mockups with centered, uncropped treatment.
- Simple interface icons and subtle plus-sign decoration.
Avoid
- Gray information cards when the shared white Card pattern applies.
- Black or dark-gray CTAs on light sections instead of the primary action.
- Generic gradients, pill eyebrows, or decorative styles without source evidence.
- Dense layouts, long centered paragraphs, and competing calls to action.
- Stock photography, heavy image filters, or crops that hide the product UI.
- New navbar, footer, button, or card copies that duplicate shared components.
