CSFloat

Overview

CSFloat is a high-velocity Counter-Strike 2 skin marketplace designed for serious traders and collectors. The platform serves a technically sophisticated audience that demands precision, speed, and trustworthiness in real-money transactions. The aesthetic follows Material Design 3's "Data-Centric Clarity" movement: a dark-first interface (surface #15171c, on-surface #ffffff) with a vivid primary accent (primary #237bff) that commands attention on CTAs and critical interactions. The UI evokes confidence through clean typography (Roboto at 16px body-md with 24px lineHeight), generous whitespace (24px gutter), and a strict 12-column grid that organizes complex filter hierarchies and product listings. Voice: direct, authoritative, never casual. Example: "Filter by float range 0.00–0.08 to surface minimal-wear skins with verified authenticity."

Colors

The color system is built on a dark-first foundation optimized for extended trading sessions. Surface (#15171c) and surface-container (#1a1d23) form the primary canvas, with surface-container-high (#24272d) used for elevated cards and hover states. The on-surface pair (white #ffffff and variant #c9cdd2) ensures WCAG AAA contrast (21:1 on primary text, 15:1 on secondary). Primary (#237bff) is the brand's signature accent—applied exclusively to CTAs (Sign In button, Filter toggle), focus states (input-field-focus uses 0 0 0 3px rgba(35, 123, 255, 0.1)), and active navigation tabs. Secondary (#ff4081) highlights critical warnings and price deltas; tertiary (#ffd740) marks premium listings and special offers. Error (#f44336) is reserved for validation failures and rate-limit warnings. The outl

Typography

The type system uses Roboto across all weights (300, 400, 500, 700) to balance precision with warmth. Display (57px, 700 weight, -0.025em letter-spacing) anchors hero sections; headline-lg (32px, 700 weight) titles major sections; body-md (14px, 400 weight, 20px lineHeight) carries product descriptions and filter labels. Label-md (12px, 500 weight, 0.05em letter-spacing) is applied to buttons and badges to signal interactivity through subtle uppercase treatment. The 24px lineHeight on body-lg (16px) and body-md (14px) creates breathing room in dense filter panels and product grids. On small labels over busy product images, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure legibility. Weight hierarchy is strict: 700 for headlines, 500 for interactive elements (buttons, tabs, labels)

Layout

The layout uses a fixed 12-column grid with 24px gaps, constrained to a 1400px max-width with 60px horizontal padding on desktop. This creates a 1280px content area that accommodates a 3-column filter sidebar (280px) + 9-column product grid (900px) with breathing room. Section separation uses lg spacing (24px) for moderate breaks and 2xl spacing (48px) for major section transitions. The filter panel (left sidebar) is sticky, maintaining scroll context while users browse listings. Cards use md rounded (8px) for product tiles, lg rounded (12px) for modals, and full rounded (9999px) for chips and badges. Container padding is semantic: md (16px) inside cards, lg (24px) for section gutters, xl (32px) for modal content. Whitespace is aggressive: never compress spacing below md (16px) between int

Elevation & Depth

Depth is conveyed through a four-tier shadow system and subtle background shifts. Level 1 (Base): surface (#15171c) with no shadow, used for the page background and flat list items. Level 2 (Standard Card): surface-container (#1a1d23) with elevation.sm (0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)), applied to cards and filter chips. Level 3 (Elevated/Hover): surface-container-high (#24272d) with elevation.md (0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12)), triggered on card-hover and button-primary-hover. Level 4 (Modal/Overlay): surface-container-highest (#2f32

Shapes

The shape philosophy is "Technical Precision"—rounded corners are minimal but intentional, signaling modernity without sacrificing clarity. Buttons use md rounded (8px) to feel approachable yet professional; cards use lg rounded (12px) to create visual separation from the background; inputs use DEFAULT rounded (6px) for a compact, data-entry feel. Chips and badges use full rounded (9999px) to emphasize their role as discrete, removable filters. The sm rounded (4px) is reserved for small UI elements (dividers, micro-interactions) where a hint of softness is needed without drawing attention. Thi

Components

Action Elements Buttons are the primary interaction mechanism. button-primary (height 40px, padding 8px 16px, background {colors.primary}, rounded {rounded.md}) is used for high-intent actions (Sign In, Apply Filters). On hover, the background shifts to #1a5fd4 with elevation.md shadow and a 200ms transition. button-secondary (transparent background, 1px solid {colors.outline} border, text {colors.primary}) is used for secondary actions (Reset Filters, Cancel). button-tertiary (transparent, no border) is for low-priority navigation. All buttons use label-md typography (12px, 500 weight, 0.05em letter-spacing) to signal interactivity.

Containers & Surfaces Cards (background {colors.surface-container}, rounded {rounded.lg}, padding {spacing.lg}, 1px solid {colors.outline-variant}, e

Do's and Don'ts

**Do**

• Do use primary (#237bff) exclusively for CTAs, focus states, and active navigation—never for body text or backgrounds.
• Do maintain 24px minimum spacing (md token) between interactive elements to prevent accidental clicks.
• Do apply elevation.sm to cards and elevation.md on hover to create clear depth hierarchy without visual noise.
• Do use label-md (12px, 500 weight) for all button text and filter labels to signal interactivity through weight and letter-spacing.
• Do constrain content to 1400px max-width with 60px horizontal padding to maintain readability on ultra-wide displays.
• Do use Roboto 400 weight for body text and 500 weight for interactive elements—never mix weights within a single component.

**Don't**

• Don't use secondary (#ff4081) or tertiary (#ffd740) as primary accents—reserve them for warnings, premiums, and status indicators.
• Don't apply shadows larger than elevation.md to standard cards; reserve elevation.xl for modals only.
• Don't round corners beyond lg (12px) on cards or buttons—excessive rounding dilutes the technical precision aesthetic.
• Don't use on-surface-variant (#c9cdd2) for interactive elements; it's reserved for secondary labels and disabled states.
• Don't compress spacing below md (16px) between sections or below sm (8px) within components.
• Don't apply text-shadow to body text; use it only on small labels (12px or smaller) over busy backgrounds to ensure contrast.