H3 — Futura Demi
40px line-height 115% letter-spacing -0.008em Futura PT 500 color Proplate Dark
Världsledande tillverkning av grovplåtskomponenter
H4 — Futura Demi
32px line-height 125% letter-spacing -0.008em Futura PT 500 color Black 80% — för citat
"Vi värdesätter kvaliteten på Proplates produkter och deras professionella service."
H5 — Futura Demi
32px line-height 125% letter-spacing -0.016em Futura PT 500 color Proplate Dark — för card-rubriker
Industriella stålkomponenter
Intro — Neue Haas
24px line-height 133% Neue Haas 400 color Black 80% — lead under H3
Proplate erbjuder kompletta lösningar inom grovplåt för kunder globalt. Våra stålkomponenter används i en rad industrier, från höghållfasta stag i lyftkranar till slitdelar i gruv- och entreprenadmaskiner.
P Large
20px line-height 140% Neue Haas 400
På Proplate är vi stolta över att tillverka högvolymskomponenter i
tung grovplåt för kunder världen över.
P Large bold
20px line-height 140% Neue Haas 700
Stålkomponenter för krävande applikationer.
P Medium
16px line-height 150% Neue Haas 400
Proplate skär, bearbetar, svetsar och målar grovplåt för
monteringsfärdiga komponenter åt globala kunder.
P Small — caption
12px line-height 166% Neue Haas 400 color Text grey #55565A
Bildtext: Lyftstroppar för kran-tillverkare i Norden, levererade direkt från anläggningen i Oxelösund.
Vikt-not: Futura PT laddas endast i vikt 600.
Designen anger 500 → webbläsaren renderar 600 (närmaste tillgängliga).
Deklarera 500 i kod för att matcha designintentionen.
03 — Knappar
6 varianter från Figma. Alla har border-radius: 0,
ikon till höger, label-vänster + arrow-höger via space-between.
primary-orange-medium · 256×48 · BTN/medium 14px · Hem hero CTA
primary-orange-large · 256×48 · BTN/large 16px · Kundcase featured CTA
primary-black-large · 256×48 · på ljus bg
contact-small-menu · 132×32 · 1px outline · i nav
grey-small-link · 224×32 · i product card
grey-medium-link · full-width × 40 · under projekt-bilder
grey-large-link · full-width × 48 · i listing product card
primary-white-large-link · på mörk bg ("Välj Proplate")
04 — Sektionsrytm
Homepage växlar bakgrundsfärger i ett medvetet mönster. Alla sektioner:
120px top + bottom padding, content max-width 1120px.
Hero
Proplate Black · padding 192/80
Om oss
Proplate White · 4-bilder full-bleed
Vad vi gör
New warm · 4× product cards
Välj Proplate
Proplate Black · full-width image
Senaste projekt
Proplate White · 2-up grid (736+352)
Section-video
New warm · embedded video
CTA-band
Proplate Black · 288px, white CTA
Footer
Black outer · Orange inner-panel (1400×486)
Inga rundade hörn — med ett undantag. Sektioner, kort, knappar har alla
border-radius: 0. Pagination-dots (32×32 cirklar) är det enda stället i designen
med rundade former. Distinkt identitetsmarkör.
05 — Komponenter
Återanvändbara block från Figma. Innehåller produkt-kort (listing),
testimonial-block och footer-kolumn.
Listing-card + 3-tier header (Tjänster)
Listing-mönster: H1 eyebrow → H2 main heading → P Large lead → 2-kol kort-grid.
Header har 3 varianter: 2-tier H1-led (Produkter), 3-tier (Tjänster, visas här),
2-tier H2-led (Material). Lead-weight varierar (400 eller 700) per sida.
Kort har ingen border som default (2/3 listing-sidor saknar — Produkters border är drift).
BTN/large-label pinned till weight 500.
Tjänster
Effektiva stålkomponenter för din produktion
Proplate erbjuder ett brett utbud av tjänster — skärning, bearbetning, svetsning, ytbehandling och montering — för komponenter i tung grovplåt.
Skärning
Plasma- och gasskärning av grovplåt upp till 200 mm i högsta precision.
CNC-bearbetning
Fräsning, borrning, gängning och svarvning för komponenter i grovplåt.
"METSO arbetar sedan många år i nära partnerskap med Proplate. Vi värdesätter framförallt den höga kvaliteten på produkterna och den professionella service som Proplate tillhandahåller."
Keyvan Diamondo, METSO
Detail-page layout (main + sidebar)
1120 container = 736 main + 64 gap + 1px vertikal divider + 64 gap + 256 sidebar.
Standalone H1 (Page-title, Proplate Black) ovanför kolumnerna.
Body P Large + intro använder Text grey #55565A — inte Black 80%.
Intro kan ha H3 ovanför (visas här) eller bara vara en standalone Intro-paragraf.
Body-rytm: två varianter — loose (gap 24 internt) eller tight (gap 8) beroende på content-densitet.
Sub-sections i body använder H5 (samma 32px som H4 men tightare tracking).
Helhetslösningar för grovplåt
Världsledande tillverkning av grovplåtskomponenter
Proplate erbjuder kompletta lösningar inom grovplåt för kunder globalt. Våra stålkomponenter används i en rad industrier, från höghållfasta stag i lyftkranar till slitdelar i gruv- och entreprenadmaskiner.
Lyftstroppar i höghållfast stål, levererade direkt från anläggningen i Oxelösund.
Gasskärning av Grovplåt
Våra gasbrännare kan skära upp till 300 mm tjockt stål, med maskiner utrustade för att hantera stora komponenter. Den största maskinen har ett skärbord på 42 meter för effektiv produktion och minskade ställtider.
Gasskärning under Vatten
För att minimera värmepåverkan (HAZ) och bevara stålets egenskaper skär vi känsliga komponenter under vatten, vilket ger en bättre arbetsmiljö och skärresultat.
Fasskärning för Svetsförberedelse
Komponenter som ska svetsas fasskärs direkt i skärmaskinen, antingen med gas eller plasma, för att säkerställa bästa möjliga passform och svetskvalitet.
Testimonial — H3-quote-variant (Karriär)
Större single-quote-variant: H3 40px Proplate Black (vs original
H4 32px Black 80%). Använd när det bara finns en quote i view —
t.ex. på Karriär-sidan. H4-varianten är för multi-slide carousel.
"It feels like being part of a big family"
Förnamn, befattning och anläggning
Proplate People grid (staggered 3-col, Karriär)
Mixed-media grid: photo-cards (352×400 = foto + full-width svart CTA)
+ video-thumbs (352×256 = thumbnail + 40×40 orange play-knapp + caption).
Kolumner staggrade vertikalt så raden inte läser som ett rutnät.
Caption är P Medium 700-weight (inte 400).
OBS: primary-black-large är 352 wide här (full-card-width), inte 256.
Single-row slider av 4 orange kort (256×256). Bryter tre regler avsiktligt:border-radius: 20px (regel-undantag #2),
box-shadow Material elevation (designens enda shadow),
och transform: rotate(±1deg) alternerande tilt
(designens enda rotation). Pilar 48×48 cirkulära orange knappar med svart ikon.
Avsiktligt separat från resten av designen — playful tone för värderingar/perks/kultur.
Engagemang
Ansvar
Kvalitet
Lagarbete
Page hero — photo-overlay variant (Oxelösund)
Photo-led: fullbredds-foto, Proplate Dark 40% overlay,
vit H1 floatande på fotot vid left: 160px.
Ingen lead, ingen CTA — bara H1. För plats/anläggnings-sidor.
Sektion 1440×640, ingen padding (allt är absolut-positionerat).
Proplate Oxelösund
Page hero — dark variant (Om oss)
Photo-led page-opener: Proplate Dark bg, vit H1 + vit lead (max 736),
full-bredds-bild 1120×640 nedanför. Skiljer sig från hemsidans hero
(svart bg + tagline + CTA + video). Sektion-padding 192/0/80, gap 120.
Det här är Proplate
Proplate skär, bearbetar, svetsar och målar grovplåt för monteringsfärdiga komponenter åt globala kunder. Med en toppmodern anläggning i Oxelösund levererar vi till Liebherr, Kobelco, Komatsu, Epiroc och fler.
4-image collage row (Vårt team)
Horisontell rad av 4 porträtt — full-bleed med overflow på 1120-grid
(1816 wide totalt, ~348px utanför container på varje sida).
Varje cell är 448×489 med Proplate Grey border + bg-placeholder.
Bilden inuti är 448×672 (porträtt) ankrad uppåt — object-position: top.
Designens enda komponent som avsiktligt overflöder containern.
Vårt team
Det är människorna som gör Proplate unikt. Våra engagerade och erfarna medarbetare är nyckeln till vår framgång.
2-up text + image (Hållbarhet på Om oss)
Sida-vid-sida text-block + image-block. 1120 row, 2× 512-kolumner, gap 64,
align-items: center. Text-block: H2 + lead + primary-black-large.
Image-block: 512×360 (i Figma en placeholder med Proplate Black 8% bg
+ H4-caption — på web ersätts med riktig bild).
Sektion-padding 80/0, gap 64. Bg New warm.
CSR och Hållbarhet
Läs mer om hur vi jobbar för ökad hållbarhet i vår verksamhet och i våra partnerskap.
Bild på metalldelar som bildar en växt
Contact form (Kontakta oss)
Sida-vid-sida text-block + form. Inputs har ingen border,
bg Proplate White, padding 12 16, placeholder
Black 60% rgba(31,31,31,0.6) (samma som section-dividers
+ download-list-dividers — konsoliderad alpha).
Submit = primary-black-large 544 wide (full-form-bredd, ny variant).
Section padding 192/0/120 (samma som listing-headers).
Kontakta oss
Har du frågor om våra produkter eller tjänster? Skicka in formuläret så återkommer vi inom 24 timmar.
Tilted decorative accent ("PP-component")
Playful tag-shape — orange rektangel med box-shadow +
transform: rotate(). Används som visuell "punctuation" i
contact-grids och i värderings-karusellen (Karriär).
Pinna fyllning till Proplate Orange — det ljusare
#FFD21F som dykt upp är drift.
Rotation: små udda grader (-8°, +4°, -90°) — välj så det inte ser
oavsiktligt ut men inte heller är skränigt.
Categorized contact-card grid (Kontakta oss)
Long-form kontakt-lista grupperad i H4-kategorier (Koncernledning,
Försäljning, Presskontakter osv). Varje kategori = top-divider +
H4 + row av 256-wide kontakt-kort. Återanvänder sidebar-contact-card-spec
(256×288 foto + 86px text). Ibland ersätts en cell av en
PP-component tag-accent som visuell punctuation.
Koncernledning
Max Björk CEO +46 70 - 660 06 40 max.bjork@proplate.se
Ian Hardy COO, North America +44 7809 - 44 33 06 ian.hardy@proplate.se
Johan Björklund CFO +46 76 - 846 13 30 johan.bjorklund@proplate.se
Presskontakter
Max Björk CEO +46 70 - 660 06 40 max.bjork@proplate.se
Long-form lista av nedladdningsbara filer, grupperade i H3-sektioner.
Varje rad är 736×48 (label + 40×40 icon-ruta), separerade av 1px
Proplate Black 60% dividers — divider före + efter varje rad
(även topp + botten). Container 736 ankrad vänster i 1120-frame
(samma hierarki som detail-page main-column utan sidebar).
Sektionsbg New warm, sidans padding 192/0/120.
Variant av download-list för navigations-länkar (inte file-downloads).
Padding 0 4 (vs 0 8), gap 12 (vs 4), label Proplate Black
(inte Black 80%), inget icon-box (bara arrow). Använd när sektion
behöver "navigera till"-länkar — visuellt parallellt med download-list men reserverat
för nav, så användaren känner skillnaden direkt.
2-kol grid av press-foton (352×~244-280: bild 352×224 + 8 gap + caption).
48×48 orange "stjärnskruv"-ikon centrerad på bilden — markerar att bilden
är fri att ladda ned. Tilted-square-form (rotation -45°) matchar
"tag accent"-idiomet i designsystemet.
Caption P Medium 16/400 Black 80%.
Fotografier
Notera: Alla bilder är gratis att ladda ned och använda för publicering i press och media. En källreferens (www.proplate.com) måste dock vara inkluderad.
Max Björk, VD Proplate
Stag till lyftkranar färdiga för leverans till kund
Plasmaskärning Proplate
Flygfoto Proplate Oxelösund
Cross-links band ("Länkat till andra produkter")
Stor CTA-band för 3+ relaterade länkar. Proplate Black bg, vit H3 (40px),
736px lista där varje rad är en transparent button (bg matchar sektion)
separerade av 2px solid white-60% dividers.
Fullbredd 1120×630 hero-card med en mörk content-overlay (468×144) bottom-left.
H5 i vit + orange CTA. 1px Proplate Black divider under.
17 meter långa stag i specialstål
Kundcase-grid (3-col)
Mindre kort-variant: 352×462, 3-kol grid (vs 2-kol listing).
Titel = P Large bold (inte H5 — kortet är för litet).
Knapp = grey-medium-link h=56. Content-area har
justify-content: space-between så knappen ankras till botten.
Komponenter i specialstål till truckar
Stag till bandgående kranar
Förmonterade bultkorgar bidrog till säkrare arbetsmiljö
Pagination
Prev-arrow box → separator → 5 sidnummer-cirklar
(border-radius: 20px — designens enda runda form!) → separator → next-arrow.
Aktiv sida = Proplate Orange. Inaktiv = Proplate White.
Footer-kolumn
En av tre 413px-kolumner i orange inner-panel. Heading (UPPERCASE label)
+ divider-rader (1px #202020) + meny-länkar (P Medium 16/400 + arrow).