Foundation

Logo

The Ordering.co lockup and four-piece symbol are final for Design Guidelines v1.3.0. Use the supplied vector masters; do not reconstruct the wordmark or geometry.

01 / The decision

Write Ordering.co. Prefer the complete logo.

Include .co whenever naming the brand in English or Spanish: prose, headings, diagrams, captions, metadata, and accessible names. Use the supplied complete logo whenever its minimum size fits; never assemble the symbol and a separately typeset name.

Status · canonical final

This symbol, wordmark, spacing, and palette are the sole identity masters approved for v1.3.0.

Typography boundary

Satoshi exists only as outlined wordmark geometry. Inter and JetBrains Mono remain the editorial and product typefaces.

Written name

Use “Run it on Ordering.co” and “Construye con Ordering.co.” Include .co in descriptive names such as Ordering.co Platform.

Factual exceptions

Preserve exact URLs, code identifiers, legal names, UI labels, documentary quotations, and screenshots. Generic English “ordering” is not a brand mention.

02 / Master specimens

One identity, prepared for Light and Dark

The four symbol colors stay fixed. Use the graphite wordmark on light canvases and the white wordmark on dark canvases.

Light canvas · canonical

Ordering.co full-color lockup for a light canvas

Fixed four-color symbol · graphite wordmark #17181A

Dark canvas · canonical

Ordering.co full-color lockup for a dark canvas

Same fixed four-color symbol · white wordmark #FFFFFF

Is there room for Ordering.co?

Yes: use the full lockup · No: use the symbol

Can four colors reproduce accurately?

Yes: use color · No: use the ink or white master

What is the canvas?

Light: graphite wordmark · Dark: white wordmark

Default digital answer

Use the full-color lockup by default whenever the minimum width fits. Move to the symbol only for constrained or platform placements.

03 / Anatomy & rules

The geometry is a contract

Preserve the four paths, their position, the 0° orientation, the full-size .co, and the supplied lockup spacing. Optical decisions are already encoded in the masters.

Symbol anatomy · 512-unit canvas

Ordering.co symbol construction on a 512-unit canvas

420 outer48 ring26 gap

Top-left · Green

#32B45F

Top-right · Blue

#266DF0

Bottom-left · Orange

#FF9418

Bottom-right · Pink

#E91D63

Wordmark & lockup

Wordmark source: Satoshi Medium · 500
Delivery: Outlined paths · no live text
Ordering.co tracking: −0.01em
.co tracking: −0.0035em
.co scale: 100%
Reference gap: 18px at 126px · 0.142857em
Reference symbol: 145px · lab ratio 100%
Rotation: 0°

Clear space · 2x minimum

Ordering.co lockup with minimum clear-space boundary

2x2x

One x equals the symbol's 26-unit cross gap. Keep at least 2x clear on every side of the symbol or lockup.

Minimum reproduction

28px

Full-color symbol · digital

20px

Monochrome symbol · digital

120px

Full lockup · digital width

30mm

Full lockup · print width

Below the lockup minimum, use the symbol. Do not compress the wordmark or remove .co to force a fit.

04 / Use & avoid

Recognition depends on consistency

Scale the supplied master proportionally. Do not redraw, recolor, rotate, compress, add effects, or animate the four pieces independently.

Use the master

Use the supplied SVG or an official transparent PNG. Preserve its proportions, clear space, piece order, and orientation.

Do not stretch

Do not recolor

Do not rotate

Do not add effects

Do not crowd

Do not make it a control

Also avoid swapping pieces, changing the .co scale, rebuilding the wordmark with live type, creating sub-lockups, or animating the four pieces independently.

05 / Adaptation

Choose the asset for the field and the recognition job

The lockup names the brand when space supports it. The raw symbol belongs on a controlled field; the contained symbol protects recognition in browser chrome, avatars, launchers, and other fields Ordering.co does not control.

Controlled field · use the raw symbol

When the surrounding canvas is known, quiet, and high contrast, keep the symbol open to the field.

Raw Ordering.co symbol on a controlled light field

Raw Ordering.co symbol on a controlled dark field

Uncontrolled field · use a contained symbol

Browser chrome, avatars, operating systems, and unknown imagery need a protected circular field. Do not draw that field yourself.

Ordering.co symbol in the approved light container on an uncontrolled field

Ordering.co symbol in the approved dark container on a complex field

Browser tab · system aware

The browser receives separate Light and Dark SVG icons. PNG and ICO files are compatibility fallbacks, never alternate artwork.

Ordering.co Design Guidelines

Light browser chrome

Ordering.co Design Guidelines

Dark browser chrome

Legibility previews

16px

24px

32px

48px

64px

The 24px specimen verifies intermediate rendering. Distributed PNG fallbacks are 16, 32, 48, and 64px; the SVG remains resolution independent.

Platform placements

Use the prepared derivative for each operating-system surface. Do not export a screenshot or wrap the symbol in a new shape.

Apple Touch · 180px

Opaque light field · dedicated safe area

Avatar

Contained on unknown chrome

Mobile header

Use the complete logo when the 120px minimum fits, including in a mobile header. Use the symbol only when space is constrained; platform placements use the prepared derivative.

Installable icon contract

Web app · any: 192px · 512px
Apple Touch: 180px · opaque
Browser PNG: 16 · 32 · 48 · 64
ICO bundle: 16 · 32 · 48
Maskable: Not approved

The current geometry is not certified for a maskable safe zone. Do not add purpose="maskable" until a dedicated padded derivative is approved and tested.

Website header

Product · Company

Product chrome

Marketplace operations

Presentation cover

Operational confidence

Complex image field

Add a controlled field when the canvas cannot guarantee contrast.

Favicon & avatar

Print cover

30mm min · PDF/X-4

06 / Technical disclosure

Vector first, production specific

The identity is distributed as path-only SVG. Raster exports are conveniences; print conversion is always prepared for the actual production conditions.

Construction, licensing, and print production

Wordmark source

Ordering.co was constructed from the frozen Satoshi Medium 500 v2.000 source and converted completely to curves. Its fingerprint is recorded in the manifest; the font file is not embedded, bundled, or required at runtime.

Digital master

SVG is the master digital format and uses sRGB values. Browser, platform, transparent, and ready-to-place opaque derivatives are indexed by /assets/icons/asset-manifest.json; the current package is /assets/icons/ordering-brand-assets-v1.1.zip.

Print production

The browser Print Proof is a simulation. Prepare PDF/X-4 per job and convert with the ICC profile supplied by the printer. There is no universal canonical CMYK or Pantone conversion.

primitive.color.logo.blue#266DF0

--od-logo-bluepublic

primitive.color.logo.green#32B45F

--od-logo-greenpublic

primitive.color.logo.orange#FF9418

--od-logo-orangepublic

primitive.color.logo.pink#E91D63

--od-logo-pinkpublic

These colors belong together in the masterbrand symbol. They do not create a general campaign palette and do not replace semantic product-state tokens.

07 / Downloads

Use a supplied master

SVG is authoritative. Transparent exports support controlled compositions; ready-to-place opaque exports include the approved white or dark field and the required 2x clear space without changing the canonical paths.

Full-color lockup · light canvas

/assets/logos/ordering-lockup-color.svg

SVG PNG · 512 PNG · 1024 PNG · 2048

Full-color lockup · dark canvas

/assets/logos/ordering-lockup-color-reversed.svg

SVG PNG · 512 PNG · 1024 PNG · 2048

Full-color lockup · opaque white field + 2x clear space

/assets/logos/ordering-lockup-color-on-white.svg

SVG PNG · 512 PNG · 1024 PNG · 2048

Full-color lockup · opaque dark field + 2x clear space

/assets/logos/ordering-lockup-color-on-dark.svg

SVG PNG · 512 PNG · 1024 PNG · 2048