CoreSpec 3D brand reference.
A single-page working reference extracted directly from the brand guidelines. Palette, typography, voice, personality, Figma layout rules, and photography direction — all from the official document.
Horizontal. Stacked. Mark only.
The brand mark is a single continuous structure — flat, engineered, calm. Three logo formats. Two colour versions (black on light, white on dark). Drop your official logo files into images/logos/ and replace the SVG placeholders below.
Min width: 140px / 24mm
Min width: 140px / 24mm
Black on amber only — never white on amber
Min: 120px / 30mm
Min: 120px / 30mm
Min: 32px / 10mm
Min: 32px / 10mm
Logo usage rules (from p.28–33)
- Horizontal logo preferred where space allows
- Stacked version for narrow/portrait/square formats
- Brand mark only for avatar, app icon, social profile use
- Horizontal minimum: 140px screen / 24mm print
- Stacked minimum: 120px screen / 30mm print
- Brand mark minimum: 32px screen / 10mm print
- Exclusion zone = brand mark size on all sides
- White logo on dark or photographic backgrounds
- Black logo on white or very light backgrounds only
Logo misuse — never do this (p.32)
- Do not change transparency of the logo
- Do not use different colours for the type
- Do not use different colours for the brand mark
- Do not add effects (shadows, glows, gradients)
- Do not outline the logo
- Do not distort or stretch
- Do not rotate
- Do not re-create using any other typeface
- Do not change the size or position of the brand mark relative to wordmark
images/logos/ and update the src attributes. The geometry, proportions, and colour rules above are taken directly from the brand guidelines and must be followed regardless of which logo file is used.
Core Amber is the accent, not the canvas.
Foundation Grey, Off-White, and White form 80–90% of every layout. Core Amber appears on CTAs, data highlights, and select callout panels only. Black (#000000) is used for typography only — never as a background.
Approximate colour ratio — neutrals dominant, amber as an intentional accent only.
Fustat. One typeface, used with precision.
Fustat is the only approved typeface — SemiBold (600) for headlines, Regular (400) for body. Arial Regular is the system fallback only. No mixing of weights beyond these two. Modular scale 1.25× from 16px web base.
Page structure and colour application.
Key layout rules from the approved Figma design (node 10502-63695). Follow section order, background colours, and spacing exactly. Never substitute black backgrounds for neutral ones.
Full-bleed photography + CSS dark overlay
- Real site photography — warm, candid, natural light
- Dark overlay applied via CSS (not amber, not solid black fill)
- White Fustat SemiBold headline, large
- One amber primary CTA + one ghost/outline secondary
- Amber eyebrow label above headline
3-column card grid · Foundation Off-White background
- Background: #FBFAF5 (Foundation Off-White)
- White cards, 1px Black-10 border
- Amber eyebrow, Fustat SemiBold card title
- Amber underline text link at card base
- Card image 16:9 or 4:3, always photography
Alternating feature rows · White background
- Background: White (#FFFFFF)
- Text left / image right, then reverse alternating
- Amber eyebrow, Fustat SemiBold h3 headline
- Black-50 body text
- Black secondary button (not amber)
- 1px Black-10 divider between rows
Client logos · White background
- Background: White
- Logos greyscale + 50% opacity at rest
- Full colour on hover
- Label: Black-25, 0.18em tracking, uppercase
- No marquee animation — static row
Foundation Grey background · NOT black
- Background: #F3F1EA (Foundation Grey)
- Text: Black-75 primary, Black-50 secondary
- Link hover: Black (not amber)
- Column headings: Black-25, tracked caps
- Divider: Black-10
Core Amber is never a page background.
Amber appears on: primary CTA buttons, select feature callout panels, data highlights, eyebrow labels. Surrounding elements must be neutral. Black text only on amber — never white text.
Real people. Real buildings. Real work.
Authentic documentary photography — building owners, FM teams, construction professionals — caught in genuine moments of work. Warm ambient light. Never posed, never stock. Foundation Grey as background for product and UI shots.
✓ Do
- Real people in real working environments
- Warm, natural ambient light
- Candid, working moments — not staged
- Inclusive and diverse subjects
- Foundation Grey (#F3F1EA) for product/UI shot backgrounds
- High-contrast editorial framing for hero use
- Dark CSS overlay on hero photography (not amber)
✗ Avoid
- Generic posed stock photography
- Harsh or artificial studio lighting
- Applying Core Amber as a photo overlay or tint
- All-black backgrounds for product shots
- Cluttered, distracting environments
- Desaturated or heavily filtered imagery
- White backgrounds for UI/product screenshots
Adventurous. Knowledgeable. Guiding.
Three personae, each as important as the other, providing trust, confidence, and a little excitement. The Explorer archetype — true innovators with an ethos to make the complex simple.
We dig deeper to find what's next.
Naturally curious as innovators, we are adventurous in finding solutions, forever thinking how we can bring the next best thing to customers. This is what we want our audience to feel — a business that cares about and enjoys what it does.
Trust and domain understanding is non-negotiable.
We developed CoreSpec 3D through a deep understanding of how buildings are designed, delivered, and operated — where information breaks down and how teams actually work together. Expertise from technical know-how and innate knowledge of buildings and people.
We help customers move forward with confidence.
We aren't so arrogant as to ignore customers who want to be fully versed. We support through live demonstrations, on-platform planning, and guidance. Making the complex simple — that's the CoreSpec promise.
Direct, empathetic, and a little conversational.
Never hard sell. Never aloof or elitist. Innovation with the support of our guiding nature. Engage, support, reassure, and comfort — our audience is risk-averse and wary of new-tech promises.
Do
- Speak clearly, with confidence and conviction.
- Demonstrate knowledge of CoreSpec 3D as a business and as a space planning, as-built platform.
- Demonstrate our sector expertise, and our desire to truly support and guide our customers. Your confidence in how you deliver this information will serve to formulate a sense of trust with our customers.
- Use active voice, not passive. Be conversational, but not flippant — keep it light, but always professional and straight to the point.
- Be engaging and aware.
Don't
- Be unnecessarily familiar or arrogant.
- Compare the competition when citing the negative aspects of static platforms.
- Be negative about customer's ideas, requirements, or their building set-up. Be more advisory backed by a solution.
Naming rule: Always use CoreSpec 3D on first mention in any communication. Subsequent mentions can be shortened to CoreSpec in natural conversation. The 3D will eventually become implied by the brand name itself.
Language directly from the guidelines.
Approved headlines, taglines, and copy starters from the brand narrative. Use these as a reference for tone, not as fixed copy.