• CGC Hub
  • Comics
  • Cards
  • Home Video
menu
  • Grading Services
    • Services & Fees
  • Holders
  • Resources
  • News & Events
Verify
Submit
  • Grading Services
    • Services & Fees
  • Holders
  • Resources
  • News & Events
Verify
  • Grading
  • Holders
  • Resources
  • News & Events
  • Services & Fees
  • Verify
  • Submit
  • Guarantee
  • Contact
  • Careers
  • Terms of Use
  • Privacy Policy
  • Returns
  • Contest Rules
  • Terms & Conditions
  • Advertise
Get news and the latest updates from
CGC Video Games
Sign up for emails

Follow CGC

© 2026 Certified Guaranty Company, LLC. | CGC is part of the  Certified Collectibles Group

Style Guide | CCG

Style Guide

  • Test

Colors

Stationary Colors

Black
#000000
--color--black

White
#FFFFFF
--color--white

Brand Colors

Brand 1
#0F4285
--color--brand-1

Brand 2
#000000
--color--brand-2

Brand 3
#CCA052
--color--brand-3

Brand 4
#073066
--color--brand-4

Gray 1
#333333
--color--gray-1

Gray 2
#666666
--color--gray-2

Gray 3
#BBBBBB
--color--gray-3

Gray 4
#CBCCCB
--color--gray-4

Gray 5
#F7F7F7
--color--gray-5

Functional Colors

Link
#C90000
--color--link

Footer
#000000
--color--footer

Foreground Background Colors

Foreground Default
#000000
--color--fg-default

Foreground Muted
#4A5568
--color--fg-muted

Foreground Subtle
#A0AEC0
--color--fg-subtle

Foreground On Accent
#FFFFFF
--color--fg-on-accent

Background Default
#FFFFFF
--color--bg-default

Background Muted
#F7F7F7
--color--bg-muted

Background Subtle
#BBBBBB
--color--bg-subtle

Background On Accent
#CBCCCB
--color--bg-on-accent

Background Black
#000000
--color--bg-black

Gradient Colors

Gradient Icon
linear-gradient(180deg, #cca052 0%, #dbb064 46%, #f4cb82 100%)
--gradient--icon

Gradient Top
linear-gradient(0deg, #00000000 75%, #00000059 100%)
--gradient--top

Buttons & Links

Button

Button Primary
.button--primary
Button Primary
.button--primary.button--small
Button Primary
.button--primary.button--altreverse
Button Primary
.button--primary.button--altreverse.button--small
Button Secondary
.button--secondary
Button Secondary
.button--secondary.button--small
Button Secondary
.button--secondary.button--reverse
Button Secondary
.button--secondary.button--reverse.button--small
Button Secondary
.button--secondary.button--altreverse
Button Secondary
.button--secondary.button--altreverse.button--small

Links

Arrow Link
.arrow-link
Arrow Link Reverse
.arrow-link.link-reverse
Arrow Link Alt Reverse
.arrow-link.link--altreverse
Secondary Link
.secondary-link
Secondary Link Reverse
.secondary-link.link--reverse
Secondary Link Alt Reverse
.secondary-link.link--altreverse
Link text - lorem ipsum
default
Link Reverse - lorem ipsum
.link--reverse
Link Alt Reverse - lorem ipsum
.link--altreverse
Text Link
.text-link
Text Link Reverse
.text-link.link--reverse
Text Link Alt Reverse
.text-link.link--altreverse
Icon Link
.icon-link
Icon Link Reverse
.icon-link.icon-link--reverse
Icon Link Alt Reverse
.icon-link.icon-link--altreverse
Back Link
.back-link
Back Link Reverse
.back-link.link--reverse
Back Link Alt Reverse
.back-link.link--altreverse