mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
c12c816a44
- Introduced comprehensive design documentation and JSON configurations for multiple design systems, including Agentic, Airtable, Ant, Apple, Application, Arc, and Artistic. - Each design system includes detailed guidelines on visual themes, color palettes, typography, spacing, layout, components, and interaction principles. - Enhanced the overall design framework to support diverse user interfaces and improve consistency across applications. This update significantly enriches the design resources available for developers, enabling them to create visually cohesive and user-friendly applications.
658 lines
40 KiB
HTML
658 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Pink Script — After Hours</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<script src="assets/deck-stage.js"></script>
|
||
<style>
|
||
:root{
|
||
--ink: #060507;
|
||
--ink-2: #0F0D11;
|
||
--paper: #F5EDF1;
|
||
--pink: #ED3D8C;
|
||
--pink-2: #FF66A8;
|
||
--pink-deep: #B81D67;
|
||
--line: rgba(237,61,140,.32);
|
||
--mute: rgba(245,237,241,.55);
|
||
--hair: rgba(245,237,241,.14);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { background: #000; font-family: "Inter", system-ui, sans-serif; color: var(--paper); }
|
||
|
||
/* --- shared slide chrome ----------------------------------------- */
|
||
deck-stage > section.slide {
|
||
position: relative;
|
||
width: 1920px; height: 1080px;
|
||
background:
|
||
radial-gradient(ellipse 90% 70% at 30% 30%, #1A1218 0%, #0A0709 55%, #050306 100%);
|
||
color: var(--paper);
|
||
overflow: hidden;
|
||
}
|
||
/* film grain via tiny svg noise */
|
||
.slide::before {
|
||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||
opacity: .08; mix-blend-mode: screen;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
||
}
|
||
/* hairline frame */
|
||
.slide::after {
|
||
content: ""; position: absolute; inset: 36px; pointer-events: none;
|
||
border: 1px solid var(--hair);
|
||
}
|
||
|
||
/* runner: top-left brand + top-right meta + bottom corners */
|
||
.runner {
|
||
position: absolute; left: 60px; right: 60px; top: 60px;
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
font-family: "JetBrains Mono", monospace; font-size: 24px; letter-spacing: .14em;
|
||
text-transform: uppercase; color: var(--mute);
|
||
z-index: 5;
|
||
white-space: nowrap;
|
||
}
|
||
.runner .brand { color: var(--pink); }
|
||
.footer {
|
||
position: absolute; left: 60px; right: 60px; bottom: 60px;
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
font-family: "JetBrains Mono", monospace; font-size: 24px; letter-spacing: .14em;
|
||
text-transform: uppercase; color: var(--mute);
|
||
z-index: 5;
|
||
white-space: nowrap;
|
||
}
|
||
.footer .pageno { color: var(--paper); white-space: nowrap; flex-shrink: 0; }
|
||
.footer .pageno em { color: var(--pink); font-style: normal; }
|
||
|
||
/* shared display script */
|
||
.script {
|
||
font-family: "Instrument Serif", serif;
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
color: var(--pink);
|
||
letter-spacing: -.01em;
|
||
line-height: 1.05;
|
||
padding-bottom: .12em;
|
||
}
|
||
.script.huge { font-size: 540px; }
|
||
.script.giant { font-size: 360px; }
|
||
.script.large { font-size: 220px; }
|
||
.script.med { font-size: 140px; }
|
||
.script.sm { font-size: 88px; }
|
||
|
||
/* sans display */
|
||
.sans-display {
|
||
font-family: "Inter", sans-serif; font-weight: 300;
|
||
text-transform: uppercase; letter-spacing: .04em;
|
||
color: var(--paper);
|
||
}
|
||
.mono { font-family: "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
|
||
|
||
/* hairline pink rule */
|
||
.rule { height: 1px; background: var(--pink); opacity: .45; }
|
||
.rule.thin { opacity: .25; background: var(--paper); }
|
||
|
||
/* ============== 1. COVER · AFTER HOURS =================== */
|
||
.s-cover .stage {
|
||
position: absolute; left: 60px; right: 60px; top: 180px; bottom: 360px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-direction: column; gap: 20px;
|
||
}
|
||
.s-cover .pre { font-family: "JetBrains Mono", monospace; font-size: 28px; letter-spacing: .42em; text-transform: uppercase; color: var(--paper); opacity: .75; }
|
||
.s-cover .title-wrap { position: relative; }
|
||
.s-cover .title {
|
||
font-family: "Instrument Serif", serif; font-style: italic;
|
||
color: var(--pink); font-size: 280px; line-height: 1.02; letter-spacing: -.015em;
|
||
text-align: center;
|
||
text-shadow: 0 0 80px rgba(237,61,140,.18);
|
||
padding-bottom: .12em;
|
||
}
|
||
.s-cover .title .l2 { display: block; padding-left: 180px; color: var(--paper); }
|
||
.s-cover .sub {
|
||
font-family: "Inter", sans-serif; font-weight: 300; font-size: 28px; letter-spacing: .12em;
|
||
text-transform: uppercase; color: var(--paper); opacity: .85; margin-top: 28px;
|
||
}
|
||
.s-cover .sub em { color: var(--pink); font-style: normal; }
|
||
.s-cover .lower { position: absolute; left: 60px; right: 60px; bottom: 160px; display: flex; justify-content: space-between; align-items: end; gap: 32px; }
|
||
.s-cover .lower .col { display: flex; flex-direction: column; gap: 6px; }
|
||
.s-cover .lower .lab { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
|
||
.s-cover .lower .val { font-family: "Instrument Serif", serif; font-style: italic; font-size: 48px; color: var(--pink); line-height: 1.05; }
|
||
.s-cover .lower .val.alt { color: var(--paper); }
|
||
|
||
/* ============== 2. THE INDEX (TOC) ======================= */
|
||
.s-toc .body { position: absolute; inset: 140px 60px 140px 60px; display: grid; grid-template-columns: 480px 1fr; gap: 80px; }
|
||
.s-toc h1 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 220px; line-height: 1.04; color: var(--pink); padding-bottom: .12em; }
|
||
.s-toc h1 .small { display: block; font-size: 80px; color: var(--paper); margin-top: 16px; opacity: .8; }
|
||
.s-toc .rows { display: flex; flex-direction: column; }
|
||
.s-toc .row { display: grid; grid-template-columns: 110px 1fr 200px; gap: 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--hair); }
|
||
.s-toc .row .num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 64px; color: var(--pink); line-height: 1; }
|
||
.s-toc .row .title { font-family: "Instrument Serif", serif; font-style: italic; font-size: 56px; color: var(--paper); line-height: 1.05; }
|
||
.s-toc .row .desc { font-family: "Inter", sans-serif; font-size: 24px; color: var(--mute); margin-top: 8px; line-height: 1.4; font-style: normal; }
|
||
.s-toc .row .meta { font-family: "JetBrains Mono", monospace; font-size: 24px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: right; }
|
||
.s-toc .row.cur .num, .s-toc .row.cur .title { color: var(--pink); }
|
||
|
||
/* ============== 3. BY THE NUMBERS ======================== */
|
||
.s-stats .body { position: absolute; inset: 140px 60px 140px 60px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; }
|
||
.s-stats .left { display: flex; flex-direction: column; justify-content: space-between; padding-right: 20px; }
|
||
.s-stats .left .kicker { font-family: "JetBrains Mono", monospace; font-size: 24px; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); }
|
||
.s-stats .left h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 132px; line-height: 1.06; color: var(--paper); padding-bottom: .1em; }
|
||
.s-stats .left h2 em { color: var(--pink); font-style: italic; }
|
||
.s-stats .left p { font-family: "Inter", sans-serif; font-size: 24px; line-height: 1.55; color: var(--paper); opacity: .75; max-width: 36ch; font-weight: 300; }
|
||
.s-stats .right { display: flex; flex-direction: column; gap: 18px; padding-top: 0; }
|
||
.s-stats .stat { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
|
||
.s-stats .stat:last-child { border-bottom: 0; padding-bottom: 0; }
|
||
.s-stats .stat .figure { font-family: "Instrument Serif", serif; font-style: italic; font-size: 116px; line-height: .9; color: var(--pink); display: flex; align-items: baseline; }
|
||
.s-stats .stat .figure sup { font-size: 36px; color: var(--paper); vertical-align: top; margin-left: 4px; line-height: 1; align-self: flex-start; padding-top: 18px; }
|
||
.s-stats .stat .meta .lab { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
|
||
.s-stats .stat .meta .desc { font-family: "Inter", sans-serif; font-size: 24px; color: var(--mute); margin-top: 8px; line-height: 1.45; font-weight: 300; }
|
||
|
||
/* ============== 4. MOVEMENTS · SECTION DIVIDER =========== */
|
||
.s-section .body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
||
.s-section .body { justify-content: flex-start; padding-left: 200px; }
|
||
.s-section .num {
|
||
font-family: "Instrument Serif", serif; font-style: italic;
|
||
color: var(--pink);
|
||
font-size: 600px; line-height: .82; letter-spacing: -.02em;
|
||
text-shadow: 0 0 120px rgba(237,61,140,.22);
|
||
}
|
||
.s-section .label-l { position: absolute; left: 80px; top: auto; bottom: 140px; transform: rotate(-90deg); transform-origin: left bottom; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .42em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
|
||
.s-section .right { position: absolute; right: 100px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
|
||
.s-section .right .kicker { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
|
||
.s-section .right h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 88px; line-height: 1.06; color: var(--paper); padding-bottom: .1em; }
|
||
.s-section .right p { font-family: "Inter", sans-serif; font-size: 24px; line-height: 1.55; color: var(--mute); font-weight: 300; }
|
||
|
||
/* ============== 5. THE CURVE · CHART ===================== */
|
||
.s-chart .head { position: absolute; left: 60px; right: 60px; top: 140px; display: flex; align-items: end; justify-content: space-between; gap: 80px; }
|
||
.s-chart .head h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 90px; line-height: 1.06; color: var(--paper); max-width: 18ch; padding-bottom: .1em; }
|
||
.s-chart .head h2 em { color: var(--pink); font-style: italic; }
|
||
.s-chart .head .legend { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
|
||
.s-chart .head .legend .li { display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
|
||
.s-chart .head .legend .li i { width: 36px; height: 2px; background: var(--pink); }
|
||
.s-chart .head .legend .li.b i { background: var(--paper); opacity: .5; }
|
||
.s-chart .plotwrap { position: absolute; left: 160px; right: 460px; top: 480px; bottom: 200px; }
|
||
.s-chart .plotwrap .yax { position: absolute; left: -100px; top: 0; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .1em; color: var(--mute); align-items: flex-end; }
|
||
.s-chart .plotwrap .plot { position: absolute; inset: 0 0 30px 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||
.s-chart .plotwrap .plot .gline { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(237,61,140,.18); }
|
||
.s-chart .plotwrap .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
|
||
.s-chart .plotwrap .xax { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .1em; color: var(--mute); }
|
||
.s-chart .callout {
|
||
position: absolute; right: 60px; top: 480px; bottom: 200px;
|
||
display: flex; flex-direction: column; gap: 8px; width: 360px; align-items: flex-end; text-align: right; justify-content: flex-start;
|
||
border-left: 1px solid var(--pink); padding-left: 24px; padding-top: 4px;
|
||
}
|
||
.s-chart .callout .num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 120px; line-height: .9; color: var(--pink); }
|
||
.s-chart .callout .lab { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
|
||
.s-chart .callout .desc { font-family: "Inter", sans-serif; font-size: 22px; color: var(--mute); line-height: 1.4; font-weight: 300; }
|
||
|
||
/* ============== 6. PROCESS · DIAGRAM ===================== */
|
||
.s-process .head { position: absolute; left: 60px; right: 60px; top: 140px; display: flex; align-items: end; justify-content: space-between; gap: 60px; }
|
||
.s-process .head h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 156px; line-height: 1.04; color: var(--paper); max-width: 12ch; padding-bottom: .1em; }
|
||
.s-process .head h2 em { color: var(--pink); font-style: italic; }
|
||
.s-process .head .lead { font-family: "Inter", sans-serif; font-size: 26px; color: var(--mute); max-width: 40ch; line-height: 1.55; font-weight: 300; padding-bottom: 18px; }
|
||
.s-process .row { position: absolute; left: 60px; right: 60px; top: 540px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
|
||
.s-process .step { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px 0; border-top: 1px solid var(--pink); }
|
||
.s-process .step .n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 96px; color: var(--pink); line-height: .8; }
|
||
.s-process .step h3 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 38px; color: var(--paper); line-height: 1.05; }
|
||
.s-process .step p { font-family: "Inter", sans-serif; font-size: 22px; color: var(--mute); line-height: 1.5; font-weight: 300; }
|
||
.s-process .step .arr {
|
||
position: absolute; right: -16px; top: 60px; width: 24px; height: 24px;
|
||
color: var(--pink); pointer-events: none;
|
||
}
|
||
.s-process .step:last-child .arr { display: none; }
|
||
.s-process .timeline { position: absolute; left: 60px; right: 60px; bottom: 140px; display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding-top: 16px; border-top: 1px solid var(--hair); }
|
||
.s-process .timeline span em { color: var(--pink); font-style: normal; }
|
||
|
||
/* ============== 7. THE FIELD · COMPARISON ================ */
|
||
.s-matrix .head { position: absolute; left: 60px; right: 60px; top: 140px; display: flex; align-items: end; justify-content: space-between; gap: 60px; }
|
||
.s-matrix .head h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 132px; line-height: 1.04; color: var(--paper); max-width: 14ch; padding-bottom: .1em; }
|
||
.s-matrix .head h2 em { color: var(--pink); font-style: italic; }
|
||
.s-matrix .head .source { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-bottom: 18px; max-width: 30ch; line-height: 1.5; text-align: right; }
|
||
.s-matrix .table { position: absolute; left: 60px; right: 60px; top: 460px; bottom: 140px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; grid-auto-rows: 1fr; }
|
||
.s-matrix .cell { padding: 16px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; font-family: "Inter", sans-serif; font-size: 22px; line-height: 1.4; color: var(--paper); font-weight: 300; }
|
||
.s-matrix .cell.colhead { background: transparent; font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); border-bottom-color: var(--pink); }
|
||
.s-matrix .cell.label { font-family: "Instrument Serif", serif; font-style: italic; font-size: 32px; color: var(--paper); }
|
||
.s-matrix .cell.us { background: rgba(237,61,140,.08); color: var(--paper); }
|
||
.s-matrix .pill { display: inline-block; padding: 6px 14px; font-family: "JetBrains Mono", monospace; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--pink); white-space: nowrap; line-height: 1.2; color: var(--pink); }
|
||
.s-matrix .pill.dim { border-color: var(--hair); color: var(--mute); }
|
||
.s-matrix .pill.solid { background: var(--pink); color: #060507; border-color: var(--pink); font-weight: 500; }
|
||
|
||
/* ============== 8. VOICES · QUOTE ======================== */
|
||
.s-quote .body { position: absolute; inset: 140px 60px 140px 60px; display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: center; }
|
||
.s-quote .left { display: flex; flex-direction: column; gap: 28px; }
|
||
.s-quote .left .qmark { font-family: "Instrument Serif", serif; font-style: italic; font-size: 320px; color: var(--pink); line-height: .65; }
|
||
.s-quote .left .lab { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
|
||
.s-quote .right blockquote { font-family: "Instrument Serif", serif; font-style: italic; font-size: 92px; line-height: 1.05; color: var(--paper); letter-spacing: -.005em; }
|
||
.s-quote .right blockquote em { color: var(--pink); font-style: italic; }
|
||
.s-quote .attr { display: flex; align-items: baseline; gap: 24px; margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--pink); }
|
||
.s-quote .attr .who { font-family: "Instrument Serif", serif; font-style: italic; font-size: 48px; color: var(--paper); }
|
||
.s-quote .attr .role { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
|
||
|
||
/* ============== 9. ENCORE · CTA ========================== */
|
||
.s-cta .body { position: absolute; inset: 140px 60px 140px 60px; display: flex; flex-direction: column; justify-content: space-between; }
|
||
.s-cta .top { display: flex; flex-direction: column; gap: 12px; }
|
||
.s-cta .top .pre { font-family: "JetBrains Mono", monospace; font-size: 26px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
|
||
.s-cta .top h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 140px; line-height: 1.04; color: var(--paper); letter-spacing: -.015em; padding-bottom: .1em; }
|
||
.s-cta .top h2 em { color: var(--pink); font-style: italic; }
|
||
.s-cta .bottom { display: grid; grid-template-columns: repeat(3, 1fr) 280px; gap: 48px; align-items: end; }
|
||
.s-cta .step { display: flex; flex-direction: column; gap: 16px; padding-top: 22px; border-top: 1px solid var(--pink); }
|
||
.s-cta .step .n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 64px; color: var(--pink); line-height: 1; }
|
||
.s-cta .step h3 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 44px; color: var(--paper); line-height: 1.05; }
|
||
.s-cta .step p { font-family: "Inter", sans-serif; font-size: 22px; color: var(--mute); line-height: 1.5; font-weight: 300; }
|
||
.s-cta .qr { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
|
||
.s-cta .qr .box { width: 180px; height: 180px; background: var(--paper); padding: 12px; }
|
||
.s-cta .qr .box svg { width: 100%; height: 100%; }
|
||
.s-cta .qr .lab { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
|
||
.s-cta .qr .url { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .04em; color: var(--pink); }
|
||
|
||
/* ============== 10. THE SYSTEM · DESIGN SYSTEM ============ */
|
||
.s-system .body { position: absolute; inset: 140px 60px 140px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
|
||
.s-system .head { position: absolute; left: 60px; right: 60px; top: 140px; }
|
||
.s-system .head h2 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 132px; color: var(--paper); }
|
||
.s-system .head h2 em { color: var(--pink); font-style: italic; }
|
||
.s-system .body { top: 320px; }
|
||
.s-system .panel { display: flex; flex-direction: column; gap: 22px; padding-top: 22px; border-top: 1px solid var(--pink); }
|
||
.s-system .panel h3 { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
|
||
.s-system .palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
||
.s-system .swatch { display: flex; flex-direction: column; gap: 8px; }
|
||
.s-system .swatch .chip { aspect-ratio: 1; border: 1px solid var(--hair); }
|
||
.s-system .swatch .name { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .08em; color: var(--paper); }
|
||
.s-system .swatch .hex { font-family: "JetBrains Mono", monospace; font-size: 22px; color: var(--mute); }
|
||
.s-system .typespec { display: flex; flex-direction: column; gap: 14px; }
|
||
.s-system .typerow { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dashed var(--hair); }
|
||
.s-system .typerow .meta { font-family: "JetBrains Mono", monospace; font-size: 22px; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
|
||
.s-system .typerow .sample { color: var(--paper); }
|
||
.s-system .typerow .sample.script { font-family: "Instrument Serif", serif; font-style: italic; color: var(--pink); }
|
||
.s-system .typerow .sample.disp { font-family: "Instrument Serif", serif; font-style: italic; }
|
||
.s-system .typerow .sample.body { font-family: "Inter", sans-serif; font-weight: 300; }
|
||
.s-system .typerow .sample.mono { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
|
||
.s-system .rules { display: flex; flex-direction: column; gap: 12px; }
|
||
.s-system .rules .item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
|
||
.s-system .rules .item .n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 48px; color: var(--pink); line-height: .9; }
|
||
.s-system .rules .item p { font-family: "Inter", sans-serif; font-size: 22px; color: var(--paper); line-height: 1.45; font-weight: 300; }
|
||
.s-system .rules .item p strong { color: var(--pink); font-weight: 500; font-style: italic; font-family: "Instrument Serif", serif; font-size: 26px; padding-right: 6px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<deck-stage>
|
||
|
||
<!-- ============== 1. COVER · AFTER HOURS ===================== -->
|
||
<section class="slide s-cover" data-label="01 Cover" data-om-validate="false">
|
||
<div class="runner">
|
||
<span class="brand">Maison Nocturne</span>
|
||
<span>Vol. XIV · A/W 2026</span>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="pre">A Field Report on Late-Night Couture</div>
|
||
<div class="title-wrap">
|
||
<div class="title">After<span class="l2">Hours.</span></div>
|
||
</div>
|
||
<div class="sub" style="margin:0"></div>
|
||
</div>
|
||
<div class="lower">
|
||
<div class="col">
|
||
<div class="lab">Edition</div>
|
||
<div class="val">No. 14</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="lab">Director</div>
|
||
<div class="val alt">L. Marchetti</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="lab">Locale</div>
|
||
<div class="val alt">Paris · 11<sup style="font-size:.5em">e</sup></div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="lab">Date</div>
|
||
<div class="val">May 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span>Maison Nocturne · Confidential</span>
|
||
<span class="pageno"><em>01</em> / 09</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== 2. THE INDEX ============================== -->
|
||
<section class="slide s-toc" data-label="02 The Index" data-om-validate="false">
|
||
<div class="runner"><span class="brand">After Hours</span><span>The Index</span></div>
|
||
<div class="body">
|
||
<h1>The<br><span class="small">Index.</span></h1>
|
||
<div class="rows">
|
||
<div class="row">
|
||
<div class="num">01</div>
|
||
<div>
|
||
<div class="title">By the Numbers</div>
|
||
<div class="desc">Five figures that shape the season.</div>
|
||
</div>
|
||
<div class="meta">Stats · pp. 14</div>
|
||
</div>
|
||
<div class="row cur">
|
||
<div class="num">02</div>
|
||
<div>
|
||
<div class="title">Movements</div>
|
||
<div class="desc">A study in cuts, color, and silhouette.</div>
|
||
</div>
|
||
<div class="meta">Section · pp. 22</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="num">03</div>
|
||
<div>
|
||
<div class="title">The Curve</div>
|
||
<div class="desc">Twelve weeks of after-hours behavior.</div>
|
||
</div>
|
||
<div class="meta">Chart · pp. 36</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="num">04</div>
|
||
<div>
|
||
<div class="title">The Field</div>
|
||
<div class="desc">Where we sit among the houses we admire.</div>
|
||
</div>
|
||
<div class="meta">Matrix · pp. 48</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="num">05</div>
|
||
<div>
|
||
<div class="title">Voices & Encore</div>
|
||
<div class="desc">Critics, clients, and what comes next.</div>
|
||
</div>
|
||
<div class="meta">pp. 60–72</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>Maison Nocturne</span><span class="pageno"><em>02</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 3. BY THE NUMBERS ========================= -->
|
||
<section class="slide s-stats" data-label="03 By the Numbers" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 01</span><span>By the Numbers · A/W26</span></div>
|
||
<div class="body">
|
||
<div class="left">
|
||
<div class="kicker">By the Numbers</div>
|
||
<div>
|
||
<h2>A season<br>told in<br><em>five</em> figures.</h2>
|
||
</div>
|
||
<p>Read top to bottom. Every figure was reported by atelier directors during the eight-week previewing window and represents the house ledger only.</p>
|
||
</div>
|
||
<div class="right">
|
||
<div class="stat">
|
||
<div class="figure">42<sup>%</sup></div>
|
||
<div class="meta">
|
||
<div class="lab">Couture · Repeat Clients</div>
|
||
<div class="desc">Patrons who returned within ninety days for a second commission.</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="figure">3.8<sup>×</sup></div>
|
||
<div class="meta">
|
||
<div class="lab">Atelier Throughput</div>
|
||
<div class="desc">Pieces released per machinist per week, measured against the prior Spring book.</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="figure">€1.4<sup>M</sup></div>
|
||
<div class="meta">
|
||
<div class="lab">Average Ticket · Vault</div>
|
||
<div class="desc">Mean spend per private appointment in the Vault programme this quarter.</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="figure">86<sup>%</sup></div>
|
||
<div class="meta">
|
||
<div class="lab">Reservation Rate</div>
|
||
<div class="desc">Show seats filled before the public window opened.</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="figure">07</div>
|
||
<div class="meta">
|
||
<div class="lab">New Cities, A/W</div>
|
||
<div class="desc">Markets opened with a flagship boutique since the prior season.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>Source · Atelier Ledger Q1</span><span class="pageno"><em>03</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 4. MOVEMENTS · SECTION DIVIDER ============= -->
|
||
<section class="slide s-section" data-label="04 Movements" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 02</span><span>Movements</span></div>
|
||
<div class="label-l">Maison Nocturne · Vol. XIV</div>
|
||
<div class="body">
|
||
<div class="num">02</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="kicker">Movements</div>
|
||
<h2>A study<br>in cuts<br>& color.</h2>
|
||
<p>Three silhouettes carry the season — the column, the cape, and the cinch. Each is annotated in the chapters that follow.</p>
|
||
</div>
|
||
<div class="footer"><span>Chapter 02 of 05</span><span class="pageno"><em>04</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 5. THE CURVE · CHART ====================== -->
|
||
<section class="slide s-chart" data-label="05 The Curve" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 03</span><span>The Curve</span></div>
|
||
<div class="head">
|
||
<h2>Twelve weeks of <em>after-hours</em><br>behavior.</h2>
|
||
<div class="legend">
|
||
<div class="li"><i></i>House · A/W26</div>
|
||
<div class="li b"><i></i>Sector benchmark</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout">
|
||
<div class="num">+38<span style="font-size:.5em;color:var(--paper)">%</span></div>
|
||
<div class="lab">Week 09 inflection</div>
|
||
<div class="desc">After the editorial dropped, walk-ins to the rue Saint-Honoré flagship doubled within seventy-two hours.</div>
|
||
</div>
|
||
<div class="plotwrap">
|
||
<div class="yax">
|
||
<span>200</span><span>150</span><span>100</span><span>50</span><span>0</span>
|
||
</div>
|
||
<div class="plot">
|
||
<div class="gline" style="top:0%"></div>
|
||
<div class="gline" style="top:25%"></div>
|
||
<div class="gline" style="top:50%"></div>
|
||
<div class="gline" style="top:75%"></div>
|
||
<svg viewBox="0 0 1200 400" preserveAspectRatio="none">
|
||
<!-- benchmark (dim white) -->
|
||
<polyline fill="none" stroke="rgba(245,237,241,.45)" stroke-width="2" stroke-dasharray="6 6"
|
||
points="0,310 100,300 200,295 300,290 400,285 500,280 600,272 700,265 800,260 900,255 1000,250 1100,245 1200,242"/>
|
||
<!-- house line (pink) -->
|
||
<polyline fill="none" stroke="#ED3D8C" stroke-width="3"
|
||
points="0,330 100,318 200,300 300,288 400,272 500,250 600,232 700,210 800,140 900,120 1000,108 1100,98 1200,92"/>
|
||
<!-- inflection marker -->
|
||
<circle cx="800" cy="140" r="9" fill="#ED3D8C"/>
|
||
<circle cx="800" cy="140" r="18" fill="none" stroke="#ED3D8C" stroke-width="1.5" opacity=".5"/>
|
||
<line x1="800" y1="140" x2="800" y2="400" stroke="#ED3D8C" stroke-width="1" stroke-dasharray="4 6" opacity=".5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="xax">
|
||
<span>W01</span><span>W02</span><span>W03</span><span>W04</span><span>W05</span><span>W06</span><span>W07</span><span>W08</span><span style="color:var(--pink)">W09</span><span>W10</span><span>W11</span><span>W12</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>Source · House register · Index FY25=100</span><span class="pageno"><em>05</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 6. PROCESS · DIAGRAM ====================== -->
|
||
<section class="slide s-process" data-label="06 Process" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 04</span><span>The Method</span></div>
|
||
<div class="head">
|
||
<h2>The<br><em>method.</em></h2>
|
||
<div class="lead">From sketchbook to runway in five movements. The atelier's tempo is dictated by the cloth, never the calendar.</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="step">
|
||
<div class="n">01</div>
|
||
<h3>Brief</h3>
|
||
<p>The house director and head couturier convene with three muses to set the season's mood.</p>
|
||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M14 5l7 7-7 7"/></svg>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">02</div>
|
||
<h3>Pattern</h3>
|
||
<p>Toiles cut in calico. Each silhouette is fitted three times before approval is granted on the floor.</p>
|
||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M14 5l7 7-7 7"/></svg>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">03</div>
|
||
<h3>Atelier</h3>
|
||
<p>Cloth is cut on the bias. Hand-stitched seams. No piece leaves the atelier without two signatures.</p>
|
||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M14 5l7 7-7 7"/></svg>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">04</div>
|
||
<h3>Fitting</h3>
|
||
<p>Private appointments held by candlelight in the Vault. Clients touch the cloth before the look is final.</p>
|
||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M14 5l7 7-7 7"/></svg>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">05</div>
|
||
<h3>Runway</h3>
|
||
<p>Twelve looks shown. The collection is sold by appointment for ninety days before the public window opens.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline">
|
||
<span>Wk 01–02 <em>Brief</em></span>
|
||
<span>Wk 03–06 <em>Pattern</em></span>
|
||
<span>Wk 07–10 <em>Atelier</em></span>
|
||
<span>Wk 11–12 <em>Fitting</em></span>
|
||
<span>Wk 13 <em>Runway</em></span>
|
||
</div>
|
||
<div class="footer"><span>Atelier Method · House Standard</span><span class="pageno"><em>06</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 7. THE FIELD · COMPARISON MATRIX ========== -->
|
||
<section class="slide s-matrix" data-label="07 The Field" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 05</span><span>The Field</span></div>
|
||
<div class="head">
|
||
<h2>The<br><em>field</em>, in five rows.</h2>
|
||
<div class="source">Sourced · house registers, public filings, three trade press indices · A/W 2026</div>
|
||
</div>
|
||
<div class="table">
|
||
<div class="cell colhead">Dimension</div>
|
||
<div class="cell colhead" style="color:var(--pink)">Maison Nocturne</div>
|
||
<div class="cell colhead">House A</div>
|
||
<div class="cell colhead">House B</div>
|
||
|
||
<div class="cell label">Atelier model</div>
|
||
<div class="cell us"><span class="pill solid">In-house · Paris</span></div>
|
||
<div class="cell"><span class="pill">Hybrid · 2 cities</span></div>
|
||
<div class="cell"><span class="pill dim">Outsourced</span></div>
|
||
|
||
<div class="cell label">Lead time</div>
|
||
<div class="cell us">13 weeks, hand-stitched</div>
|
||
<div class="cell">9 weeks, partial machine</div>
|
||
<div class="cell">6 weeks, full machine</div>
|
||
|
||
<div class="cell label">Vault programme</div>
|
||
<div class="cell us"><span class="pill solid">Yes · invitation</span></div>
|
||
<div class="cell"><span class="pill dim">No</span></div>
|
||
<div class="cell"><span class="pill">By appointment</span></div>
|
||
|
||
<div class="cell label">Repeat client share</div>
|
||
<div class="cell us"><strong style="color:var(--pink);font-family:'Instrument Serif';font-style:italic;font-size:32px">42%</strong></div>
|
||
<div class="cell">28%</div>
|
||
<div class="cell">19%</div>
|
||
|
||
<div class="cell label" style="border-bottom:0">Public window</div>
|
||
<div class="cell us" style="border-bottom:0">90 days post-show</div>
|
||
<div class="cell" style="border-bottom:0">30 days post-show</div>
|
||
<div class="cell" style="border-bottom:0">Same day</div>
|
||
</div>
|
||
<div class="footer"><span>Comparison · A/W 2026 disclosed</span><span class="pageno"><em>07</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 8. VOICES · QUOTE ========================= -->
|
||
<section class="slide s-quote" data-label="08 Voices" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 06</span><span>Voices</span></div>
|
||
<div class="body">
|
||
<div class="left">
|
||
<div class="qmark">"</div>
|
||
<div class="lab">Voices · Issue 14</div>
|
||
</div>
|
||
<div class="right">
|
||
<blockquote>
|
||
The house dresses you for an <em>evening</em> that hasn't begun. You leave the fitting and somewhere a room is already <em>waiting</em>.
|
||
</blockquote>
|
||
<div class="attr">
|
||
<div class="who">— Camille Aubry</div>
|
||
<div class="role">Editor-in-chief · Le Soir Parisien</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>Voices · Le Soir Parisien</span><span class="pageno"><em>08</em> / 09</span></div>
|
||
</section>
|
||
|
||
<!-- ============== 9. ENCORE · CTA =========================== -->
|
||
<section class="slide s-cta" data-label="09 Encore" data-om-validate="false">
|
||
<div class="runner"><span class="brand">Chapter 07</span><span>Encore</span></div>
|
||
<div class="body">
|
||
<div class="top">
|
||
<div class="pre">An invitation</div>
|
||
<h2><em>Encore.</em><br>The list opens<br>this Friday.</h2>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="step">
|
||
<div class="n">01</div>
|
||
<h3>Reserve</h3>
|
||
<p>Hold a Vault appointment for the week of 24 May. Couture only.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">02</div>
|
||
<h3>Preview</h3>
|
||
<p>Three looks shown by candlelight in the rue Saint-Honoré room.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="n">03</div>
|
||
<h3>Commission</h3>
|
||
<p>One piece commissioned to your measure, delivered before September.</p>
|
||
</div>
|
||
<div class="qr">
|
||
<div class="box">
|
||
<svg viewBox="0 0 25 25" shape-rendering="crispEdges">
|
||
<rect width="25" height="25" fill="#F5EDF1"/>
|
||
<g fill="#060507">
|
||
<rect x="0" y="0" width="7" height="7"/><rect x="2" y="2" width="3" height="3" fill="#F5EDF1"/>
|
||
<rect x="18" y="0" width="7" height="7"/><rect x="20" y="2" width="3" height="3" fill="#F5EDF1"/>
|
||
<rect x="0" y="18" width="7" height="7"/><rect x="2" y="20" width="3" height="3" fill="#F5EDF1"/>
|
||
<rect x="9" y="0" width="1" height="1"/><rect x="11" y="0" width="2" height="1"/><rect x="14" y="1" width="1" height="2"/>
|
||
<rect x="8" y="3" width="2" height="2"/><rect x="12" y="3" width="3" height="1"/><rect x="9" y="5" width="1" height="2"/>
|
||
<rect x="11" y="5" width="2" height="2"/><rect x="14" y="6" width="2" height="1"/>
|
||
<rect x="0" y="9" width="2" height="1"/><rect x="3" y="9" width="2" height="2"/><rect x="6" y="9" width="3" height="1"/>
|
||
<rect x="10" y="9" width="2" height="3"/><rect x="14" y="9" width="2" height="2"/><rect x="17" y="9" width="2" height="1"/>
|
||
<rect x="20" y="9" width="3" height="2"/><rect x="0" y="12" width="3" height="1"/><rect x="5" y="12" width="2" height="2"/>
|
||
<rect x="9" y="12" width="2" height="1"/><rect x="13" y="12" width="3" height="2"/><rect x="18" y="12" width="2" height="3"/>
|
||
<rect x="22" y="12" width="2" height="1"/><rect x="0" y="15" width="2" height="2"/><rect x="4" y="15" width="3" height="1"/>
|
||
<rect x="9" y="15" width="3" height="2"/><rect x="14" y="15" width="2" height="2"/><rect x="20" y="15" width="2" height="2"/>
|
||
<rect x="9" y="18" width="2" height="1"/><rect x="13" y="18" width="3" height="3"/><rect x="18" y="18" width="2" height="3"/>
|
||
<rect x="22" y="18" width="2" height="2"/><rect x="9" y="21" width="3" height="2"/><rect x="17" y="22" width="3" height="2"/>
|
||
<rect x="22" y="22" width="3" height="3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="lab">Scan to reserve</div>
|
||
<div class="url">nocturne.house/aw26</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"><span>RSVP closes 22 May · Strict</span><span class="pageno"><em>09</em> / 09</span></div>
|
||
</section>
|
||
|
||
</deck-stage>
|
||
|
||
<script type="application/json" id="speaker-notes">
|
||
[
|
||
"Cover slide. After Hours, an editorial-style deck for a fashion house presentation. Italic script display type, hot pink on deep black with a subtle radial spotlight and film grain.",
|
||
"The Index. Five chapters laid out as an editorial table of contents.",
|
||
"By the Numbers. Five hero figures, italic script numerals on pink, supporting copy in Inter Light.",
|
||
"Movements. The big 02 acts as the section divider, mirrored by a small kicker and copy on the right.",
|
||
"The Curve. A line chart with one pink hero series and a dashed white benchmark, plus a callout block for the inflection.",
|
||
"Process. Five steps with italic numerals, divider rules, and a horizontal timeline.",
|
||
"The Field. Comparison matrix using the pink-tinted column to spotlight our house.",
|
||
"Voices. Pull quote in italic script, with one or two phrases pinked for emphasis.",
|
||
"Encore. The CTA — three steps and a QR code in paper-on-ink."
|
||
]
|
||
</script>
|
||
</body>
|
||
</html>
|