# Innkwise Brand Guidelines

Version 1.0 — July 2026

## Brand idea

**Ideas deserve better tools.**

Innkwise is an intelligent creative operating system. The identity expresses a precise system with a human centre.

- The circle represents the complete creative system.
- The imperfect dot represents the beginning of a thought.
- The lowercase “i” represents the individual creator inside that system.
- The contrast between exact geometry and organic ink is intentional.

## Primary logo

The locked primary mark is the organic lowercase “i” enclosed by a completely closed circle. The origin state—a centred dot—is reserved for the beginning of the motion identity and must not replace the permanent mark.

Use the horizontal lockup by default. Use the standalone mark only when Innkwise is already identified or when space is limited. Use the stacked lockup for centred or ceremonial compositions.

## Geometry

The master mark uses a 64 × 64 unit coordinate system.

- Circle: 48-unit diameter with a 2-unit stroke.
- Axis: optically centred at 32 units.
- Dot: approximately 8.7 × 8.7 units with a controlled organic outline.
- Stem: 17.5 units tall, tapered and subtly irregular.
- The circle must always remain mathematically closed in the final state.
- The “i” must never touch the circle.

Do not reconstruct the mark. Use the supplied master artwork.

## Clear space

Maintain clear space equal to at least one ink-dot diameter around every side of the mark or lockup. More space is encouraged.

## Minimum size

- Master mark: 24px minimum on screen.
- Horizontal lockup: 120px minimum width on screen.
- Print mark: 8mm minimum.
- Below 24px, use the supplied optimized favicon assets.

## Colour

| Colour | HEX | Role |
|---|---:|---|
| Ink | `#0A0B0B` | Primary dark ground and dark artwork |
| Paper | `#F1EFE9` | Primary light ground and light artwork |
| Quiet Sage | `#D4DDCF` | Human accent and active intelligence |
| Graphite | `#7F847E` | Secondary text and supporting information |

Ink and Paper should carry most applications. Quiet Sage is an accent, not decoration. Never apply a gradient, glow, bevel, drop shadow, texture, or multiple colours to the logo.

## Typography

The outlined wordmark is based on Avenir Next Medium and includes custom organic dots. Always use the supplied outlined SVG; it has no font dependency.

For product and marketing typography:

- Preferred: Inter.
- System fallback: SF Pro, `ui-sans-serif`, `system-ui`, sans-serif.
- Display: weight 500, approximately −5% tracking.
- Body: weight 400, 1.55–1.7 line height.
- Labels: weight 500, uppercase, +14–18% tracking.

## Motion identity

The motion sequence communicates a thought becoming identity:

1. The imperfect dot begins at the centre.
2. The circle opens.
3. The dot exits through the opening.
4. The dot makes one clockwise journey outside the circle.
5. The dot re-enters and settles at the top-centre.
6. The ink stem forms beneath it.
7. The circle closes completely around the final “i.”

Motion principles:

- Full duration: approximately 9 seconds.
- Use calm, continuous easing; never bounce or overshoot.
- Run once on entry where possible.
- In ambient contexts, pause generously before repeating.
- Honour `prefers-reduced-motion` by displaying the final static mark.

## Social and app icons

Use the supplied square assets. Do not add another container around the app icon. Social avatars may use the Ink, Paper, or Quiet Sage background according to context.

## Voice

- **Calm:** Never manufacture urgency.
- **Intelligent:** Explain; do not posture.
- **Human:** Prefer lived language to jargon.
- **Useful:** Every sentence should earn its place.
- **Creator-first:** The work is the hero, not the technology.

## Do not

- Stretch, rotate, skew, or redraw the logo.
- Change the relationship between the mark and wordmark.
- Replace the organic “i” with a typed character.
- Open the circle in the permanent mark.
- Use gradients, neon, glow, or excessive effects.
- Place the logo on visually noisy imagery without a solid field.
- Animate the dot counter-clockwise.
- loop the motion rapidly or use playful elastic easing.

## Asset index

### Master vectors

- `mark-ink.svg`
- `mark-paper.svg`
- `wordmark-outline-ink.svg`
- `wordmark-outline-paper.svg`
- `logo-horizontal-ink.svg`
- `logo-horizontal-paper.svg`
- `logo-stacked-ink.svg`
- `logo-stacked-paper.svg`

### Digital icons

- `favicon.svg`
- `favicon-16.png`
- `favicon-32.png`
- `favicon-48.png`
- `apple-touch-icon.png`
- `app-icon.svg`
- `app-icon-192.png`
- `app-icon-512.png`
- `app-icon-1024.png`

### Social

- `social-avatar-ink.svg` / `.png`
- `social-avatar-paper.svg` / `.png`
- `social-avatar-sage.svg` / `.png`

### Motion

- `motion-logo-paper.svg`
- `motion-logo-ink.svg`
- React implementation: `app/components/innkwise-logo-motion.tsx`

## Source of truth

The files in `/public/brand/final/` are the production masters. Earlier files in `/public/brand/` are explorations and must not be used as final brand artwork.