Add tasteful app-specific customization to each individual app marketing page.
Keep the shared site structure consistent while giving each app a clearer identity.
Use page design to demonstrate each app’s strengths and specialties faster than copy alone.
Stay in idea mode only for now, with no implementation decisions locked in.
Scope
This document focuses primarily on the individual app marketing pages, while also setting theme rules that should carry across support and privacy pages for the same app.
The apps covered are Barkpedia, Nekopedia, ETFWise, FormuLens, Huepick, Journeyfolio, and Solcast.
Each app should keep the same overall site framework while gaining selective page-level customization across its marketing, support, and privacy pages.
Current Observation
The current app marketing pages share the same neutral shell and visual system.
Most differentiation today comes from copy, app icon, and app title.
The structure is clean and consistent, but several apps feel more similar than they should.
The strongest opportunity is to keep the same layout skeleton while adding controlled per-app visual and content accents.
Recommended Design Strategy
Keep one shared page framework for consistency across the site.
Introduce app-level customization through a small set of repeatable page elements.
Make each app feel distinct without creating a completely different layout for every page.
Prioritize high-signal differences near the top of the page where users form their first impression.
Page Family Consistency
Each app should have one recognizable visual identity shared across its marketing, support, and privacy pages.
The marketing page can be the richest expression of the theme, but the support and privacy pages should still inherit the same color logic, accents, and overall tone.
Visitors should immediately feel that they are still inside the same app experience when moving between Overview, Support, and Privacy.
Consistency should come from shared header treatment, accent color, button style, navigation treatment, and supporting surface colors.
The support and privacy pages do not need all marketing embellishments, but they should not fall back to a completely generic neutral style if the app has a defined theme.
Shared Customization Layers
1. Header Treatment
Match the app header background to the app icon palette.
Use subtle gradients or tinted surfaces instead of flat neutral backgrounds.
Let the primary CTA color reflect the app brand rather than using the same dark neutral for every app.
Adjust active tab and pill styles to align with each app’s accent color.
2. Proof Strip
Add a compact row under the hero with 3 to 4 proof points.
Use short, specific strength statements instead of generic marketing claims.
Prefer concrete cues such as Offline, On-device AI, 147 breeds, Live flight status, or 16 lifestyle indices.
Keep this section visually lightweight so it supports the hero rather than competing with it.
3. Signature Section
Give each app one custom section that demonstrates its core value visually.
Show the app’s output or working style instead of only explaining it in text.
Keep this section near the top so the page proves the product quickly.
Treat this as the main differentiation element across app pages.
4. Supporting Visual Language
Use app-specific chips, badges, icons, or stat cards where relevant.
Let supporting modules reflect the product category, such as analytical, playful, clinical, creative, or utility-driven.
Keep motion and embellishment subtle and purposeful.
Preserve readability and accessibility even when using stronger visual personality.
Cross-App Principle
Each app marketing page should surface one concrete artifact of the app’s value.
The artifact should show what the user gets, not just what the app claims to do.
This artifact should appear early on the page and feel closely tied to the app’s real use case.
App-by-App Ideas
Barkpedia
Use a teal and deep navy header treatment inspired by the icon.
Add warm tan or cream accents to support the playful pet-focused feel.
Keep the tone energetic, friendly, and outdoorsy rather than clinical.
Use proof points like 147 breeds, Works offline, Private on-device, and Quiz included.
Create a signature section that feels like a scan result card with breed match, confidence, and quick facts.
Add supporting visual cues for breed profiles, world map exploration, and game modes.
Nekopedia
Use a purple or plum header treatment with softer peach or cream accents.
Keep it related to Barkpedia, but more refined and editorial in tone.
Make the page feel calmer and slightly more premium than Barkpedia.
Use proof points like 48 breeds, Offline, Private, and 14 languages.
Create a signature section that highlights a cat scan result with breed insights and saved favorites.
Add supporting visual cues for breed profiles, world map browsing, and trivia or quiz play.
ETFWise
Use sage, deep blue, and restrained gold accents based on the icon.
Push the visual tone toward analytical, trustworthy, and data-rich.
Let the page feel closer to a lightweight dashboard than a generic marketing page.
Use proof points like Daily picks, 7 categories, On-device AI, and Live market data.
Create a signature section that resembles a recommendation snapshot or market insight panel.
Add supporting visual elements such as stat blocks, category chips, sentiment indicators, or signal cards.
FormuLens
Use blush pink, burgundy, and soft neutral tones from the icon.
Blend beauty and clinical precision so the page feels trustworthy, not overly decorative.
Keep the visual language clean, ingredient-focused, and product-comparison friendly.
Use proof points like Scan labels, Compare products, Routine check, and Private on-device.
Create a signature section showing ingredient-role chips, flagged ingredients, and routine compatibility cues.
Add supporting visual cards for Compare, Check My Routine, and Scan Collection modes.
Huepick
Let this page be the boldest and most visually expressive of the set.
Use a cream base with visible multicolor accents pulled from the palette wheel in the icon.
Make the page feel creative, playful, and visually exploratory.
Use proof points like Extract palettes, 6 harmony types, 5 creative tools, and Works offline.
Create a signature section featuring palette swatches, harmony chips, and transformation tool previews.
Add supporting visual cues for Analyze, Playground, and Gallery.
Journeyfolio
Use layered blues with travel-oriented accent colors such as ticket red or warm gold.
Make the page feel organized, polished, and itinerary-driven.
Lean into the idea of a modern travel folder or trip dashboard.
Use proof points like Trip planning, Live flight status, Document OCR, and Offline access.
Create a signature section that resembles an itinerary card or travel dashboard module.
Add supporting visual blocks for flights, weather, documents, and day-by-day scheduling.
Solcast
Use warm ivory, soft yellow, sky blue, or sunrise-style gradients tied to the icon.
Make the page feel practical and reassuring rather than overly technical.
Emphasize that the app gives action-oriented weather guidance, not just raw forecast data.
Use proof points like Daily briefing, Outfit advice, 16 indices, and Private on-device.
Create a signature section that shows a daily personalized weather briefing or day-part recommendation panel.
Add supporting visual cues for outfit picks, household guidance, hourly planning, and multi-location use.
Content Direction Recommendations
Keep the current strong copy foundation, but let visual hierarchy do more explanatory work.
Use short modules, chips, and proof cues to reduce dependence on long paragraphs.
Bring the app’s most differentiated value closer to the top of the page.
Make category-specific strengths visible at a glance before the visitor starts reading deeply.
Guardrails
Do not redesign each page into a completely separate system.
Do not over-style pages where clarity and trust are more important than expressiveness.
Do not let color customization weaken accessibility or contrast.
Do not make sibling apps feel unrelated if they share a product family, as with Barkpedia and Nekopedia.
Do not let an app’s marketing page feel branded while its support and privacy pages feel visually disconnected.
Do not rely on decoration alone; every added visual treatment should reinforce product meaning.
Suggested Next Documentation Pass
Define a per-app style board with header mood, accent colors, proof chips, and signature section concept.
Rank ideas by effort versus impact before implementation starts.
Identify which customizations can be handled through front matter or page-level tokens.
Separate universal enhancements from truly app-specific modules before building.