Import into Figma via Token Studio

Download spectroplast-tokens.json from this project, then install the Token Studio plugin in Figma (free). Open the plugin → Load from file → select the JSON. All colors, typography, spacing, radii and shadows appear as Figma Variables and Text Styles automatically.

Foundations

Overview

Spectroplast's design language is built on Manrope — a geometric sans-serif spanning weights 200–600. The primary palette is a cool, deep blue anchored at #466ee6, with accent coral, green and purple used sparingly. All interactive elements use a spring easing cubic-bezier(0.22, 1, 0.36, 1) for motion. Buttons are pill-shaped (rounded-full) and cards use a subtle border that transitions to a solid primary fill on hover.

Colors

Color Palette

Primary Blue

Darkest #172967 --color-primary-darkest

Dark #2E4CA7 --color-primary-dark

Default #466ee6 --color-primary

Light 1 #6b8beb --color-primary-light-1

Light 2 #91A9EF --color-primary-light-2

Light 3 #b5c5f5 --color-primary-light-3

Light 4 #ebedf3 --color-primary-light-4

Accents

CTA Accent #F97366 --color-cta-accent

Coral #ff6e4b --color-accent-coral

Green #54ed96 --color-accent-green

Purple #d75fe6 --color-accent-purple

Neutrals ✦ PDF verified

1000 — Pure Black #000000 PDF secondary palette

900 — Foreground #282828 --color-neutral-900

600 #606060 --color-neutral-600

500 — Muted #9f9f9f --color-neutral-500

200 — Border #e4e4e4 --color-neutral-200

100 — Surface #F5F5F5 --color-neutral-100

✦ PDF is source of truth: Neutral-200 is #e4e4e4 — confirmed in the PDF styleguide secondary palette. The Figma swatch shows #dfdfdf (rgb 223,223,223) — the Figma needs updating to match the PDF.

Colors

Gradients

Dark
↓ #172967 → #466ee6

Hero
↓ #466ee6 → #b5c5f5

Product
↓ #b5c5f5 → #ebedf3

✦ PDF is source of truth: Gradients run vertical (180°) as shown in the Figma brand guide. The codebase globals.css incorrectly uses 135° — the codebase needs updating. All tokens and this spec now reflect 180°.

Typography

Type Scale — Manrope

H1 · Display

5.4rem / 86px
weight: 200 ExtraLight
leading: 1.05
tracking: −0.02em

Silicone parts,
on demand.

H2 · Section

3rem / 48px
weight: 300 Light
tracking: −0.02em

Why choose Spectroplast

H3 · Subheadline

1.5rem / 24px
weight: 600 SemiBold

Additive Manufacturing

Body

1.125rem / 18px
weight: 400 Regular
leading: 1.6

Spectroplast pioneers industrial-grade silicone 3D printing — delivering complex elastomeric parts with the precision and repeatability your products demand.

Body SM

1rem / 16px
weight: 400 Regular

Trusted by leading medical, automotive and consumer brands.

Caption / Eyebrow

0.85rem / 14px
weight: 500 Medium
UPPERCASE · tracking: 0.1em

Materials · Use Cases · Industries

Button

1rem / 16px
weight: 400 Regular

Upload 3D Model

Spacing

Spacing Scale

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

space-16

64px

space-20

80px

section-sm

80px

section-md

96px

section-lg

160px

card-pad

32px

Spacing

Border Radius

none 0px

sm 6px

md (--radius) 8px

lg 12px

2xl · Cards 16px

full · Buttons 9999px

Spacing

Shadows

shadow-sm

shadow-md

shadow-lg

primary glow

Motion

Animation

Hover each box to preview the easing. All Spectroplast transitions use the spring easing.

Spring
0.5s

Brand ✦

Fast
0.15s

ease

Slow
0.7s

ease

Token	Value
animation.easing.spring	cubic-bezier(0.22, 1, 0.36, 1)
animation.duration.fast	150ms
animation.duration.normal	300ms
animation.duration.slow	500ms
animation.duration.slower	700ms

Components

Buttons

Hero CTAs

Primary

Nav CTA

Outline / Ghost

Destructive

Disabled

Components

Cards

OutlineCard (hover to preview)

Materials

01

Platinum-cured Silicone

Biocompatible, temperature-resistant elastomer suitable for medical-grade applications.

Process

02

Additive Manufacturing

Layer-by-layer 3D printing enables complex geometries impossible with traditional moulding.

DualCtaCard

01

Upload Your 3D Model

Get an instant quote for your silicone part. Upload a STEP file and configure material, quantity and finish.

02

Book a Consultation

Speak with a Spectroplast engineer about your application, tolerances, and design-for-manufacturing requirements.

Components

Hero Pattern

Silicone 3D printing,
industrialised.

Complex elastomeric parts, on demand — from prototype to production.

✓ ISO 13485 certified ✓ Ships in 5 days ✓ No minimum order

Background: bg-gradient-hero or a full-bleed photo with a left→right dark overlay. Heading: H1 ExtraLight. CTAs: pill buttons h-12.

Export

Token Reference

All tokens are available in spectroplast-tokens.json for Token Studio. Below is a summary of the semantic layer.

Token	Value	Usage
color.semantic.background	#ffffff	Page background
color.semantic.foreground	#282828	Default text
color.semantic.primary	#466ee6	Buttons, links, focus ring
color.semantic.muted	#F5F5F5	Section backgrounds
color.semantic.muted-foreground	#9f9f9f	Secondary text
color.semantic.border	#e4e4e4	Dividers, inputs
color.semantic.destructive	#ef4444	Error / delete states
borderRadius.full	9999px	Pill buttons
borderRadius.2xl	16px	Cards
sizing.nav-height	80px	Fixed navbar h-20
sizing.max-content-width	1280px	max-w-7xl container
animation.easing.spring	cubic-bezier(0.22,1,0.36,1)	All transitions

Import into Figma via Token Studio

Overview

Color Palette

Gradients

Type Scale — Manrope

Spacing Scale

Border Radius

Shadows

Animation

Buttons

Cards

Hero Pattern

Silicone 3D printing,industrialised.

Token Reference

Silicone 3D printing,
industrialised.