Netcade Design System

Brand Kit & UI Tokens

This page is the single source of truth for Netcade’s colors, type, buttons, and component behavior across the website and Unreal client.

N
NETCADE
DESIGN SYSTEM

Buttons

Primary actions use a cyan gradient pill. Secondary is a dark neutral, ghost is text-like.

Primary

Use once per surface for the main action (Play, Publish, Save).

Secondary

Use for actions that are important but not the primary destination.

Ghost / text

Use in modals or secondary areas where a text-link style is preferred.

Segmented toggle

Use to switch between modes like Games / Shows / Music.

Inputs & UI

Inputs, tabs, dropdowns, and cards share a neutral dark style so cyan + gold stay special.

Inputs

Tabs

Overview
Downloads
Analytics

Dropdown

GAME
Featured game card
Used on home and category pages.
Loading state
Show while metadata or cover art is loading.
Skeleton placeholder
Use in dashboards and lists for better perceived speed.

Color system

Netcade uses a mostly neutral dark palette. Gold highlights “Netcade decisions”: membership, payouts, and upgrade CTAs. Cyan lights are used for focus & primary actions.

Page background
--nc-bg-page · #020617
Hero background
--nc-bg-hero · #050816
Surface
--nc-surface · #050b16
Surface soft
--nc-surface-soft · #020617
Border subtle
--nc-border-subtle · #111827
Border strong
--nc-border-strong · #1f2937
Text main
--nc-text-main · #e5e7eb
Text soft
--nc-text-soft · #cbd5f5
Text muted
--nc-text-muted · #9ca3af
Gold
--nc-gold · #e6c681
Gold deep
--nc-gold-deep · #7d6230
Danger
--nc-danger · #ef4444

Typography

The brand uses a strong serif for the wordmark only. Everything else relies on the system UI stack so Netcade feels “native” on every OS.

Logo / hero
NETCADE
Page title
Creator Dashboard
Used on major surfaces like dashboards and store hubs.
Section title
Recent earnings
Body
Netcade uses 15px body text and 13px captions for data-heavy layouts, so tables and charts remain readable on all displays.

CSS snippet

h1,h2,h3,.nc-serif{
  font-family:"PenumbraHalfSerifStd-Bold","Cormorant Garamond",serif;
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,
               "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
}

Membership badges

Used in sidebars, profile headers, and creator lists when someone has a Netcade plan.

Netcade Member

Netcade Member

Base membership. Use anywhere a subscription unlocks perks.

Netcade Ultra

Netcade Ultra

Premium tier; tie this to the highest revenue share and priority features.

Supporter

Creator Supporter

For gifted subs, patrons, or special community campaigns.

SVG assets

Basic SVG snippets for the wordmark and launcher tile so you can drop them in Unreal splash screens or web layouts.

Wordmark

<svg viewBox="0 0 860 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ncWordmarkGold" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%"  stop-color="#fef3c7"/>
      <stop offset="40%" stop-color="#e6c681"/>
      <stop offset="100%" stop-color="#7d6230"/>
    </linearGradient>
  </defs>
  <rect width="860" height="220" fill="#020617"/>
  <text x="50%" y="52%" dominant-baseline="middle" text-anchor="middle"
        font-family="PenumbraHalfSerifStd-Bold,serif" font-size="120"
        fill="url(#ncWordmarkGold)" letter-spacing="5">NETCADE</text>
</svg>

Launcher tile

<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <rect x="24" y="24" width="208" height="208" rx="32"
        fill="#020617" stroke="#1f2937" stroke-width="4"/>
  <circle cx="112" cy="128" r="56" fill="#020617"/>
  <path d="M88 164V92h16l32 40V92h14v72h-16l-32-40v40z"
        fill="#e5e7eb"/>
  <text x="190" y="136" font-size="40" text-anchor="middle"
        font-family="PenumbraHalfSerifStd-Bold,serif"
        fill="#e6c681">N</text>
</svg>
Copied to clipboard