name: deployd-design
version: alpha
description: >
  An Italian-Futurist motorsport take on a developer CI/CD product. The system
  rides on a warm bone-white surface (#F2F0E8) and a near-black ink (#0C0C0A),
  detonated by a single racing red (#C62020) voltage and an electric amber
  (#E8A030) accent. The signature moves are heavy condensed Archivo Black
  headlines tilted 5deg, diagonal repeating "speed-line" gradients, hard 6px
  offset shadows, a scrolling marquee ticker, spinning gear motifs and an
  amber-glowing "flicker" neon plan card. Type pairs a black display face with
  Inter body and Fira Code mono for every number, label and HUD readout.
  Geometry is square: zero border radius everywhere except intentional full-round
  decorative gears.
colors:
  # Brand / Voltage
  red: '#C62020'      # primary voltage — CTAs, headline accents, hard-shadow-red, ticker band, popular plan
  amber: '#E8A030'    # secondary accent — HUD timer, neon glow, deploy stage, F1 plan, hover states
  # Surface
  white: '#F2F0E8'    # bone-white page surface, light section backgrounds, on-dark text
  black: '#0C0C0A'    # near-black ink, dark section backgrounds, default text on light
  # Hairlines / overlays (alpha on white/black)
  hairline-light: 'rgba(242,240,232,0.15)'  # white/15 borders on dark sections
  hairline-dark: 'rgba(12,12,10,0.20)'      # black/20 borders & dividers on light
  # Effect tints
  speed-red: 'rgba(198,32,32,0.55)'   # red diagonal speed-line stripes
  speed-white: 'rgba(242,240,232,0.18)' # white diagonal speed-line stripes
  glow-amber: 'rgba(232,160,48,0.5)'  # amber neon halo around F1 plan card
typography:
  display:
    fontFamily: "'Archivo Black', 'Big Shoulders Display', sans-serif"
    fontSize: 'clamp(60px,11vw,160px)'
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -0.02em
  heading:
    fontFamily: "'Archivo Black', 'Big Shoulders Display', sans-serif"
    fontSize: 'clamp(48px,8vw,120px)'
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.02em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
  mono:
    fontFamily: "'Fira Code', monospace"
    fontSize: 12px
    fontWeight: 400
  monoLabel:
    fontFamily: "'Fira Code', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: uppercase
  navLink:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 500
    letterSpacing: 0.2em
    textTransform: uppercase
rounded:                  # near-zero radius system
  none: 0px               # default for all cards, buttons, badges, inputs
  full: 9999px            # decorative gear rings only
spacing:                  # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 64px             # py-16 hero
  section: 112px          # py-28 standard section rhythm
components:
  navbar:
    backgroundColor: '{colors.black}'
    textColor: '{colors.white}'
    borderBottom: '2px solid {colors.red}'
    padding: '16px 32px'
    maxWidth: 1400px
  buttonPrimary:
    backgroundColor: '{colors.red}'
    textColor: '{colors.white}'
    hoverBackgroundColor: '{colors.amber}'
    hoverTextColor: '{colors.black}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
  buttonOutline:
    backgroundColor: 'transparent'
    textColor: '{colors.white}'
    border: '2px solid rgba(242,240,232,0.6)'
    hoverBackgroundColor: '{colors.white}'
    hoverTextColor: '{colors.black}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
  stageCard:
    backgroundColor: '{colors.white}'
    textColor: '{colors.black}'
    border: '2px solid {colors.black}'
    boxShadow: '6px 6px 0 {colors.red}'
    rounded: '{rounded.none}'
    padding: 24px
  pricingCardPopular:
    backgroundColor: '{colors.white}'
    border: '2px solid {colors.red}'
    boxShadow: '6px 6px 0 {colors.red}'
    rounded: '{rounded.none}'
    padding: 32px
  pricingCardRace:
    backgroundColor: '{colors.black}'
    textColor: '{colors.white}'
    border: '2px solid {colors.amber}'
    boxShadow: '0 0 0 2px {colors.amber}, 0 0 24px {colors.glow-amber}, 0 0 60px rgba(232,160,48,.25)'
    rounded: '{rounded.none}'
    padding: 32px
  hudCard:
    backgroundColor: 'rgba(12,12,10,0.6)'
    border: '2px solid {colors.amber}'
    backdropBlur: '4px'
    textColor: '{colors.amber}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: 20px
  integrationCell:
    backgroundColor: '{colors.white}'
    textColor: '{colors.black}'
    border: '2px solid {colors.black}'
    boxShadow: '6px 6px 0 {colors.amber}'
    rounded: '{rounded.none}'
    padding: 16px
  marqueeBand:
    backgroundColor: '{colors.red}'
    textColor: '{colors.white}'
    borderY: '2px solid {colors.black}'
    typography: '{typography.display}'
    padding: '12px 0'
  newsletterInput:
    backgroundColor: 'transparent'
    border: '1px solid rgba(242,240,232,0.3)'
    textColor: '{colors.white}'
    rounded: '{rounded.none}'
    padding: '8px 12px'
motion:
  liveTimer: 'JS setInterval every 10ms counting 47.00s down to 0, looping — Fira Code tabular-nums'
  marquee: 'marq keyframe translateX(0 to -50%) 18s linear infinite (ticker); 2s variant on conveyor belt'
  piston: 'piston keyframe translateX(0/40px/0) 1s ease-in-out infinite, staggered 0/.2/.4/.6s delays'
  gearSpin: 'spin-slow rotate 360deg — 8s linear (gear-spin), 12s linear reverse (gear-spin-rev)'
  flicker: 'amber box-shadow flicker keyframe 2s infinite on hover of F1 plan card'
  cellTilt: 'transition transform .4s cubic-bezier(.4,0,.2,1) — rotateY(-14deg) + 10px amber hard shadow on hover'
  benchBar: 'GSAP ScrollTrigger width fill (0% to data-w%), power3.out, 0.4s for ours / 1.6s for rivals'
  counter: 'GSAP ScrollTrigger number count-up to data-count, 1.6s power2.out'
  headlineWipe: 'GSAP clipPath inset(0 100% 0 0) reveal, 1s, stagger 0.15s, power3.out'
  gridStagger: 'GSAP cell fade+scale-in from center, grid stagger amount 0.8'
icons:
  library: 'Tabler Icons (webfont, ti ti-*) + one inline Kubernetes SVG'
  style: outline
  sizes: { label: 16px, stage: 60px, cell: 60px }
  color: '{colors.red}'

Deployd — VELOCITÀ/CI

deployd-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Deployd ("VELOCITÀ/CI") is a CI/CD landing page styled as Italian-Futurist motorsport propaganda. The page surface is a warm bone-white #F2F0E8 that alternates with full-bleed near-black #0C0C0A sections, and the whole thing is charged by a single racing red voltage #C62020 and an electric amber accent #E8A030. The signature moves: massive Archivo Black headlines set in clamp(60px,11vw,160px) with leading-[0.85] and a 5-degree tilt5 rake; diagonal repeating-linear-gradient "speed-lines" raking across dark sections; hard 6px-offset block shadows (hard-shadow, hard-shadow-red, hard-shadow-amber) instead of soft elevation; a scrolling red marquee ticker; a HUD-style live countdown timer in amber mono; an animated conveyor belt with spinning gears and pumping pistons; and an amber-glowing flicker neon F1 plan card. Every number, label, badge and status readout is set in Fira Code mono with tabular-nums, while body copy is Inter. Geometry is uncompromisingly square — zero border radius on all UI, with rounded-full reserved only for the decorative dashed gear rings.

Colors

Brand / voltage. red #C62020 is the primary voltage: it fills the primary btn-red CTA, headline accent words, the hard-shadow-red offset, the nav border, the bottom marquee band, the "POPULAR" V8 pricing card and the CTA strip background. amber #E8A030 is the high-energy secondary: the HUD live timer, the neon glow around the F1 plan, the DEPLOY stage card, integration-cell hard shadows, the conveyor belt dashes/pistons, and most hover states.

Surface. white #F2F0E8 is the bone page surface and the text color on dark sections; black #0C0C0A is the near-black ink used as text on light sections and as the background of the hero, How-It-Works, Integrations and footer.

Hairlines. Borders are alpha-on-base: hairline-light rgba(242,240,232,0.15) (white/15) divides dark sections; hairline-dark rgba(12,12,10,0.20) (black/20) draws dividers and stat borders on light. Heavier 2px solid red/amber/black borders frame cards.

Effect tints. speed-red rgba(198,32,32,0.55) and speed-white rgba(242,240,232,0.18) are the diagonal speed-line stripes; glow-amber rgba(232,160,48,0.5) is the neon halo. A red radial-gradient bloom sits behind the hero headline.

Typography

Display and headings use Archivo Black (900) with Big Shoulders Display as the condensed fallback, tracked tight at -0.02em — a heavy industrial grotesque. Body is Inter at 15px / 1.625. All numerics, labels, badges and HUD text are Fira Code monospace with font-variant-numeric: tabular-nums. Fonts load from Google Fonts. Open-source substitutes are already used (all four faces are Google Fonts), so no bespoke substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(60px,11vw,160px)	900	0.85	-0.02em	Hero H1 (tilted)
heading	clamp(48px,8vw,120px)	900	0.9	-0.02em	Section H2s (tilted)
body	15px	400	1.625	—	Paragraph copy
mono	12px	400	—	—	Stat numbers, source notes
monoLabel	10px	400	—	0.2em / uppercase	Badges, kickers, HUD labels
navLink	12px	500	—	0.2em / uppercase	Nav links

Layout

Base unit 4px on the Tailwind scale. The page is a vertical stack of full-bleed sections, each capped to a max-w-[1400px] centered container with px-8 gutters and a py-28 (112px) vertical rhythm; the hero runs pt-16 pb-24. Sections alternate light (bone) and dark (near-black) backgrounds. Heavy use of 12-column grids (md:grid-cols-12) for the hero timer/stats row, pricing, integrations and footer. Signature structural moves: a top HUD strip with manifesto/coordinates text; the giant tilted three-line hero headline with a red radial bloom and a background light-trails video at low opacity; a full-width marquee ticker; a benchmark bar chart; a horizontal conveyor belt threading four offset stage cards; a 4×4 perspective-tilted (rotateY(-5deg) rotateX(4deg)) integration grid; and a red CTA strip. Whitespace is dense and editorial, packed with HUD micro-labels and section numbers (§02–§05).

Elevation & Depth

Depth is graphic, not soft. The hallmark is the hard offset shadow — a solid 6px/6px block with no blur in black (hard-shadow), red (hard-shadow-red) or amber (hard-shadow-amber). The lone glow is the amber neon ring on the F1 plan: 0 0 0 2px amber, 0 0 24px rgba(232,160,48,.5), 0 0 60px rgba(232,160,48,.25), which animates via the flicker keyframe on hover. The HUD timer card uses a subtle backdrop-blur-sm over black/60. Otherwise depth comes from 2px solid borders, overlapping translate-y-6 stage offsets, and the perspective-tilted integration grid. A faint SVG turbulence noise overlay (opacity .08, mix-blend overlay) textures dark sections.

Shapes

Square by mandate: every card, button, badge, input and bar has rounded.none (0px). The only curvature is rounded-full on the two decorative dashed gear rings in the How-It-Works section. Headlines and select elements are skewed via tilt5 (rotate 5deg) / tiltm5 (rotate -5deg) rather than rounded, reinforcing the speed/motion language.

Components

• Navbar — black bg, white text, 2px red bottom border, square red "V" logo tile tilted -5deg, uppercase tracked nav links, mono build-number badge, red START FREE button. max-w-[1400px], px-8 py-4.
• Primary button (btn-red) — red fill, white text, Archivo Black label; hovers to amber fill + black text. Square, px-6 py-3. Labels: "DEPLOY NOW", "START FREE".
• Outline button — transparent, 2px white/60 border, white text; hovers to white fill + black text. "WATCH 47s DEMO".
• HUD timer card — black/60 + backdrop-blur, 2px amber border, amber 56px mono countdown, floating amber "LIVE TIMER" tab badge.
• Stat tile — 1px white/20 border, mono value (white or amber), tiny uppercase mono caption; one red-filled variant.
• Stage card — white fill, 2px black border, hard-shadow-red, big red Tabler icon, Archivo Black title, mono duration; DEPLOY stage inverts to amber fill + hard-shadow. Alternating cards offset translate-y-6.
• Pricing cards — INLINE-4 (black border + hard-shadow), V8 SUPER (red border + hard-shadow-red + floating "⚡ POPULAR" badge), F1·SPEC (amber border, black fill, neon-amber + flicker on hover). Mono price, ▣/▢ mono feature list, square full-width CTA.
• Integration cell — white fill, 2px black border, hard-shadow-amber, 60px Tabler brand icon (one inline K8s SVG), uppercase mono caption; AWS/Go cells inverted to red/amber fills. Hover tilts rotateY(-14deg) with amber hard shadow.
• Marquee ticker — red band, 2px black top/bottom borders, Archivo Black text scrolling via marquee-track.
• Newsletter input — transparent input in a 1px white/30 box with an amber square "GO" button.

Motion

Heavily animated. CSS keyframes drive: marq (18s marquee ticker; 2s conveyor belt), piston (1s pumping bars, staggered), spin-slow (8s/12s gear rings), and flicker (2s amber neon on hover). The cell hover does a .4s cubic-bezier rotateY tilt. JavaScript runs a 10ms setInterval live countdown timer (47.00s → 0, looping). GSAP + ScrollTrigger power the scroll reveals: benchmark bars fill to their data-w width (0.4s for ours, 1.6s for rivals), number counters count up to data-count (1.6s), the hero headline reveals with a clipPath wipe (stagger 0.15s), and the integration grid fades/scales in from center.

Iconography

Tabler Icons via webfont (ti ti-*), outline style. UI/label icons render at ~16px; stage and integration-cell icons at 60px (text-6xl). Default icon color is red on light cards, inheriting white/amber on inverted cells. Brand glyphs (GitHub, GitLab, Docker, AWS, etc.) come from Tabler's ti-brand-* set, with one exception: Kubernetes is an inline multi-color SVG (#326ce5). Icons are mostly UI/labeling; gears and pistons are decorative motion.

Do's and Don'ts

• Do keep everything square (radius 0) except decorative gear rings.
• Do use hard offset block shadows for elevation, not soft blur.
• Do set every number, label and HUD readout in Fira Code mono with tabular-nums.
• Do tilt big headlines 5deg and reserve amber for the highest-energy accents (timer, neon, deploy).
• Don't introduce soft drop shadows, rounded corners, or gradients other than the speed-line and bloom patterns.
• Don't dilute the palette — it is exactly four hues (white, black, red, amber); add no new brand colors.
• Don't set body or UI labels in the display face; keep Archivo Black for headlines/buttons only.

Known Gaps

• Color values are read verbatim from :root and rgba(...) literals; alpha hairline/effect colors are expressed as their base hue with the opacity used in the markup.
• The hero background uses an external Pexels light-trails video; its visual contribution depends on that asset loading (opacity .18, mix-blend-screen).
• The noise overlay is an inline SVG turbulence filter; its exact grain is browser-rendered, not a fixed token.
• Spacing tokens are inferred from the Tailwind utility classes actually used (px-8, py-28, gap-4/6/8, etc.); no explicit spacing scale is declared in CSS.