SPECIAL OFFER

# SPECIAL OFFER — Style Reference
> Neon outlines on crimson canvas

**Theme:** dark

**Site:** https://www.special-offer.studio

Special Offer presents a high-contrast, aggressively minimal visual system. A vivid, almost neon magenta dominates against a deep, unchanging red background. Typography is stark and impactful, primarily in all-caps, with a strong emphasis on outlining elements rather than filling them. The overall impression is one of direct, almost raw communication, leveraging extreme color contrast for immediate visual recognition.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Luminous Magenta | `#ff00ff` | `--color-luminous-magenta` | Primary accent color for text, borders, and interactive elements. Its vivid saturation against the deep red makes it pop with digital intensity |
| Crimson Canvas | `#de0000` | `--color-crimson-canvas` | Dominant background color for all page surfaces. Creates an intense, high-energy backdrop |
| Subtle Outline | `#ffffff` | `--color-subtle-outline` | Used for very subtle outlining on specific elements, offering a secondary, less impactful definition next to the dominant magenta |
| Faint Boundary | `#e5e7eb` | `--color-faint-boundary` | Minimal contrast border color, almost disappearing into the red background |

## Tokens — Typography

### ITC Franklin Gothic Std
- **Substitute:** Franklin Gothic URW
- **Weights:** 400
- **Sizes:** 16px, 141px
- **Line height:** 0.9
- **Letter spacing:** -0.0300em
- **Role:** Headline text, large impactful statements, and primary branding elements. The tight line height and letter spacing contribute to its bold, compact feel.

### Helvetica Neue
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.5
- **Letter spacing:** -0.0300em
- **Role:** Support text, secondary information, and navigation links. Provides a more conventional, readable contrast to the highly stylized headlines.

## Tokens — Spacing

- **Section gap:** 32px
- **Card padding:** 32px
- **Element gap:** 32px

## Tokens — Radius

- **Default:** 9999px
- **Buttons:** 9999px

## Layout

The page structure is full-bleed, with the Crimson Canvas background extending across the viewport without explicit max-width containment. Sections appear to stack vertically with consistent 32px vertical spacing. The hero pattern is a centered, large headline in ITC Franklin Gothic Std, with interactive elements below. Content arrangement relies on centered stacks and, potentially, basic horizontal groupings for interactive options, reflecting a direct and unambiguous visual hierarchy.

## Imagery

This design system primarily relies on pure UI and typography, with no photography, product screenshots, or complex illustrations. The visual language is stark and functional, conveyed through high-contrast text and outlined elements. Icons, if present, should be minimalist, outlined, and in Luminous Magenta. Imagery density is extremely low, with content taking precedence over decorative visuals.

## Components

### Primary Outlined Button
*Call to action button or interactive element*

A pill-shaped button with Luminous Magenta (#ff00ff) text and a 1px Luminous Magenta border. Uses ITC Franklin Gothic Std, weight 400 at 16px, -0.03em letter spacing. Background is Crimson Canvas (#de0000). The rounded shape softens the aggressive color palette while maintaining high contrast.

### Subtle Outlined Button
*Secondary action or informational link*

Similar to the primary button but uses Subtle Outline (#ffffff) for the border. Text is Luminous Magenta (#ff00ff), ITC Franklin Gothic Std, weight 400 at 16px, -0.03em letter spacing. Used for less prominent actions, providing minimal visual hierarchy while still being interactive.

### Text Link
*Navigation or in-text link*

Uses Luminous Magenta (#ff00ff) for text color. Font is Helvetica Neue, weight 400 at 16px, -0.03em letter spacing. No underline or background, relying solely on color for distinction.

### Informational Text Block
*Small, directive text accompanying interactive elements.*

Uses ITC Franklin Gothic Std, weight 400 at 16px, -0.03em letter spacing, and Luminous Magenta (#ff00ff) color. Frequently appears in all-caps.

## Guidelines

### Do

- Always use Luminous Magenta (#ff00ff) for all primary interactive states, borders, and main text.
- Maintain the Crimson Canvas (#de0000) as the universal background color for maximum contrast.
- Employ the ITC Franklin Gothic Std font for all headlines and major calls to action, ensuring its compact line height of 0.9 and -0.03em letter spacing are applied.
- Use pill-shaped boundaries (9999px radius) for all button-like interactive elements to soften their appearance.
- Prioritize text and outlines over filled backgrounds for interactive components to maintain the stark, high-contrast aesthetic.
- Utilize Helvetica Neue for all body text and secondary information, especially when readability is paramount against the high-contrast background.

### Don't

- Do not introduce any additional chromatic colors; the palette is strictly Crimson Canvas and Luminous Magenta.
- Avoid using box shadows or gradients, as they detract from the flat, high-contrast visual identity.
- Do not use subtle variations of the background color for different surface levels; maintain a single, unbroken Crimson Canvas.
- Refrain from using mixed-case text for headlines or primary calls to action; all-caps is a core part of the brand's typographic attitude.
- Avoid decorative imagery or complex illustrations; the focus is on stark UI elements and impactful typography.

## Agent Prompt Guide

Quick Color Reference:
text: #ff00ff
background: #de0000
border: #ff00ff
accent: #ff00ff
primary action: #ff00ff (outlined action border)

Example Component Prompts:
Create a hero section: background Crimson Canvas (#de0000). Headline 'AWARD-WINNING' in ITC Franklin Gothic Std weight 400, 141px, Luminous Magenta (#ff00ff), letter-spacing -0.03em, line-height 0.9. Followed by a text link 'Skip to content' in Helvetica Neue, weight 400, 16px, Luminous Magenta (#ff00ff), letter-spacing -0.03em.

Create an Outlined Primary Action: Transparent background, #ff00ff border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.

Create a group of secondary option buttons: two buttons side-by-side with text 'INFO' and 'CONTACT' respectively. Both use ITC Franklin Gothic Std weight 400, 16px, Luminous Magenta (#ff00ff), letter-spacing -0.03em. Background Crimson Canvas (#de0000), border 1px solid Subtle Outline (#ffffff), border-radius 9999px. A small informational text 'THESE ARE YOUR (THREE) OPTIONS' in ITC Franklin Gothic Std weight 400, 16px, Luminous Magenta (#ff00ff), letter-spacing -0.03em, should be centered between them or above/below.