# span.

**Your assets. A new destination.**

Span explores a calmer way to understand moving assets between destinations. Its identity builds on the existing extension: a double arch, warm canvas, deep ink, and an optimistic lime accent. The arch suggests connection; the open space keeps it light.

**Supporting phrase:** A little less between.

## Voice and product truth

Calm, clear, optimistic. Use short sentences, familiar verbs, and specific descriptions. Let spacing and precise copy do the work. Prefer “Choose a destination,” “Explore Span,” and “See how it works.” Name the action and explain what happens next.

The current product **runs entirely offline**. It does not execute real transactions. Describe interactions and routes as illustrative. Place “No real transactions” beside an interactive bridge interface. Use “Explore Span” for the primary action; do not imply that the app is available on mainnet or ready to move funds.

Avoid unsupported claims about adoption, partners, security, audits, custody, transaction speed, fees, supported live networks, or availability. A familiar asset or destination appearing in an illustrative flow is not a partnership or endorsement. Do not add testimonials, customer logos, fabricated activity, or invented performance numbers.

## Logo

The name is lowercase **span.**, with its period. In prose, “Span” may begin a sentence. Keep the period in brand lockups and never separate it onto another line.

The arch uses the original `40 × 40` viewBox and its exact two paths. The outer and inner arches have a `4.5` stroke; the feet have a `3` stroke. Preserve the default butt caps and miter joins. Do not redraw, round the ends, stretch, rotate, add effects, or merge the openings.

- **Clearspace:** leave at least one quarter of the mark's displayed 40-unit box on every side (10 units at native size). Measure from the logo's outer bounds; retain the same clearspace around the complete wordmark lockup.
- **Minimum sizes:** mark 24 × 24 CSS px; full wordmark lockup 112 CSS px wide. Prefer a 32–40 px mark in navigation and larger in identity applications. Use the standalone mark only where Span is already identified.
- **Backgrounds:** ink mark on canvas or lime; canvas or lime mark on ink. Avoid lime on canvas and busy imagery behind any logo.
- **Wordmarks:** `wordmark-dark.svg` uses ink with a moss period; `wordmark-light.svg` uses canvas with a lime period. Both contain editable SVG text and use the extension's system font stack. They are not outlined artwork: exact letter shapes and width can vary across operating systems. Keep the SVG text editable and check fit when importing into a design tool.

## Palette and contrast

| Role | Color | Use |
| --- | --- | --- |
| Canvas | `#f4f5ef` | Main surface; light text on ink |
| Ink | `#20251e` | Body copy, headings, controls; dark feature sections |
| Lime | `#d3f568` | Primary action surface, accents; text or mark on ink |
| Moss | `#738754` | Decorative arch forms, large accents, wordmark period |

Calculated sRGB contrast ratios are rounded to two decimals; classification uses the unrounded value.

| Pair | Ratio | Guidance |
| --- | ---: | --- |
| Ink / canvas | 14.24:1 | Primary body text; passes the 7:1 enhanced text threshold |
| Ink / lime | 12.66:1 | Primary button label or text on lime; passes 7:1 |
| Moss / canvas | 3.60:1 | Large text or meaningful non-text shapes only |
| Moss / ink | 3.96:1 | Large text or meaningful non-text shapes only |
| Moss / lime | 3.20:1 | Large text or meaningful non-text shapes only |
| Lime / canvas | 1.12:1 | Decorative use only; insufficient for text or necessary boundaries |

For this guide, normal text needs at least 4.5:1; large text (24 CSS px regular or about 18.7 CSS px bold) and meaningful non-text graphics need at least 3:1. See W3C guidance on [text contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) and [non-text contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html). These pair checks do not establish full accessibility compliance. Use ink for small labels and supporting copy. Do not lower text opacity to create a muted style without rechecking contrast. A lime button on canvas needs its ink label and a visible ink focus indicator; use an ink border when its boundary is necessary to recognize the control. Never communicate status using color alone.

## Typography and composition

Use the existing stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`. Do not add a webfont. Body copy uses 400 weight and a 1.55 line height; UI labels use 500–650. The wordmark uses 730 with approximately `-0.053em` tracking, matching the original extension's proportion.

Headlines can be large and tightly tracked (`-0.055em`, line height 1.02); keep body tracking normal. Use sentence case. Start mobile body copy at 16 px and check actual wrapping. Leave generous space around a short headline, with one clear action nearby.

## Use patterns

- Make canvas the dominant surface. Use ink for hierarchy and lime as a focused accent. Moss supports the composition.
- Use the double arch as a quiet oversized motif. Decorative crops are welcome; the identifying logo remains complete and legible.
- Use rounded, simple panels and pill labels sparingly. Keep controls recognizable, labels visible, and keyboard focus obvious.
- Show the Span interface with its sample-data status. Explain a short sequence: choose an asset, choose a destination, review an illustrative route.
- Keep brand copy and product capability separate: “Your assets. A new destination.” is the headline; the adjacent supporting text explains that the current experience runs entirely offline.

## Files and provenance

`mark-dark.svg`, `mark-light.svg`, `mark-lime.svg`, `wordmark-dark.svg`, `wordmark-light.svg`, and `brand-tokens.css` are editable source assets. SVGs have transparent backgrounds. “Dark” and “light” describe the artwork color, not its intended background.

The arch geometry and original font proportions come from `outputs/span-extension/src/icons.js` and `outputs/span-extension/styles.css` in the source workspace. This pack retains that identity, standardizes the requested moss color, and adds reusable application guidance.