Cornerpost Fence & Gate Co.
Design System
A live reference for the theme: Minnesota-made character, dependable structure and clear, practical communication.
Color foundations
#0f2b46
#1d5c45
#e3a21a
#f6f3ec
Typography
Bitter — Built to stand.
Public Sans — A straightforward, readable voice for every detail.
Core components
Get Free Estimate ? Compare Fence Materials ?
Clear answers. Strong foundations.
Accessible disclosure components expand without leaving the page.
Source reference frames
Section · 141:207744
05 · Buttons · 10px corners, sentence/title case, trailing ? arro · Primary · default · Get Free Estimate · .btn .btn-gold · gold fill, ink text · Primary · hover · bg --gold-600 · y -1px · Primary · focus · 3px --lake-600 ring · Primary · disabled · .is-disabled · Primary · loading · Sending… · .is-loading + spinner · Dark · Free Estimate · .btn-dark · header CTA · White (on dark) · (612) 555-0186 · .btn-white · phone CTA · Outline · Compare Materials · .btn-outline · Ghost light · Send Photos · .btn-ghost-light · Small · .btn-sm · 42px · Large · Request Estimate · .btn-lg · 58px · Text link · Learn more · .link
Section · 141:207864
11 · Iconography · UI icons — 24px grid, 2px round stroke · northstar · phone · mail · pin · clock · arrowR · arrowL · check · checkCircle · xCircle · chevD · chevR · menu · x · plus · minus · star · shield · award · badge · hammer · wrench · ruler · home · building · factory · hardhat · users · calendar · file · clipboard · card
Section · 141:208478
12 · Fence Style Illustrations · Flat SVG drawings in material colors (cedar, vinyl · STYLES.boardOnBoard() · STYLES.shadowbox() · STYLES.horizontal() · STYLES.dogEar() · STYLES.picket() · STYLES.vinylPrivacy() · STYLES.lattice() · STYLES.splitRail() · STYLES.ranch() · STYLES.spearTop() · STYLES.flatTop() · STYLES.ornamental() · STYLES.chainLink() · STYLES.chainSlats() · STYLES.security() · STYLES.pool() · STYLES.farm() · STYLES.temp() · STYLES.composite()