Skip to content
StrictThemes

Themes / 16

Ember

A hot, dark-first theme for games, esports and sport. Blue-black, ember red, and an amber signal from the same fire.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/ember.json

01 / Preview

Stock shadcn components, this theme.

Ember

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.

  • Game

    The home page of a team arena game, with an opening that fills the first screen with the title and one action, the four classes, the current season, the latest news and the system requirements in a table.

    36.0k characters

    Strict Check 100%

    Preview the Game pageRead the prompt: Game

  • Patch notes

    The patch notes of one version of a team arena game, with its version and date, a summary, the new features, a table of balance changes with before and after figures and a filter by class, the fixes and the known issues.

    35.6k characters

    Strict Check 100%

    Preview the Patch notes pageRead the prompt: Patch notes

  • Leaderboard

    The season's ranking of a team arena game, with the viewer's place, a filter by region, a table of players with rank, tier, rating, wins and win rate in which the viewer's own row is marked with a heat bar, and a key to the tiers.

    35.3k characters

    Strict Check 100%

    Preview the Leaderboard pageRead the prompt: Leaderboard

  • Store

    The item shop of a team arena game, with the viewer's balance in the game's currency, this week's featured bundle, and a grid of items with drawn pictures and prices that can be bought until the balance runs out.

    36.0k characters

    Strict Check 100%

    Preview the Store pageRead the prompt: Store

  • Player

    A player's profile in a team arena game, with a square mark with their initials, their rank and rating set large, the season's figures, meters for the classes they play and the season pass, their recent matches in a table and a few achievements.

    36.4k characters

    Strict Check 100%

    Preview the Player pageRead the prompt: Player

03 / Colors

Every color the theme allows.

  • primary

    #9D0208 / #D00000

  • on-primary

    #FFFFFF

  • secondary

    #03071E / #FFF5E9

  • on-secondary

    #FFF5E9 / #03071E

  • tertiary

    #FFBA08

  • on-tertiary

    #03071E

  • neutral

    #6A4B52 / #B5A6AC

  • background

    #FFF5E9 / #03071E

  • surface

    #FFFFFF / #0D1128

  • foreground

    #03071E / #FFF5E9

  • border

    #E5CBAE / #2A2140

  • error

    #D00000 / #FF7B6B

  • heat-low

    #DC2F02

  • heat-mid

    #F48C06

  • heat-high

    #FFBA08

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Oxanium · 72px · weight 800 · line 0.95

    The quick brown fox

  • h1

    Oxanium · 44px · weight 700 · line 1.05

    The quick brown fox

  • h2

    Oxanium · 24px · weight 700 · line 1.2

    The quick brown fox

  • body

    Sofia Sans · 16px · weight 400 · line 1.55

    The quick brown fox

  • label

    Martian Mono · 12px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    1px

  • md

    3px

  • lg

    6px

  • xs

    4px

  • sm

    8px

  • md

    12px

  • lg

    24px

  • xl

    48px

  • 2xl

    80px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, full rounds up to 12px
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Ember is for things people play and compete in: a game's home page, patch notes, a leaderboard, an item shop, a team or a gym. Its dark mode is the main one: a blue-black page lit by one red and one amber, both taken from the same fire. In light mode the red deepens on a warm white. It is loud in its type and strict in its color.

Colors

  • Primary (#9D0208) is ember red, a brighter red in dark mode, for the one main action: "Play free", "Buy", "Join". Links are the text color, underlined.
  • Secondary (#03071E) is blue-black for secondary buttons and headings.
  • Tertiary (#FFBA08) is amber, with blue-black text on it, for one badge: "Live", "New season", "Rank 1".
  • Neutral (#6A4B52) sets dates, version numbers and captions.
  • Background (#FFF5E9) is warm white, and blue-black (#03071E) in dark mode. Surface is one step lighter than the page.
  • Heat (heat-low #DC2F02, heat-mid #F48C06, heat-high #FFBA08) is a three-step scale for meters, ranks and chart bars, the same in both modes: red-orange, orange, amber. It is never a text color and never a button, and its value is always written beside it.
  • Error (#D00000) is red like the action, so it is never shown without an icon and a message.

Typography

Oxanium sets headings: squared, wide and heavy. Set display titles in uppercase and let them run large. Sofia Sans sets body text at 16px. Martian Mono sets labels in uppercase: versions, ranks, scores, dates, prices. Scores and timers use tabular figures.

Layout

A 12-column grid, 1280px at its widest, with 24px gutters. An opening fills the first screen with one title and one action. Below it the page is dense: tables, tiles and lists packed on the grid. Spacing comes from the scale (4, 8, 12, 24, 48, 80): 24px inside a card, 80px between sections.

Elevation & Depth

Flat and dark. A card is one step lighter than the page, with a 1px border. Nothing glows, however much the subject asks for it. Menus and dialogs float on one short, neutral shadow.

Shapes

Hard: 1px for badges, 3px for buttons and inputs, 6px for cards. A status dot is the only circle.

Components

  • Buttons: red for the one main action, blue-black (warm white in dark mode) for the rest. Uppercase mono labels.
  • Cards: 6px corners, 24px padding, a 1px border.
  • Badges: amber with dark text, uppercase, one or two words.
  • Tables and leaderboards: mono figures, right-aligned numbers, a 1px row border, the viewer's own row marked with a heat bar at its left edge.
  • Meters: a flat bar filled with one heat color; low, mid and high are the three steps.
  • Icons: 1.5px stroke line icons. Never emoji.

Do's and Don'ts

  • Do design the dark mode first: it is where this theme lives.
  • Do keep red to one action per screen and amber to one badge.
  • Do let numbers be large: a score or a rank can be the biggest thing on a page.
  • Don't add glows, neon, gradients or blurred glass.
  • Don't use a heat color for text or for a button.
  • Don't introduce a color, size or radius that is not a token above.