# ALTASPECTIVE Brand Kit
Kit version 1.0.1 · published 2026-08-31 · source repo https://github.com/voinsre/altaspective-brand
**This file is the canonical entry point.** It carries the complete brand specification and the full
URL of every published asset. One fetch of this document is enough: nothing else needs to be
uploaded, and no other URL needs to be guessed.
---
You are producing work for **ALTASPECTIVE**, a private online reputation management firm in Dubai.
Follow this specification exactly. Do not improvise beyond it. If a value you need is not listed
here, it does not exist in this brand: solve the problem with space instead of inventing one.
## Colour · exactly two, plus a derived grey ramp
- **Obsidian `#000000`** is the default surface. This brand lives on black.
- **Ivory `#FFFFF7`** is the ink, and the light surface. A warm off-white. **Never use `#FFFFFF`.**
- **Ash ramp** (Ivory blended onto Obsidian, so nothing is a foreign colour):
`#D9D9D2` `#B3B3AD` `#8C8C88` `#666663` `#40403E` `#1F1F1E` `#0F0F0F`
- **Alert `#FF5050`** is for form errors only. The only chromatic value permitted anywhere.
**There is no accent colour, and that is deliberate.** Do not add gold, navy, burgundy, teal or any
metallic to signal luxury. Do not introduce a gradient as a substitute for one.
Accessibility floor: Ivory below 50 percent opacity on black fails WCAG AA. Never set body copy
below `rgba(255,255,247,0.50)`.
## Typography · exactly two families
- **Headings: Cormorant Garamond, weight 300, ALWAYS UPPERCASE, letter-spacing 0.15em, line-height 1.2.**
Every heading level. Never bold. Never sentence case.
- **Body and interface: Inter, weights 300 to 500, sentence case, letter-spacing 0, line-height 1.8.**
- **Never introduce a third typeface**, not for code, not for numbers, not for emphasis.
Tracking is assigned by role and is the loudest signature in the system:
| Tracking | Applies to |
|---|---|
| `0.30em` | Eyebrows, labels, kickers, 10 to 12px uppercase |
| `0.20em` | Navigation, buttons, calls to action, 12 to 14px uppercase |
| `0.15em` | Every heading |
| `0.05em` | Form fields |
| `0` | Body copy. Never track running text. |
Sizes: display-1 `clamp(2rem,5vw,4.5rem)` · display-2 `clamp(2rem,4vw,3.5rem)` · display-3
`clamp(1.5rem,2.5vw,2.25rem)` · display-4 `1.25rem` · lead `clamp(0.85rem,1.5vw,1.1rem)` · body
`clamp(0.9rem,1.4vw,1.05rem)` · body-sm `0.875rem` · nav `0.8125rem` · button `0.75rem` · eyebrow
`0.6875rem`.
**Numerals:** Cormorant sets old-style figures and that is deliberate, so display numbers and
statistics use them. Tables and any column that must align use Inter with `tabular-nums`.
Body copy never exceeds **600px** or roughly **65 characters** per line. Body line-height is **1.8**
and is not negotiable.
## Space and structure
- 4px base scale: `4 8 12 16 24 32 40 48 60 80 120`
- Rhythm: eyebrow → headline 16px, headline → standfirst 24px, standfirst → CTA 40px, section →
section 80 or 120px
- Print margins 25mm, 30mm foot. Screen gutter 60px desktop, 24px mobile. Content max 1200px.
- **Structure is square: border-radius `0`** on buttons, inputs, cards, tables and the logo. The only
rounded elements are glass panels (16px) and photographs (12px).
- **Every rule is 1px.** There are no thick rules anywhere.
- **There is one button:** transparent fill, 1px Ivory border, square corners, 16px/32px padding,
12px uppercase at 0.20em. On hover it inverts to Ivory fill with Obsidian text over 0.3s. No
secondary button, no pill, no filled button. Lower-priority actions are text links with an animated
1px underline.
## Logo
Four locked variants, each in ivory and black, all in `assets/logo/svg/`. The mark is an eight-point
star: four long cardinal spikes, four shorter diagonals, concave edges. It reads as a north star.
- **Stacked lockup** (2.02:1) is primary. Covers, title slides, centred layouts.
- **Horizontal lockup** (5.55:1) for headers, letterhead, nav bars.
- **Wordmark** (17.88:1) for footers, signatures.
- **Icon** (1:1) for avatars, favicons, watermarks.
Rules: ivory artwork on dark, black artwork on light, never the reverse. Clear space on all four
sides equals one wordmark cap height (25 percent of icon height for the icon alone). Minimum sizes:
icon 24px, wordmark and stacked lockup 150px wide, horizontal lockup 180px wide.
Never recolour, rotate, stretch, add effects to, box, or rebuild the logo, and never re-typeset the
name in Cormorant, Inter or any other font and call it the logo. The SVG files are the only source.
## Imagery
**Every photograph is 100 percent greyscale. No exception**, no duotone, no partial desaturation, no
colour grade. Apply `filter: grayscale(100%)` in code so a colour file dropped in by mistake still
renders correctly.
Subjects: modernist and brutalist architecture, glass towers with hard shadow, the Dubai skyline
under heavy cloud, interiors with deep one-point perspective, stone and concrete texture in raking
light, anonymous silhouettes. Never a recognisable face.
Composition: negative space fills at least half the frame, one dominant subject, hard directional
light, deep shadow, strong vertical or one-point perspective, level horizons.
Any image carrying type sits under a black veil at 35 to 60 percent, 45 percent by default. Type goes
in the darkest or emptiest quarter of the frame.
Never: colour of any kind, handshake or boardroom stock photography, smiling posed portraits, lens
flare, bokeh, vignettes, grain overlays, illustration, 3D render, isometric art, colour-filled icons.
## Motion
Slow, single-property, unhurried. Nothing bounces, nothing springs, nothing slides in from off screen
except a mobile menu.
Easing: standard `cubic-bezier(0.4,0,0.2,1)`, decelerate `cubic-bezier(0.16,1,0.3,1)`, emphasized
`cubic-bezier(0.65,0,0.35,1)`. Duration: 0.3s micro, 0.5s page transition, 1s entrance, 2s reveal,
40s ambient.
Page transitions are cross fades only. Content enters by fading up 30px over 1s, children staggered
0.2s. Background photographs drift scale 1 to 1.05 and back over 40s. Always honour
`prefers-reduced-motion`.
## Voice
**Say less. Never sell. State, do not persuade. Confidence is quiet.**
Short declaratives. The two-beat construction carries the brand. Headlines uppercase and tracked,
body sentence case and untracked.
Lexicon: private, discretion, discipline, precision, legacy, perception, quiet, strategic,
definitive, exclusively, counsel.
**Banned outright:** exclamation marks · **em dashes in anything a client reads** (use commas,
colons, periods, parentheses, or the middle dot `·` for inline separation) · growth language (scale,
hack, leverage, unlock, supercharge) · category filler (best in class, world class, leading, cutting
edge, synergy) · urgency (act now, limited spots) · emoji, anywhere, ever.
## Documents
Build on Obsidian by default. Never mix Obsidian and Ivory surfaces inside one document except on a
full-bleed cover or divider.
Cover: stacked lockup centred, title in display-2, nothing else. Running header: horizontal lockup
top left at 180px, or nothing. Running footer: `ALTASPECTIVE · Private and Confidential · Page N` in
eyebrow style at `#8C8C88`, above a 1px `#1F1F1E` rule.
Tables: no fills, no zebra striping, no vertical rules. Horizontal 1px `#1F1F1E` rules only, column
heads in eyebrow style at `#8C8C88`.
Charts: Ivory is the primary series, further series step down the Ash ramp (`#D9D9D2`, `#B3B3AD`,
`#8C8C88`). Alert red only for exceptions or negative values. No fills, no gradients, no 3D, no
legend box, no gridlines heavier than 1px `#1F1F1E`.
Confidentiality marking: `PRIVATE AND CONFIDENTIAL` in eyebrow style at `#8C8C88`, top right of page
one or in the footer. Never red, never boxed, never a diagonal stamp.
## Before you deliver, check every line
1. Only `#000000`, `#FFFFF7`, the Ash ramp and (if a genuine error state) `#FF5050` appear. No
`#FFFFFF`.
2. Every heading is Cormorant Garamond 300, uppercase, 0.15em.
3. Body is Inter, line-height 1.8, no letter-spacing, no wider than 600px.
4. Every border-radius is 0 except glass panels and photos. Every rule is 1px.
5. Every image is fully greyscale and veiled where type sits on it.
6. The logo has a full cap height of clear space and the correct colourway for its background.
7. No exclamation marks, no em dashes, no emoji.
8. No text sits below 50 percent Ivory on black.
9. Nothing was added that is not specified here.
---
# Asset URLs
Every URL below is absolute and literal. Fetch any of them directly.
### Logo, SVG
Use these first. Vector, no padding, the file edge is the artwork edge.
| What it is for | Filename | URL |
|---|---|---|
| Stacked lockup, ivory. PRIMARY. Covers, title slides, centred layouts, on dark | `altaspective-lockup-stacked-ivory.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-lockup-stacked-ivory.svg |
| Stacked lockup, black. Covers and centred layouts, on light | `altaspective-lockup-stacked-black.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-lockup-stacked-black.svg |
| Horizontal lockup, ivory. Headers, letterhead, nav bars, on dark | `altaspective-lockup-horizontal-ivory.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-lockup-horizontal-ivory.svg |
| Horizontal lockup, black. Headers and letterhead, on light | `altaspective-lockup-horizontal-black.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-lockup-horizontal-black.svg |
| Wordmark, ivory. Footers and signatures, on dark | `altaspective-wordmark-ivory.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-wordmark-ivory.svg |
| Wordmark, black. Footers and signatures, on light | `altaspective-wordmark-black.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-wordmark-black.svg |
| Icon, ivory. Avatars, watermarks, app icons, on dark | `altaspective-icon-ivory.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-icon-ivory.svg |
| Icon, black. Avatars and watermarks, on light | `altaspective-icon-black.svg` | https://brand.altaspective.com/assets/logo/svg/altaspective-icon-black.svg |
### Logo, PNG
Transparent raster fallbacks, for email and anywhere SVG is blocked.
| What it is for | Filename | URL |
|---|---|---|
| Icon black, 1024px wide, transparent | `altaspective-icon-black@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-black@1024w.png |
| Icon black, 2048px wide, transparent | `altaspective-icon-black@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-black@2048w.png |
| Icon black, 512px wide, transparent | `altaspective-icon-black@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-black@512w.png |
| Icon ivory, 1024px wide, transparent | `altaspective-icon-ivory@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-ivory@1024w.png |
| Icon ivory, 2048px wide, transparent | `altaspective-icon-ivory@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-ivory@2048w.png |
| Icon ivory, 512px wide, transparent | `altaspective-icon-ivory@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-icon-ivory@512w.png |
| Lockup horizontal black, 1024px wide, transparent | `altaspective-lockup-horizontal-black@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-black@1024w.png |
| Lockup horizontal black, 2048px wide, transparent | `altaspective-lockup-horizontal-black@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-black@2048w.png |
| Lockup horizontal black, 512px wide, transparent | `altaspective-lockup-horizontal-black@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-black@512w.png |
| Lockup horizontal ivory, 1024px wide, transparent | `altaspective-lockup-horizontal-ivory@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-ivory@1024w.png |
| Lockup horizontal ivory, 2048px wide, transparent | `altaspective-lockup-horizontal-ivory@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-ivory@2048w.png |
| Lockup horizontal ivory, 512px wide, transparent | `altaspective-lockup-horizontal-ivory@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-horizontal-ivory@512w.png |
| Lockup stacked black, 1024px wide, transparent | `altaspective-lockup-stacked-black@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-black@1024w.png |
| Lockup stacked black, 2048px wide, transparent | `altaspective-lockup-stacked-black@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-black@2048w.png |
| Lockup stacked black, 512px wide, transparent | `altaspective-lockup-stacked-black@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-black@512w.png |
| Lockup stacked ivory, 1024px wide, transparent | `altaspective-lockup-stacked-ivory@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-ivory@1024w.png |
| Lockup stacked ivory, 2048px wide, transparent | `altaspective-lockup-stacked-ivory@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-ivory@2048w.png |
| Lockup stacked ivory, 512px wide, transparent | `altaspective-lockup-stacked-ivory@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-lockup-stacked-ivory@512w.png |
| Wordmark black, 1024px wide, transparent | `altaspective-wordmark-black@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-black@1024w.png |
| Wordmark black, 2048px wide, transparent | `altaspective-wordmark-black@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-black@2048w.png |
| Wordmark black, 512px wide, transparent | `altaspective-wordmark-black@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-black@512w.png |
| Wordmark ivory, 1024px wide, transparent | `altaspective-wordmark-ivory@1024w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-ivory@1024w.png |
| Wordmark ivory, 2048px wide, transparent | `altaspective-wordmark-ivory@2048w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-ivory@2048w.png |
| Wordmark ivory, 512px wide, transparent | `altaspective-wordmark-ivory@512w.png` | https://brand.altaspective.com/assets/logo/png/altaspective-wordmark-ivory@512w.png |
### Specification and tokens
| What it is for | Filename | URL |
|---|---|---|
| Every brand rule, machine readable | `brand.json` | https://brand.altaspective.com/brand.json |
| The full written brand guide | `BRAND-GUIDE.md` | https://brand.altaspective.com/BRAND-GUIDE.md |
| The visual brand guide, open in a browser | `brand-guide.html` | https://brand.altaspective.com/brand-guide.html |
| CSS custom properties, plus base classes and a light-surface block | `tokens.css` | https://brand.altaspective.com/tokens/tokens.css |
| Tailwind theme preset | `tailwind.preset.js` | https://brand.altaspective.com/tokens/tailwind.preset.js |
### Templates
Self-contained HTML. Open in a browser, print to PDF with background graphics on.
| What it is for | Filename | URL |
|---|---|---|
| A4 letterhead, Ivory surface | `letterhead.html` | https://brand.altaspective.com/templates/letterhead.html |
| Multi-page A4 report: cover, contents, section opener, table, chart | `report.html` | https://brand.altaspective.com/templates/report.html |
| 16:9 deck: title, divider, statement, two column, data, closing | `presentation.html` | https://brand.altaspective.com/templates/presentation.html |
| Table-based HTML email signature | `email-signature.html` | https://brand.altaspective.com/templates/email-signature.html |
| Social canvases at 1080x1080, 1200x630 and 1080x1920 | `social-post.html` | https://brand.altaspective.com/templates/social-post.html |
### Guidance
| What it is for | Filename | URL |
|---|---|---|
| Font embed code, fallbacks, and Word and Office settings | `FONTS.md` | https://brand.altaspective.com/fonts/FONTS.md |
| Photography rules and AI image prompt recipes | `IMAGE-DIRECTION.md` | https://brand.altaspective.com/image-style/IMAGE-DIRECTION.md |
### Reference imagery
| What it is for | Filename | URL |
|---|---|---|
| Reference photograph, exterior, correct image style | `reference-exterior.jpg` | https://brand.altaspective.com/assets/reference/reference-exterior.jpg |
| Reference photograph, interior, correct image style | `reference-interior.jpg` | https://brand.altaspective.com/assets/reference/reference-interior.jpg |
### Social and favicon
| What it is for | Filename | URL |
|---|---|---|
| Open Graph sharing card | `altaspective-og-1200x630.png` | https://brand.altaspective.com/assets/social/altaspective-og-1200x630.png |
| Favicon asset, android-chrome-192x192.png | `android-chrome-192x192.png` | https://brand.altaspective.com/assets/favicon/android-chrome-192x192.png |
| Favicon asset, android-chrome-512x512.png | `android-chrome-512x512.png` | https://brand.altaspective.com/assets/favicon/android-chrome-512x512.png |
| Favicon asset, apple-touch-icon.png | `apple-touch-icon.png` | https://brand.altaspective.com/assets/favicon/apple-touch-icon.png |
| Favicon asset, favicon-16x16.png | `favicon-16x16.png` | https://brand.altaspective.com/assets/favicon/favicon-16x16.png |
| Favicon asset, favicon-32x32.png | `favicon-32x32.png` | https://brand.altaspective.com/assets/favicon/favicon-32x32.png |
| Favicon asset, favicon.ico | `favicon.ico` | https://brand.altaspective.com/assets/favicon/favicon.ico |
| Web app manifest | `site.webmanifest` | https://brand.altaspective.com/assets/favicon/site.webmanifest |
---
# Using the artwork
**Colourway.** Use `-ivory` (`#FFFFF7`) artwork on dark backgrounds and `-black` (`#000000`) artwork
on light backgrounds. Never the reverse. A black logo on a dark panel is the most common way this
identity gets broken.
**Which lockup.**
- **Stacked** for covers, title slides, and any centred layout. This is the primary lockup.
- **Horizontal** for headers, letterhead, navigation bars, and any horizontal band.
- **Wordmark** for footers and email signatures, or where the mark already appears nearby.
- **Icon** for avatars, favicons, watermarks, and anywhere the wordmark would be illegible.
**Referencing or inlining.** An SVG can either be referenced by its URL in an ``, or fetched
and pasted inline as an `