Netcade Brand Kit
This page uses the same “YouTube Dark” foundation as your front page (trustworthy + familiar), while preserving Netcade’s chrome/premium components for panels and actions.
Rule: keep surfaces simple (YT), put chrome only on **hover** + **primary actions**.
Foundation
Use these on all “content browsing” pages.
Background:
#0f0f0fSurface:
#181818Chip:
#272727Line:
#2a2a2aText:
#f1f1f1Muted:
#aaaaaaChrome overlays
Use sparingly (hover edges + primary buttons).
Spec:
rgba(255,255,255,.18)Spec2:
rgba(255,255,255,.08)Shadow:
0 18px 60px rgba(0,0,0,.55)Typography
Serif for headlines, system font for UI clarity.
NETCADE
Headlines: PenumbraHalfSerifStd-Bold
Mode chips
Match the exact behavior/shape from your front page.
Tag pills
Use as “quick filters”. Keep them clean (no fancy gradients).
Inputs
Tabs
Overview content preview (copy + meta rows).
Downloads content preview (install states).
Analytics content preview (charts later).
Dropdown
Dropdown uses a real menu (no browser default).
Promo banners
Hero promo + compact tiles (same premium surface, readable like YT).
Featured • This week
Netcade Winter Drop
Curated indie releases + Unreal creators. Fast installs, clean UI, premium chrome on hover.
New
Creator dashboards now support richer stats.
Tip creators
Support devs directly with clean modal flow.
Install
Unified install bar style for downloads.
Cards
This demo matches the “whole-card glow/highlight” you implemented on the front page.
Loaders
Spinner + indeterminate bar + install bar (determinate).
Spinner
Indeterminate download/install bar.
Skeletons
Skeleton state while data loads (grid cards).
Membership badges
Chrome icons, readable labels, dark background.
Netcade Member
Netcade Member
Netcade Ultra
Ultra Member
Creator Supporter
Supporter
Modal
Panel rules
- Panels are subtle (don’t outshine content).
- Specular edge only on hover.
- Use chrome for “actions”, not for every container.
CTA tile
Looks like the footer CTA strip style.
Muted text
Muted must stay readable (YT muted).
“Muted” should never be too dark to read.
Copy/paste snippets
Body classes
add_filter('body_class', function($c){
$c[]='nc-theme';
$c[]='nc-yt';
return $c;
});
Install bar
<div class="nc-installbar">
<div class="meta">...</div>
<div class="pct">22%</div>
</div>