Back

Card Layout (Square)

Jan 9, 2026

🎨 The Color Palette

To keep it authentic to the Penguins' brand, use these specific hex codes:

Pittsburgh Gold: #FCB514 (Primary accent/Action color)
Black: #000000 (Background or Text)
White: #FFFFFF (Secondary text)
Steel Gray: #A2AAAD (Optional: for a subtle industrial touch)

📐 Card Layout (Square)

Since this is for a website, I recommend a Modern Minimalist style that uses line art or silhouettes of your iconic landmarks.

Feature	Design Suggestion
Background	A solid Black or a very dark charcoal gradient.
The "Iceberg"	Use a stylized silhouette of the Civic Arena (The Igloo) or PPG Place (the glass castle) in a thin Gold line.
Kennywood	Add a small silhouette of the Phantom’s Revenge or the Racer coaster track sweeping across the bottom third of the card.
The Skyline	Feature the PPG Place spires prominently as they are the most "geometric" and fit a square card perfectly.
Heading	"PITTSBURGH SECTION" in a bold, sans-serif font (like Roboto or Industry).

Export to Sheets

🖋️ Visual Elements to Include

To make the card feel like "Home," try to balance these four "Inocic" (Iconic) scenes:

The "Iceberg" (PPG Place): Because of its 231 glass spires, it looks like a frozen castle. Use sharp, jagged lines to represent the glass.
Kennywood: Use the iconic Yellow Arrow logo or the silhouette of the wooden Jack Rabbit coaster "double-dip."
The Three Sisters: Don't forget the yellow bridges (Roberto Clemente, Andy Warhol, or Rachel Carson). A bridge silhouette is the quickest way to say "Pittsburgh."
The Confluence: A simple "Y" shape represent where the three rivers meet.

💻 CSS Implementation Idea

If you are coding this, you can use a hover effect that turns the card from Black/White to Penguins Gold.

CSS

.pgh-card {
  width: 300px;
  height: 300px;
  background-color: #000000;
  border: 4px solid #FCB514; /* Penguins Yellow */
  color: white;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pgh-card:hover {
  background-color: #FCB514;
  color: #000000;
}

🚀 Next Step

Would you like me to generate a few AI image mockups of what this square card could look like so you can use them as a reference for your developer?

‹ Scroll your roll

The "PPG Frame" (Glass Castle) ›

Back