Masoniq

version: alpha
name: Masoniq-design-analysis
description: A blueprint-dark construction & engineering marketing system where safety-orange is the only voltage on near-black steel. Sora display type goes uppercase and heavy, key words render as hollow outlined strokes, and every layout is divided by 1px structural grid lines like a technical drawing. Photography of cranes and concrete fills the bordered cells; the chrome stays sharp-cornered, industrial, and numbered.

colors:
  primary: "#ff5e00"
  primary-hover: "#ff7a26"
  on-primary: "#000000"
  canvas: "#0a0a0b"
  surface-panel: "#101012"
  surface-card: "#131315"
  surface-chip: "#1a1a1c"
  text: "#ffffff"
  text-muted: "#888888"
  text-faint: "#4a4a4c"
  hairline: "rgba(255, 255, 255, 0.15)"
  watermark: "#161618"

typography:
  hero-display:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0
    textTransform: uppercase
  display-lg:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0
    textTransform: uppercase
  display-md:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0
    textTransform: uppercase
  card-title:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0
    textTransform: uppercase
  sub-kicker:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
    textTransform: uppercase
  label:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.5px
    textTransform: uppercase
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.06em
    textTransform: uppercase
  nav-link:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.06em
    textTransform: uppercase

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px

spacing:
  xxs: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  xxl: 64px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 20px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 20px 28px
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.nav-link}"
    height: 72px
    borderWidth: 1px
    borderColor: "{colors.hairline}"
  section-header:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.display-lg}"
    padding: "{spacing.section} 24px"
  project-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
  service-card:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
  phase-panel:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text}"
    typography: "{typography.display-md}"
    rounded: "{rounded.lg}"
  tag-chip:
    backgroundColor: "{colors.surface-chip}"
    textColor: "{colors.text}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 8px 14px
  stat-cell:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.display-lg}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: "{spacing.xl} 24px"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 20px

Overview

Masoniq's web presence runs on a single idea: the website is a technical drawing, and the building project is the show. Everything sits on near-black blueprint canvas ({colors.canvas} #0a0a0b), divided into rectangular cells by 1px hairlines ({colors.hairline}) that read like CAD linework — the nav, hero columns, project grids, stat rows, and footer are all visibly "ruled" into structural compartments. The only saturated color on screen is safety orange ({colors.primary} #ff5e00), the color of constructionsite hi-vis and hard hats, and it never whispers: it is the CTA fill, the outlined display text, the phone number, the data suffix, the live-status dot.

The signature is outlined display type. Headlines are set in Sora at 800 weight, fully uppercase — and the second line of every major headline ("Tomorrow's Landmarks", "Authority", stat numerals like "1200+") renders as a hollow stroke: transparent fill with a 1.5px orange (or white) text-stroke. Solid white and hollow outline alternate line by line, giving every heading a stencil/plate-steel character. Body copy stays quiet in Inter 18px muted gray, and photography does the textural work: cranes, scaffolding, and concrete at golden hour fill the grid cells edge to edge.

Key Characteristics:

• Blueprint-black canvas ruled into cells by 1px rgba(255,255,255,0.15) grid lines — borders are the layout system, not decoration.
• Exactly one accent: safety orange #ff5e00. CTA fills, outlined words, data suffixes, phone numbers, and status dots — never a second hue.
• Outlined "hollow" type as a headline device: text-stroke 1.5px with transparent fill, alternating with solid white lines in the same heading.
• Sora (display) + Inter (body), both uppercase-led; everything above body size is 800 weight, everything below is 400–500.
• Sharp corners for the industrial chrome — buttons, inputs, chips, and grid cells are 0px; only media panels round (8–16px).
• Numbered everything: nav items ("01 Home"), accordion rows, process phases, stat labels ("DATA.01") — indexing as a visual motif.
• Status-dot kickers: 8px orange dot + uppercase 12px label ("● LIVE TRANSFORMATION", "● FEATURED CASE STUDIES") open every section.

Colors

Source pages analyzed: homepage hero, company overview accordion, selected-works timeline, service cards, process phases, before/after slider, case study, testimonials, blog, stats band, footer. The palette is identical across all sections.

Brand & Accent

• Safety Orange ({colors.primary} — #ff5e00): The only interactive and expressive color. Primary CTA fill (with black text), outlined display text stroke, active index numbers, spec values, the phone number in the footer, the scanner divider line in the before/after slider, and the status dots. Derived from real-world construction hi-vis signage — it must read as "warning/active" at all times.
• Hover Orange ({colors.primary-hover} — #ff7a26): The hover brighten for primary buttons. Never used statically.
• Orange is never used for long body text — it marks state, action, and data, not prose.

Surface Ladder

• Canvas ({colors.canvas} — #0a0a0b): Page background, nav, and hero. Not pure black — one step of blue-gray warmth, like unlit steel.
• Panel ({colors.surface-panel} — #101012): Content panels — phase cards, service-card text halves, glass overlay panels. One brightness step above canvas.
• Card ({colors.surface-card} — #131315): Contained cells behind media and list rows.
• Chip ({colors.surface-chip} — #1a1a1c): Small labeled tags ("INDUSTRIAL", "PHASE 01", "REC_01 // RAW STRUCTURE") and the inactive accordion header zone.
• Watermark ({colors.watermark} — #161618): The giant "MASONIQ ENGINEERING" wordmark scrolling across the footer — visible only as a ghost against canvas.

Text

• White ({colors.text} — #ffffff): Headlines, nav links, button labels, footer link titles. Full-strength white is reserved for things that lead.
• Muted ({colors.text-muted} — #888888): Body copy, descriptions, meta rows, inactive labels. The workhorse paragraph gray — deliberately mid-toned so photography pops against it.
• Faint ({colors.text-faint} — #4a4a4c): Index numbers ("01", "02"), muted suffixes, decorative indices. Reads as structure, not content.

Lines

• Hairline ({colors.hairline} — rgba(255,255,255,0.15)): The single most important "color" in the system. 1px borders rule the nav, hero, project grids, stat rows, accordion rows, and footer cells. Some footer cells use a dotted variant of the same line for blueprint texture.

No gradients on chrome. Depth comes from brightness steps, hairline rules, and photography. The only softness is the backdrop-blur glass panel floating over the before/after image.

Typography

Font Families

• Display: Sora — all headlines, sub-kickers, card titles, stat numerals. Geometric, slightly engineered, uppercase at every display size.
• Body/UI: Inter — paragraphs, labels, buttons, inputs, nav links. Neutral and quiet so Sora carries the voice.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
{typography.hero-display}	60px	800	1.1	0	Hero headline (uppercase, alternates solid/outlined lines)
{typography.display-lg}	40px	800	1.1	0	Section headlines ("SELECTED WORKS"), stat numerals
{typography.display-md}	22px	800	1.1	0	Panel headings ("INITIAL CONSULTATION")
{typography.card-title}	18px	800	1.2	0	Card titles, project names
{typography.sub-kicker}	18px	800	1.2	+0.02em	Orange sub-label under section titles ("PROJECT TIMELINE")
{typography.label}	12px	400	1.4	+1.5px	Kickers, tag chips, spec labels ("SCOPE", "MATERIAL")
{typography.body}	18px	400	1.5	0	Section paragraphs
{typography.body-sm}	16px	400	1.5	0	Panel copy, input text
{typography.button}	14px	700	1	+0.06em	All button labels (uppercase)
{typography.nav-link}	14px	500	1	+0.06em	Nav links (uppercase, with index prefix)

Principles

• Uppercase is the display voice. Everything in Sora is uppercase; only Inter body copy keeps sentence case.
• The outline alternation rule. In multi-line headlines, solid white and hollow orange lines alternate. Stat numerals are always hollow (white stroke) with the suffix ("+", "Y") solid orange.
• Weight, not size, separates roles at small scale. A 12px label is 400 with +1.5px tracking; a 14px button is 700 with +0.06em — same neighborhood of size, opposite loudness.
• Muted gray does the hierarchy work. Card titles are white/800; their descriptions are muted/400 at nearly the same size.
• No italic anywhere. Emphasis is weight, color, or outline.

Note on Font Substitutes

Sora and Inter are both open Google Fonts — load them directly (Sora 400–800, Inter 400–700). No substitution needed. If a fallback stack is required: Sora, Arial, sans-serif for display (Arial keeps the geometric uppercase legible) and Inter, Arial, sans-serif for body.

Layout

Spacing System

• Base unit: 8px. Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.xxl} 64px · {spacing.section} 96px.
• Section vertical padding: {spacing.section} (96px) — bands are tall and photo-heavy.
• Grid gutters: the gutters are the borders — cells share 1px hairlines instead of whitespace gaps, so spacing lives inside cells (24–48px padding each).

Grid & Container

• Max content width: full-bleed. Sections run edge to edge; hairline rules span the entire viewport, and inner cells pad 24–48px.
• Structural cell grid: the signature layout device — hero, stat rows, and footer are divided into visible rectangular cells by 1px lines (e.g., hero = copy column | badge column; stats = 4 equal cells).
• Project timelines: 3-column full-bleed photo grid, cells separated by hairlines.
• Service cards: 2-column split cards — photo half | panel half.
• Process: numbered rail on the left (01–04), one large rounded panel on the right for the active phase.

Whitespace Philosophy

Whitespace is borrowed from the blueprint: where Masoniq needs air it inserts an empty ruled cell rather than unstructured padding. Inside cells, padding is generous (24–48px) but always bounded by a visible line — nothing floats free of the grid.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow, hairline border	All cells, buttons, chips, inputs
Brightness step	#0a0a0b → #101012 → #131315 → #1a1a1c	Panels and chips above canvas
Glass overlay	rgba dark fill + backdrop-blur	Floating panel over before/after imagery
Watermark	{colors.watermark} type on canvas	Footer brand texture

Shadow philosophy. No drop-shadows on any component. The glass overlay panel (over live imagery) is the only soft element — a translucent dark fill with backdrop blur, itself hairline-bounded. Everything else signals depth by brightness steps and border rules.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.none}	0px	Buttons, inputs, tag chips, grid cells, nav — the industrial default
{rounded.sm}	8px	Images inside panels, small media tiles
{rounded.md}	12px	Inner media blocks
{rounded.lg}	16px	Large content panels (phase cards)

Geometry Rules

• The chrome is sharp. Every interactive element (buttons, inputs, chips) and every ruled grid cell is square-cornered — 0px is what makes the system read as construction documentation rather than SaaS.
• Media rounds only inside panels. Photos embedded within a rounded panel take {rounded.sm}; photos that are the cell (project grid, service half) stay square and bleed to the hairlines.
• Status dots are perfect circles (8px orange), the only round element in the chrome.
• The before/after slider uses a 2px vertical orange rule as its scanner — a "cut line" through the photograph.

Components

Top Navigation

top-nav — 72px black bar ruled top and bottom by hairlines, itself subdivided into bordered cells: logo cell, one cell per numbered link ("01 HOME" … "05 PAGES" with chevrons), and a "LET'S TALK →" cell on the right (ghost, arrow icon, hover fills). Links are {typography.nav-link} uppercase with faint index numbers; the active item's index turns orange.

Buttons

button-primary — Safety-orange rectangle, black text, {typography.button} (14px/700/uppercase/+0.06em), {rounded.none}, padding 20px × 28px, trailing "→" arrow. Hover brightens to {component.button-primary-hover}. button-ghost — Hairline-bordered transparent rectangle, white text, same metrics as primary. Used for secondary actions ("VIEW PORTFOLIO →") and nav CTA cells. button-inverted — White fill, black text ("SUBSCRIBE") — used once, in the footer, as the strongest possible closing CTA. Buttons never round, never gain shadows; hover is fill change or border brighten only.

Section Headers

section-header — Two-part lockup: {typography.display-lg} white uppercase headline (second line often hollow-outlined) over an orange {typography.sub-kicker} label, or reversed: 12px orange-dot kicker ("● GLOBAL IMPACT") above the display headline, then a muted {typography.body} lede constrained to ~60ch.

Cards & Containers

project-card — A full-bleed photo cell in the timeline grid, bounded by hairlines. Overlaid: orange {typography.display-md}-scale year ("2026") top-left, {component.tag-chip} category top-right ("INDUSTRIAL", "PUBLIC SPACE"), project name bottom-left in {typography.card-title} uppercase white. service-card — Split card: photo half (with giant category word "RESIDENTIAL" bottom-left) | panel half on {colors.surface-panel} with {typography.card-title} heading, muted body, dotted-rule spec rows (label muted uppercase 12px / value orange 16px Sora), and a small button-primary ("EXPLORE CAPABILITIES →"). phase-panel — The process stage card: {colors.surface-panel}, {rounded.lg} (16px), padded 48px. Contains a tag-chip with orange dot ("● PHASE 01"), {typography.display-md} heading, muted body, and a rounded image. tag-chip — Small sharp rectangle on {colors.surface-chip} with 1px hairline; 12px uppercase Inter +1.5px tracking. Terminal-flavored variants exist ("REC_01 // RAW STRUCTURE") — one chip per image, and the "active" chip variant swaps the border to orange. stat-cell — Ruled grid cell for the stats band: faint "DATA.0n" label, hollow outlined numeral at {typography.display-lg} scale with solid orange suffix ("1200**+", "25Y**"), then white uppercase stat title and muted sub-line.

Inputs

input-field — Newsletter email input: transparent background, 1px hairline border, {rounded.none}, padding 20px, muted placeholder text in {typography.body-sm}. Pairs with the footer's white button-inverted. Validation states were not surfaced on the analyzed page.

Do's and Don'ts

Do

• Use {colors.primary} for every action fill, outlined word, active index, and data emphasis — one orange, many jobs.
• Alternate solid white and hollow-outlined lines inside multi-line headlines — the outline (1.5px text-stroke, transparent fill) is the brand's voice.
• Rule sections into visible cells with 1px {colors.hairline} borders — the grid is the layout, not a decoration.
• Keep all buttons, inputs, and chips sharp-cornered ({rounded.none}); reserve radius for media panels only.
• Prefix navigation and list items with faint index numbers ("01", "02") and turn the active index orange.
• Open sections with the orange status-dot kicker pattern ("● LABEL") at 12px uppercase.
• Let construction photography fill cells edge-to-edge; keep the chrome matte black around it.

Don't

• Don't introduce a second accent hue — orange and grayscale are the entire palette.
• Don't round buttons, inputs, or chips; a rounded CTA breaks the technical-drawing character.
• Don't add drop-shadows to chrome; depth is brightness steps, hairlines, and one glass overlay.
• Don't set display type in sentence case or below 800 weight — Sora is uppercase and heavy or it is not Masoniq.
• Don't use orange for paragraph text or long prose; it marks action, state, and data only.
• Don't use outlined hollow text at body sizes — the stroke effect is legible only at display scale (≥40px).
• Don't place white text on the orange fill's hover state — black-on-orange is fixed for primary buttons.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 480px	Hero headline drops to ~40px; nav collapses to logo + hamburger; stat grid stacks to 1 column
Large phone	481–768px	2-column stats; project timeline scrolls horizontally; service cards stack (photo above panel)
Tablet	769–1024px	2-column stats; nav keeps numbered links; hero badge column hides
Desktop	1025–1440px	Full cell grid; 4-column stats; 3-column timeline; hero at 60px
Wide desktop	≥ 1441px	Hairlines keep running full-bleed; inner content centers

Collapsing Strategy

• Top nav: numbered link cells collapse below 768px into a hamburger drawer; "LET'S TALK" cell survives as the compact CTA.
• Cell grids: stats go 4 → 2 → 1 columns; the shared-hairline look is preserved by keeping borders on all cell edges at every width.
• Split cards: service cards stack photo-over-panel below 768px; the dotted spec rows keep their alignment.
• Hero: the copy/badge two-cell split becomes a single cell; outlined lines keep alternating.

Image Behavior

• Project and service photography bleeds to cell edges and crops center at every size — never letterboxed.
• The before/after slider keeps full viewport width at all breakpoints; its glass overlay panel narrows and stacks.
• Lazy-loading below the first viewport; the hero construction photo loads eagerly.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly ({component.project-card}, {{component.phase-panel}}).
2. Variants (-hover) live as separate entries in components:.
3. Use {token.refs} everywhere — never inline hex (the hairline rgba especially must stay consistent).
4. When adding a headline, decide per-line: solid white or hollow orange — and alternate.
5. When adding a number, index it: faint "0n" prefix, orange active state.
6. When in doubt about emphasis: switch the element to orange or hollow-outline it before adding any size or weight.

Known Gaps

• Form validation and error states were not surfaced on the analyzed page; only the neutral newsletter input is documented.
• The "05 Pages" dropdown menu contents, 401 page, and subpages (pricing, contact) were not analyzed — documented structure covers the homepage.
• Testimonial slider autoplay/pagination micro-interactions are a platform widget, not documented tokens.
• The footer's dotted-hairline variant is used decoratively; its exact dash rhythm was not tokenized.
• The marquee watermark ("MASONIQ ENGINEERING BUILDING THE FUTURE") is a motion element; its scroll speed and loop behavior are not covered here.