Midnight Sprint

a stadium tunnel after kickoff, a collector binder on the bench

Cream pebbled-leather opening, then ink-violet chapters under giant ghost headlines. Gold-foil collectible cards, white-bordered prints dropped at an angle and tiny mono captions give an athlete story its weight.

darksporteditorialcinematicpurplegoldcollectibleportfolio v1.0.0 CC-BY-4.0

Install

npx styles-md add midnight-sprint

Palette

bg #0c0a12

surface #221836

fg #efe9df

muted #ada4bb

accent #e3b54c

accent-fg #14101c

border #3f3355

success #b1d6a0

danger #f0939b

Type

Body Manrope

Aa Bb Cc 0123 The quick brown fox

"Manrope", "Helvetica Neue", Arial, sans-serif

Headings Anton

Aa Bb Cc 0123 The quick brown fox

"Anton", Impact, sans-serif

Code Space Mono

const total = 1 + lI0O;

"Space Mono", Menlo, monospace

16px base · 1.28 ratio · body 400 / heading 400 · heading tracking 0.01em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 54.98px

The quick brown fox jumps

3xl · 42.95px

The quick brown fox jumps

2xl · 33.55px

The quick brown fox jumps

xl · 26.21px

The quick brown fox jumps

lg · 20.48px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 12.5px

The quick brown fox jumps

xs · 9.77px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Anton display SIL Open Font License 1.1 Narrow, forceful capitals for cropped arena-sized headlines.
Manrope sans SIL Open Font License 1.1 Open, readable body copy against the dark ground.
Space Mono mono SIL Open Font License 1.1 Card captions, stat lines and small navigation labels.

Fallbacks: Helvetica Neue, Arial, sans-serif, Menlo, monospace, Impact. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke: 1px
radius: 2px · 4px · 8px
spacing unit: 8px
gutter: 24px
section gap: 128px
max width: 1600px
motion: 400ms cubic-bezier(0.22, 1, 0.36, 1)

Midnight Sprint

An athlete story told in two grounds: a bright cream opening that feels like the grain of a new ball, then a long night of ink and violet where the work is shown off like a collector’s binder. This is a visual language for an original athlete or event story. Its people, numbers and imagery must be commissioned, licensed or generated for the story, never lifted from a real player, team or sponsor.

Principles

Open on cream #ebe5da with a pebbled-leather texture and one cut-out portrait centred and bled off the bottom edge. Every later chapter sits on bg or a #1d1530 violet field.
Behind each dark chapter, set one giant uppercase word in display at ~18vw, coloured #3a2a5c, fading to bg toward its baseline. It is texture; imagery always sits in front.
Imagery is 2D cel-shaded illustration of one invented athlete, kept on model across every image, and shown as objects: collectible cards, tilted prints, products cut out on transparent ground. Gold is foil on a card edge, a stat or one control, never a fill area.
Copy is small and quiet against huge type: 13px to 15px body, 10px to 11px mono captions.
Motion is optional garnish. Every chapter must read correctly with nothing animated.

Components

Hero: one viewport, cream leather, ghost initials in #d9d1c3 behind the cut-out, a small centred wordmark, a 120px collectible card plus a short caption at lower left, a short caption at lower right.
Collectible card: 3/4 image inside a 6px gold-foil frame (a linear-gradient of #8a6421, accent, #fff1b8), radius sm, soft drop shadow, rotated -4° to 4°. Under it, a centred mono title and a stat line in muted, letter-spaced 0.18em.
Field ruler: faint yard numerals (30 40 50) in display, #2a2140, along a chapter floor.
Print: photo with a 10px #f4efe6 border, rotated -6° to 6°, stacked two or three deep.
Quote chapter: violet field, centred display sentence at ~6vw, fg, a print dropped over it.
Partner rail: a row of wordmarks in muted on bg, separated by a border hairline.
Buttons: cream pill (fg fill, accentFg text, radius full, 11px mono uppercase). On cream ground, invert to an ink pill. Focus is a 2px accent outline offset 4px.

Do / Don’t

Do check giant headlines at 390px. The subject and copy must stay readable over the ghost.
Do give every narrative image real alt text, and keep faces clear of overlapping type.
Don’t trace a real athlete, copy a team’s colours with its marks, or reuse a sponsor’s logo.
Don’t use neon gradients, glass panels or rounded dashboard cards.
Don’t put gold on large areas or long text; it stops reading as foil.
Don’t make essential copy depend on scroll animation.

When to use

Athlete portfolios, signing or draft announcements, campaign microsites and sports documentary landing pages with strong illustration or photography. Avoid admin interfaces and text-heavy archives, where full-screen chapters and oversized type waste space.

# Midnight Sprint

a stadium tunnel after kickoff, a collector binder on the bench. Cream pebbled-leather opening, then ink-violet chapters under giant ghost headlines. Gold-foil collectible cards, white-bordered prints dropped at an angle and tiny mono captions give an athlete story its weight.

## Tokens

```yaml
color:  { bg: "#0c0a12", surface: "#221836", fg: "#efe9df", muted: "#ada4bb",
          accent: "#e3b54c", accentFg: "#14101c", border: "#3f3355" }
font:   { sans: "\"Manrope\", \"Helvetica Neue\", Arial, sans-serif",
          mono: "\"Space Mono\", Menlo, monospace",
          base: "16px", scale: 1.28,
          weightBody: 400, weightHeading: 400,
          headingTracking: "0.01em" }
type:   { xs: "9.77px", sm: "12.5px", base: "16px", lg: "20.48px", xl: "26.21px", 2xl: "33.55px", 3xl: "42.95px", 4xl: "54.98px" }
space:  { unit: "8px", gutter: "24px",
          section: "128px", maxWidth: "1600px" }
shape:  { strokeWidth: "1px", radiusSm: "2px",
          radiusMd: "4px", radiusLg: "8px" }
motion: { duration: "400ms", easing: "cubic-bezier(0.22, 1, 0.36, 1)" }
```

## Principles

- Open on cream `#ebe5da` with a pebbled-leather texture and one cut-out portrait centred and
  bled off the bottom edge. Every later chapter sits on `bg` or a `#1d1530` violet field.
- Behind each dark chapter, set one giant uppercase word in `display` at ~18vw, coloured
  `#3a2a5c`, fading to `bg` toward its baseline. It is texture; imagery always sits in front.
- Imagery is 2D cel-shaded illustration of one invented athlete, kept on model across every
  image, and shown as objects: collectible cards, tilted prints, products cut out on transparent
  ground. Gold is foil on a card edge, a stat or one control, never a fill area.
- Copy is small and quiet against huge type: 13px to 15px body, 10px to 11px mono captions.
- Motion is optional garnish. Every chapter must read correctly with nothing animated.

## Components

- Hero: one viewport, cream leather, ghost initials in `#d9d1c3` behind the cut-out, a small
  centred wordmark, a 120px collectible card plus a short caption at lower left, a short
  caption at lower right.
- Collectible card: 3/4 image inside a 6px gold-foil frame (a `linear-gradient` of `#8a6421`,
  `accent`, `#fff1b8`), radius `sm`, soft drop shadow, rotated -4° to 4°. Under it, a centred
  mono title and a stat line in `muted`, letter-spaced 0.18em.
- Field ruler: faint yard numerals (`30 40 50`) in `display`, `#2a2140`, along a chapter floor.
- Print: photo with a 10px `#f4efe6` border, rotated -6° to 6°, stacked two or three deep.
- Quote chapter: violet field, centred display sentence at ~6vw, `fg`, a print dropped over it.
- Partner rail: a row of wordmarks in `muted` on `bg`, separated by a `border` hairline.
- Buttons: cream pill (`fg` fill, `accentFg` text, radius `full`, 11px mono uppercase). On
  cream ground, invert to an ink pill. Focus is a 2px `accent` outline offset 4px.

## Do / Don't

- Do check giant headlines at 390px. The subject and copy must stay readable over the ghost.
- Do give every narrative image real `alt` text, and keep faces clear of overlapping type.
- Don't trace a real athlete, copy a team's colours with its marks, or reuse a sponsor's logo.
- Don't use neon gradients, glass panels or rounded dashboard cards.
- Don't put gold on large areas or long text; it stops reading as foil.
- Don't make essential copy depend on scroll animation.

<!-- styles-md/midnight-sprint@1.0.0, CC-BY-4.0. Full spec: DESIGN.md -->

/* Midnight Sprint: Tailwind v4 theme. Import after `@import "tailwindcss";` */
@theme {
  --color-bg: #0c0a12;
  --color-surface: #221836;
  --color-fg: #efe9df;
  --color-muted: #ada4bb;
  --color-accent: #e3b54c;
  --color-accent-fg: #14101c;
  --color-border: #3f3355;
  --color-success: #b1d6a0;
  --color-danger: #f0939b;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", Menlo, monospace;
  --font-display: "Anton", Impact, sans-serif;
  --text-xs: 9.77px;
  --text-sm: 12.5px;
  --text-base: 16px;
  --text-lg: 20.48px;
  --text-xl: 26.21px;
  --text-2xl: 33.55px;
  --text-3xl: 42.95px;
  --text-4xl: 54.98px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --spacing: 8px;
  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Midnight Sprint: a stadium tunnel after kickoff, a collector binder on the bench
   styles-md style "midnight-sprint" v1.0.0, CC-BY-4.0 */
:root {
  --sm-color-bg: #0c0a12;
  --sm-color-surface: #221836;
  --sm-color-fg: #efe9df;
  --sm-color-muted: #ada4bb;
  --sm-color-accent: #e3b54c;
  --sm-color-accent-fg: #14101c;
  --sm-color-border: #3f3355;
  --sm-color-success: #b1d6a0;
  --sm-color-danger: #f0939b;
  --sm-font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --sm-font-mono: "Space Mono", Menlo, monospace;
  --sm-font-display: "Anton", Impact, sans-serif;
  --sm-font-weight-body: 400;
  --sm-font-weight-heading: 400;
  --sm-heading-tracking: 0.01em;
  --sm-text-xs: 9.77px;
  --sm-text-sm: 12.5px;
  --sm-text-base: 16px;
  --sm-text-lg: 20.48px;
  --sm-text-xl: 26.21px;
  --sm-text-2xl: 33.55px;
  --sm-text-3xl: 42.95px;
  --sm-text-4xl: 54.98px;
  --sm-space-1: 8px;
  --sm-space-2: 16px;
  --sm-space-3: 24px;
  --sm-space-4: 32px;
  --sm-space-6: 48px;
  --sm-space-8: 64px;
  --sm-space-12: 96px;
  --sm-space-16: 128px;
  --sm-space-24: 192px;
  --sm-gutter: 24px;
  --sm-section: 128px;
  --sm-max-width: 1600px;
  --sm-stroke-width: 1px;
  --sm-radius-sm: 2px;
  --sm-radius-md: 4px;
  --sm-radius-lg: 8px;
  --sm-radius-full: 9999px;
  --sm-duration: 400ms;
  --sm-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

{
  "id": "midnight-sprint",
  "name": "Midnight Sprint",
  "version": "1.0.0",
  "license": "CC-BY-4.0",
  "mood": "a stadium tunnel after kickoff, a collector binder on the bench",
  "tags": [
    "dark",
    "sport",
    "editorial",
    "cinematic",
    "purple",
    "gold",
    "collectible",
    "portfolio"
  ],
  "fonts": [
    {
      "family": "Anton",
      "role": "display",
      "license": "OFL-1.1",
      "url": "https://fonts.google.com/specimen/Anton",
      "note": "Narrow, forceful capitals for cropped arena-sized headlines."
    },
    {
      "family": "Manrope",
      "role": "sans",
      "license": "OFL-1.1",
      "url": "https://fonts.google.com/specimen/Manrope",
      "note": "Open, readable body copy against the dark ground."
    },
    {
      "family": "Space Mono",
      "role": "mono",
      "license": "OFL-1.1",
      "url": "https://fonts.google.com/specimen/Space+Mono",
      "note": "Card captions, stat lines and small navigation labels."
    }
  ],
  "tokens": {
    "color": {
      "bg": "#0c0a12",
      "surface": "#221836",
      "fg": "#efe9df",
      "muted": "#ada4bb",
      "accent": "#e3b54c",
      "accentFg": "#14101c",
      "border": "#3f3355",
      "success": "#b1d6a0",
      "danger": "#f0939b"
    },
    "font": {
      "sans": "\"Manrope\", \"Helvetica Neue\", Arial, sans-serif",
      "mono": "\"Space Mono\", Menlo, monospace",
      "display": "\"Anton\", Impact, sans-serif",
      "scale": 1.28,
      "baseSize": "16px",
      "weightBody": 400,
      "weightHeading": 400,
      "headingTracking": 0.01
    },
    "space": {
      "unit": "8px",
      "gutter": "24px",
      "section": "128px",
      "maxWidth": "1600px"
    },
    "stroke": {
      "width": "1px"
    },
    "radius": {
      "sm": "2px",
      "md": "4px",
      "lg": "8px",
      "full": "9999px"
    },
    "motion": {
      "duration": "400ms",
      "easing": "cubic-bezier(0.22, 1, 0.36, 1)"
    }
  },
  "derived": {
    "type": [
      {
        "name": "xs",
        "size": "9.77px"
      },
      {
        "name": "sm",
        "size": "12.5px"
      },
      {
        "name": "base",
        "size": "16px"
      },
      {
        "name": "lg",
        "size": "20.48px"
      },
      {
        "name": "xl",
        "size": "26.21px"
      },
      {
        "name": "2xl",
        "size": "33.55px"
      },
      {
        "name": "3xl",
        "size": "42.95px"
      },
      {
        "name": "4xl",
        "size": "54.98px"
      }
    ],
    "space": [
      {
        "step": 1,
        "size": "8px"
      },
      {
        "step": 2,
        "size": "16px"
      },
      {
        "step": 3,
        "size": "24px"
      },
      {
        "step": 4,
        "size": "32px"
      },
      {
        "step": 6,
        "size": "48px"
      },
      {
        "step": 8,
        "size": "64px"
      },
      {
        "step": 12,
        "size": "96px"
      },
      {
        "step": 16,
        "size": "128px"
      },
      {
        "step": 24,
        "size": "192px"
      }
    ]
  },
  "variables": {
    "color-bg": "#0c0a12",
    "color-surface": "#221836",
    "color-fg": "#efe9df",
    "color-muted": "#ada4bb",
    "color-accent": "#e3b54c",
    "color-accent-fg": "#14101c",
    "color-border": "#3f3355",
    "color-success": "#b1d6a0",
    "color-danger": "#f0939b",
    "font-sans": "\"Manrope\", \"Helvetica Neue\", Arial, sans-serif",
    "font-mono": "\"Space Mono\", Menlo, monospace",
    "font-display": "\"Anton\", Impact, sans-serif",
    "font-weight-body": "400",
    "font-weight-heading": "400",
    "heading-tracking": "0.01em",
    "text-xs": "9.77px",
    "text-sm": "12.5px",
    "text-base": "16px",
    "text-lg": "20.48px",
    "text-xl": "26.21px",
    "text-2xl": "33.55px",
    "text-3xl": "42.95px",
    "text-4xl": "54.98px",
    "space-1": "8px",
    "space-2": "16px",
    "space-3": "24px",
    "space-4": "32px",
    "space-6": "48px",
    "space-8": "64px",
    "space-12": "96px",
    "space-16": "128px",
    "space-24": "192px",
    "gutter": "24px",
    "section": "128px",
    "max-width": "1600px",
    "stroke-width": "1px",
    "radius-sm": "2px",
    "radius-md": "4px",
    "radius-lg": "8px",
    "radius-full": "9999px",
    "duration": "400ms",
    "easing": "cubic-bezier(0.22, 1, 0.36, 1)"
  }
}