---
version: alpha
name: "Palace"
description: "Raw, maximalist skate retail system for Palace Skateboards — the Tri-Ferg triangle in five colourways, all-caps Neue Helvetica at weight 700, and a flat white canvas that treats irreverence as a design principle."

colors:
  # CSS variable names preserved from source: --color-tri-ferg-*
  background: "#ffffff"
  surface: "#f5f5f5"
  ink: "#000000"
  ink-secondary: "#333333"
  # was rgba(0,0,0,0.6) approx — Google format requires hex; flattened on white
  ink-muted: "#666666"
  on-background: "#000000"
  on-surface: "#000000"
  primary: "#cd1417"
  on-primary: "#ffffff"
  # Tri-Ferg blue — secondary brand anchor
  primary-alt: "#34398d"
  on-primary-alt: "#ffffff"
  # Tri-Ferg lime green — accent / energy
  accent: "#b5ff00"
  on-accent: "#000000"
  # Tri-Ferg grey — muted logo variant / surface tint
  tri-ferg-grey: "#e6e6e6"
  border: "#000000"
  border-subtle: "#e6e6e6"
  # was rgba(0,0,0,0.1) — Google format requires hex; flattened on white
  border-ghost: "#e9e9e9"
  # --color-text-grey — form placeholder / disabled text
  text-muted: "#d1d5db"
  focus-ring: "#cd1417"
  # was rgba(0,0,0,0.04) approx — Google format requires hex
  shadow-soft: "#f5f5f5"
  error: "#cd1417"

typography:
  display-hero:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12.8px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  label:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12.8px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Neue Helvetica W01, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px

spacing:
  xs: 2px
  sm: 8px
  md: 14px
  lg: 16px
  xl: 20px
  2xl: 32px
  3xl: 80px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-accent-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 2px 8px
  badge-alt:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 2px 8px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"
    padding: 8px 16px
  product-label:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Palace Design System

## Overview

Palace's website does not try to be a luxury boutique dressed in skateboard clothes. It is a skateboard shop wearing exactly what it is: white canvas (`{colors.background}`), flat black type at weight 700, and the Tri-Ferg triangle as the sole decorative vocabulary. Everything is uppercase. The font is one, the weight is one, and the radius is zero. The result is a site that feels closer to a Xeroxed flyer pinned to a lamppost than to any considered e-commerce aesthetic — and that is precisely the point.

The colour system carries the brand's history on its sleeve. Five Tri-Ferg colourways (red `{colors.primary}`, blue `{colors.primary-alt}`, lime green `{colors.accent}`, grey `{colors.tri-ferg-grey}`, black `{colors.ink}`) are named as CSS variables directly in the source — `--color-tri-ferg-red`, `--color-tri-ferg-blue`, `--color-tri-ferg-lime-green` — and their usage is deliberate and rotational rather than semantic in any conventional sense. The red anchors CTAs and focus states. The lime green lands as a shock accent where energy is needed. The blue sits in secondary surfaces and seasonal variants. The white canvas holds all of them without arbitrating between them.

Neue Helvetica W01, self-hosted and delivered at a single weight (Bold/700), is the typographic non-decision that defines the system. Every size, from the 48px display headline down to the 11px caption, runs at the same weight and in uppercase. There is no hierarchy of tone — just hierarchy of scale. This deliberate flatness is the Palace voice made concrete: nobody gets a lighter weight for being less important, nobody gets a lighter touch for being auxiliary copy. The type is blunt as a board graphic and just as unapologetic.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — no off-white, no cream, no dark mode; just the wall
- Five named Tri-Ferg CSS variables; red `{colors.primary}` is the CTA anchor, lime `{colors.accent}` is energy, blue `{colors.primary-alt}` is seasonal depth
- Neue Helvetica W01 self-hosted at weight 700 only — all uppercase, one typeface, zero variation
- Zero border radius anywhere — `{rounded.none}` is the only value in the system
- Flat elevation philosophy: no drop shadows, no card lift, no layering illusions
- 0.15s cubic-bezier(0.4, 0, 0.2, 1) transition on interactive states — fast, mechanical, not precious
- Navigation links use `{typography.nav-link}` (16px Bold uppercase) with a 1px black bottom border as the sole structural separator
- Product cards are pure photography rectangles with no chrome, no shadow, no radius
- Dense Tailwind arbitrary-value spacing (2px, 2.5px, 8px, 14px) — very tight, anti-luxury
- Social footer navigation ("INSTAGRAM · TIKTOK · APPLE MUSIC · BORING STUFF") treated with the same typographic weight as product links — flat hierarchy by conviction
- The Tri-Ferg logomark appears in all five colourways as a grid, not as a single masthead logo

## Colors

### Primary
- **White** (`{colors.background}`): The total canvas. Full page width, no border, no inset. Everything lives on this.
- **Light Gray** (`{colors.surface}`): Hover states, image placeholders, secondary surface tints. The first step away from white.
- **Pure Black** (`{colors.ink}`): All body text, all navigation links, all structural borders. The weight of the system.

### Brand Accent
- **Tri-Ferg Red** (`{colors.primary}`): CTAs, error states, focus ring, badge fills. The CTA anchor of the Tri-Ferg palette — assertive, action-oriented.
- **Tri-Ferg Blue** (`{colors.primary-alt}`): Secondary brand surfaces, seasonal colourways, alternative button fills. A deep cobalt used with the same conviction as the red.
- **Tri-Ferg Lime Green** (`{colors.accent}`): High-energy accent for drops, limited editions, and callout badges. On black text (`{colors.on-accent}`), the contrast is extreme and intentional.

### Muted & Structural
- **Tri-Ferg Grey** (`{colors.tri-ferg-grey}`): The neutral logo variant, surface separators, border-subtle. The system's only truly grey tone.
- **Text Muted** (`{colors.text-muted}`): Placeholder text in form inputs, disabled state labels. A `--color-text-grey` CSS variable from the source.
- **Secondary Ink** (`{colors.ink-secondary}`): Descriptive copy, inactive tab labels, subdued metadata.
- **Muted Ink** (`{colors.ink-muted}`): Supporting captions, timestamp annotations, smallest contextual text.

### Borders
- **Border** (`{colors.border}`): All structural borders — solid 1px black. The system makes no distinction between subtle and strong borders; there is only the black line.
- **Border Subtle** (`{colors.border-subtle}`): Grid separators, row dividers in product tables. Uses `{colors.tri-ferg-grey}`.
- **Border Ghost** (`{colors.border-ghost}`): Near-invisible structural edges, Klaviyo widget chrome. Was `rgba(0, 0, 0, 0.10)` — Google format requires hex; flattened on white.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0, 0, 0, 0.04)` — Google format requires hex; flattened on white. Palace uses no meaningful elevation; this value exists only as a theoretical fallback.

## Typography

### Font Family
- **Primary**: `Neue Helvetica W01`, with fallbacks: `Helvetica Neue`, `Helvetica`, `Arial`, `sans-serif`
- **Self-hosted file**: `neue-helvetica-w01-CykExj90.woff2` — a single woff2 at Bold/700
- **OpenType Features**: None declared. The typeface is set at a single weight with no stylistic alternates, ligature activation, or feature-settings variation. Maximum neutrality, maximum weight.

*For implementations where Neue Helvetica W01 is unavailable: `Helvetica Neue Bold` is the closest system fallback. For web use, `Arial Bold` or `Barlow Condensed Bold` are functional substitutes; `League Gothic` or `Bebas Neue` capture a similar compressed-grotesque energy. The self-hosted font delivers a very specific bold grotesque that generic system fallbacks cannot fully replicate.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines, seasonal drop announcements |
| `display` | Section titles, category headers |
| `heading-section` | Sub-category navigation, product group titles |
| `heading-sub` | Product names in detail views, sidebar labels |
| `body-large` | Extended product descriptions, editorial body text |
| `body` | Grid product names, filter options, cart line items |
| `nav-link` | Primary site navigation, footer links |
| `button-ui` | CTA labels, add-to-cart buttons, form submit actions |
| `label` | Product tags, status indicators, size selectors |
| `caption` | Legal copy, shipping footnotes, timestamp text |

### Principles
- One font, one weight, one case — all uppercase, always Bold/700, always Neue Helvetica
- Scale is the only hierarchical device — no weight variation, no style variation between levels
- Letter-spacing is conservative even in uppercase settings — the compressed grotesque carries authority without forced tracking
- No body text at Regular or Light weight exists in the system; the visual language is uniformly blunt
- The smallest caption text (11px Bold uppercase) reads as a deliberate typographic choice, not an afterthought

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, but with sub-unit usage (2px, 2.5px via Tailwind arbitrary values) for micro-level component padding.

The spacing personality is deliberately cramped where content is dense. Product grids use tight gutters; social navigation links sit close together at the bottom of pages. The 80px `{spacing.3xl}` exists only for major section breaks — the rest of the system is lean. No generous whitespace, no editorial breathing room. This is a shop, not a gallery.

### Grid & Container
- Full-width layout on all pages — no max-width constraint on the canvas; content extends edge to edge
- Product grid: tight multi-column layout, collapsing progressively at each mobile breakpoint
- Navigation: full-width horizontal strip; content-padded at `{spacing.lg}` on each side
- Product detail pages: photography-dominant, information panel beneath or beside depending on viewport

### Whitespace Philosophy
- Whitespace is used structurally, not atmospherically — it separates items, it does not express luxury
- Padding within interactive components is compact: `{spacing.sm}` to `{spacing.lg}` (8px–16px) at most
- The system rewards tight packing: the Tri-Ferg grid on the landing page places five logomarks at equal intervals with minimal margin

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, buttons, all page sections — default |
| Ghost (Level 1) | `rgba(0, 0, 0, 0.04) approx` — flattened hex `{colors.shadow-soft}` | Theoretical fallback; not visibly used in practice |
| Focus Ring | `2px solid {colors.focus-ring}` | Form inputs and interactive links on keyboard focus |

**Shadow Philosophy**: Palace uses no elevation. The surface is flat, the cards are flat, the buttons are flat. Depth is expressed through the photography of products and the visual weight of the Tri-Ferg mark — not through UI layering. A skate video frame does not cast a drop shadow; neither does a Palace product card.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, badges, navigation, modals. The only value. |

The Palace shape language is absolute: zero border radius across the entire interface. No button softens, no badge curves, no input rounds. The system is angular as a half-pipe and unapologetic about it. This is the single most distinctive shape decision in the entire stack — most retail systems reach for at least a 2–4px radius; Palace reaches for none.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Solid Tri-Ferg red (`{colors.primary}`) fill, white text, zero radius, compact 8px/16px padding. Used for add-to-bag, checkout, and all primary purchase actions.
- **`button-primary-hover`** — Background snaps to black (`{colors.ink}`) over 0.15s — a hard mechanical transition, no easing softness.
- **`button-secondary`** — White fill with full black border (`{colors.border}`). Used for secondary actions: wishlists, filter resets, account actions. Inverts to black on hover.
- **`button-accent`** — Lime green (`{colors.accent}`) fill with black text (`{colors.on-accent}`). Used for high-energy callouts: drop countdowns, limited edition alerts, new arrival badges.

### Cards

Product cards have no chrome whatsoever: no border, no radius, no shadow, no background tint. They are flat photography rectangles that sit directly on the white canvas. The opacity transition on hover is 0.15s cubic-bezier(0.4, 0, 0.2, 1) — fast and mechanical. Product name renders in `{typography.body}` (12.8px Bold uppercase), price in `{typography.body}`, colourway label in `{typography.caption}`. No card padding — the photograph bleeds to the grid gutter.

### Inputs

Form inputs use `{colors.border}` (solid 1px black) as the default state and `{colors.focus-ring}` (Tri-Ferg red) on focus. No border radius. Font is `{typography.body}` from the Neue Helvetica stack. The hard black border is consistent with the system's graphic, print-referencing aesthetic — inputs look like cells in a form printed on paper.

### Badges / Tags

Two badge variants carry different energy levels. The standard badge uses Tri-Ferg red (`{colors.primary}`) fill for urgency signals ("LAST FEW," "NEW DROP"). The accent badge uses lime green (`{colors.accent}`) for positive promotional states ("RESTOCKED," "AVAILABLE"). Both are flat rectangles: zero radius, Bold uppercase label text, tight 2px/8px padding. No shadow, no outline.

### Navigation

The primary navigation strip spans full width, fixed at the top. Left-anchored Tri-Ferg wordmark; horizontal category links in `{typography.nav-link}` (16px Bold uppercase) centred or distributed across the strip; utility icons (cart, account, region) right-aligned. A single 1px solid black bottom border is the sole structural separator. No mega-menu, no flyout panel, no hover animation other than opacity shift. The social navigation footer ("INSTAGRAM," "TIKTOK," "BORING STUFF") is typographically identical to the product nav — the system applies the same weight and case to everything.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (Tri-Ferg red) for all primary CTAs and focus states — it is the action anchor
- Set every text element in uppercase — the system does not mix case
- Apply `{rounded.none}` to every component — zero exceptions; no softened corners anywhere
- Use `{colors.accent}` (lime green) sparingly for genuine high-energy callouts: new drops, restock alerts, countdown badges
- Keep button padding compact (`{spacing.sm}` / `{spacing.lg}`) — generous padding reads as luxury, which is not the voice
- Maintain 1px solid black borders (`{colors.border}`) on all interactive form elements and navigation strips
- Let the Tri-Ferg palette rotate — red, blue, lime, grey, black are all available; seasonal campaigns should use them intentionally
- Use `{typography.nav-link}` (16px Bold uppercase) for all navigation text, footer links, and social links — the same weight as section headers is intentional
- Apply the 0.15s cubic-bezier(0.4, 0, 0.2, 1) transition consistently across hover states — fast and mechanical is the signature

### Don't
- Don't introduce any border radius — even 2px reads as softness this system deliberately refuses
- Don't use Regular or Light font weight anywhere — Bold/700 is the only weight in the system
- Don't use mixed case or sentence case for any text — uppercase is non-negotiable
- Don't add drop shadows or any elevation layer to cards, buttons, or overlays
- Don't use a chromatic accent outside the five named Tri-Ferg colours — no pastel, no gradient, no tinted white
- Don't let whitespace get generous — this is not a luxury editorial layout; tight gutters are correct
- Don't use the lime green (`{colors.accent}`) as a body text colour — it is a fill colour only, on very short label text
- Don't add logo safe-zone padding or margin on the Tri-Ferg mark in grid arrangements — the dense logo row is intentional
- Don't use `{colors.primary-alt}` (Tri-Ferg blue) as a focus-ring or error state — reserve it for brand surfaces and seasonal campaigns
- Don't soften transition timings beyond 0.15s for micro-interactions — slower feels wrong in this context

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column product grid, navigation collapses behind toggle, wordmark centres |
| Mobile | 375–640px | Two-column product grid, condensed header, social links wrap to two rows |
| Tablet | 640–1024px | Three to four column grid, navigation expands, product detail splits |
| Desktop | 1024–1440px | Four to five column product grid, full navigation strip visible, max-content layout |
| Large Desktop | >1440px | Five+ column grid, generous inter-column gutters, edge-to-edge photography |

### Touch Targets
- Primary buttons use 8px/16px padding at 14px type — minimum 38px tap height; acceptable for a skate audience, supplemented by full-width CTA rows on mobile product pages
- Product card taps cover the entire photograph area — naturally oversized touch targets
- Navigation links at `{typography.nav-link}` (16px Bold) provide approximately 44px vertical touch extent on mobile

### Collapsing Strategy
- Product grid: 5 columns → 4 → 3 → 2 at each breakpoint step; single column only at smallest mobile
- Navigation: full horizontal link strip collapses behind a toggle below ~640px; wordmark remains visible at all sizes
- Product detail: photography and information panel stack vertically below ~768px
- Footer social navigation: horizontal row wraps to two lines at narrow viewports without any collapsing — the all-caps links wrap naturally

### Image Behavior
- Product photography is full-bleed in grid cells — no padding, no border, no crop override
- The Tri-Ferg logomark grid on the landing page maintains equal column widths across breakpoints
- Hero campaign imagery spans full viewport width; aspect ratio maintained via `object-fit: cover`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand red (CTA): `{colors.primary}`
- Brand blue (seasonal): `{colors.primary-alt}`
- Brand lime (accent): `{colors.accent}`
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build a Palace-style product card on white (`{colors.background}`). No border, no shadow, no radius. Full-bleed product photograph filling the top 70% of the card. Below: product name in Neue Helvetica W01 Bold 12.8px uppercase (`{typography.body}`), colourway label in 11px uppercase (`{typography.caption}`), price in 12.8px Bold uppercase. No card padding — photography bleeds to the grid gutter. Hover: background shifts to `{colors.surface}` over 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9."

- "Create a Palace primary add-to-bag button. Background: `{colors.primary}` (Tri-Ferg red). Text: `{colors.on-primary}` (white). Font: Neue Helvetica W01 Bold 14px uppercase 0.5px tracking (`{typography.button-ui}`). Padding: 8px 16px. No border radius. No shadow. Hover: background snaps to `{colors.ink}` (black) over 0.15s cubic-bezier(0.4, 0, 0.2, 1)."

- "Design a Palace-style site navigation strip on `{colors.background}`. Full viewport width. Left: Tri-Ferg wordmark SVG in `{colors.ink}`. Centre: category links (JACKETS, TEES, ACCESSORIES, etc.) in Neue Helvetica W01 Bold 16px uppercase (`{typography.nav-link}`), `{colors.ink}`, no underline. Right: cart and account icon glyphs in `{colors.ink}`. Bottom border: 1px solid `{colors.border}`. Padding: 8px 16px. Hover on links: opacity 0.6 over 0.15s. No dropdown, no flyout, no mega-menu."

- "Build a Palace drop-alert badge using the lime accent (`{colors.accent}`). Background: `{colors.accent}`. Text: `{colors.on-accent}` (black). Font: Neue Helvetica W01 Bold 12.8px uppercase (`{typography.label}`). Padding: 2px 8px. No border radius (`{rounded.none}`). No shadow. Use for 'NEW DROP', 'RESTOCKED', 'AVAILABLE NOW' labels above product images."

- "Create a Palace-style email mailing list form on white (`{colors.background}`). Input: no background tint, 1px solid black border (`{colors.border}`), no border radius, Neue Helvetica W01 Bold 12.8px uppercase (`{typography.body}`), padding 8px 14px. Focus: border-color snaps to `{colors.focus-ring}` (Tri-Ferg red). Submit button: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}`, no radius, 8px 16px padding. The entire form reads as a functional form cell, not a styled widget."

- "Generate a Palace-style Tri-Ferg logo grid. Five logomarks at equal column widths on `{colors.background}`, no gap padding between marks. Each mark in a different Tri-Ferg colourway: red (`{colors.primary}`), grey (`{colors.tri-ferg-grey}`), blue (`{colors.primary-alt}`), black (`{colors.ink}`), lime green (`{colors.accent}`). No border, no card chrome, no shadow. Use SVG triangular Tri-Ferg shape. All marks the same size; row centred vertically in the viewport."

### Iteration Guide

1. Start with `{colors.background}` as the total canvas — no tints, no off-white, no dark mode.
2. Set all text to Neue Helvetica W01 Bold 700 uppercase — no weight or case exceptions anywhere.
3. Apply zero border radius to every element — `{rounded.none}` is the only token in the rounded system.
4. Use `{colors.primary}` (Tri-Ferg red) for all primary CTAs and focus rings; `{colors.accent}` (lime) only for high-energy callouts.
5. Keep all transitions at 0.15s cubic-bezier(0.4, 0, 0.2, 1) — mechanical and fast.
6. Use 1px solid black (`{colors.border}`) for all structural borders — no `border-subtle` on primary UI elements.
7. Add depth through the Tri-Ferg colour rotation (red → blue → lime), not through elevation or shadow.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Palace. Brand names and trademarks belong to their respective owners.