# Coordiñare design system

Coordiñare directs specialist coding agents through a shared workflow. Its identity
extends Steward's thoughtful caretaker into an orchestra conductor: the same face,
silver hair and glasses, with formal green tailoring, an ivory bow tie and a baton.

## Design direction

Keep the character as the memorable element. Pair a left-aligned, plain-language
introduction with a large conductor portrait. Put the workflow below the portrait
and introduction so it explains what is being coordinated. Reserve dark forest
sections for visibility and getting started. Use quiet surfaces elsewhere.

```text
hand + Coordiñare                         navigation / get started

Your agents,                              conductor character
working in concert.                       in open space
explanation / actions

Assess > Architect > Implement > Review > Verify > Merge

how it works / agent roles / capabilities / visibility / getting started
```

This deliberately follows the requested Steward family palette and typography.
The conductor and hand-and-baton emblem distinguish Coordiñare. Avoid unrelated
music decoration, animated notes, repeated entrance effects and generic leaf marks.

## Name

The display name is **Coordiñare**, using the precomposed ñ (U+00F1). Use this
spelling in headings, wordmarks, page metadata and prose. Repository names,
filenames, URLs and code identifiers retain the ASCII spelling `coordinare`.
The recorded image-generation prompts preserve their original wording.

## Identity assets

- `assets/brand/coordinare-conductor.png`: transparent raster master, for hero,
  welcome and large brand moments. Minimum displayed width: 160 px.
- `assets/brand/coordinare-conductor.webp`: optimized transparent web delivery.
- `assets/brand/coordinare-mark.svg`: native vector hand-and-baton emblem, for
  navigation and browser tabs. Minimum width: 16 px, preferred header width: 40 px.
- `assets/brand/coordinare-mark.png`: transparent 512 px export of the SVG emblem.
- `assets/brand/coordinare-social.png`: social preview, 1200 × 630.
- `assets/brand/apple-touch-icon.png`: 180 × 180 icon.
- `brand.html`: living brand guide, using the website's actual CSS components.

Use the emblem with the serif wordmark for the everyday signature. Keep clear
space of at least one quarter of the emblem's width, and one eighth of the
character's width. Do not crop the baton, stretch, recolor or add shadows to the
artwork. On dark surfaces, retain the original emblem colors and give it a paper
tile when needed to preserve its silhouette. The wordmark changes to ivory.
Use a decorative empty `alt` when the wordmark already names the product.

## Foundations

`assets/css/tokens.css` is the source of truth. `site.css` maps the original site
variables to these tokens so all sections share the identity.

| Color | Hex | Role |
| --- | --- | --- |
| Forest | #214E3D | Identity, primary controls |
| Ivory | #F6F3EB | Page canvas |
| Paper | #FFFEFB | Raised surfaces |
| Brass | #BC9654 | Illustration details and decoration |
| Ink | #243C32 | Reading and headings |
| Muted | #626C62 | Secondary text |

Brass is not a small-text color. Use `--co-brass-ink` (#80612D) for brass-colored
text on light surfaces. State colors are semantic and always paired with words.

The display stack starts with Iowan Old Style and falls back to Palatino and
Georgia. Use it for the wordmark and major headings. System sans carries body
copy, controls and agent roles; system mono is reserved for commands. No remote
font requests. Keep body copy below 65 characters per line where practical.

Spacing follows 4, 8, 12, 16, 24, 32, 48 and 64 px. Controls use 8 px corners,
surfaces use 16 px corners. Buttons have at least a 44 px target. Focus indicators
must remain visible. Use a single primary action per action group. Mobile content
stacks in reading order; navigation remains available without JavaScript.

The marketing site uses a fixed light appearance with explicit forest sections.
It does not inherit automatic dark-mode changes from the Steward application.
Do not hide content behind animation. Respect reduced-motion preferences.

## Provenance

Reference: `ViviDynamics/steward`, `src/steward/web/static/brand/steward-mascot.png`
and `steward-mark.svg`, retrieved from main on 2026-10-05. The character was
generated with the built-in image generation tool using the original as an
identity reference. The small emblem is authored SVG, following Steward's rounded forest tile,
ivory hand and brass accent construction.
The exact character prompt is recorded in `image-prompts.md`.

The revised emblem uses a filled hand with a natural pinch grip, a separate
tapered baton, and a broad shirt cuff with one brass button. A generated concept
guided the silhouette; the production asset is authored SVG with flat colors
and no raster embedding. It replaces the first outline emblem. The approved
character PNG and WebP are unchanged. The emblem concept prompt is also recorded
in `image-prompts.md`.

The dashboard board is explicitly labeled as an illustrative workflow. It is not
a product screenshot or live data. Replace it with a real, scrubbed screenshot
when one is available; instructions are in `assets/img/README.md`.