Northline Systems / Style rules / 02

Clear, practical,
quietly confident.

A working visual and writing reference for a small-business IT support website.

Updated 10 September 2026 by Xinghui Li using an AI-assisted workflow. This document describes the current Northline demo and rules for extending it.

Self-initiated portfolio exercise. Northline Systems is fictional. This is not a client project, an endorsement or evidence of commercial brand-design experience.

View the website demo · Creator’s portfolio

01 / Purpose and visual direction

Help small teams understand an IT service, compare the main service areas and find a clear next step. Deep navy establishes a consistent frame; cobalt marks the primary action. White space, visible rules and plain language keep the information easy to scan.

Keep

Strong headline hierarchy, generous section spacing, simple line icons, rectangular photography and a restrained number of actions.

Avoid

Invented certifications or client outcomes, decorative technology jargon, stock-style trust badges and several competing primary buttons in one section.

02 / Colour roles

Midnight / #08192F

Hero and footer. Main text on light surfaces uses #14273E.

Cobalt / #2455EF

Primary brand colour. Hero buttons use #3564FF and headline emphasis uses #ABC3FF.

White / #FFFFFF

Service cards and form fields. The main page surface is #F9FBFF.

Mist / #EEF3FB

Muted surfaces; the form uses the closely related #EEF3FC.

Slate / #506078

Supporting text on light backgrounds. Hero supporting text uses #B8C8DF.

Rule / #C9D5E7

Dividers and component boundaries. Preserve clearly visible focus outlines.

For new combinations, check contrast at the actual text size. A palette does not establish accessibility compliance by itself.

03 / Typography and hierarchy

Use Segoe UI, then Arial and a sans-serif fallback. Keep sentence case for headings and actions. Uppercase is reserved for short section labels.

Good technology.
A calmer workday.

Practical IT support, explained in plain English.

Preserve meaning when text wraps or grows. The guide documents the current demo; it is not a claim of comprehensive browser or accessibility testing.

04 / Layout and components

Page rhythm

The container is capped at 1320px, with 56px wide-screen margins, 36px below 1100px and 20px below 760px. Desktop sections use roughly 76–100px vertical spacing.

Use the two-column hero and three-column service group, stacking on small screens. The dark hero, framed image and light service cards establish three clear surface levels.

Actions and fields

Primary actions use cobalt, white text, an 8px corner radius and a minimum height of 56px. Hover colour is #4875FF. Secondary links retain a bottom rule.

Form fields have persistent labels, at least 48px height and clear error text. Keyboard focus uses a visible outline and offset.

Brand mark: retain the lower-case “northline” wordmark, letter-spaced “SYSTEMS” subline and white N on a cobalt tile as a group. Do not add seals, certification symbols or a ™/® claim.

05 / Imagery and writing

The demo’s hero is an AI-generated workspace image, explicitly described that way in its alternative text. It is illustrative, not a photograph of a real office or customer. For client work, agree on rights and use accurate, approved imagery when depicting real facilities or results.

Write about concrete activities: setting up devices, connecting tools, documenting a handover. Prefer “Tell us what you need” to a vague action label. Explain the next step without promising outcomes that have not been established.

Use simple line icons for services. Keep the 42-point decorative light field behind the hero and away from primary controls. Provide a pause control, stop rendering when out of view or the page is hidden, cap the drawing resolution, and respect reduced-motion preferences. Entrance and hover movement should be subtle and must not be necessary to understand content.

06 / Demo boundaries and extension checks