Brand overview
A digital-first operating system for offline advertising — connecting inventory discovery, planning, booking, campaign execution, measurement, reporting, finance and settlement in one operational platform.
Ad Triton
Offline advertising, connected.Provisional
A digital-first operating system for offline advertising — connecting inventory discovery, planning, booking, campaign execution, measurement, reporting, finance and settlement in one operational platform.
A digital-first operating system for offline advertising.
- Discovery
- Planning
- Proposal
- Booking
- Campaign
- Execution
- Proof
- Measurement
- Reporting
- Finance
- Settlement
Product name, tagline, description and lifecycle text on this page are read fromsrc/config/brand.ts. No component hardcodes them.
Mission
Digitize the offline advertising value chain and make OOH operations more transparent, traceable and manageable.
The brand speaks about operational capability, not market rank. Avoid superlatives and unverifiable leadership claims in product copy.
Brand attributes
Every interface decision should be defensible against these attributes.
Technological
Transparent
Trustworthy
Structured
Intelligent
Operational
Scalable
Enterprise-ready
Brand values
- Transparency
- Traceability
- Operational reliability
- Financial correctness
- Trust
- Simplicity where complexity can be removed
- Connectivity between advertisers and media owners
Audiences
Four audiences share one visual system; tone and density stay consistent across them.
Merchant / Advertiser
Plans and books offline campaigns, and needs proof that they ran.
Publisher / Media Owner
Publishes inventory, manages availability and fulfils bookings.
Agency
Coordinates plans and proposals across multiple advertisers.
System Operator
Oversees operations, data integrity and settlement.
Logo system
A minimal geometric mark: a filled circle with a subtracted orbital node — identifiable down to favicon size.
Concept / Placeholder — Final mark pending approval
Minimum concept size for the mark is 16px; below that use the mark inside a solid tile.
Reserve clear space equal to the height of the mark on all sides. Nothing crosses that boundary.
- Lockup in the application top bar and authentication screens
- Mark only for compact rails, avatars and the favicon
- Mono version for documents, invoices and print
- Do not stretch, rotate or re-proportion the mark
- Do not re-colour the mark outside brand and mono tones
- Do not add shadows, glows, gradients or outlines
- Do not place the mark on a low-contrast photograph
Final legal logo specifications (exact clear-space ratios, minimum print sizes, file variants) are deliberately deferred until the mark is approved.
Color system
Primitives feed brand tokens, brand tokens feed semantic roles, and only semantic roles reach components. Values shown are read live from the active theme.
Provisional brand blue is #3B82F6 (--blue-500), exposed to the product as --brand-primary. Raw Tailwind blue utilities are not part of the product API.
Brand blue
Primary identity scale. Provisional brand blue is --blue-500 (reference #3B82F6) and is surfaced to the product as --brand-primary.
--blue-50Lightest blue surfaceSelected rows, subtle callouts—--blue-100Subtle blue surfaceBadge backgrounds—--blue-200Blue borderEmphasised borders, chart lightest—--blue-300Blue accentDark-mode links, secondary series—--blue-400Bright blueDark-mode hover, focus ring—--blue-500Primary brand bluePrimary actions, selected state—--blue-600HoverPrimary action hover, links (light)—--blue-700PressedPrimary action active—--blue-800Deep blueChart emphasis, deep accents—--blue-900Navy blueInverse blue surfaces—--blue-950Deepest navyBrand-deep panels—
Midnight / navy
Dark-theme surfaces. Deep navy, never generic black.
--midnight-600Raised dividerDark chart comparison—--midnight-700Strong borderDark inputs, dividers—--midnight-800Border / subtle fillDark borders, subtle badges—--midnight-900Tertiary surfaceDark hovered rows—--midnight-950Secondary surfaceDark sidebars and panels—--midnight-1000CanvasDark application background—
Neutral
Dominant interface scale. Neutral surfaces carry the UI, not blue.
--neutral-0Canvas / cardLight background, cards—--neutral-50Secondary surfaceSidebar, page wash—--neutral-100Tertiary surfaceTable headers, hover—--neutral-200Primary borderCrisp thin borders—--neutral-300Secondary borderInputs, stronger dividers—--neutral-400Tertiary textPlaceholders, disabled—--neutral-500Muted textMeta labels—--neutral-600Secondary textBody support text—--neutral-700Strong textDense data text—--neutral-800Heading textHeadings on light—--neutral-900Primary textDefault foreground—--neutral-950Inverse textText on light inverse surfaces—
Semantic roles
Feature code consumes these, never primitives. Theme switching only remaps this layer.
--surface-primaryCanvas / cardPage and card background—--surface-secondaryWashSidebars, page background—--surface-tertiarySubtle fillTable head, hover rows—--text-primaryPrimary textHeadings, key values—--text-secondarySecondary textDescriptions, labels—--text-tertiaryTertiary textPlaceholder, disabled—--border-primaryDefault borderCards, tables, dividers—--border-secondaryStrong borderInputs, controls—--brand-primaryBrand actionPrimary buttons, selected nav—--brand-hoverBrand hoverHover state of brand action—--brand-activeBrand pressedActive/pressed state—--brand-subtleBrand tintSelected background, accent chips—
Status
Status is never expressed with brand blue. Info is the only blue semantic role, and status is always paired with a label or icon.
--successSuccessCompleted, approved, delivered—--warningWarningAttention, risk, pending review—--errorErrorFailure, rejected, destructive—--infoInfoNeutral information, in-progress—
Data visualization
Constrained palette: brand blue, lighter blue, one cyan accent, and neutral comparison. No rainbow series.
--viz-1Primary seriesMain metric—--viz-2Secondary seriesComparison metric—--viz-3Accent seriesThird series (sky/cyan)—--viz-4Neutral seriesBaseline / previous period—--viz-5Emphasis seriesHighlighted segment—
Color usage
Neutral surfaces dominate. Blue is reserved for intent and interaction, never for decoration.
Blue
Primary actions, selected navigation, links, focus, meaningful highlights
Neutral
Dominant surfaces, borders, text and structure — most of the interface
Success
Operation succeeded, approved, delivered
Warning
Attention or operational risk
Error
Failure and destructive intent
Brand blue never substitutes for a semantic state. A successful booking is --success, not brand blue; a failed sync is --error.
Typography
Inter for Latin, a Persian-capable family for fa-IR. Regular weight carries the interface; semibold is reserved for hierarchy.
The approved licensed Persian product font is not available in this project. Persian text currently falls back to Vazirmatn and then to system Persian faces. Switch it centrally via --font-persian insrc/styles.css.
Offline advertising, connected
تبلیغات محیطی، متصل
- Style
- Display
- Utility
.type-display- Size / LH
- 36–48px fluid / 1.08
- Weight
- 600
- Use
- Marketing and brand statements only
Media operations dashboard
داشبورد عملیات رسانه
- Style
- H1
- Utility
.type-h1- Size / LH
- 30px / 1.2
- Weight
- 600
- Use
- Page title
Inventory and availability
موجودی و دسترسپذیری
- Style
- H2
- Utility
.type-h2- Size / LH
- 22px / 1.3
- Weight
- 600
- Use
- Section heading
Active campaigns
کمپینهای فعال
- Style
- H3
- Utility
.type-h3- Size / LH
- 17px / 1.4
- Weight
- 600
- Use
- Panel / card heading
Inventory discovery, planning and booking in a single operational surface.
کشف موجودی، برنامهریزی و رزرو در یک بستر عملیاتی یکپارچه.
- Style
- Body
- Utility
.type-body- Size / LH
- 15px / 1.6
- Weight
- 400
- Use
- Default interface text
Last synchronised 12 minutes ago
آخرین بهروزرسانی ۱۲ دقیقه پیش
- Style
- Small
- Utility
.type-small- Size / LH
- 13px / 1.5
- Weight
- 400
- Use
- Dense tables, helper text
Media status
وضعیت رسانه
- Style
- Caption
- Utility
.type-caption- Size / LH
- 11px / 1.45
- Weight
- 500
- Use
- Column and metric labels
124.8
۱۲٤٫۸
- Style
- Metric
- Utility
.numeric- Size / LH
- inherits / inherits
- Weight
- 500–600
- Use
- Tabular numbers, KPIs, prices
Spacing
A 4px base scale, matching the Tailwind step system. Arbitrary spacing values are not allowed in feature code.
p-14pxIcon / label gapp-28pxCompact control paddingp-312pxInput padding, table cellp-416pxCard padding (compact)p-520pxCard paddingp-624pxPanel padding, grid gapp-832pxSection spacing (inner)p-1040pxSection spacingp-1248pxMajor section spacingp-1664pxPage-level rhythm
Radius
Modern, not soft. Cards stay at 8px; pills are limited to badges, filters and compact controls.
None
0px
Tables, data grids
Small
4px
Inputs, badges, small controls
Medium
6px
Buttons, menu items
Large
8px
Cards and panels
Pill
999px
Badges, filters only
No oversized pill cards. Large radii signal consumer apps, not an operations platform.
Shadows / elevation
Borders and surface hierarchy do the structural work. Elevation only communicates layering.
None
--elevation-noneDefault: borders do the work
Subtle
--elevation-subtleCards, sticky headers
Raised
--elevation-raisedHover cards, dropdown triggers
Overlay
--elevation-overlayDialogs, popovers, sheets
Icons
Lucide is the single icon system: 16px in dense UI, 20px in headers, consistent 1.5px stroke.
- Location
- Digital media
- Availability
- Measurement
- Filter
- Search
- Upload proof
- Export
- Settings
- One icon per action; never stack decorative icons.
- Icon-only buttons always carry an accessible label.
- Do not mirror icons for RTL unless the glyph is directional.
- Status never relies on an icon alone — pair it with text, as in the status badges.
Icon rules
Form controls
React Hook Form plus Zod validation, with labelled controls and explicit error and helper text.
Campaign name needs at least 3 characters
Name is available
Badges & status
A shared status vocabulary for operational records. Presentation only — no business rules attached.
Every status pairs colour with a label and an icon, so state never depends on colour alone.
Data tables
The densest surface in the product: compact rows, crisp borders, sortable headers, selection and pagination. Sample fixture data only.
| Location | Format | Availability | Campaign | Status | ||||
|---|---|---|---|---|---|---|---|---|
| Airport Arrivals WallSAMPLE-0203 | Mashhad — Terminal 2 | Backlit 6×2 m | Nov 01 – Nov 30 | Winter Travel | Pending | $۲۴٬۲۰۰ | ||
| Highway Bridge BannerSAMPLE-0219 | Isfahan — Ring Road | Banner 20×4 m | Sep 20 – Oct 04 | Q3 Telecom | Active | $۱۵٬۷۵۰ | ||
| Mall Atrium TotemSAMPLE-0244 | Shiraz — Persian Gulf Mall | Digital totem 75″ | Oct 10 – Oct 24 | Footwear Launch | Completed | $۷٬۳۰۰ | ||
| Metro Concourse Screen ASAMPLE-0187 | Tehran — Tajrish Station | Digital 1920×1080 | Oct 05 – Oct 31 | — | Available | $۹٬۶۰۰ | ||
| Stadium Perimeter LEDSAMPLE-0271 | Tabriz — City Stadium | LED 90×1 m | Unavailable | — | Paused | $۳۱٬۰۰۰ | ||
| Valiasr Gateway BillboardSAMPLE-0142 | Tehran — Valiasr St. | Billboard 12×3 m | Oct 01 – Oct 14 | Autumn Retail Push | Reserved | $۱۸٬۴۰۰ |
Table notes
Fixture data lives in src/features/brandbook/fixtures.ts and is prefixed SAMPLE-. No backend, query or data provider is wired to this table.
Dashboard UI language
A specimen of the future application surface: KPI blocks, restrained charts, progress and activity. Not the real dashboard — sample content only.
Media operations
Sample specimen — fixture data, no backend
Booked vs delivered
Weekly, last six weeks
Format mix
Share of booked inventory
Execution progress
- Autumn Retail PushActive86%
- Winter TravelPending34%
- Q3 TelecomCompleted100%
- Footwear LaunchPaused12%
Recent activity
Proof of posting uploaded for SAMPLE-0219
09:12Completed
Booking request submitted for SAMPLE-0203
08:47Pending
Proposal approved — Autumn Retail Push
YesterdayApproved
Availability sync failed for one publisher feed
YesterdayFailed
This composition demonstrates density, hierarchy and restraint. It is not the production dashboard and contains no business logic.
Data visualization
A deliberately narrow palette: brand blue, lighter blue, one cyan accent and a neutral baseline. Series colours come from tokens, so charts follow the active theme.
--viz-1Main metric--viz-2Comparison metric--viz-3Third series (sky/cyan)--viz-4Baseline / previous period--viz-5Highlighted segment
Maximum of three data series per chart by default. Semantic colours appear in charts only when the data itself is a status.
Empty, loading and error states
Operational clarity over optimism: when data is missing or stale, say so instead of rendering plausible numbers.
No bookings yet
Bookings appear here once a proposal is approved.
رسانهای با این فیلترها یافت نشد
Try widening the date range or clearing the format filter.
داده بارگذاری نشد
The availability service did not respond. Nothing was changed.
Measurement data unavailable
This publisher has not delivered proof for the selected period. Figures are intentionally blank rather than estimated.
Accessibility & responsive behaviour
Foundational rules that apply to every future module.
- Text and interactive colours are chosen for WCAG-conscious contrast in both themes.
- Focus is always visible: a 2px brand ring with an offset, never removed.
- Every control has a label; icon-only buttons use an accessible name.
- Status is conveyed by label plus icon, never by colour alone.
- Semantic HTML: landmarks, headings in order, lists for lists, real buttons.
- Tap targets stay at or above 32px in dense UI and 36px elsewhere.
- Reduced-motion preference disables transitions and animation.
- Desktop-first for data-heavy operations, but no horizontal page breakage.
- Tables scroll horizontally inside their own container by design.
- KPI grids collapse 4 → 2 → 1; panels stack before they shrink.
- Section navigation becomes a horizontal scroller below the large breakpoint.
Checked manually at 390px, 820px and 1440px in both directions.