ETA Intel brand authority.

Horizontal, black

logo_black

SVG2.3 KBPNG2.6 KBWEBP17.1 KBJPG77.3 KB

Horizontal, white (inverse)

logo_white

SVG2.2 KBPNG2.5 KBWEBP17.1 KBJPG26.2 KB

Icon mark, black

icon_black

SVG656 BPNG964 BWEBP15.9 KBJPG48.4 KB

Icon mark, white (inverse)

icon_white

SVG656 BPNG979 BWEBP15.9 KBJPG5.1 KB

SVG is the master, lossless at any size and used for the previews above, every other format on this page is generated from it. PNG carries transparency for general use. WEBP is a web-optimised raster at 1.5x. JPG is flattened onto an opaque background at 4x, largest file, no transparency. Two print-ready exports are still open, EPS and PDF; neither was available at the time of writing.

r 8

Icon viewBox

0 0 104.93 104.93

Horizontal lockup viewBox

0 0 450.95 104.93

Icon radius, standalone object

8px (7.6% of the edge)

Interface radius, in-page elements

4px

Horizontal lockup ratio

4.30 : 1

Badge aspect

1 : 1

Layout grid

8pt soft grid, 12 columns

Two radii, two different things. 8px is the icon’s own construction, used when the badge stands alone as an object (the mark itself, an avatar, a favicon). 4px is the radius for small interface elements inside a page, buttons and chips such as the download links on this page, matching the site’s existing 4/8/12px radius scale rather than borrowing the icon’s own.

The brand carries a true neutral print black, Ink at #0F0F0F, so it stays press independent. Screen text runs on slate-900 at #0F172A for softer readability. They are deliberately different, and only the mark is called Ink.

CMYK is calculated from sRGB, not colour-managed or print-proofed.

*Pantone is the nearest Pantone Coated match by RGB distance, cross-checked across two independent converters and shown with their match percentage. It is a starting point for proofing, not a certified match, confirm against a physical Pantone book before print production. The near-white entries carry no spot match: Pantone’s coated library has no true paper-white swatch, spec those as unprinted substrate instead.

Three different consumers, three different rules. The browser tab shows whatever you give it, untouched, which is why it is the mark on its own below, no badge: at 16px a full badge reads as a dark smudge, the bare glyph at full height stays legible. iOS and Android do not show things untouched: both apply their own mask on top of the icon, so a badge that carries its own rounded corners gets rounded twice, or shows a background colour in the gap. The badge's own construction (8px radius, see Construction) is correct as documented and unchanged for the logo itself. The Apple and Android files below are separate, full-bleed builds with no corner radius of their own, built specifically so each platform's own mask has nothing to clip incorrectly.

Browser tab

ICO, multi-size

16, 32, and 48px bundled in one file, the universal fallback.

16×16

32×32

48×48

favicon.ico1.1 KB

SVG, scalable, theme-aware

Mark only, no badge, scaled to full height. Two files, the browser switches between them on its own based on the system colour scheme, neither one carries a background so each only reads correctly against its own theme.

Light

Dark

icon.svg570 Bicon-dark.svg567 B

Apple touch icon

180 × 180, full bleed, no corner radius of its own. iOS applies its own mask on top.

apple-touch-icon.png1.3 KB

PWA web manifest

Any

Shown as-is, the badge’s own rounded corners intact.

192×1922.4 KB512×51210.2 KB

Maskable

Full bleed square, same shape as "Any". An OS launcher may crop it to a circle or squircle at runtime, the glyph stays clear of that crop (see the note below).

192×1921.4 KB512×5124.6 KB

The glyph sits well inside the safe zone Android requires (a centred circle 80% of the icon size): measured corner-to-corner, the glyph reaches about 72% of the way to that boundary, so the maskable build needed a full-bleed background but no repositioning of the mark itself.

• Minimum height, wordmark: 24px digital. That is the smallest it is used at in production today, in the site footer.
• Minimum size, icon mark alone: 16px, the favicon floor.
• Clear space: keep at least 8px of empty margin (one corner-radius unit) on every side, more where the layout allows.
• Use the black variant on light surfaces, the white variant on dark ones. Do not place either on a mid-tone background where the contrast breaks down.
• Do not recolor the mark. Ink and surface are the only two colors it carries.
• Do not rotate, skew, or stretch it. The badge is always a 1:1 square with a 8px corner radius.
• Do not add a drop shadow, outline, or effect not shown on this page.
• Do not separate the wordmark from the badge inside a lockup. The icon mark on its own is the only approved standalone use of the badge.

Every file on this page in one archive: four logo variants in SVG, PNG, WEBP, and JPG, the full favicon and app icon set, and the colour values as JSON.

106.4 KB · 28 files

Columns collapse to full width below the layout’s own breakpoint rather than compressing, matching how every grid on the site already behaves.

• Aspect ratio: 3:2, cropped with object-cover. Same ratio as every title card across the network.
• Subject: real facilities and hardware, documentary style. No staged lifestyle photography, no people as the subject.
• Light: golden hour or blue hour, natural and directional, never flat studio lighting.
• No image available: falls back to a neutral slate surface, never a placeholder graphic or a stock silhouette.
• Keep the horizon and the primary subject inside the frame at every crop width, do not zoom past what the composition can lose.
• One photograph, one subject. Do not composite or collage multiple scenes into a single card image.

Correct. Full composition, horizon and subject intact.

Incorrect. Zoomed and off centre, the subject and horizon are lost.

Same source photograph, /titles/floatingwindindex.webp, cropped two ways for comparison.

{
  "system": "ETA Intel identity system",
  "updated": "2026-08-07",
  "note": "Generated from the same values documented on /brand. Font sizes are given in rem assuming a 16px root, matching the site's own Tailwind setup.",
  "color": {
    "ink-logo": {
      "value": "#0F0F0F",
      "usage": "Badge fill, both logo variants"
    },
    "surface-logo-mark": {
      "value": "#FFFFFF",
      "usage": "Icon glyph inside the badge, and the badge fill on the white/inverse variant"
    },
    "ink-text": {
      "value": "#0F172A",
      "usage": "Headings and primary text (slate-900)"
    },
    "charcoal-body": {
      "value": "#475569",
      "usage": "Body copy (slate-600)"
    },
    "steel-muted": {
      "value": "#94A3B8",
      "usage": "Eyebrows, labels, secondary text (slate-400)"
    },
    "silver-hairline": {
      "value": "#E2E8F0",
      "usage": "Borders, dividers (slate-200)"
    },
    "surface": {
      "value": "#F8FAFC",
      "usage": "Page and card surface (slate-50)"
    },
    "white": {
      "value": "#FFFFFF",
      "usage": "Base surface"
    },
    "verified-green": {
      "value": "#047857",
      "usage": "Confirmation, verification, success state (emerald-700). The only functional color in the system"
    }
  },
  "typography": {
    "fontFamily": {
      "sans": [
        "Inter",
        "system-ui",
        "sans-serif"
      ],
      "mono": [
        "ui-monospace",
        "SFMono-Regular",
        "monospace"
      ]
    },
    "heading1": {
      "fontSize": {
        "base": "2rem",
        "sm": "2.25rem",
        "lg": "3rem"
      },
      "fontWeight": 700,
      "lineHeight": 1.1,
      "letterSpacing": "tight",
      "fontFamily": "sans"
    },
    "heading2": {
      "fontSize": {
        "base": "1.5rem",
        "lg": "1.875rem"
      },
      "fontWeight": 700,
      "letterSpacing": "tight",
      "fontFamily": "sans"
    },
    "body": {
      "fontSize": {
        "base": "1rem",
        "lg": "1.125rem"
      },
      "fontWeight": 400,
      "lineHeight": "relaxed",
      "fontFamily": "sans"
    },
    "label": {
      "fontSize": "0.625rem",
      "fontWeight": 400,
      "textTransform": "uppercase",
      "letterSpacing": "0.12em",
      "fontFamily": "sans"
    },
    "caption": {
      "fontSize": "0.6875rem",
      "fontWeight": 400,
      "lineHeight": "relaxed",
      "fontFamily": "sans"
    },
    "data": {
      "fontSize": "0.75rem",
      "fontWeight": 400,
      "fontFamily": "mono"
    },
    "button": {
      "fontSize": "0.875rem",
      "fontWeight": 500,
      "fontFamily": "sans"
    }
  },
  "spacing": {
    "unit": "8px",
    "scale": {
      "1": "8px",
      "2": "16px",
      "3": "24px",
      "4": "32px",
      "5": "40px",
      "6": "48px",
      "8": "64px",
      "10": "80px",
      "12": "96px",
      "16": "128px"
    }
  },
  "grid": {
    "columns": 12,
    "gap": "24px",
    "maxWidth": "1200px",
    "breakpoints": {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px"
    }
  },
  "radius": {
    "interface": "4px",
    "iconStandalone": "8px",
    "large": "12px"
  }
}

Today the live site runs as a single Next.js 14 application on the App Router with React 18 and Tailwind, deployed as one Vercel project. That is the state this section records, and it is dated: a monorepo migration is now underway that changes these facts. Verified 8 August 2026. Counted directly from the hub codebase that day, it holds 47 page files and 5 route handlers. Of the 15 titles in the data layer, tandempanels is the only one marked live; the rest share this one hub until a title site of their own is built.

Older planning documents describe a different architecture: an Astro monorepo with one Vercel project per title. That is not this codebase, and the project’s own status notes already flag the discrepancy directly rather than let it stand. This page describes the system as it runs, not as those documents assumed it would.

• /titles/[slug]: dynamic route with generateStaticParams. 15 static pages, one per title. Every title page shares the same layout, hero and content blocks.
• Content pages: about, advertise, magazine, directory, research and the brand documentation you are reading now. Hand-built on the same components: PageHero, ContentSection, the same type rhythm.
• Hub pages: the navigation pages that hold the structure together. Overviews, category indexes and landing pages.
• Route handlers: 5 total. Authentication, version endpoint and search index. Serving data, not markup.

A title does not get its own voice by writing new copy patterns. It gets one by inheriting the same components this page is built from: PageHero for the opening claim, ContentSection for everything that follows, and the type roles documented above for what counts as a heading, a label, or data. Consistency comes from reuse, not from a style guide that has to be re-read before every new page is written.

This is a principle, not a copy inventory. No per-title messaging audit exists yet. As titles move from stub to live, their copy should be checked against this principle rather than against a separate messaging document that has not been written.

15 workflow files in n8n-workflows/, each keyed to a webhook path with a shared honeypot, timing check and a header-based shared secret. All workflows are active and connected to the live n8n Cloud instance.

Against the standard Brand Authority requirement: a confirmation within 60 seconds and a sales team notification with context. Both are designed into the workflows, in copy and in the fields each internal notice carries, and both are operational.

Stack

Next.js 14, App Router, React 18, Tailwind. No CMS.

Deployment

One codebase, one Vercel project.

Data layer

Supabase, migrated for directory audience and verification data.

Automation

n8n Cloud, 15 workflow files, imported inactive.

This summary is drawn from docs/PAGINA-KAART.md and docs/PROJECTSTATUS-2026-07-31.md, the project's own internal audit documents. Both live in the repository rather than in a public link; a downloadable architecture document that does not require repository access has not been built yet, and is an open item rather than something presented here as finished.