---
version: alpha
name: "IT support template by 8B"
description: "One-page website for a managed IT support firm serving small offices: one grotesque in sentence case on cool grey, hairline rules, clipped upper-left corners and a single orange accent. Free HTML template by 8B, MIT."
colors:
  primary: "#24262c"
  secondary: "#595b63"
  tertiary: "#ca350d"
  neutral: "#c2c3ca"
  surface: "#e3e3e7"
  surface-card: "#f2f2f5"
  on-surface: "#24262c"
  on-dark-muted: "#a7a9b1"
typography:
  headline-display:
    fontFamily: Asta Sans
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Asta Sans
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.03em
  phone-number:
    fontFamily: Asta Sans
    fontSize: 207px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.045em
  body-md:
    fontFamily: Asta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Asta Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
  nav-link:
    fontFamily: Asta Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
  wordmark:
    fontFamily: Asta Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  button:
    fontFamily: Asta Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
rounded:
  sm: 10px
  md: 14px
  lg: 24px
  full: 999px
spacing:
  gutter: 56px
  column-gap: 32px
  photo-gap: 16px
  row-padding: 24px
  card-padding: 44px
  card-cut: 26px
  panel-cut: 96px
  nav-padding: 14px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-card}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 18px 0 20px"
    height: 44px
  button-on-dark:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 18px 0 20px"
    height: 44px
  button-menu:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: 44px
  nav-link:
    textColor: "{colors.secondary}"
    typography: "{typography.nav-link}"
  nav-bar-compact:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    padding: "10px 56px"
  card-price:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "44px"
  panel-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-card}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "104px 64px 72px"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "11px 14px"
    height: 46px
---

# Quiet Systems design system

## Overview

An IT support firm for offices of 3 to 60 people, drawn like a technical sheet in grey: pale ground, hairline rules, one sans family and a single orange accent. The idea is calm precision. Nothing shouts, so the page reads like a firm that fixes things quietly. Dark blocks (the phone line, the security panel, the footer) carry the weight, and orange appears only in small marks that guide the eye. It suits firms selling a fixed monthly price. Names, prices and clients in the demo are invented.

## Colors

- **primary / on-surface, #24262c:** body text, filled buttons, and the dark phone-line section, security panel, menu overlay and footer.
- **surface, #e3e3e7:** page background, form fields, and the nav bar once it turns compact.
- **surface-card, #f2f2f5:** the price card, the audit form, the before and after notes section background, text on dark blocks, and the fill of buttons placed on dark.
- **secondary, #595b63:** leads, nav links, FAQ answers, the regular half of the wordmark, and the grey a Before note fades to.
- **tertiary, #ca350d:** the only accent. Focus outlines, the small orbiting dot in buttons, the plus marks, the slider thumb and the arc on the contact ring. Never a fill for a large area.
- **neutral, #c2c3ca:** hairlines, field borders, empty photo frames, the contact ring outline.
- **on-dark-muted, #a7a9b1:** small descriptions on the dark blocks and the regular half of the footer wordmark.

## Typography

Asta Sans is the only typeface, loaded from Google Fonts as a variable face for weights 400 to 600. Hierarchy comes from size and tight tracking, not from a second face.

- **Headings** (`headline-display`, `headline-md`): regular weight, sentence case, negative tracking (-0.035em and -0.03em). The h1 and section headings are 62px at wide screens and scale down to 32px; item titles are 46px down to 26px.
- **Phone number:** the big number in the phone line is set in the heading style and sized by the page so its 13 characters fill the container width, about 207px at a 1440px viewport. The `--len` variable on it must match its character count.
- **Body and labels:** 16px at 1.5; 13px for captions and nav links.
- **Wordmark:** two parts, a semibold "Quiet" and a regular "systems." in grey, at 15px in the bar and larger in the footer.

Medium (500) is for buttons; 600 for the wordmark's bold half, the Before label and client names.

## Layout

Full-width sections on the pale ground. The side gutter is 3.4vw, limited to 16px to 56px. Text is indented a further 1.6vw, beside a vertical hairline at the left of the first section. There is no max-width container; heading blocks pair a heading with a 21em lead. Vertical rhythm is set in viewport height: sections pad 12svh to 20svh. Sections repeat one pattern: hairline, large heading, short lead, then rows or cards.

The first screen is a heading block with two actions above a ruled list of eight services. The client grid is four columns with the first photo spanning two columns and two rows, the team is five columns (three at tablet width; on wide screens with motion on, a column of names beside one held portrait), and the footer has four columns.

At 760px and below, the nav links hide and Menu opens a full-screen dark overlay; two-column blocks stack, the client grid becomes two columns with the first photo full width, the team becomes rows with a small portrait, and the held zoom stage scrolls in plain flow.

## Elevation & Depth

There are no drop shadows. Depth comes from colour fields: dark blocks against the pale ground, the light card colour for the price card and form, and a single 1px hairline under the compact nav bar. The clipped corners make cards and photos read as cut sheets.

## Shapes

- Cards, client photos and portraits have a radius of 14px and a clipped upper-left corner (26px; on phones 18px on client photos and 16px on portraits); the price card and audit form use a deeper 40px cut that tightens on phones.
- The security panel has a 24px radius and a 96px cut (44px on phones).
- Buttons are pills (999px). Menu, Close and form fields use a 10px radius.
- Rules are 1px lines. The contact section draws a thin circle and a radius line, with an orange arc over part of the ring.
- The plus mark is two orange bars, 14px square.

## Components

- **button-primary:** dark pill with a small orange dot; on hover the dot makes one turn. **button-on-dark:** the same pill in the light card colour, used on dark blocks.
- **button-menu:** outlined, 44px; its top-left corner clips on hover.
- **nav-link:** 13px grey links that draw an underline on hover. The bar shows four links, the wordmark and the audit button.
- **card-price:** light card with the slider, the headcount in the item-title size and the monthly total in the heading size.
- **input-field:** pale field with a 1px grey border and an orange focus ring.
- **Rows:** a hairline, then a heading and grey text, for services, notes and questions (native details with a turning plus).

## Motion

GSAP 3.13.0, ScrollTrigger and Lenis 1.3.4 load from jsDelivr. The idea: hairlines that draw and corners that close, never bounces.

- **Opening:** on load the first heading block settles in from 48px to the right while opening from the left (1s). Elsewhere, headings and leads settle the same way (1s, power3.out) at 88% of the screen; hairlines draw from the left (1.1s); the price card arrives with a deep clipped corner that closes (1.1s).
- **Services:** the rows below the fold slide in from the side and gain opacity as their hairlines draw, tied to the scroll.
- **Offices:** on wide screens a sticky stage is held for about 0.9 of a screen (a 190svh track) while the grid starts zoomed on the first photo and zooms out to all five; on phones it zooms from 1.7 times as it scrolls in.
- **Security:** the five layers start piled at the top and slide out into their places while the panel's clipped corner closes from about a third of its width to 96px.
- **Notes:** each Before line starts at 1.75 times its size in ink and shrinks into grey while the change line rises 56px and fades in.
- **Team:** on wide screens the portrait frame stays in place with CSS sticky; the name at the centre darkens and its portrait opens from the frame's corner. On narrower screens each portrait opens as it scrolls in.
- **Contact:** a radius line turns 130 degrees on scroll, drawing the orange arc.
- **Navigation:** the bar slides away after 24px of downward scrolling past 80px, and returns in a compact form (pale, with a hairline) after 40px of scrolling up.

With reduced motion on, Lenis does not start, and the load-in, the settle, hairline, card and every scroll scene are off; the content shows in full and the team uses its plain layout. Not switched off: the nav bar still slides away and back on scroll (its script and a 0.45s transition run regardless), and hover effects still run (underline draw, button dot turn, Menu corner clip, the question plus turning).

Keep `data-rate`, the ids and the `data-8b-section`, `data-8b-motion` and `data-8b-part` attributes so the scripts find their targets.

## Do's and Don'ts

- Do keep one family, Asta Sans, with weights 400, 500 and 600 only.
- Do keep headings in sentence case with negative tracking; no uppercase display.
- Do keep orange for small marks (dot, plus, focus, arc, slider); never a section background.
- Do cut the upper-left corner of cards, photos and portraits; do not round them into plain rounded boxes.
- Don't add drop shadows, gradients, stock icons or a second accent colour.
- Do keep the dark blocks to the phone line, the security panel, the menu overlay and the footer; the rest stays on the pale ground.
- Do keep hairlines at 1px in the neutral grey, drawn from the left.
- Don't add bouncy or elastic easing; motion settles, draws or closes a corner.