Perpetua Design System — Components
Component
FoundationsREST-verified Figma tokensfile oSWyXy2KWVNWyc4os4MDfrAvenir Next LT Pro · Klinic Slab

Color — named styles

Primary Dark Blue
#153A51
Blue
#2B76A0
Medium Blue
#4099BC
Cool Blue
#54B8D6
Primary Light Blue
#AADDE2
Primary Green
#9AAF47
Medium Green
#719337
Dark Green
#617F28
Steel Grey
#BCC9CE
Black (ink)
#333133
White
#FFFFFF

Type scale — Avenir Next LT Pro (H4 = Klinic Slab)

H1 · Avenir Bold
90 / 90

Esto Perpetua

H2 · Avenir Bold
72 / 80

Stibnite Gold Project

H3 · Avenir Bold
44 / 50

A modern American mine

H4 · Klinic Slab Bold
44 / 50

Resource security & restoration

H5 · Avenir Bold
36 / 44

Antimony — a critical mineral

H6 · Avenir Bold
22 / 32

Section subheading

Body/Large · Avenir Regular
22 / 36

Perpetua Resources is advancing the redevelopment of the Stibnite Gold Project in Idaho.

Body/Default · Avenir Regular
16 / 28

The dual mandate: produce the only mined source of antimony in the United States while restoring an abandoned mine site.

Body/Small · Avenir Regular
14 / 26

Forward-looking statements apply. See safe-harbor language for investor disclosures.

Buttons · on white fieldfull pill (radius = ½ height)pad S12·16 / M16·20 / L20·24gap 12 · Avenir Demihover on rollover
Solid Blue · primaryLearn more Learn more Learn more
Outline BlueLearn more Learn more Learn more
Outline GreenLearn more Learn more Learn more
Buttons · on navy / blue fieldbg #153A51white & outline-whitehover on rollover
Solid WhiteLearn more Learn more Learn more
Outline WhiteLearn more Learn more Learn more
Buttons · on green fieldbg #719337white-fill (blue label) & outline-whitehover on rollover
Solid WhiteLearn more Learn more Learn more
Outline WhiteLearn more Learn more Learn more
Hero Banner 1row · space-between · centerpadding 96px 250pxgap 10pxbg #BCC9CEH 566

Netus metus eget semper tincidunt vel aliquet.

Learn more
Hero Banner 2row · space-between · centerpadding 96px 250pxgap 143pxbg #BCC9CEH 515

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Learn more
Hero Banner 3row · align centerpadding 0 0 0 250pxgap 96pxbg #FFFFFFH 500 · image flush right

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Learn more
Hero Banner 4row · space-between · centerpadding 48px 250pxgap 100pxbg #FFFFFFH 496

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Learn more
Hero Banner 5column · align centerpadding 96px 250pxgap 32pxbg #FFFFFFH 531 · centered, no image

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Learn more
Full-Screen Hero 1row · space-between · centerpadding 227px 250pxgap 287pxbg #BCC9CEH 910

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Get Started
Full-Screen Hero 2row · align centerpadding 0 0 0 250pxgap 100pxbg #FFFFFFH 910 · image flush right

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Get Started
Full-Screen Hero 3row · space-between · centerpadding 130px 250pxgap 120pxbg #FFFFFFH 910

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Get Started
Full-Screen Hero 4column · align flex-startpadding 157px 250px 158pxgap 48pxbg #BCC9CEH 910 · stat hero

Netus metus eget semper tincidunt vel aliquet.

20,000
Egestas nunc libero lorem tortor risus neque magna.
3x
Egestas nunc libero lorem tortor risus neque magna.
500m
Egestas nunc libero lorem tortor risus neque magna.
Full-Screen Hero 5row · justify center · align flex-startpadding 96pxbg #153A51H 910 · steel card

Netus metus eget semper tincidunt vel aliquet.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Get Started
Content Section 1row · space-between · centerpadding 48px 250pxbg #FFFFFFH 529

Tellus et rutrum risus amet sem est ultricies.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris.

Pretium quis ut velit consectetur adipiscing elit sed.
Faucibus interdum mauris consectetur pulvinar interdum.
Content Section 2row · centerpadding 48px 250pxgap 96pxbg #FFFFFFH 529

Tellus et rutrum risus amet sem est ultricies.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris.

Pretium quis ut velit consectetur adipiscing elit sed.
Faucibus interdum mauris consectetur pulvinar interdum.
Content Section 3row · space-between · centerpadding 48px 250pxbg #FFFFFFH 396

Sit in duis quis ipsum dictum.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum mauris.

Content Section 4row · space-between · centerpadding 50px 250pxbg #FFFFFFH 772 · 2 cards

Enim id nulla lorem tincidunt s ut.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar.

Nunc semper neque sit lus ord.

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar.

Content Section 5row · space-between · centerpadding 50px 250pxbg #FFFFFFH 667 · 3 cards

Sed vestibulum maecenas tincidunt

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra.

Magna ornare odis pellentesque

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra.

Dictum ut scelerisque pellentesque pretium

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra.

Content Section 6row · space-between · centerpadding 48px 250pxbg #FFFFFFH 531 · 4 cards

Sed vestibulum tincidunt

Egestas nunc libero lorem tortor risus neque magna.

Magna ornare pellentesque

Egestas nunc libero lorem tortor risus neque magna.

Dictum scelerisque pretium

Egestas nunc libero lorem tortor risus neque magna.

Faucibus interdum mauris

Egestas nunc libero lorem tortor risus neque magna.

Content Section 7column · centerpadding 48px 250pxgap 48pxbg #FFFFFFH 834

Eyebrow Label

Etiam lectus cursus tellus

Sed vestibulum tincidunt

Egestas nunc libero lorem tortor risus neque magna erat velit.

Magna ornare pellentesque

Egestas nunc libero lorem tortor risus neque magna erat velit.

Dictum scelerisque pretium

Egestas nunc libero lorem tortor risus neque magna erat velit.

Content Section 8column · centerpadding 48px 250pxgap 48pxbg #FFFFFFH 986 · media

Eyebrow Label

Ut tellus ornare gravida neque

Content Section 9row · space-between · centerpadding 48px 250pxbg #FFFFFFH 396 · 2 cards

Sustainability Ipsum Dictum

Egestas nunc libero lorem tortor risus neque magna erat velit.

Learn more

Sustainability Ipsum Dictum

Egestas nunc libero lorem tortor risus neque magna erat velit.

Learn more
Content Section 10column · centerpadding 0pxfull-bleed compositeH 1186

Mus Turpis Lorem

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar interdum turpis eu er.

Action one Action two Action three

Eget Eget Scelerisque Aenean

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra. Convallis interdum mauris consectetur pulvinar.

Learn more
Content Cards 1column · centerpadding 48px 250pxgap 48pxbg #FFFFFFH 566

Non risus etiam tincidunt

Accum gravib tincidi

Egestas nunc libero lorem tortor risus neque magna erat velit.

Ut dit lores

Egestas nunc libero lorem tortor risus neque magna erat velit.

Lus tincidunt nibh

Egestas nunc libero lorem tortor risus neque magna erat velit.

Content Cards 2column · centerpadding 72px 250pxgap 56pxbg #BCC9CEH 1082

Aliquet Mauris Nullam

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra.

Ut dictum dolor nibh

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Maecdtibuti lorem dico

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Consect lictit fragiat

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Perfen tristque lorit

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Mobile Aliquilteq
Content Cards 3column · centerpadding 48px 250pxgap 48pxbg #FFFFFFH 774

Tempus dolor semper

Lorem ipsum dolor

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Consectetur adipiscing

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Pellentesque habitant

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Vestibulum maecenas

Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra interdum.

Content Cards 4column · centerpadding 48px 250pxgap 48pxbg #FFFFFFH 774 · stats

Pellentesque tristique sed

165%
In allth metrics ipsum dolor sit amet consectetur.
27M
Lorem ipsum dolor sit amet
$87M
Lorem ipsum dolor sit amet
8s
Lorem ipsum dolor sit amet
65%
Lorem ipsum dolor sit amet
Content Cards 5column · centerpadding 72px 250pxgap 56pxbg #FFFFFFH 977 · bento

Cursus Augue Turpis

35 Lorem
Lorem amet vestibulum netus lorem ms consectetur.
15,000+
Lorem ipsum dolor amet
45 nibh consectetur
400m
Lorem ipsum dolor amet
10,000
amet lorem ipsum
100%
aplus et consectetur
500m amet
Lorem ipsum dolor sit amet consectetur adipiscing elit.
Testimonial 1row · space-between · centerpadding 48px 250pxgap 50pxbg #FFFFFFH 348
John Smith
Engineer
“

Quis at rhoncus ac venenatis pulvinar. Nullam amet vitae aliquet sed pretium scelerisque montes.

Text Blockcolumn · centerpadding 48px 250pxgap 32pxbg #FFFFFFH3 + 32/42 copy · centered

Viverra Tellus Integer

Amet in leo purus lacinia mauris enim eu. Commodo sit pretium tincidunt cras nec sed faucibus turpis et amet.

Article 01column · centerpadding 48px 250pxgap 32pxH3 title · date · H6 · bodyH 482

Viverra Tellus Integer

6/1/2026

Viverra Tellus Integer

Amet in leo purus lacinia mauris enim eu. Commodo sit pretium tincidunt cras nec sed faucibus turpis et amet. Egestas nunc libero lorem tortor risus neque magna erat velit. Odio duis quis nibh pharetra convallis interdum mauris.

Accordionrow · pad 96/250 · gap 48Q = H6 22/32A = BodyLarge 22/36bg #FFFFFFfirst open

FAQs

Sed malesuada urna vitae integer volutpat turpis amet consectetur adipiscing.

Montes amet pulvinar massa viverra a aliquet?

+−

Urna gravida in sapien accumsan lacus feugiat. Nunc libero lorem tortor risus neque magna erat velit interdum mauris.

Quisque varius potenti leo nibh?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

In massa ac sapien blandit dolor facilisi in?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

Mauris magnis cras habitasse lectus ultrices?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

Elementum tristique posuere ac risus sit?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

Congue sit commodo tempus felis lacinia tempus?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

At arcu sagittis praesent mauris ut porta odio?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

Nisl ut sit ante ornare pulvinar eget neque?

+−

Urna gravida in sapien accumsan lacus feugiat nunc libero lorem tortor risus neque.

Subscribe 1row · space-between · centerpadding 96px 250pxheading = H4 Klinic Slabbg #FFFFFFH 314

Nullam elementum amet

Ullamcorper molestie at sapien integer interdum at amet.

Enter your email
Subscribe
Contact 1row · space-between · gap 96padding 50px 250pxform bg #BCC9CEbg #FFFFFFH 656
Contact us

Get in touch today

Odio nunc sit risus purus vitae. Sed faucibus interdum mauris consectetur pulvinar.

community@perpetua.us
(208) 901-3060
12181 Highway 55 | PO Box 429
Donnelly, ID 83615
Submit
Headerrow · space-between · centerpadding 24/0/22/32bg #153A51H 120 · nav 16 Bold white
PPTA $34.96▲$1.77|Search
Footercolumn · pad 112/150/32links 14/42 #2B76A0 · titles 16 Boldbg #FFFFFFH 568

Project Overview

Gold AntimonyStrategic AssetRestore the SiteCurrent Status

Our Commitments

Who We AreHow We OperateCommunitiesSustainabilityTribes

Investors

Stock & Financials

Leadership

BoardManagement Team

News & Library

OverviewUpdatesLibrary

Careers

Join the TeamProfilesEmployee Intake

Contact

General ContactMedia ContactDirections
© 2026 Perpetua Resources | All Rights ReservedTerms and Conditions  |  Privacy Policy
Footer Mobile375px · columnpadding 48px 24pxgap 26 · nav titles stackedbg #FFFFFFH 691
Project OverviewOur CommitmentsInvestorsLeadershipNews & LibraryCareersContact
© 2026 Perpetua Resources | All Rights ReservedTerms and Conditions | Privacy Policy
Exploratory motifsinspired by the 2022 Sustainability Roadmapoptional — NOT part of the locked design system
ExploreDesign explorations drawn from the print Roadmap — shield image masks, logo/shield marks, and the 4-point diamond. A reference palette of ideas (the client favors shield framing & logo motifs), not locked components. Pick, adapt, or drop per page.
Shield image maskphoto clipped to the logo shield + navy outlinepaired with a vertical-rule title lockup
Published
April 2022

Sustainability
Roadmap

Icon & stat in shieldnavy shield badgeline icon or big number inside the logo shape
Water Quality
Restoration
Stewardship
148Mlb reserve
Stat in shield
Diamond marker list4-point star (logo mark) bullets on a navy panele.g. an “Actions Taken” sidebar

Actions Taken

  • Entered into an agreement to conduct pre-operation cleanup activity to improve water-quality conditions on site.
  • Entered into an agreement to support an independent citizen water-monitoring program.
  • Adopted a community water-monitoring program with the Stibnite Advisory Council.
Duotone photo title bandnavy-tinted full-bleed photomixed-weight title (light + heavy)
Table ofContents