# Oxara visual identity guidelines

## Brand architecture

`OX` is the shared maker mark.

| Context | Recommended lockup |
| --- | --- |
| Umbrella software brand | `OX` + `OXARA` |
| Personal authorship | `OX` + `Erdem Özkara` |
| Product | `OX` + product name, for example `Oxtensions` |
| Favicon, app icon, avatar | `OX` mark only |

Never create a different maker mark for a product. A product may have its own
controlled illustration language, but identity and shared emphasis remain in
the single Brand Turquoise system.

## Master mark

The mark consists of eight modules on a fixed grid. Do not join, rotate, rearrange, stretch or recolor individual modules outside an approved Brand export profile.

The four X modules are independent. They never overlap or touch; the controlled center gap is part of the master geometry.

The O arm and X module must carry equal optical weight. Exact construction values and the drift-prevention contract are documented in [GEOMETRY-CONTRACT.md](GEOMETRY-CONTRACT.md).

The primary vertical-flow assignment is:

```text
O: graphite | turquoise    X: turquoise | graphite
   graphite | turquoise       turquoise | graphite
```

## Color

| Token | Hex | RGB | Purpose |
| --- | --- | --- | --- |
| Oxara Turquoise | `#19C7B5` | 25, 199, 181 | Energy, authorship, product connection |
| Oxara Graphite | `#17202B` | 23, 32, 43 | Technical foundation, primary dark neutral |
| Ink | `#0D1218` | 13, 18, 24 | Dark backgrounds and typography |
| Cloud | `#F4F7F8` | 244, 247, 248 | Light modules on dark surfaces |
| White | `#FFFFFF` | 255, 255, 255 | Clear space and reverse mark |

Turquoise and Graphite are the corporate identity colors. Ink and Cloud are
supporting neutrals. Product, site and document profiles must not replace the
Turquoise accent modules with context-specific colors.

The interface tint scales and implementation tokens are documented in [COLOR-SYSTEM.md](COLOR-SYSTEM.md).

The shared product behavior, including theme-independent canonical Turquoise 500 primary actions with white text, is documented in [PRODUCT-EXPERIENCE.md](PRODUCT-EXPERIENCE.md). Identity and `ui-primary` remain distinct roles even though the approved values are identical; the documented contrast exception remains mandatory evidence.

## Approved variants

- **Primary:** Graphite + Turquoise on white, Cloud or very light neutral surfaces.
- **On dark:** Cloud + Turquoise on Ink or Graphite surfaces.
- **Monochrome turquoise:** preferred single-color signature.
- **Monochrome graphite:** documents and light-background embossing.
- **Monochrome white:** one-color use on dark or photographic surfaces.
- **Profile export:** Graphite/Cloud neutral modules plus the locked Brand
  Turquoise identity accent.

Do not place the primary mark directly on a dark surface: its Graphite modules disappear.

## Clear space and minimum size

Let `m` equal the width of one module.

- Minimum clear space on every side: `0.5m`.
- Minimum digital width for the full `OX` mark: `24 px`.
- At 16 px, use the purpose-built favicon output and avoid adjacent text.
- Minimum print width: `8 mm`.

## Typography

- **Brand and interface:** Manrope, weights 500–700.
- **Technical labels and code:** JetBrains Mono, weights 400–600.
- **Fallback:** Segoe UI, Arial, sans-serif.

Product names use sentence case unless the registered/product spelling requires otherwise. Avoid extended tracking in body copy; reserve modest tracking for uppercase `OXARA` lockups.

## Product lockups

The mark appears first, followed by a fixed gap equal to half one module. Product names align to the optical center of the mark. The product name may use Graphite on light backgrounds or Cloud on dark backgrounds.

Examples:

- OXARA
- Oxtensions
- Local Change Guard
- Erdem Özkara

## Product family consistency

Oxara products share identity geometry, semantic color roles, typography discipline, spacing rhythm, interaction priority and restrained visual tone. They do not share one mandatory page layout. Information architecture, content density and product-specific features remain with the product owner; see [PRODUCT-EXPERIENCE.md](PRODUCT-EXPERIENCE.md).

Social, SEO and installable-app media use versioned Brand profiles rather than one-off platform artwork. See [DIGITAL-MEDIA.md](DIGITAL-MEDIA.md).

## Loading and splash surfaces

The animated OX loader belongs to web, WebView and application-owned loading states after the first rendered frame. Its background stays transparent so the mark can run over product-owned content without introducing a separate panel. Use Turquoise + Graphite on light surfaces and Turquoise + Cloud on Ink or Graphite surfaces. Use one instance at `48–96 px`, remove it when loading finishes and provide a static alternative for reduced-motion users. Operating-system launch screens use platform-owned outputs: a static approved mark on iOS and a short, non-looping `AnimatedVectorDrawable` on Android 12+. The full lifecycle, performance limits and motion contract are defined in [LOADING-AND-SPLASH.md](LOADING-AND-SPLASH.md).

## Misuse

Do not:

- change the module arrangement or corner geometry;
- assign arbitrary, candidate or context-specific colors to identity or shared
  emphasis roles;
- apply gradients, glow, bevel, shadow or outlines;
- compress or stretch the mark;
- place it without sufficient contrast;
- use the symbol as a decorative repeating pattern at the expense of recognition;
- combine it with an unrelated product logo as if both were the maker mark.
- render the animated loader at full viewport size or leave it running after the loading state ends;
- use the 5.2-second web SVG as an iOS or Android system launch-screen asset.

## Print

The supplied assets use RGB/hex values. A print supplier should create and proof CMYK/spot conversions for the chosen stock and process. Never accept an automatic CMYK conversion without a physical proof, especially for Turquoise.