Brand reference
Website components
Every component used on index.html, in the TransLogix identity. All colour comes from brand/tokens.css (--tl-*); type from brand/typography.css. Switch the theme in the footer to check light and dark.
Logos
Always the generated files, never typed text. Colour-light on white and ghost grounds; colour-dark on harbour and dark photos. Clear space is two modules of the mark on every side.
assets/logo-horizontal-color-light.svg
assets/logo-horizontal-color-dark.svg
assets/logo-stacked-color-dark.svg
assets/logo-mark-color-light.svg at 64, 32 and 16 px
The Tracking Square
A square on a 7 × 7 module grid. The T bracket (top bar and right stem, harbour) and the L bracket (left stem and foot, sky) are the same shape turned 180°. The orange load is 3 × 3 modules in the centre. The top-left and bottom-right corners stay open by one module.
Box 0 0 70 70. T: M10 0H70V60H60V10H10Z. L: M60 70H0V10H10V60H60Z. Load: 20, 20, 30 × 30.
- Minimum size, mark
- 16 px on screen · 6 mm in print
- Minimum size, horizontal logo
- 96 px wide on screen · 30 mm in print
- Clear space
- 2 modules (2/7 of the mark's height) on every side
- Wordmark
- Archivo SemiBold, outlined, with a square orange tittle on the i
Logo reveal
<tl-logo-reveal> from assets/logo-reveal.js. 2.2 s, plays once when it scrolls into view: the square appears, its brackets open, the square slides into place as the wordmark unfolds, and the load flies to the i. Reduced motion shows the static logo.
theme="light"
theme="dark"
Colour
Harbour carries the brand, sky is its partner, ghost white is the page. Signal orange is the load: one per view. Full values and contrast results: design_TL/colours/palette.md.
Type
Archivo SemiExpanded (Archivo at font-stretch: 112.5%) for display headings, Archivo for everything else, IBM Plex Mono for plates, trip numbers and IDs. Sentence case.
Every load, accounted for.
Built for the corridors.
Finance and profitability
Cross-border haulage
Every kilometre, litre, part and shilling is entered once.
Trips from booking to delivery with odometer readings, fuel and expenses.
Trip profitability
USD 3,850.00
KDA 482Q · TLX-24118 · MSKU 418220 7
Buttons and badges
4 px radius, never pills. One primary action per view. Badges always carry a word and a square marker; colour alone never carries status.
Forms
Labels above fields, 44 px controls, a 3:1 border and a 2 px focus ring. Invalid fields get aria-invalid="true" and a message in words.
Product visuals
Precise, small compositions of the product drawn in HTML and CSS instead of icons or screenshots. Example data only; keep figures consistent and totals correct.
- Mombasa08:40
- Nairobi19:05
- Malaba15:10
- KampalaETA
- Distance
- 1,169 km
- Fuel
- 410 L
- L/100 km
- 35.1
- Margin
- 40.0%
| Trip | Route | Status |
|---|---|---|
| TLX-24118 | Mombasa → Kampala | In transit |
| TLX-24112 | Nairobi → Mombasa | Delivered |
Loaded Mombasa CFS
In transit Jinja
Delivery Kampala ICD
| Costs | USD 2,310.00 |
|---|---|
| Margin | USD 1,540.00 |
Graphic language
Everything is built on the mark's module: the module field, crops of the Tracking Square, and orthogonal routes with square stops. No gradients, no stock illustrations. When the module field is on screen, its route ends are that view's orange.
Section patterns
Each section opens with a square-marked eyebrow, a display heading and one lede paragraph. Light sections alternate ghost and white; harbour bands carry the hero, East Africa and the demo request.
Solutions
One platform for the whole operation.
Fleet, transport, freight and finance share the same records.
East Africa
Built for the corridors.
Body text on harbour 900 is harbour 200 (8.97:1); headings ghost 50 (13.74:1).
- Square bullets in sky
- One idea per line
- No icons needed
Odometer
Readings are immutable; gaps are flagged for review.