Skip to main content
Back to Examples

Midnight Studio

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

Visit site

A landing page for a late-night creative studio. Deep navy-black canvas, warm amber and coral accents, Playfair serif over DM Sans.

13
core colors
3
typefaces
29
tokens
agent.kombai.com/kombai-inspiration-library/templates/midnight-studio/index.html
01

Palette

bg-primary
#0B0F1A
bg-secondary
#131929
surface
#1C2438
text-primary
#F2EDD8
text-muted
#7A8AA6
accent-1
#F5A623
accent-2
#E87D5A
hairline-light
RGBA(242, 237, 216, 0.08)
cta-underline
RGBA(245, 166, 35, 0.4)
progress-dot-idle
RGBA(245, 237, 216, 0.18)
hero-scrim
LINEAR-GRADIENT(135DEG, RGBA(11,15,26,0.92) 0%, RGBA(11,15,26,0.35) 50%, RGBA(11,15,26,0.6) 100%)
brand-gradient
LINEAR-GRADIENT(90DEG, #F5A623, #E87D5A)
word-glow
RGBA(245, 166, 35, 0.8)
02

Typography

displayThe quick brown fox jumps'Playfair Display', serif
clamp(52px, 7vw, 104px)
display-italicThe quick brown fox jumps'Playfair Display', serif
clamp(28px, 3.5vw, 48px)
headingThe quick brown fox jumps'Playfair Display', serif
clamp(36px, 4.4vw, 56px)
work-titleThe quick brown fox jumps'Playfair Display', serif
clamp(40px, 5vw, 72px)
bodyThe quick brown fox jumps'DM Sans', sans-serif
17px
eyebrowThe quick brown fox jumps'DM Mono', monospace
12px
labelThe quick brown fox jumps'DM Mono', monospace
11px
03

Spacing & Shape

TokenValuePreview
xs4px
sm12px
md24px
lg48px
xl64px
section120px
04

Border Radius

TokenValuePreview
sm3px
md18px
full9999px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: midnight-studio-design
version: alpha
description: >
  A late-night creative-studio landing page built on deep midnight-navy
  surfaces (#0B0F1A → #131929 → #1C2438) with a warm parchment text color
  (#F2EDD8) and a dual amber/coral voltage (#F5A623 / #E87D5A). The signature
  moves are luminous: a full-bleed hero video under a navy gradient scrim,
  blur-to-sharp word reveals that glow with an amber text-shadow, a
  scroll-pinned 3D card-flip portfolio (rotateY 95deg → 0), and amber hairline
  rules. Typography pairs a heavy Playfair Display serif for display, DM Sans
  for body, and DM Mono for all eyebrows/labels (uppercase, wide tracking).
  Geometry is soft (18px cards) with a few sharp hairline accents.
colors:
  # Surface
  bg-primary: '#0B0F1A'      # page background, hero, founders & footer sections
  bg-secondary: '#131929'    # work & services section backgrounds
  surface: '#1C2438'         # card / portrait fills before images load
  # Text
  text-primary: '#F2EDD8'    # headings, body, logo — warm parchment
  text-muted: '#7A8AA6'      # subheads, descriptions, meta — cool slate
  # Brand / Voltage
  accent-1: '#F5A623'        # primary amber — eyebrows, CTAs, glow, hairlines
  accent-2: '#E87D5A'        # secondary coral — work eyebrow, meta, gradient end
  # Hairlines
  hairline-light: 'rgba(242, 237, 216, 0.08)'   # service-row bottom borders
  cta-underline: 'rgba(245, 166, 35, 0.4)'      # founders CTA underline
  progress-dot-idle: 'rgba(245, 237, 216, 0.18)' # work progress dots, inactive
  # Gradient / Glow
  hero-scrim: 'linear-gradient(135deg, rgba(11,15,26,0.92) 0%, rgba(11,15,26,0.35) 50%, rgba(11,15,26,0.6) 100%)'  # hero video overlay
  brand-gradient: 'linear-gradient(90deg, #F5A623, #E87D5A)'  # scroll progress bar
  word-glow: 'rgba(245, 166, 35, 0.8)'          # text-shadow on revealing words
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(52px, 7vw, 104px)
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  display-italic:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(28px, 3.5vw, 48px)
    fontWeight: 700
    lineHeight: 1.3
    fontStyle: italic
  heading:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(36px, 4.4vw, 56px)
    fontWeight: 900
    lineHeight: 1.05
  work-title:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(40px, 5vw, 72px)
    fontWeight: 900
    lineHeight: 1.04
  body:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
  eyebrow:
    fontFamily: "'DM Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
  label:
    fontFamily: "'DM Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.15em
    textTransform: uppercase
rounded:                      # radius scale
  sm: 3px                     # progress dots
  md: 18px                    # work cards
  full: 9999px                # available-dot (50%)
spacing:                      # base unit 8px (4px sub-step); page gutter 48px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 64px
  section: 120px
components:
  nav:
    backgroundColor: transparent
    textColor: '{colors.text-muted}'
    typography: '{typography.label}'
    padding: '24px 48px'      # fixed, top:0; logo uses DM Mono 13px
  hero-cta:
    backgroundColor: transparent
    textColor: '{colors.accent-1}'
    typography: '{typography.body}'
    padding: '0'
    # link only; hover adds text-shadow 0 0 20px rgba(245,166,35,0.6); label "Start a project →"
  work-card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '0'
    # aspect 4/3; box-shadow 0 50px 120px -30px rgba(0,0,0,0.7); 3D rotateY flip
  service-row:
    backgroundColor: transparent
    textColor: '{colors.text-primary}'
    typography: '{typography.work-title}'
    rounded: '0'
    padding: '32px 0'
    # border-bottom 1px {colors.hairline-light}; amber underline grows on hover
  founders-cta:
    backgroundColor: transparent
    textColor: '{colors.accent-1}'
    typography: '{typography.body}'
    padding: '0 0 3px'
    # border-bottom 1px {colors.cta-underline}; hover → solid accent-1
  progress-bar:
    backgroundColor: '{colors.brand-gradient}'
    rounded: '0'
    # fixed bottom; height 4px; width driven by scroll %
motion:
  word-reveal: 'opacity + filter blur(8px)→0 + text-shadow glow→transparent, 0.9s cubic-bezier(0.16,1,0.3,1), staggered'
  hero-entrance: 'eyebrow/subhead/CTA fade + translateY, 0.5–0.6s ease, JS timed stagger'
  card-flip: 'rotateY(95deg) scale(0.94) → rotateY(0) scale(1), 1s cubic-bezier(0.7,0,0.2,1); scroll-pinned, is-active/is-past'
  quote-lines: 'translateY(100%)→0 clipped by overflow:hidden, 0.8s cubic-bezier(0.16,1,0.3,1), 150ms stagger'
  service-reveal: 'max-height 0→120px + opacity + border-width, 0.7s cubic-bezier(0.16,1,0.3,1), per-row delay 0/150/300ms'
  pulse-fade: 'footer "Available" opacity 1↔0.4, 3s ease-in-out infinite; available-dot scale 1↔0.6'
  progress-bar: 'width transition 0.05s linear, scroll-driven'
icons:
  library: inline text glyphs
  style: typographic arrows (→) and CSS dot
  sizes: { sm: 8px, md: 20px }
  color: '{colors.accent-1}'

Midnight Studio

midnight-studio-design · alpha

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

Overview

Midnight Studio is a dark, cinematic landing page for a late-night creative studio whose whole aesthetic is "ideas that glow in the dark." It is built on a three-step ladder of midnight navies — #0B0F1A (page, hero, founders, footer), #131929 (work and services), and #1C2438 (card/portrait fills) — against a warm parchment text color #F2EDD8 and a cool slate muted tone #7A8AA6. The voltage is a warm dual accent: amber #F5A623 carries almost every UI accent (eyebrows, CTAs, hairlines, glows) and coral #E87D5A joins it in the scroll progress gradient and a few labels. The signature moves are all about light: a full-bleed autoplay hero video sits under a diagonal navy scrim (rgba(11,15,26,…)) that darkens as you scroll; display words materialize from blur(8px) to sharp while shedding an amber text-shadow glow; a scroll-pinned portfolio flips 3D cards from rotateY(95deg) to flat; and amber hairlines rule the footer top and bottom. Type pairs a very heavy Playfair Display serif (weight 900) for display, DM Sans for body at 17px/1.7, and DM Mono for every uppercase eyebrow and label with 0.15–0.18em tracking. Geometry is mostly soft (18px cards) with deliberate sharp hairline accents.

Colors

Surface. Three navies stack the page: bg-primary #0B0F1A is the base for the hero, founders, and footer; bg-secondary #131929 backs the work and services sections; surface #1C2438 fills cards and the founders portrait before images load. Text. text-primary #F2EDD8 (warm parchment) is used for all headings, body copy, and the nav logo; text-muted #7A8AA6 (cool slate) carries subheads, descriptions, counters, and footer meta. Brand / Voltage. accent-1 #F5A623 is the dominant amber — hero eyebrow and CTA, founders/services eyebrows, service numbers and underlines, the active progress dot, footer accents, and every glow. accent-2 #E87D5A (coral) appears on the work eyebrow and work meta and forms the end stop of the gradients. Hairlines. hairline-light rgba(242,237,216,0.08) draws the service-row bottom borders; cta-underline rgba(245,166,35,0.4) underlines the founders CTA; progress-dot-idle rgba(245,237,216,0.18) is the inactive work dot. Gradient / Glow. brand-gradient (90deg amber→coral) fills the 4px scroll progress bar; hero-scrim is the 135deg navy overlay; word-glow rgba(245,166,35,0.8) is the amber text-shadow on revealing display words.

Typography

Three Google Fonts families load via one @import: Playfair Display (700/900, plus italic), DM Sans (400/500/700), and DM Mono (400/500). Playfair Display is the display face used at extreme weight (900) for the hero, section headings, work titles, and the italic founders quote and footer wordmark. DM Sans is the body and UI sans. DM Mono is the monospace voice for every eyebrow, counter, number, and meta label — always uppercase with wide tracking. All three are open-source (Google Fonts), so no substitutes are needed.

TokenSizeWeightLine-heightTrackingUsage
displayclamp(52px,7vw,104px)9001.0-0.02emHero headline
display-italicclamp(28px,3.5vw,48px)700 italic1.3—Founders quote, footer wordmark
headingclamp(36px,4.4vw,56px)9001.05—"Selected Work" section heading
work-titleclamp(40px,5vw,72px)9001.04—Work item titles; service titles (smaller clamp)
body17px4001.7—Body copy, bios, descriptions
eyebrow12px400—0.18emHero/work/section eyebrows (uppercase)
label11px400—0.15emFooter meta, available badge (uppercase)

Layout

Base unit is effectively 8px with a 4px sub-step; the consistent page gutter is 48px (24px on mobile) and content sections cap at max-width: 1200px (work stage 1280px, hero content 760px). The page is a vertical sequence: a fixed transparent nav; a 100vh hero with full-bleed video, diagonal scrim, and left-aligned content; a 400vh scroll-pinned "Selected Work" section whose position: sticky pin holds a two-column (1.05fr/1fr) card+text stage while three items flip through; an asymmetric founders split (40fr portrait / 60fr text) with the portrait overlapping right by -32px; a services list of full-width rows that expand open on scroll; and a centered footer bracketed by amber hairlines. Sections breathe at 120px vertical padding. Whitespace is generous and editorial.

Elevation & Depth

Depth comes from a single dramatic card shadow and from the navy stacking, not from broad elevation. Work cards carry box-shadow: 0 50px 120px -30px rgba(0,0,0,0.7) — a deep, far-cast drop — combined with a perspective: 1400px 3D stage and a bottom-edge linear-gradient vignette inside each card. The hero gains depth from its diagonal navy scrim that intensifies on scroll. Everything else relies on hairlines (footer rules, service borders) and the navy value steps rather than shadow.

Shapes

Mostly soft with intentional sharp accents. Work cards use an 18px radius (rounded.md); progress dots are slightly rounded bars (3px); the availability indicator is a perfect circle (border-radius: 50%). The scroll progress bar, service rows, hairlines, and footer rules are all sharp (0 radius). There are no pills or heavily rounded buttons — CTAs are underlined text links, keeping the geometry editorial.

Components

  • Nav — fixed, transparent, 24px/48px padding; DM Mono logo MIDNIGHT — STUDIO at 13px / 0.12em; links in text-muted 13px that turn accent-1 on hover.
  • Hero CTA — amber text link "Start a project →"; hover adds glow text-shadow: 0 0 20px rgba(245,166,35,0.6); no fill, no radius.
  • Work card — surface fill, 18px radius, 4/3 aspect, deep shadow, inner bottom gradient; flips in 3D via rotateY between is-active/is-past states.
  • Work progress dots — 5×22px idle bars at progress-dot-idle; active dot grows to 44px and turns accent-1.
  • Service row — full-width flex row, DM Mono number + Playfair title; 1px hairline-light bottom border; amber underline scales in and arrow nudges +6px on hover; reveals via max-height.
  • Founders CTA — amber text link with cta-underline 1px border-bottom that goes solid accent-1 on hover.
  • Available badge — DM Mono uppercase label with an 8px amber dot, both pulsing on a 3s loop.
  • Progress bar — fixed 4px amber→coral gradient at the bottom, width tracks scroll.

Motion

Motion is the brand. Display words reveal with a 0.9s cubic-bezier(0.16,1,0.3,1) transition from blur(8px) + amber glow to sharp + transparent, JS-staggered. The hero entrance fades and slides the eyebrow, subhead, and CTA in on JS timers. The "Selected Work" section is scroll-pinned: as you scroll its 400vh height, a rAF loop computes the active index and flips cards via rotateY(95deg) scale(0.94) → rotateY(0) scale(1) over 1s cubic-bezier(0.7,0,0.2,1), with text fading up underneath. The founders quote rises line-by-line (translateY 100%→0 clipped by overflow), services rows expand max-height 0→120px with a 0/150/300ms stagger, and the footer "Available" badge + dot pulse on infinite 3s loops. The scroll progress bar updates at 0.05s linear, and the hero scrim darkens with scroll position. IntersectionObservers drive the reveals with a 1.5s fallback timer.

Iconography

There is no icon library. "Icons" are typographic: ASCII arrows (→) in accent-1 on the CTAs and service rows (20px, nudged on hover), and a CSS circle (available-dot, 8px, amber, pulsing) in the footer. Everything stays within the type system — no SVG or font-icon set.

Do's and Don'ts

  • Do keep the three-navy surface ladder and the warm parchment text — the contrast is the whole mood.
  • Do reserve Playfair Display 900 for display and headings, and DM Mono uppercase for every eyebrow/label.
  • Do let amber #F5A623 lead and coral #E87D5A support; keep CTAs as glowing text links, not filled buttons.
  • Do preserve the glow language: blur-to-sharp word reveals and amber text-shadows.
  • Don't introduce a fourth surface tone, lighten the page background, or add boxed/filled buttons with large radii.
  • Don't mix in a different accent hue or use the mono face for body copy.
  • Don't flatten the scroll-pinned 3D card flip or remove the hero video scrim.

Known Gaps

  • The hero headline, founders quote, and footer wordmark text is injected by JS at runtime; the type/color tokens are read from CSS, and the copy is taken from the script (buildQuote, buildFooterWords).
  • The card-flip and pin progress are scroll-driven via JavaScript (rAF), not pure CSS — described from the CSS states (is-active/is-past) and the JS logic.
  • Image and video assets are remote CDN URLs; only their container fills (surface) and overlay gradients are tokenized.
  • Spacing scale is inferred from the recurring values in the markup (24/48/64/120px); no formal scale is declared in CSS.