# RomeoApps visual identity

## Core idea

RomeoApps makes uncertain software work inspectable. The visual identity is an assembled signal: a puzzle-like mark, a milk-white ground, a mulberry decision signal, and proof that tells the reader what has been checked and where the boundary remains.

The identity is stable across generic pages. It is not a page-specific palette and it does not prevent a product, case study, or learning surface from having its own art direction.

## Brand constants

### Mark

- Use `assets/romeoapps-logo.png` unchanged. Do not redraw, recolor, crop, rotate, or place text over it.
- Keep at least one mark-width of clear space around the mark when it is used as a standalone identity block.
- Use 24–40px for navigation and 48–80px for a standalone payment or proof surface.
- When the wordmark is adjacent, the image alt is empty. When the mark is alone, use `RomeoApps mark`.
- Use the mark for favicons, Apple touch icons, Open Graph identity, public headers, and public footers.

### Core palette

These are brand roles, not a mandatory page background:

| Role | Token | Value | Use |
| --- | --- | --- | --- |
| Plum-black | `--ra-ink` | `#2a2226` | wordmark, headings, structure |
| Milk | `--ra-paper` | `#fffefa` | readable brand surfaces and quiet space |
| Mulberry | `--ra-signal` | `#a6335d` | primary action, live state, selection |
| Moss | `--ra-proof` | `#54705f` | links, evidence, secondary action |
| Saffron | `--ra-boundary` | `#c28a2c` | warnings, limits, failed fit, not decoration |
| Warm gray | `--ra-rule` | `#d2cbc1` | dividers and low-emphasis structure |

White/paper is a first-class RomeoApps surface. Generic pages may use it freely. Specialized pages may use a different target-driven surface while retaining the mark and brand roles.

### Palette decision

Milk / Mulberry / Moss is now the canonical generic-page direction. The other four candidates remain documented in `PALETTE-OPTIONS.md` as rejected alternatives and future history. Do not promote a palette because it is novel alone: target fit, legibility, and batch-level variety still outrank novelty.

### Typography and composition

- Display: a strong, slightly condensed sans or a restrained editorial face; the headline should be specific, not promotional.
- Body: a highly legible humanist sans with generous line height.
- Utility: compact mono labels for evidence, status, prices, dates, and scope.
- Prefer one dominant composition, short copy, visible boundaries, and cardless sections.
- Use rounded corners sparingly. The mark is the distinctive symbol; do not repeat puzzle graphics as decoration.

### Voice and proof

Plain, specific, evidence-led, and free of inflated promises. Name what was checked, what remains uncertain, what the buyer must provide, and where the work stops. Do not invent customers, metrics, testimonials, completion claims, or private proof.

### Shared public header contract

Every public RomeoApps page should expose the reusable `.romeoapps-brandbar` from `brand.css`, or a page-specific header that preserves the same mark, wordmark, link to the public home, and visible focus behavior. The header may be integrated into a target-specific visual system; it must not disappear merely because the page has a bespoke art direction.

## Page-specific freedom

Target pages may vary their dominant surface, type pairing, hero composition, material, imagery, density, and motion. Reuse of a previous style is allowed when the target benefits from it. The brand layer is successful when the page is recognizably RomeoApps without making every page look identical.

## Audit scope

Applied or audited for the generic/public surfaces under `site/romeoapps/`, `site/micro-diagnostic/`, `site/pay-me/`, and `site/vercel-stripe-landing/`. Standalone SCORM content and comparison galleries receive a minimal brand presence but keep their runtime or catalogue behavior.