# TheNerdyBox — brand assets Options for a logo, a Discord server icon, and a Discord banner. **Nothing here is decided** — this is a set to choose from. Once a direction is picked the rest can be deleted and that one extended (favicon, OG image, profile banner, print). Open **[preview.html](preview.html)** in a browser to compare everything at once. It is self-contained: every SVG is inlined, so it works offline and can be sent as a single file. --- ## Where this came from Every value is taken from the live site rather than invented alongside it — `stacks/nerdybox-web/app/globals.css` and `app/layout.tsx`. | Token | Value | Role | |---|---|---| | `--violet` | `#7c5cff` | The brand. Frames, marks, the word "Box". | | `--violet-soft` | `#a594ff` | Secondary violet, eyebrow text. | | `--coral` | `#ff6b4a` | **Reserved for the escaping block.** Never decorative. | | `--live` | `#3ddc84` | Means a server is up, and nothing else. | | `--void` | `#0a0a12` | Background. | | `--ink` | `#f2f1f9` | Primary text. | | `--mute` / `--faint` | `#918eae` / `#605d7c` | Supporting text. | Type: **Bricolage Grotesque** ExtraBold for display and the wordmark, **Inter** for body, **JetBrains Mono** for labels and status text — the same three the site loads. The idea every mark is built on is the one already in the CSS: *a container, and something leaving it.* The site's `.mark` is a violet box with a coral block escaping its corner, and the hero repeats the gesture at full size. The logo options are five readings of that, not five unrelated ideas. --- ## Logos | Direction | Path | What it says | |---|---|---| | **Escape** | `logos/escape/` | The site's existing mark, rebuilt as true vector at logo scale. Exact proportions from globals.css. | | **Breakout** | `logos/breakout/` | The container is broken open — corner removed, block clear of it. The most literal reading of the tagline. | | **Bracket** | `logos/bracket/` | Terminal crop-marks imply the box; the fourth corner has already left. Reads as tooling and craft. | | **Scale** | `logos/scale/` | A box inside a box. Speaks to "room to scale" and private instances as much as to escape. | | **Monogram** | `logos/monogram/` | NB in Bricolage ExtraBold inside the frame. The most conventional option, and the most legible when tiny. | Each direction ships three lockups × three colourways: | File suffix | Use | |---|---| | `-horizontal-*` | Default. Nav bars, headers, anywhere wide. | | `-stacked-*` | Square-ish spaces, splash, merch. | | `-mark-*` | Mark alone. Favicon, avatar, watermark. | | `*-on-dark` | The site and Discord. Ink wordmark, violet "Box". | | `*-on-light` | Light backgrounds, print, invoices. | | `*-mono` | One flat colour. Embroidery, stamps, single-colour print. | PNGs sit next to each SVG at 3× for anywhere vector is not accepted. ### Animated Two exports of the same motion, same source geometry, same trajectory — different renderers. Both play the breakout gesture out literally instead of holding it as a static pose: the block starts inside the frame and bounces off the walls, eases over to the frame's own cut corner, squeezes through the actual notch (not a stand-in gap — the same rotated-square mask the static mark uses), and comes to rest at the mark's real, published exterior position. It holds there, then gets pulled back through the same gap to bounce again. Both loop seamlessly — frame 0 and the instant after the last frame are the same animation state, verified bit-for-bit (mask-compared per colour channel), not just visually smooth. | File | Renderer | Look | |---|---|---| | `logos/breakout/nerdybox-breakout-mark-animated.gif` | Canvas2D vector shapes | Clean, solid fills — matches the static mark exactly, no texture. | | `logos/breakout/nerdybox-breakout-mark-animated-glyph.gif` | The site's ASCII/glyph character grid | Pixelated — every cell is a monospace glyph, so the fill has visible grid texture and the inter-cell gaps are genuinely transparent, not a bug. This is the origin site's own rendering style, exported directly rather than re-vectorised. | Neither is a replacement for the other — pick the vector one where a clean mark is the point, the glyph one where the pixel-art texture is the point. Same colour values as `-on-dark` (violet stroke, coral block) on both, but on a fully transparent background rather than composited onto `--void`. That is not a fourth colourway — it is **not calibrated for light backgrounds**. `--violet` holds AA as text on `--void` (4.54) but was never measured against white (that pairing is what `--violet-fill` exists for; see `decisions/001` in the repo root); a light-background version would need its own pass, not a naked drop of either file onto white. `-animated.gif`: 640×640, GIF89a, 15 fps, 9.00s per loop, ~824 KB, no dithering — the palette has room to represent violet, coral and transparency exactly, so it does not need it. `-animated-glyph.gif`: 640×578, GIF89a, 15 fps, 9.00s per loop, ~3.2 MB, also undithered — larger because the glyph texture itself is real per-frame detail a flat-colour palette can't compress away, not because of colour noise. Both generators (a Canvas2D re-implementation of the same rect/stroke/ notch-mask numbers the static mark uses for the vector one; the origin site's own WebGL glyph-grid renderer, background chroma-keyed out, for the other) live outside this repo, same as the wordmark generator — see **Regenerating** below. --- ## Discord icons Discord crops server icons to a **circle** and renders them as small as **20 px** in the server rail, so these carry no text and keep the mark inside a generous circular safe area. Source is 512×512; `-512.png` is the file to upload. | Mark | Field | File | |---|---|---| | Escape | Void field, violet mark | `discord/icons/nerdybox-icon-escape-void.svg` | | Escape | Violet field, white mark | `discord/icons/nerdybox-icon-escape-violet.svg` | | Breakout | Void field, violet mark | `discord/icons/nerdybox-icon-breakout-void.svg` | | Bracket | Void field, violet mark | `discord/icons/nerdybox-icon-bracket-void.svg` | | Scale | Void field, violet mark | `discord/icons/nerdybox-icon-scale-void.svg` | | Monogram | Void field, violet mark | `discord/icons/nerdybox-icon-monogram-void.svg` | | Monogram | Violet field, white mark | `discord/icons/nerdybox-icon-monogram-violet.svg` | --- ## Discord banners | Option | File | Note | |---|---|---| | **Frame** | `discord/banners/nerdybox-banner-01-frame.svg` | The site's hero gesture: the wordmark sits astride the frame's top edge and the coral block escapes the corner. | | **Tagline** | `discord/banners/nerdybox-banner-02-tagline.svg` | "the box" is literally set inside a box, and the chip is leaving it. Loudest of the four. | | **Status board** | `discord/banners/nerdybox-banner-03-status.svg` | Centred wordmark over live-status pills, on the site's grid. Reads as an operating service. | | **Bleed mark** | `discord/banners/nerdybox-banner-04-bleed.svg` | Mark at billboard scale off the right edge, copy left. Quietest and most brand-forward. | Each exports at two sizes from one vector: - `-960x540.png` — **server banner** (the image above the channel list) - `-1920x1080.png` — **invite splash** Discord lays the server name over the bottom-left of the banner behind a dark scrim, so nothing important is placed there. The **profile banner** is a different shape (680×240) and needs its own layout rather than a crop — not generated yet. --- ## Regenerating Text is outlined to paths, so the SVGs carry no font dependency and render identically anywhere. That also means **the wordmark cannot be re-typed by editing the file** — change it in the generator and rebuild. The generator lives in the session scratchpad, not in this repo. If these need to change, the inputs are the four Google Fonts TTFs plus `globals.css`. One thing worth knowing if the generator is ever revived: opentype.js's `toPathData()` emits the literal string `NaN` for any coordinate that lands on a whole number, which silently truncates the glyph and every glyph after it. The generator serialises path commands itself and asserts no `NaN` reaches a written file.