Color tokens

:root { --bg --fg --fg-dim --fg-mute --rule --accent --media-bg }

--bg #000

Page background.

--fg #fff

Primary foreground — headings, the wordmark, active text.

--fg-dim rgba(255,255,255,.92)

Body copy — primary reading text.

--fg-mute rgba(255,255,255,.55)

Rail numbers, meta labels, audience labels.

--rule rgba(255,255,255,.22)

THE rule — one weight, one color, every section divider on the site.

--accent #c62828

The FreeBSD/email red. Used only where it does work: the active nav mark, the two action-link arrows.

--media-bg #000

Backing color behind every photo tile and the hero image while it loads.

Type & fonts

--font / --font-body / --font-headline, --t-label / --t-body-sm / --t-body / --t-lead / --t-head / --t-display / --t-num

Akzidenz Grotesk is used for headlines and structural text. Neue Haas Grotesk Text is used only for the two requested body-copy sizes: tile blurbs (--t-body-sm) and numbered section paragraphs (--t-body). Both families are self-hosted.

--t-label · 0.8rem · nav links, eyebrow, audience labels, footer

Real support from real people.

--t-body-sm · 1.1rem · Neue Haas Grotesk Text · tile blurbs under a tight subhead

A single point of contact who understands your setup, for individuals, families, executives, and private offices.

--t-body · 1.3rem · Neue Haas Grotesk Text · body copy · bold inline text: Akzidenz Grotesk, -0.08em

Every environment is different. We adapt our support to your systems and requirements.

We first understand your setup, your needs, and your goals. Then we build a solution that fits them.

We keep our solutions simple, secure, reliable, and easy to maintain. We support the systems that we build.

--t-lead · 1.5rem · the hero intro paragraph

Boutique support for small businesses and organizations. Hands-on technical support for individuals, families, and private offices. Open systems. Practical solutions. Ongoing support. When something goes wrong, we stay with it until it is fixed.

--t-head · 1.7rem · section titles

Built around you.

--t-display · clamp(3.9rem, 6vw, 4.6rem) · the hero headline

Support from a real human being you can depend on.

--t-num · clamp(2.85rem, 4.5vw, 4rem) · rail numbers — structure, not text

03

300 · LightXMCNETWORK

400 · RegularXMCNETWORK

500 · MediumXMCNETWORK

700 · BoldXMCNETWORK

900 · SuperXMCNETWORK

Two more @font-face faces are loaded (Die Grotesk, NYCTA) but neither is part of the running type scale. NYCTA is not fully dead, though: .action-link-arrow::before uses it for the rotated → glyph on the two action-link buttons below. Die Grotesk is loaded and genuinely unreferenced by any rule.

Layout tokens & breakpoints

--edge --edge-mobile --rail --rail-gap --module-gutter, @media (max-width: 900px)

One layout breakpoint, at 900px. Below it the number rail collapses to a single column and the module gutter drops from 56px to 28px. Bars below are drawn with width: var(--x) directly, so they always match the live values.

--edge: 64px

--edge-mobile: 22px

--rail: 132px

--rail-gap: 44px

--module-gutter: 56px (28px <900px)

Logotype & marks

.wordmark, .footer-freebsd-logo, favicon set

Only one scale of the wordmark actually ships on the site — the white lockup at 20px tall in the header. Shown here at that real size, plus larger for legibility, plus the black variant (which never appears against this site's black background) on a light chip for reference.

.wordmark — real size, height: 20px

same file, enlarged for legibility

black variant — not used on this dark-only site

The FreeBSD Beastie orb is a registered mark, shown per the Foundation's trademark terms: unaltered, with the (R) symbol, paired with plain word-mark text rather than reformatted.

.footer-freebsd-logo, 14px

favicon 16×16

favicon 32×32

apple-touch-icon, 180×180 native

Navigation & hero

.site-header .site-nav .nav-toggle .eyebrow, .hero .headline .hero-lower .action-link

Reused directly: partial "banner" site.Data.banner, the same call layouts/index.html makes. The nav below is the real, functioning scroll-spy nav — its anchors point at the real About/Services/Personal/Contact sections reused further down this page, so clicking it works, but a target collapsed behind another section's disclosure triangle won't visibly scroll until you open it first. Resize the window to see the hamburger breakpoint at 900px.

Support from a real human being you can depend on.

Boutique support for small businesses and organizations. Hands-on technical support for individuals, families, and private offices. Open systems. Practical solutions. Ongoing support. When something goes wrong, we stay with it until it is fixed.

Contact

Numbered section — About

.numbered .numbered-num .numbered-body h2/p, p strong

Reused directly: partial "about-grid" (dict "items" (slice site.Data.spotlight1 site.Data.spotlight2)), the same two-item call the homepage makes for sections 01 and 02.

Built around you.

Every environment is different. We adapt our support to your systems and requirements.

We first understand your setup, your needs, and your goals. Then we build a solution that fits them.

We keep our solutions simple, secure, reliable, and easy to maintain. We support the systems that we build.

Technology that fits.

Technology should fit the way you work, not the other way around. We build practical, open-source solutions for your environment.

The tools are simple to use, reliable, and easy to maintain.

Our work does not end at deployment. When you need support, changes, or room to grow, we are there.

Offering grid — photo tiles

.build-cols .build-col .build-img, .audience-label

Reused directly: the real "What We Build" call to partial "offering", images: true. The 03 rail number is passed in by the caller, not derived — it's the same string index.html hard-codes.

What We Build

For small business

Network Infrastructure

Reliable, secure networks designed for performance and resilience.

Systems & Services

Robust systems built on proven technologies and open standards.

Automation & Integration

Automation that reduces complexity and keeps your infrastructure consistent.

Offering grid — text tiles

.build-cols--text .build-col (border-top, no .build-img)

Reused directly: the real "Personal Support" call to the same offering partial, images: false — the variant with no photos, where each column gets a top rule instead so the grid still reads as deliberate.

Personal Support

For individuals, families, and private offices

Someone you know

A single point of contact who understands your setup, for individuals, families, executives, and private offices.

Hands-on, end to end

We learn how you work, take care of the details, and stay with a problem until it is resolved.

No call centers. No handoffs.

You talk directly to the person doing the work. Experienced support when you need it.

Contact & action links

.cta-lead, .action-link--email, #contact.numbered (min-height: 44vh)

Reused directly: partial "cta-bar" site.Data.spotlight5. The real #contact.numbered rule reserves a 44vh minimum height for this section because it's the last one on the homepage — here it isn't last, so the extra space below is that same rule doing its real job, not a bug.

Contact

Tell us what you need.
We are ready to help.

[email protected]