01 · Overview

A TΛPΛT Shop skin is a visual theme applied to a shopkeeper's storefront. Skins work by overriding a set of CSS custom properties (variables) that control colors, fonts, and shadows across the entire storefront.

You do not need to write or upload HTML. You supply:

• A set of CSS variable overrides (required)
• Optional additional CSS for fine-grained control
• Optional Google Fonts import URL for custom typography
• Preview screenshots of your skin in action

02 · Base Themes

Every skin extends one of three TΛPΛT base themes. Choose the base whose structure best matches your design — your variable overrides will sit on top of it.

03 · CSS Variable Reference

Backgrounds

Variable	Description	Tala default
--bg required	Page background. The dominant surface color.	#F8F5F0
--bg2 required	Card / panel background. Usually white or near-white.	#FFFFFF
--bg3 optional	Subtle background — used for tags, chips, hover states.	#F2EEE8

Navigation

Variable	Description	Tala default
--nav-bg required	Top navigation bar background color.	#0A2540
--nav-text optional	Nav link text color. Should be legible on --nav-bg.	rgba(255,255,255,0.85)

Brand Colors

Variable	Description	Tala default
--primary required	Primary brand color. Used for headings, links, key UI elements.	#0A2540
--accent required	Accent / call-to-action color. Buttons, badges, highlights.	#D4AF37
--accent-dim optional	Translucent version of accent. Background of accent-tinted elements.	rgba(212,175,55,0.12)
--accent-hover optional	Darker shade of accent for button hover states.	#c49e2a

Text

Variable	Description	Tala default
--text required	Primary body text. Must be high contrast against --bg.	#1A1A2E
--text-2 optional	Secondary text — descriptions, subtitles.	#3D3D55
--text-muted optional	Muted / helper text — hints, labels, metadata.	#7B7B8F

Borders

Variable	Description	Tala default
--border optional	Standard divider and card border color.	#E2DDD6
--border-soft optional	Lighter border for subtle separators.	#EDE9E2

Typography

Variable	Description	Tala default
--heading-font optional	Font stack for all headings (h1–h4). Include fallback serif.	'Fraunces', serif
--body-font optional	Font stack for body text, buttons, UI. Include fallback sans-serif.	'DM Sans', sans-serif

Badges & Shadows

Variable	Description	Tala default
--badge-bg optional	Background of product category badge.	#D4AF37
--badge-text optional	Text color inside product badge. Must contrast with --badge-bg.	#0A2540
--shadow optional	Card drop shadow. Full CSS box-shadow value.	0 4px 24px rgba(10,37,64,0.10)
--shadow-lg optional	Large shadow for modals and overlays.	0 12px 48px rgba(10,37,64,0.16)

04 · Custom CSS Rules

In addition to variable overrides, you can include a block of raw CSS for fine-grained control. Custom CSS is injected after the base theme stylesheet.

Key class names for targeting

Class / ID	Element
.store-nav	Top navigation bar
.store-hero	Hero banner section
.product-card	Individual product tile in the grid
.product-title	Product name on card
.product-price	Price display on card
.btn-add-cart	Add to cart button
.btn-buy-now	Buy now / checkout button
.category-chip	Category filter pill
.store-footer	Footer bar
#cart-panel	Slide-out cart drawer

05 · Typography & Fonts

If your skin uses custom Google Fonts, provide the full @import URL in the Font Imports field — not in custom CSS. This ensures fonts load before the stylesheet to prevent flash of unstyled text.

Example font import

/* Paste this exactly into the Font Imports field */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

Then reference the font in your variable overrides:

--heading-font: 'Playfair Display', serif;
--body-font:    'Lato', sans-serif;

06 · Preview Images

Shopkeepers browse skins in a marketplace and choose based on previews. Good screenshots are the most important factor in getting installs.

Requirements

• Format: PNG, JPG, or WebP
• Maximum size: 5MB per image
• Maximum count: 5 images per skin
• Recommended dimensions: 1280 × 800px (16:10 ratio)
• Minimum 1 image required for submission

What to show

• Image 1 (thumbnail): Full storefront above the fold — hero + nav + top of product grid. This is the card image buyers see in the marketplace.
• Image 2: Product grid with several listings visible
• Image 3: A single product detail view or modal
• Image 4: Mobile view (375px wide, simulated)
• Image 5: Cart or checkout flow (optional but recommended)

07 · Pricing & Tiers

Skins are priced as monthly subscriptions. Your tier is determined automatically from your USD-equivalent price. You can price in any currency — buyers see it in their chosen display currency.

Your earnings

70% of every monthly subscription goes directly to your TΛPΛT wallet. The remaining 30% feeds the TΛPΛT reward ecosystem (10% your referral tree, 10% the shopkeeper's referral tree, 10% platform).

Free skin upload quota

You can list up to 2 free skins at no cost. Every time a shopkeeper actively installs one of your free skins, you earn an additional free upload slot. There is no limit on paid skin submissions.

08 · Skin File Format (.json)

You can define your entire skin in a single .json file and import it directly into the designer portal. All form fields populate automatically — no copy-pasting required.

Full file schema

The portal accepts two common variations — use whichever feels natural:

Field	Accepted formats
CSS variables key	"variables" or "css_variables" — both work
Price	Flat number: "price": 19  or  object: "price": {"amount": 19, "currency": "USD"}
Description	"description" or "short_description" — portal uses whichever is present

{
  // ── Identity (required)
  "name":         "Washi",               // skin display name
  "description":  "Japanese minimalist...",

  // ── Base theme (required)
  "theme_base":   "tala",             // "tala" | "isla" | "perlas"
  "category":     "minimal",          // minimal | bold | elegant | playful | cultural | tech | natural

  // ── Pricing (required)
  "price":        29,                 // 0 for free
  "currency":     "USD",             // USD | PHP | EUR | GBP | CAD | AUD | JPY | SGD

  // ── CSS variables (required — include only variables you're changing)
  "variables": {
    "--bg":            "#FAFAF8",
    "--bg2":           "#FFFFFF",
    "--nav-bg":        "#1C1C1C",
    "--primary":       "#1C1C1C",
    "--accent":        "#C84B31",
    "--text":          "#1C1C1C",
    "--heading-font":  "'Noto Serif JP', serif",
    "--body-font":     "'Noto Sans JP', sans-serif"
  },

  // ── Custom CSS (optional)
  "custom_css":   ".product-card { border-radius: 2px; }",

  // ── Google Fonts import (optional — include if using custom fonts)
  "font_imports": "@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&display=swap');"
}

Download starter template

Save this as tapat-skin.json and edit in any text editor or VS Code:

{
  "name": "My Skin Name",
  "description": "Describe the aesthetic and best-fit shop types.",
  "theme_base": "tala",
  "category": "minimal",
  "price": 0,
  "currency": "USD",
  "variables": {
    "--bg":      "#F8F5F0",
    "--bg2":     "#FFFFFF",
    "--nav-bg":  "#0A2540",
    "--primary": "#0A2540",
    "--accent":  "#D4AF37",
    "--text":    "#1A1A2E"
  },
  "custom_css": "",
  "font_imports": ""
}

↓ Download tapat-skin.json

09 · Submission Checklist

Before submitting, verify all of the following:

Item	Requirement
Required variables	All 6 required variables are set: --bg, --bg2, --nav-bg, --primary, --accent, --text
Contrast	Text on backgrounds meets WCAG AA contrast (4.5:1 minimum). Check at webaim.org/resources/contrastchecker
Buttons visible	Add to Cart and Buy Now buttons are clearly visible and legible in all states
Prices visible	Product prices are readable on the product card background
No JS	Custom CSS contains no <script> tags or JavaScript
Font imports	Custom fonts use a Google Fonts @import URL in the Font Imports field, not in custom CSS
Preview images	At minimum 1 screenshot at 1280×800px showing the storefront with your skin applied
Base theme	A base theme is selected (tala, isla, or perlas)
Name & description	Skin name is unique and descriptive. Description explains aesthetic, mood, and best-fit shop types.
Price set	Monthly price is entered (0 for free). Currency is selected.

10 · Review Process

All skins go through a two-stage review before appearing in the marketplace:

• Stage 1 — Automated CSS validation: Checks that all required variables are present, no disallowed properties are used, and the custom CSS parses without errors. Typically instant.
• Stage 2 — Visual review: A TΛPΛT team member checks contrast, legibility, and compliance with the custom CSS rules above. Typically within 48 hours.

You'll receive an email when your skin is approved or if changes are needed. If changes are requested, you can resubmit from your designer dashboard — no need to create a new skin entry.

11 · Full Example

A complete skin submission for a Japanese minimalist theme called "Washi":

CSS Variables (what you enter in the form)

/* Required */
--bg:         #FAFAF8;
--bg2:        #FFFFFF;
--bg3:        #F2F0EB;
--nav-bg:     #1C1C1C;
--primary:    #1C1C1C;
--accent:     #C84B31;
--text:       #1C1C1C;

/* Optional enhancements */
--text-2:     #444444;
--text-muted: #999999;
--border:     #E8E5E0;
--accent-dim: rgba(200,75,49,0.08);
--badge-bg:   #1C1C1C;
--badge-text: #FFFFFF;
--shadow:     0 2px 16px rgba(28,28,28,0.06);
--heading-font: 'Noto Serif JP', serif;
--body-font:    'Noto Sans JP', sans-serif;

Font Imports field

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&family=Noto+Sans+JP:wght@300;400;500&display=swap');

Custom CSS field

/* Rounded product cards */
.product-card { border-radius: 2px; }

/* Uppercase category chips */
.category-chip { letter-spacing: 1.5px; text-transform: uppercase; font-size: 10px; }

/* Thinner button style */
.btn-add-cart { border-radius: 2px; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }