ember-branding

All Ember brand assets in one package, consumed by the mobile app and the website. Every generated asset is produced by the deterministic, dependency-free Node scripts in scripts/ — regenerate everything with:

npm run gen

Preview

App icons

Web icons

Ember marks and splash screens

Effects

Feature icons

The website's product-facing icons are available as editable 24×24 SVGs in assets/icons/features/. They use currentColor, so their stroke color can be changed without editing the vector paths.

| Product area | Files | | --- | --- | | Wake-up checks | scan.svg, vocabulary.svg, math.svg, tiles.svg, blackjack.svg, walk.svg | | Alarm behavior | alarm.svg, persistence.svg, wake-up-check.svg, schedule.svg, time.svg | | Progress and social | progress.svg, themes.svg, score.svg, ranks.svg, best-session.svg, friends.svg | | Supporting states | complete.svg, live.svg |

Regenerate only this set with:

npm run gen:feature-icons

Assets

| File | Size | Used by | Source | | --- | --- | --- | --- | | assets/icon-background.png | 1254² | source background for opaque app icons | supplied top-left fade | | assets/icon.png | 1254² | mobile app.json iOS icon | gen-app-icon.js | | assets/icon-512.png | 512² | brand export | gen-app-icon.js | | assets/android-icon.png | 1024² | mobile app.json Android icon | gen-app-icon.js | | assets/adaptive-icon.png | 1024² | mobile app.json adaptive icon (tighter for the circle mask) | gen-app-icon.js | | assets/favicon.png | 48² | mobile app.json web favicon | gen-app-icon.js | | assets/icon-web.png | 1024² | website header/footer mark + apple-touch icon (transparent cutout) | gen-app-icon.js | | assets/icon-web.svg | scalable | editable transparent vector logo | gen-app-icon.js | | assets/icon-web-512.png | 512² | website (transparent cutout) | gen-app-icon.js | | assets/favicon-96.png | 96² | website favicon | hand-derived from the icon (website/scripts/round-icons.swift) | | assets/ember-mark.png | 1024² | brand export (transparent) — feed to image models / icon tooling | gen-ember-mark.js | | assets/ember-mark-dark.png | 1024² | brand export on the app's #0D1117 dark | gen-ember-mark.js | | assets/splash-ember.png | 2048² | interim splash (dark, mark at the optical center) | gen-ember-mark.js | | assets/splash-video-first-frame.png | — | mobile native splash (app.json) + SplashIgnition static frame | first frame of the splash animation | | assets/ember-splash.html | — | self-contained animated splash page (the splash video's source) | authored | | assets/sunburst-thin.png | 2048² | mobile SunBackdropRays (white, tinted at runtime) | gen-sunburst.js | | assets/sunburst-thick.png | 2048² | mobile SunBackdropRays (white, tinted at runtime) | gen-sunburst.js | | assets/horizon-glow.png | 512² | mobile onboarding / alarm background glow (white, tinted at runtime) | gen-horizon-glow.js |

Consuming

Mobile (metro):

const source = require('ember-branding/assets/sunburst-thin.png');

and in app.json, reference through node_modules:

"icon": "./node_modules/ember-branding/assets/icon.png"

Website (Next.js static imports):

import iconWeb from "ember-branding/assets/icon-web.png";
<Image src={iconWeb} … />

Brand colors

The scripts are the source of truth for the mark's recipe: glow #F59E4C, heart #FFF0CD, app dark background #0D1117, and the icon field in assets/icon-background.png. The runtime ember skins live in the mobile app (content/emberSkins.ts), which is mirrored manually by the website.