A design system skill for creating premium, dark-dominant, data-rich editorial websites in the style of high-end motorsport and performance brands. Use this skill whenever the user asks to build a website, landing page, dashboard, portfolio, or any web interface that should feel cinematic, data-forward, and editorially polished — especially for sports, automotive, athlete brands, nonprofit showcases, performance products, luxury tech, or any context where bold typography meets dense information. Also trigger when the user mentions "motorsport style", "dark editorial", "performance aesthetic", "data-driven storytelling", "cinematic web design", "athlete portfolio", or wants something that feels like an awwwards-level site with a moody, high-contrast, magazine-quality feel. This skill pairs well with the frontend-design skill as a style layer on top of it.
zhongth18 スター2026/03/05
職業
カテゴリ
営業・マーケティング
スキル内容
A design system distilled from the visual language of elite motorsport editorial sites — where cinematic atmosphere meets data density, and every pixel serves both beauty and information.
This is not a template. It is a set of opinionated design principles, patterns, and implementation guidelines that produce a specific genre of web experience: dark, atmospheric, typographically bold, data-rich, and editorially precise.
I. Core Philosophy
Three tensions define this style. Every design decision should navigate between them:
Cinematic vs. Informational — Full-bleed media and atmospheric backdrops coexist with dense data tables, statistics, and structured content. Neither dominates; they alternate in rhythm.
Monumental vs. Intimate — Hero sections use enormous scale (viewport-filling type, full-screen video). Detail sections use tight, precise micro-typography. The contrast between these scales creates drama.
Editorial vs. Technical — Magazine-quality storytelling meets dashboard-level data presentation. Headlines read like editorial spreads; data sections read like cockpit telemetry.
II. Color System
関連 Skill
Palette Architecture
The palette is monochromatic-dominant with a single accent channel. Never use more than one accent hue family.
Background Range:
Primary canvas: deep black to charcoal (#000000 → #0A0A0A → #111111 → #1A1A1A)
Elevated surfaces: dark gray (#1E1E1E → #252525 → #2A2A2A)
Card/panel backgrounds: subtle lift from canvas (+5-10% lightness from base)
Never use pure gray midtones as backgrounds — they flatten depth
Foreground Range:
Primary text: near-white, never pure #FFFFFF — use #F5F5F5, #EDEDED, #E8E8E8
Accent Strategy:
Choose ONE accent from a controlled spectrum. The accent should feel:
Warm track: signal red, amber, papaya orange — for energy, urgency, competition
Cool track: electric blue, cyan, ice white — for precision, technology, speed
Neutral track: gold, champagne, bronze — for prestige, achievement, heritage
Use accent sparingly: on interactive elements, key data highlights, active states, and one or two hero moments per page. Never as background fills on large surfaces.
Gradient Usage:
Subtle vignettes from black into dark gray (radial, from corners/edges)
Never decorative gradients on surfaces — only atmospheric fades
Use gradient masks on images to blend photography into the dark canvas
Acceptable: linear gradient overlays on hero media (black → transparent, bottom-up)
Dark Mode Is the Only Mode
This design system is dark-first and dark-only. Light variants should only exist as inverted accent cards or pull-quote blocks, used very sparingly (1-2 per page maximum) for editorial contrast.
III. Typography
Type Scale Philosophy
The type system operates on extreme scale contrast. The ratio between the largest and smallest text on a page should be at minimum 8:1 and can go up to 16:1 or beyond.
Heading Hierarchy
Display / Hero (Level 0):
Size range: clamp(3rem, 8vw, 10rem) — should fill significant viewport width
Weight: Bold to Black (700–900)
Tracking: Tight negative (-0.02em to -0.04em)
Line height: Extremely tight (0.85 to 0.95)
Case: Uppercase for single-word impact, sentence case for multi-word phrases
Font choice: A condensed or display sans-serif with geometric precision. Look for fonts with sharp terminals, clean geometry, and strong vertical rhythm. Families in the vein of: condensed grotesques, wide geometric sans, or sharp neo-grotesques
Section Headers (Level 1):
Size range: clamp(1.5rem, 3vw, 3.5rem)
Weight: Semibold to Bold (600–700)
Tracking: Slightly negative (-0.01em)
Often paired with a thin horizontal rule or a small label above
Subsection / Card Titles (Level 2):
Size range: clamp(1.1rem, 1.5vw, 1.75rem)
Weight: Medium to Semibold (500–600)
Tracking: Normal to slightly positive for smaller sizes
Body & Data Typography
Body Text:
Size: 1rem to 1.125rem (16–18px)
Weight: Regular (400)
Line height: Generous (1.6 to 1.75)
Max width: 60ch to 70ch — always constrain body text width
Font: A refined, highly legible sans-serif — clean, slightly humanist or geometric. Prioritize optical quality at small sizes
Data / Statistics:
Size: clamp(2.5rem, 6vw, 7rem) for hero stats
Weight: Bold to Black
Font: Tabular-lining numerals required. Use a monospaced or technical sans-serif for data tables; proportional bold sans for display stats
Tracking: Tight negative for large numbers
Pair every large stat number with a small label beneath or beside it (small caps or uppercase at 0.75rem)
Labels / Metadata / Captions:
Size: 0.6875rem to 0.8125rem (11–13px)
Weight: Medium (500)
Case: Uppercase with wide tracking (0.08em to 0.15em)
Color: Secondary or tertiary foreground
These are the "whisper" layer — ever-present, never dominant
Font Pairing Strategy
Use a two-font system maximum:
Display font — for hero text, section headers, and large stats. This font carries the personality.
Workhorse font — for body, labels, data, navigation. This font carries the information.
Alternatively, a single superfamily with sufficient weight/width range can serve both roles.
Never use: Inter, Roboto, Arial, system fonts, or any default stack. Search Google Fonts or reference premium font alternatives for: Aktiv Grotesk, Neue Haas Grotesk, Aeonik, General Sans, Switzer, Cabinet Grotesk, Satoshi, Outfit, Space Grotesk (only if paired distinctively), Plus Jakarta Sans, Syne, Unbounded, Bebas Neue, Oswald — or comparable distinctive choices. Rotate selections; never default to the same font twice.
IV. Layout & Spatial Composition
Grid System
Use a 12-column or 16-column grid with generous gutters (24px–48px) on a max-width container of 1400px to 1600px.
Key spatial principles:
Asymmetric balance: Avoid centered-everything layouts. Offset content blocks. Place hero text at 1/3 or 2/3 horizontal position.
Generous negative space: Let sections breathe with 8rem to 16rem vertical padding between major blocks. White space (dark space in this case) is a design tool, not waste.
Edge-to-edge moments: Hero sections, media, and partner strips should break out of the container to touch viewport edges. Then pull back into the grid for content sections.
Vertical rhythm anchors: Use consistent spacing tokens. Define a scale: 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 6rem, 8rem, 12rem, 16rem.
Section Typology
Every page is a vertical scroll narrative composed of these section types in sequence:
Hero — Full viewport height. Video or image background with gradient overlay. Oversized headline. Minimal supporting text. Scroll indicator.
Stats Bar — Horizontal strip of 3-5 key numbers with labels. Can be sticky or scroll-triggered.
Editorial Block — Asymmetric text + image composition. Text on one side (constrained width), large image on the other (bleeding to edge).
Card Carousel — Horizontal scrolling row of cards (people, items, events). Cards have image + minimal text overlay.
Data Table / List — Structured information presented in rows. Hover states reveal additional detail or imagery.
Media Break — Full-width atmospheric image or video. No text or minimal overlaid text. Provides visual breathing room.
FAQ / Accordion — Clean expandable sections with +/- or arrow indicators.
Logo / Partner Strip — Horizontal row of monochrome logos. Subtle, not attention-competing.
Footer — Minimal. Stacked links, newsletter input, social icons. Same dark palette.
Responsive Strategy
Desktop: Full grid, expansive spacing, horizontal carousels
Tablet: Collapse to 8-column, reduce hero type scale, stack editorial blocks
Mobile: Single column, hero type fills width, carousels become swipeable, data tables become card lists
Always include a "rotate your device" consideration for data-heavy horizontal layouts
V. Motion & Interaction
Animation Philosophy
Motion should feel weighted and purposeful — like mechanical precision, not playful bounce. Think of a camera panning across a starting grid, not a bouncing ball.
Focus states: Accent outline with offset, never browser default
Loading states: Skeleton screens in dark palette, subtle shimmer animation
Cursor: Default for most; pointer only on interactive elements; optional custom cursor for hero sections
Border radius: Near-zero (2px–4px) for a sharp, technical feel. Avoid large radii (12px+) — they soften the precision
Borders: Prefer 1px solid with very subtle contrast (rgba(255,255,255,0.08) to 0.12). Borders should be felt more than seen.
Shadows: Avoid drop shadows on dark backgrounds — they're invisible. Instead use subtle border-top highlights (rgba(255,255,255,0.05)) on elevated cards.