The NAITCO framework
A component-based CSS framework in the house design language:
Barlow throughout, monochrome ink on white, square corners,
hairline rules. Organised as base / layout / components /
skins / themes / utilities under src/styles/;
usage and migration notes in src/styles/README.md.
Colour tokens
--c-ink
#101010 — primary text
--c-ink-soft
#4a4a4a — secondary text
--c-ink-faint
#8a8a8a — meta / counters
--c-bg
#ffffff — ground
--c-bg-warm
#f7f5f1 — warm surface
--c-hair
#e6e6e6 — hairlines
--c-dark
#111111 — footer slab
--color-success
#2e7d54 — success (rules/text only)
--color-warning
#a3711f — warning
--color-danger
#b23a2e — danger
--color-info
#4a6a85 — info
Spacing scale
--space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8 Typography
Aa — display H1
Aa — section H2 (Barlow 400)
Aa — H3 title (Barlow 700)
Lede — Barlow 18/1.55. Buyers reach us with a specification and a delivery window.
Body — Barlow 16/1.5, roughly seventy per cent of all text on any page.
Section label — Barlow Condensed Bold
01 / meta — counters and fineprint
Muted text. Faint text. A standard link. Truncation: North Atlantic International
Grid
12 columns, mobile-first. .row + .col-*, breakpoints sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Gutters via .g-* / .gx-* / .gy-*, offsets via .offset-*.
.col-12 .col-md-8.col-12 .col-md-4.col-6 .col-lg-3.col-6 .col-lg-3.col-6 .col-lg-3.col-6 .col-lg-3.col-md-4 .offset-md-2.col-md-4Buttons
Forms
Navigation
Carbon ≤ 0.22 %, Mn ≤ 1.20 %, CEV per agreement.
Yield ≥ 245 MPa, tensile 415–655 MPa.
Wall thickness −12.5 % / +unlimited per API 5L.
Content components
316L seamless pipe
EN 10216-5, 60.3 × 3.91 mm, 3.1 certificates, loading Constanța week 34.
22
Countries served
Media object
Avatar initials — square, per the system.
No open enquiries
When a specification arrives it appears here with its quotation status.
Default alert — an outlined document note, never a coloured fill.
Mill test certificates received and matched against the heat numbers.
Third-party inspection slot not yet booked for week 34 loading.
The certificate number was not recognised — check the 3.1 document.
| Standard | Grade | Yield (MPa) | Certification |
|---|---|---|---|
| API 5L | Gr B | 245 | 3.1 / 3.2 |
| EN 10025 | S355J2 | 355 | 3.1 |
| ASTM A106 | Gr B | 240 | 3.1 |
Dark theme
Semantic tokens flip under [data-theme="dark"] — on any element, or on <html>. The marketing chrome stays light by design; framework components are theme-safe.
Same markup
This card, alert and button use identical classes to the light ones above.
Status colours are lightened in the dark map to hold contrast.
Accessibility contract
Every interactive element gets the 2px ink focus ring (white on dark surfaces). Targets are 44px where practical, 24px minimum. Status is never colour alone — the label text carries it. A global prefers-reduced-motion kill switch stops all animation. Tab through this page to audit it.