--- version: alpha name: Razer description: Gaming hardware brand with a pure-black canvas, iconic neon-green #44d62c accent, custom RazerF5 typeface in bold uppercase, and aggressive high-contrast dark-mode-only design language built for esports performance. colors: # Canvas / surfaces background: "#000000" surface: "#111111" surface-elevated: "#1a1a1a" surface-overlay: "#000000" # was rgba(0,0,0,0.5) nav overlay — Google format requires hex # Ink / text ink: "#ffffff" ink-secondary: "#bbbbbb" ink-tertiary: "#999999" ink-muted: "#555555" # Brand accent — Razer Chroma Green primary: "#44d62c" primary-dark: "#3ab625" on-primary: "#000000" primary-container: "#1a3d14" # dark tinted variant for subtle fills # Borders border: "#333333" border-subtle: "#555555" border-strong: "#888888" # Semantic warning: "#ff9c07" error: "#db0002" success: "#44d62c" # Interactive states focus-ring: "#44d62c" text-hover: "#44d62c" surface-hover: "#1f1f1f" # Shadow tint shadow-soft: "#000000" typography: display-hero: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em display: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.01em heading-section: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em heading-sub: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 21px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0em body-large: fontFamily: "Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0em body: fontFamily: "Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em body-small: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em nav-link: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em button-ui: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em caption: fontFamily: "Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em badge-label: fontFamily: "RazerF5, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px section: 80px rounded: none: 0px xs: 2px sm: 3px md: 6px lg: 10px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 24px border: none button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 24px border: 2px solid {colors.primary} button-secondary-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 24px border: 2px solid {colors.primary} button-ghost: backgroundColor: "{colors.surface-overlay}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 8px 16px border: 1px solid {colors.primary} nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" borderBottom: 1px solid {colors.border} nav-item-active: textColor: "{colors.primary}" borderBottom: 2px solid {colors.primary} nav-item-hover: textColor: "{colors.primary}" transition: color 0.3s ease card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 24px border: 1px solid {colors.border} card-hover: backgroundColor: "{colors.surface-elevated}" rounded: "{rounded.sm}" padding: 24px border: 1px solid {colors.border-strong} input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 16px border: 1px solid {colors.border} input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 16px border: 1px solid {colors.primary} badge: backgroundColor: "{colors.warning}" textColor: "{colors.on-primary}" typography: "{typography.badge-label}" rounded: "{rounded.none}" padding: 4px 14px badge-new: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.badge-label}" rounded: "{rounded.none}" padding: 4px 14px link-default: textColor: "{colors.ink}" textDecoration: none typography: "{typography.body}" link-hover: textColor: "{colors.primary}" textDecoration: none link-accent: textColor: "{colors.primary}" textDecoration: underline typography: "{typography.body}" link-accent-hover: textColor: "{colors.primary}" textDecoration: none --- # Razer Design System ## Overview Razer's design language is built on a single uncompromising premise: maximum contrast. The canvas is pure `{colors.background}` black, and everything in the system is arranged around making the brand's signature Chroma green (`{colors.primary}`) land with maximum visual impact. This is not a dark mode as an afterthought — Razer has never offered a light mode, and the entire system treats darkness as its natural state. The background is true `#000000`, not charcoal or near-black: a deliberate choice that makes the neon-green accent appear to glow rather than sit. Typography is the second pillar. Razer uses its own proprietary RazerF5 typeface — a geometric, slightly condensed sans-serif — in uppercase for all display headings, navigation, and CTAs. The uppercase treatment is not decorative; it is load-bearing, encoding authority and aggression into the type itself. Body copy falls back to Roboto, kept in sentence case, which creates a deliberate two-tier voice: shout for the brand identity, speak clearly for the utility layer. RazerF5 exists in Light, Regular, SemiBold, and Bold weights, with the heavy end used almost exclusively to carry the brand tone. The overall impression is a hardware spec sheet that has been weaponized into marketing. Tight spacing, sharp corners (`{rounded.sm}` at 3px for buttons), borders measured in `{colors.primary}` green, and hover states that snap immediately to that same green on every interactive element create a system that feels fast, precise, and slightly aggressive — which maps exactly onto its audience. **Key Characteristics:** - Pure `{colors.background}` black canvas — true `#000000`, never softened to near-black - `{colors.primary}` Chroma Green as the single signature accent, applied to every CTA, focus state, active tab, and hover on nav links - RazerF5 proprietary typeface rendered in bold uppercase for all display text and navigation — sentences case only for body/Roboto - `{rounded.sm}` (3px) on buttons and interactive elements — decidedly not pill, not square, sitting at the exact threshold of "sharp" that reads as technical - `{rounded.none}` product badges (flat rectangles in amber or green), emphasizing category labels and "NEW" stamps over friendly shape - All link hover states converge to `{colors.text-hover}` green — no link on the site turns any other color on hover - `{typography.display}` section headings use the `uppercase` text-transform, amplifying RazerF5's geometric character - Motion is moderate: buttons at 0.3s `ease`, card filters and transforms at 0.15–0.35s `ease` — fast enough for a gaming context - The secondary button pattern is `{colors.background}` fill with `{colors.primary}` border and label — the ghost variant on a black field feels like an outlined neon sign - Product photography sits on black backgrounds, so no visible card chrome is needed — products appear to float in the void - Nav is persistent at 0px top, `{colors.background}` background, white text that snaps to `{colors.primary}` on hover - Badge system is flat-rectangle with uppercase `{typography.badge-label}` text — amber (`{colors.warning}`) for promotions, green for "new" ## Colors ### Primary - **True Black** (`{colors.background}`): The full-page canvas. Never softened. Every surface that isn't explicitly a card sits on this value. - **Surface Dark** (`{colors.surface}`): Used for cards, dropdown panels, and modal backgrounds. Provides a single step of lift above the canvas without introducing grey. - **Surface Elevated** (`{colors.surface-elevated}`): Hover state surfaces, tooltips, and second-level overlays. ### Brand Accent - **Chroma Green** (`{colors.primary}`): The iconic Razer green — used on primary CTAs, active nav underlines, all link hovers, input focus rings, button borders on secondary variants, and certain product badge fills. This color does all the brand work. - **Chroma Green Dark** (`{colors.primary-dark}`): Button hover state for the primary filled button. Slightly darker to register as pressed/hovered without leaving the green family. - **On Primary** (`{colors.on-primary}`): Black text on green buttons. High contrast. ### Text - **Ink** (`{colors.ink}`): Pure white. Used for primary headings, nav labels, and product names. - **Ink Secondary** (`{colors.ink-secondary}`): `#bbbbbb` mid-grey. Footer text, secondary nav items, supporting descriptive copy. - **Ink Tertiary** (`{colors.ink-tertiary}`): `#999999` darker grey. Legal text, timestamps, metadata. ### Semantic & States - **Warning / Promo** (`{colors.warning}`): Amber orange for promotional badges and sale callouts. Not part of the core brand palette but appears frequently in product listing contexts. - **Error** (`{colors.error}`): Deep red for form validation and alert states. - **Focus Ring** (`{colors.focus-ring}`): Same `{colors.primary}` green — ensures keyboard navigation is on-brand. - **Border** (`{colors.border}`): `#333333` for card and panel separators. Subtle enough not to compete with content. ## Typography ### Font Family - **Primary (Brand)**: `RazerF5`, self-hosted woff, with weights: Light (300), Regular (400), SemiBold (600), Bold (700). Fallbacks: `Arial, Helvetica`. - **Primary (Body)**: `Roboto`, with fallbacks: `Helvetica Neue, Arial, Noto Sans, sans-serif`. - **Icon Font**: `phoenix-icons` (custom icon set). Not a content font. ### Hierarchy The complete type scale is declared in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | Hero module headings, campaign titles (RazerF5 Bold, uppercase) | | `display` | Section titles, product category headers (RazerF5 Bold, uppercase) | | `heading-section` | Mid-page feature headings, specification headers | | `heading-sub` | Subheadings, explanatory callouts (RazerF5 Light for contrast with Bold siblings) | | `body-large` | Lead paragraphs, feature descriptions (Roboto) | | `body` | General prose, product descriptions, checkout flows (Roboto) | | `body-small` | Footer links, supplementary labels (RazerF5 small) | | `nav-link` | Navigation items — bold uppercase RazerF5 | | `button-ui` | All button labels — bold uppercase RazerF5 with tracked-out letterSpacing | | `caption` | Image captions, pricing fine print (Roboto) | | `badge-label` | Product badge text — bold uppercase, flat rectangles | ### Principles - RazerF5 uppercase is reserved for brand-layer text: nav, buttons, display headings. Never use it for body copy. - Roboto handles all utility text — forms, descriptions, legal. Its neutrality provides relief after the aggressive RazerF5 display. - The Light (300) weight of RazerF5 appears in subheadings and link labels — contrasting with Bold creates a sharp hierarchy without needing size alone. - Letter-spacing on `{typography.button-ui}` and `{typography.nav-link}` is positive and wide — uppercase text in RazerF5 requires tracking to breathe. - No italic usage detected across the site — the system avoids slanted text entirely. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Razer's spacing is dense and efficient — this is product commerce, not editorial breathing room. The dominant spacing value in the extracted data is 15px (1,198 occurrences), revealing a tight 15px padding rhythm on product tiles and nav items that differs from a strict 8px grid, supplemented by `{spacing.lg}` (24px) and `{spacing.xl}` (32px) for section gutters. ### Grid & Container - Max content width: approximately 1800px (1800px breakpoint present) - Bootstrap grid system (container + row + col) — 12-column - Full-bleed hero sections with cinematic product photography spanning the viewport - Product grids collapse from 4-column at desktop to 2-column at tablet, 1-column at mobile ### Whitespace Philosophy - Dense product tiles with minimal padding — content-forward, commerce-optimized - Generous vertical spacing between major page sections using `{spacing.section}` (80px) — creates breathing room between product families - No decorative whitespace: every gap serves a structural purpose ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page canvas, full-bleed hero sections | | Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 2px 8px` | Small tooltips, inline popovers | | Card (Level 2) | `1px border {colors.border}` on `{colors.surface}` | Product cards, menu dropdowns | | Elevated (Level 3) | `rgba(0,0,0,0.3) 0px 32px 68px` | Full modals, lightboxes | | Dialog (Level 4+) | `rgba(25,28,33,0.3) 0px 6px 14px` | Cookie/GDPR consent banners | | Focus Ring | `2px solid {colors.focus-ring}` | Keyboard-focused buttons and inputs | **Shadow Philosophy**: Razer's elevation system is deliberately minimal. On a true-black canvas, traditional drop shadows are invisible — instead, elevation is communicated through border color stepping (`{colors.border}` at rest, `{colors.border-strong}` on hover) and background luminance stepping (`{colors.surface}` cards lifting off `{colors.background}`). Actual box-shadows appear only for overlaid panels where depth needs to be visually explicit against lighter sub-surfaces. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Product badges, promotional labels, image crops | | `xs` | 2px | Small form elements, privacy preference buttons | | `sm` | 3px | Primary and secondary buttons, product image cards — the dominant UI radius | | `md` | 6px | Dropdown panels, modal dialogs | | `lg` | 10px | Tabs, presentation containers | | `pill` | 9999px | Icon-only circular buttons (pause/play, scroll-to-top) | Razer's shape language skews hard toward sharp corners. The `{rounded.sm}` 3px radius on buttons is the sharpest non-zero radius in common use — it barely softens the corners while maintaining a technical, precision-tooled appearance. Flat-rectangle badges with `{rounded.none}` reinforce product-labeling as stamp-like rather than friendly tag-like. Circular buttons are reserved exclusively for media controls and utility icons. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — `{colors.primary}` fill, `{colors.on-primary}` black label, `{rounded.sm}` corner, `{typography.button-ui}` uppercase label. The dominant call-to-action: "Shop Now," "Learn More," "Buy." - **`button-secondary`** — Transparent fill on `{colors.background}`, `{colors.primary}` border (2px) and label text. Used for secondary purchase paths ("Buy") and adjacent CTAs on hero sections. Appears to glow against the black field. - **`button-ghost`** — Semi-transparent fill variant (opaque approximation of `rgba(0,0,0,0.5)` on dark hero overlays), `{colors.primary}` border and label. Appears over hero video/photography. ### Cards Product cards use `{colors.surface}` with `{rounded.sm}` and a `{colors.border}` hairline — nearly invisible chrome that lets photography dominate. Cards gain brightness via `filter` on hover (`{components.card-hover}`) at 0.15–0.35s `ease`, a subtler interaction than color-shifting. ### Inputs Standard text inputs use `{colors.surface}` background with `{colors.border}` at rest; focus states swap to `{colors.primary}` border (`{components.input-focus}`). The Roboto `{typography.body}` keeps form fields approachable versus the aggressive brand type. ### Badges / Tags Flat-rectangle badges (`{rounded.none}`, `{typography.badge-label}`) in amber (`{colors.warning}`) for promotions and `{colors.primary}` green for "New" product tags. No rounded corners — they read as printed sticker labels, reinforcing the hardware-packaging aesthetic. ### Navigation Full-width sticky nav on `{colors.background}`, white nav link labels that individually snap to `{colors.primary}` green on hover (`{components.nav-item-hover}`). Active section underlined with a 2px `{colors.primary}` rule (`{components.nav-item-active}`). Mega-menu dropdowns appear on dark `{colors.surface}` panels with `{colors.border-subtle}` separators. ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for interactive elements — CTAs, focus rings, active nav states, hover color shifts. Its scarcity is what gives it power. - Apply `{typography.button-ui}` and `{typography.nav-link}` uppercase styling to all RazerF5 brand-layer text — buttons, nav items, display headings. - Keep the canvas at true `{colors.background}` black for all page backgrounds. Use `{colors.surface}` only for lifted elements (cards, dropdowns, modals). - Use `{rounded.sm}` (3px) for button border-radius — this is the system's signature interaction shape. - Apply `{components.button-secondary}` (transparent + green border) as the secondary CTA for pages with two primary actions. - Run all hover transitions at `0.3s ease` for buttons and `0.15–0.35s ease` for cards — fast enough for the gaming-hardware context. - Use flat-rectangle `{rounded.none}` badges with `{typography.badge-label}` uppercase for all product callouts ("NEW", "BESTSELLER"). ### Don't - Don't introduce colors from outside the palette — no blues, purples, or neutralized teals. The system is strictly black + white scale + Chroma green + amber for promotions. - Don't apply a light mode. Razer's system is dark-only and there is no defined light-mode token set. - Don't use `{colors.primary}` as a background fill for anything other than the primary button — it overwhelms the canvas hierarchy. - Don't use sentence case for RazerF5 display text — uppercase is structural, not decorative in this system. - Don't use `{rounded.lg}` (10px) or larger for buttons or product cards — that softness conflicts with the precision-hardware brand voice. - Don't mix Roboto weights on display headings — Roboto is a utility/body font in this system; reach for RazerF5 for any brand-facing heading. - Don't add mid-page decorative borders or dividers in colors other than `{colors.border}` — the system uses darkness as separation, not ruling lines. - Don't use shadow-heavy card treatments — on a true black canvas, elevation is communicated through borders and surface-color steps, not drop shadows. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | <375px | Single column, minimal padding, hamburger nav | | Mobile | 375–767px | Single column, bottom-docked cart indicator | | Tablet | 768–991px | 2-column product grid, condensed nav | | Desktop | 992–1399px | 4-column product grid, full mega-menu nav | | Large Desktop | 1400–1799px | Full layout, wider hero imagery | | XL Desktop | >1800px | Max container width capped, centered content | ### Touch Targets - Buttons use `0px 16px` horizontal padding with the RazerF5 Bold font providing inherent height — target areas are adequate but compact, optimized for desktop mouse use rather than mobile touch. - Circular control buttons (pause, scroll-to-top) use `{rounded.pill}` at 48px radius — full-circle touch targets. ### Collapsing Strategy - Navigation collapses to a hamburger menu below 768px, revealing a full-screen `{colors.background}` black overlay with stacked nav items. - Product grids step from 4 → 2 → 1 columns across the breakpoint range. - Hero sections scale proportionally — video heroes maintain aspect ratio, text overlays restack vertically. - Spacing shifts to tighter values at mobile — the 15px grid rhythm compresses further at small viewports. ### Image Behavior - Product photography is always on `{colors.background}` black backgrounds — no visible image borders needed. - Images gain `filter` brightness on card hover (not border or shadow), keeping the focus on the product itself. - Hero video backgrounds are full-bleed and scale to viewport width at all breakpoints. --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Brand accent: `{colors.primary}` - On-accent: `{colors.on-primary}` - Border: `{colors.border}` - Surface: `{colors.surface}` - CTA hover: `{colors.primary-dark}` ### Example Component Prompts - "Build a Razer-style hero section: `{colors.background}` full-viewport background, full-bleed product video or image, a `{typography.display-hero}` uppercase heading in `{colors.ink}` using RazerF5 Bold, a supporting paragraph in `{typography.body-large}` Roboto, a `{components.button-primary}` green CTA and a `{components.button-secondary}` ghost CTA side by side, with `{spacing.section}` padding top and bottom." - "Create a Razer product card: `{colors.surface}` background, 1px `{colors.border}` border, `{rounded.sm}` corners, product image on black background at top, product name in `{typography.heading-section}` uppercase RazerF5 `{colors.ink}`, price in `{typography.body-large}` Roboto, a `{colors.warning}` flat-rectangle badge reading 'SALE' in `{typography.badge-label}`, and a full-width `{components.button-primary}` at the bottom. On hover, add `filter: brightness(1.15)` at `0.15s ease`." - "Design a Razer navigation bar: full-width `{colors.background}` background, Razer snake logo on the left, horizontally spaced nav items in `{typography.nav-link}` uppercase RazerF5 Bold `{colors.ink}`, each item gaining `color: {colors.primary}` on hover at `0.3s ease`, with a 2px `{colors.primary}` underline on the active item. Search and cart icons on the right in `{colors.ink}`." - "Make a Razer-style secondary ghost button: `{colors.background}` fill, 2px solid `{colors.primary}` border, `{colors.primary}` label text in `{typography.button-ui}` uppercase RazerF5 Bold, `{rounded.sm}` corners, `{spacing.md}` 16px horizontal padding. On hover, fill with `{colors.primary-container}` at `0.3s ease`." - "Create a Razer product badge: flat rectangle `{rounded.none}`, `{colors.primary}` background, `{colors.on-primary}` black text in `{typography.badge-label}` uppercase RazerF5 Bold, `{spacing.xs}` 4px vertical and `{spacing.md}` 14px horizontal padding. Use `{colors.warning}` amber background for promotional variants." - "Build a Razer-style dropdown nav panel: `{colors.surface}` background, `{colors.border}` 1px bottom border below the trigger, two-column layout of navigation links in `{typography.nav-link}` `{colors.ink}` turning `{colors.primary}` on hover, with a right column for 'More About' links in `{typography.body}` Roboto `{colors.ink-secondary}`." ### Iteration Guide 1. Start with `{colors.background}` true black as the full-page canvas — apply it to `body` and all structural containers. 2. Place `{colors.primary}` Chroma green on exactly one primary action per viewport: the main CTA button. Secondary actions get the ghost variant with green border, not green fill. 3. Set all RazerF5 brand headings to `text-transform: uppercase` — this is not optional and should be applied via CSS class, not inline style. 4. Use `{rounded.sm}` 3px on every interactive element that accepts a press or click. Reserve `{rounded.pill}` for icon-only circular buttons. 5. For hover states on nav links and text links, transition only the `color` property to `{colors.primary}` at `0.3s ease` — no background changes, no underline additions. 6. Elevation on dark canvas: step through `{colors.surface}` → `{colors.surface-elevated}` for card depth. Add `1px solid {colors.border}` to make cards legible. Use drop shadows only for modals. 7. Typography alternates: RazerF5 Bold uppercase for brand voice; Roboto regular for utility text. Never mix fonts at the same hierarchical level. --- ## 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 Razer. Brand names and trademarks belong to their respective owners.