Product Finder

Design System

UI Elements

A living reference of every component, pattern and design token used across the Wallace Instruments website. Use this page to review visual consistency and sign off on the design language.

Colours

The core brand palette and neutral scale used across the site.

Brand Palette

Primary

#0079C1

Secondary / Dark

#06357a

Primary Soft

#e6f2fa

Page Background

#f4f7fe

Neutral Scale

50

100

200

300

400

500

600

700

800

900

Typography

The typeface is Canada Type Gibson loaded via Adobe Typekit. Body copy uses weight 300 (light); bold maps to 500 (medium).

Page Title — text-4xl sm:text-5xl font-semibold

Page Title Example

Section Heading — text-5xl sm:text-6xl font-semibold

Section level heading

Kicker + Heading — used on homepage sections

Kicker line

Heading beneath kicker

Card Heading — text-2xl font-semibold

Card or panel heading

Subsection — text-lg font-semibold

Subsection heading

Body Copy — text-base text-slate-600 (weight 300)

Wallace Instruments designs and manufactures precision testing equipment for rubber, plastics and polymer industries. This is the default body copy style used across all pages — light weight, comfortable reading size, neutral slate tone.

Small / Label — text-sm text-slate-500

Supporting label text and metadata.

Hero Text — white on dark overlay

Kicker / Eyebrow

Hero Slide Heading

Descriptive paragraph text that sits beneath the hero slide heading, providing context for the call to action.

Buttons

All interactive buttons used across the site. Hover each to see its transition.

Primary CTA — rounded-full bg-[#0079C1] text-white
Hero CTAs — solid white + ghost
Bento Card CTA — white button on image overlay
Compact Expanding — icon-only that reveals label on hover
Nav Utility CTA — small rounded, used in header bar
Icon Buttons — close, menu toggle, dismiss

Form Elements

Inputs, selects, textareas, radio cards and checkboxes used across contact, product and filter forms.

Text Input — rounded-xl border-slate-300
Select — grid overlay with custom arrow
Textarea — rounded-xl border-slate-300
Radio Cards — product size / model selector

Click to see the selected state. The active card fills with the primary colour.

Checkboxes — filter / grouped product options
Filter by category
Quantity Stepper — used on product pages

Cards

Container patterns used for content grouping across the site.

Glass Card — bg-white/50 backdrop-blur-md border-white/50

Glass card content

This frosted-glass panel is used as the primary content wrapper on about, contact and product overview pages. It sits on the page background and provides subtle depth.

White Card — rounded-2xl bg-white shadow-sm outline-black/5

Mission

Describe the practical outcomes you help customers achieve.

Values

List the principles behind your engineering, service, and support.

Quality

Outline your calibration, compliance, and reliability standards.

Team Member Card — image + name, lift on hover

Charlotte Hughes

Managing Director

Oliver Thompson

Head of Engineering

Product Card — storefront grid item

Hardness

Wallace Micro IRHD Hardness Tester

Model H14/A

Compression

Wallace Compression Set Apparatus

Model C12

Glass Category Icon — hero category strip

Badges & Pills

Status indicators, category tags and count badges used in navigation, products and the quote system.

Theme Primary Badge
ISO 903 BS 903-A26 Hardness themed Compression themed
Status Badges — quote system
In Progress Complete Archived
Count Badge — quote basket, filter count
3 12
Bento Pill — overlay label on image cards
Service & Calibration Resources
Active Filter Chip — removable
Hardness Viscosity
Availability Indicator
In stock Lead time: 4–6 weeks

Notifications

Site-wide banners and inline alerts.

Notification Banner — dismissible top-of-page

Accordions

FAQ-style expand/collapse using el-disclosure with slide-down animation.

You can add products and options to a quote basket, then submit your details. A member of our team will review your requirements and send a bespoke quotation.

Testimonials

Blockquote layout used on the homepage and about page.

Wallace Instruments have consistently delivered reliable, high-precision equipment that integrates seamlessly into our laboratory workflow.

Dr Michael Turner
Head of Materials Testing, Apex Polymer Technologies

Lists & Tables

Definition lists, specs tables and attachment lists used on product pages.

Definition List — product specifications
Test method
Micro IRHD
Force applied
153.0 mN ± 2%
Measurement range
10 – 100 IRHD
Repeatability
±0.5 IRHD
Weight
18 kg
Standards List — with theme badges
  • ISO 48-2 Rubber, vulcanized or thermoplastic — Determination of hardness — Part 2: Micro IRHD
  • ASTM D1415 Standard test method for rubber property — International hardness
  • BS 903-A26 Physical testing of rubber — Method for determination of hardness (micro test)
Attachment / Download List
  • Technical data sheet

    PDF, 1.2 MB

    Download
  • User manual

    PDF, 3.8 MB

    Download
  • Calibration certificate example

    PDF, 420 KB

    Download

Find what you need

Explore products, services, resources and support

Service & Calibration

Book installation, servicing and ISO 17025 calibration to keep your equipment reliable and compliant.

Resources

Browse user guides, standards updates, articles and videos to help you get the best from your instruments.

Agents & Distributors

Locate authorised agents and distributors worldwide for local sales and support.

Spares & Accessories

Order replacement parts and consumables to keep your instruments running smoothly.

Added to quote

Recommended next products

You may also want to include these in your quotation:

Get the latest news and updates. Sign up for our newsletter.

We care about your data. Read our privacy policy.