# Inline logo usage

## The idea

The Inline logo is a Butter Yellow square followed by a lowercase wordmark. The
square is a **highlighter mark**: the smallest possible sign that a passage is
worth returning to. Its restraint is the point. The logo contains no pen,
cursor, spark, document, or artificial-intelligence symbol.

When Inline needs a standalone mark, the lockup itself becomes the glyph.
On a fixed Midnight field, the Butter Yellow square opens an abstracted line
of text, with a second full line beneath it. It is the horizontal lockup
reduced to its silhouette: the mark sitting inline, between the lines. This
is the approved avatar and app icon treatment; browser tabs carry the
lighter surface marks defined in the favicons section below. The field is
part of the asset; it is not optional framing.

The wordmark specification is **Sora 750** with **−0.055em** tracking. Its color
is Midnight `#18213B`; the square is Butter Yellow `#E9CB62`. Use the packaged
assets whenever the lockup does not need to be constructed as live HTML.

The licensed Sora variable font is stored in `../fonts/` as TTF and WOFF2. The
source SVGs embed a 750-weight subset of that font, and `logo.css` loads the
full variable webfont. Neither source relies on a substitute system font.

## Construction

- The marker is a perfect square in brand-500 `#E9CB62`. It has no radius,
  border, shadow, or internal symbol.
- The standalone mark uses a 64-unit Midnight field. The brand-500 square is
  12 units at (12, 16). The first text bar is 24 by 12 units at (28, 16),
  separated from the square by a 4-unit gap; the second is 40 by 12 units at
  (12, 36), giving 8 units of leading. Every value sits on a 4-unit grid so
  the composition rasterizes crisply at 16px. The field has no radius; a
  platform may apply its own circular mask.
- The wordmark is lowercase `inline` in Sora 750, ink-900 `#18213B`.
- The source lockup uses a 41.56-unit wordmark size with `−0.055em` tracking.
- Export bounds include one unit of breathing room on each side of the visible
  artwork. Never crop the wordmark to its ink bounds.
- In the horizontal lockup, the marker is 20 units square. Its top edge sits
  7 units below the visible wordmark top. This is the approved optical
  alignment; do not center the marker against the font's invisible line box.
- The visible gap is 17 units, slightly less than one marker width.
- Scale the marker, gap, font size, and tracking together. Never adjust one in
  isolation.

## Asset inventory

| File | Use |
|---|---|
| `mark.svg`, `.png`, `.jpg` | Fixed-field standalone mark, avatar, app icon |
| `mark-inverse.svg` | Compatibility alias for the fixed-field mark; artwork is identical |
| `mark-paper.svg` | Secondary standalone mark on a paper field for light contexts |
| `mark-monochrome.svg` | One-color glyph on a transparent field for print and embossing |
| `wordmark.svg` / `wordmark-inverse.svg` | Font-based text-only legal and footer contexts |
| `lockup-horizontal.svg`, `.png`, `.jpg` | Primary logo for navigation, docs, and email |
| `lockup-horizontal-inverse.svg` | Primary logo on ink-900 or photography |
| `lockup-stacked.svg`, `.png`, `.jpg` | Square formats and centered title pages |
| `lockup-stacked-inverse.svg` | Stacked use on ink-900 |
| `favicon-app.svg` + 16/32 PNG | Product browser tab: the bare marker in Butter Yellow |
| `favicon-site.svg` + 16/32 PNG | Marketing site browser tab: the marker in Midnight, paper under dark themes |
| `app-tab-midnight.svg` / `.jpg` | 512px square social profile tile: Butter Yellow marker on Midnight |
| `app-tab-paper.svg` / `.jpg` | 512px square social profile tile: Butter Yellow marker on paper |
| `site-tab-paper.svg` / `.jpg` | 512px square social profile tile: Midnight marker on paper |
| `favicon.svg` | Documentation site favicon: Butter Yellow marker on a paper field |
| `favicon-180.png`, `-192.png`, `-512.png` | Touch and PWA tiles on the fixed-field mark |
| `logo.css` | Live web construction using Sora 750 |

`fonts/Sora-Inline-750.woff2` is the small self-contained wordmark subset used
inside SVG exports. It contains only the letters needed for “inline”; use the
full variable font for editable web text.

## Clear space

Let **x** equal the marker width. Keep at least `0.75x` of clear space on every
side of the full lockup. Prefer `1x` in marketing layouts. A page edge, rule,
photo subject, or partner logo may not enter this area.

## Minimum size

| Asset | Digital | Print |
|---|---:|---:|
| Horizontal lockup | 96px wide | 25mm wide |
| Stacked lockup | 72px wide | 20mm wide |
| Standalone mark | 16px | 4mm |

Below 72px in a square area, use the marker alone.

## Backgrounds and variants

- On paper or white, use the primary lockup.
- On ink-900, use the inverse lockup: Butter Yellow marker and paper wordmark.
- The standalone mark keeps its Midnight field by default. Where a dark tile
  would feel heavy, such as a light marketplace listing, use `mark-paper.svg`
  with its paper field and Midnight stem.
- On photography, prefer a quiet area. If the image is busy, place the logo on
  a paper or ink field rather than adding a glow or drop shadow.
- For one-color production, use the monochrome mark and wordmark in the darkest
  available ink.
- Butter Yellow does not invert. Its consistency is part of recognition.

## Favicons

The product and the marketing site are routinely open together, often as two
pinned tabs where no title disambiguates. Each surface therefore carries its
own tab mark: the marker alone, 40 units at (12, 12) on the 64 grid, on a
transparent field.

- The app tab renders the marker in Butter Yellow. Yellow lives where
  students work.
- The site tab renders the marker in Midnight and swaps to paper under a
  dark browser theme through a prefers-color-scheme rule inside the SVG.
  The PNG fallback stays Midnight and is accepted as quiet on dark themes.

The ink chip extends the one-color production glyph; it is not a new
colorway, and no third browser surface mark exists. Avatars, app icons, touch
and PWA tiles use the square profile fields, while the documentation site uses
the paper app tile as its favicon. The chips follow marker construction:
perfect square, no radius, no internal symbol, never rotated.

## Social profile tiles

The downloadable profile tiles are square 512px exports for social profiles,
link previews, and other platforms that need a complete field rather than a
transparent browser-tab asset. Each field is full bleed and has no radius.
The marker is 224px square at (144, 144), leaving 144px of clear space on all
sides. Use the SVG when the platform accepts vector artwork and the JPG when
it requires a raster upload.

- `app-tab-midnight.svg` / `.jpg` uses the Butter Yellow marker on Midnight.
- `app-tab-paper.svg` / `.jpg` uses the Butter Yellow marker on paper.
- `site-tab-paper.svg` / `.jpg` uses the Midnight marker on paper.

## Color variations

The approved palette for logo artwork is fixed: a Butter Yellow square,
Midnight, and paper. The field may be Midnight or paper, and one-color
production uses the monochrome glyph. The site favicon renders the marker in
Midnight or paper under the favicon rules above, which stays inside these
fixed inks. No other colorway exists. Recoloring
the square would break the one association the brand depends on, that
yellow marks what matters.

## Incorrect uses

1. Do not round the yellow square. A platform may mask only the standalone
   mark’s outer Midnight field into a circle.
2. Do not stretch, rotate, skew, or crop either element.
3. Do not tighten or widen the gap.
4. Do not substitute Geist, Inter, Trebuchet, or a local sans for Sora 750.
5. Do not capitalize the wordmark.
6. Do not recolor the marker with a feedback or semantic status color.
7. Do not add a cursor, pen, letter, outline, container, or texture to the mark.
8. Do not add shadows, glows, gradients, or motion.
9. Do not place the primary wordmark on a low-contrast image.
10. Do not use the yellow square as a generic bullet throughout a layout.

## Partner lockups

Separate Inline from a partner with a 1px ink-200 vertical rule. Give both marks
equal optical height, not equal bounding-box height. Inline appears first only
when it owns the surface. Never place another square mark closer than `1x` to
the Inline marker.

## Social avatars

Use one of the square profile tiles for social avatars. Choose the Midnight
app tile for product identity, the paper app tile for light contexts, or the
paper site tile for the marketing identity. Keep the exported field square;
a platform may apply its own crop or mask. Never enlarge the marker or redraw
it as a circle.

## Legal

Sora is licensed under the SIL Open Font License 1.1. Keep
`fonts/OFL-Sora.txt` with redistributed font files. Use “Inline” in prose. The
artwork is a brand identifier and should not be redrawn for editorial
illustrations. Trademark notation is not currently part of the lockup.