git:20260529.9238f59 to git:20260530.d3be4dd

---

name: style-brand

description: >

Frame and document a project's visual identity: terminal theme, font, demo

capture pipeline, asset conventions. Use when establishing or maintaining brand

consistency. Ships an example brand (Cyberdream + MonaspiceNe + teasr) as a

template, not a mandate.

metadata:

title: Visual Identity

category: visual

order: 0

---

# Visual Identity

## Theme & Font

| Element | Choice |

|---------|--------|

Example palette (Cyberdream -- substitute your own):

| Color | Hex |

|-------|-----|

| Background | `#16181a` |

| Foreground | `#ffffff` |

| Red | `#ff6e5e` |

| Green | `#5eff6c` |

| Yellow | `#f1ff5e` |

| Blue | `#5ea1ff` |

| Magenta | `#bd5eff` |

| Cyan | `#5ef1ff` |

| Selection | `#3c4048` |

## teasr Demo Template

Terminal demos are recorded with a consistent template using whatever recorder you prefer (this portfolio uses [teasr](https://github.com/urmzd/teasr)):

```toml

[output]

dir = "./showcase"

formats = [{ output_type = "gif" }, { output_type = "png" }]

[[scenes]]

type = "terminal"

name = "demo"

theme = "dracula"

cols = 100

rows = 24

frame_duration = 80

[[scenes.interactions]]

type = "type"

text = "export PS1='> '"

hidden = true

[[scenes.interactions]]

type = "key"

key = "enter"

hidden = true

[[scenes.interactions]]

type = "wait"

duration = 500

hidden = true

# Demo commands go here

[[scenes.interactions]]

type = "type"

text = "<command>"

speed = 50

[[scenes.interactions]]

type = "key"

key = "enter"

[[scenes.interactions]]

type = "wait"

duration = 2000

```

## teasr Demo Capture

teasr automates demo capture with `teasr.toml` config:

- **Scene types:** web (Chrome DevTools), terminal (PTY→SVG→PNG), screen (xcap)

- **Output formats:** png, gif

- **Standard output dir:** `showcase/` (default: `./teasr-output`)

- **Naming:** `demo.png`, `demo.gif`, `demo-<feature>.png`

- **CI integration:** invoke your recorder via a reusable action (this portfolio uses `urmzd/teasr/.github/actions/teasr@main`)

## Asset Directory Convention

`showcase/` directory: `demo.png` or `demo.gif` (hero, 80% width), `demo-<feature>.png` (feature captures), `example_results/` (gallery, 30% width each).

## Demo Priority

teasr (automated) > manual screenshots

## Branding Consistency

Your chosen theme + font applied consistently across (example: Cyberdream + MonaspiceNe):

- Terminal demos (teasr)

- GitHub Actions branding (`icon` + `color`)

- github-metrics SVGs