marketing-vs-product-system

Featured

A marketing site and the product it sells share a brand but not a design system. The surfaces differ in density, type scale, radius and weight for good reasons, and those differences are legitimate, but the token layer underneath them must stay single. The same rule covers the other surfaces a brand runs, including documentation, transactional email and a status page. Use when a product app and its public site drift apart, when deciding which values may differ between surfaces, when a signed-in surface needs a theme the marketing site does not have, when a component renders in both, when unifying a token layer that has already forked, or when deciding who owns it.

AI & Automation 61 stars 10 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
60
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Marketing and Product Are Two Surfaces of One Brand The public site sells; the product is used. A visitor reads one marketing page for ninety seconds and leaves. An operator opens the same brand every morning and stays for hours. Designing both to one specification produces either a brochure that is exhausting to work in or a product screen that cannot sell anything. So the two surfaces *should* diverge. The question is never whether, it is **which layer is allowed to diverge**. Marketing and product are the pair that forces the question, because they are the two nobody can pretend are the same job. But the rule underneath is not about two. Most brands run four or five surfaces: the site, the product, the documentation, the transactional email, the status page, sometimes a sales deck. Each one is a different job for a different reader at a different moment. **The brand owns the layer; every surface chooses from it.** Adding a sixth surface then changes nothing about the rule, which is the test of whether the rule was right. Where a new surface belongs is settled by the same question the layer rule asks, not by which team built it. Docs are read for minutes at a time by someone mid-task, so they sit near the product on density and near the site on reading width. Transactional email has no theme control and no hover, so it takes the shared values and little else. Neither is a special case; both are the general rule applied. ## The Layer Rule **Brand values are shared. A...

Details

Author
dembrandt
Repository
dembrandt/dembrandt-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

brand-and-design-system

Use when doing brand or design-system work. Covers positioning, verbal identity, color and type scales, tokens, component specs, accessibility, and developer handoff.

0 Updated 1 months ago
On-mission96
Web & Frontend Featured

layout-paradigms-and-consistency

A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map, single-focus, narrative long-scroll) is a design decision that shapes how content is understood. Landing and marketing pages get a product narrative framework — hook, problem, USP, value props, proof points, how it works, stakes, CTA — used to review whether the page carries a visitor to a decision. Once chosen, the same paradigm and page skeleton must be reused consistently across the application so users build one mental model. This is consistency at the macro scale, above component and token consistency. Use when deciding the overall structure of a screen, designing page templates, or reviewing whether screens across a product feel like one coherent application.

61 Updated today
dembrandt
Web & Frontend Listed

design-taste

Anti-slop visual judgment for landing pages, marketing sites, storefronts, portfolios, redesigns. Use for desain landing page, layout LP, homepage or hero design, storefront/PLP/PDP/cart design, design review, redesign, design tokens, visual polish, or UI that looks AI-templated. Choose Brand/Marketing, Storefront/Commerce, or DR/COD Funnel mode; honor existing project tokens over defaults. Defaults to a designed light theme; dark only when genuinely designed, not inverted. Pair with the installed framework skill for implementation. Not for admin/data-dense UI (admin-dashboard), commerce behavior (storefront-ux), copywriting, component installation, or browser evidence (ui-validation).

0 Updated today
ongkipro