// Template detail page — ATELIER (paper engineering)
const AT_DET = {
paperCream: '#efe5d2',
paperRecipe: '#f7efe1',
blueprint: '#1a3d5c',
ink: '#1b1916',
inkDim: 'rgba(27,25,22,0.55)',
oxblood: '#8a1a1a',
gold: '#f5e6c8',
accent: '#8a4a3e',
hand: 'Caveat, cursive',
tw: 'Special Elite, IBM Plex Mono, monospace',
display: 'DM Serif Display, IBM Plex Serif, serif',
};
const D = AT_DET;
// ── component previews ──────────────────────────────────────
function ATC01_Shell() {
return (
{['events','file','workflow','audit'].map((t, i) => (
{t}
))}
· acting as M. STERLING
DOC G702 · APP 07
Riverline Plaza
UNDER REVIEW
// folder tabs · masthead · stamp · margin
);
}
function ATC02_Signin() {
return (
BY APPOINTMENT
Sign in to DrawRequest
magic link · no password
marcus@cornerstone.cap
SEND ME A LINK →
);
}
function ATC03_Actors() {
return (
// CAST · 8 ACTORS · ACTING AS · M. STERLING
{TPL_SAMPLE.actors.map((a, i) => (
{a[0]}
{a[1].split(' ')[1]}
{a[2]}
{i === 0 &&
YOU
}
))}
);
}
function ATC04_Home() {
return (
FRIDAY · MAY 15 · LATE AFTERNOON
Good afternoon, Marcus.
five things await your eye →
{[['EXPOSURE','$62.6M'],['RELEASED','$127.8K'],['FLAGS','1']].map(([l,v], i) => (
))}
1 of 1
);
}
function ATC05_List() {
return (
// INDEX · 08 DRAWS IN FLIGHT
{TPL_SAMPLE.draws.map((d, i) => (
{d[0]}
{d[1]}
{d[2]}
{d[3]}
))}
FILED
);
}
function ATC06_Detail() {
return (
DOC G702 · DRAW-2031
Riverline Plaza
$142,000
{[['CONTRACT','$ 2,377,000'],['EARNED','$ 1,585,521'],['NET','$ 127,800'],['WAIVERS','5 of 5']].map(([l,v], i) => (
))}
Diego O.
);
}
function ATC07_Form() {
return (
// SUBMIT DRAW · 03 / 05 · SCHEDULE OF VALUES
{[['03','Concrete','$ 18,400'],['04','Masonry','$ 22,800'],['05','Structural steel','$ 31,200'],['06','Drywall · L3','$ 18,400']].map((r, i) => (
{r[0]}
{r[1]}
{r[2]}
))}
← back
NEXT · WAIVERS →
);
}
function ATC08_Workflow() {
return (
// SIGNATURES · 3 OF 5
{[
['CONTRACTOR · D. ORTEGA', 'Diego Ortega', '2026·05·12', true],
['INSPECTOR · H. MENDEZ', 'Hank Mendez', '2026·05·12', true],
['LENDER · A. PATEL', 'Aisha Patel', '2026·05·13', true],
['OWNER · S. KIM', '', 'pending', false],
].map(([role, sig, date, done], i) => (
{sig || 'awaiting'}
{role}{date}
))}
);
}
function ATC09_Audit() {
return (
// LEDGER · LAST 5 ENTRIES
{TPL_SAMPLE.audit.map((a, i) => (
))}
);
}
function ATC10_Output() {
return (
// PACKET · READY · 4 PAGES
G702 · APPLICATION 07
Riverline Plaza
$142,000
{[100, 92, 78, 85].map((p, i) => (
))}
READY
);
}
function ATC11_Settings() {
const roles = ['Admin','Loan','GC','Sub','Insp','Owner'];
return (
// AUTHORIZATIONS · STAMP MATRIX
{['read','submit','approve','release'].map((p, j) => (
{p}
{roles.map((r, i) => {
const granted = (j === 0) || (i === 0) || (i < 3 && j < 3) || (i === 5 && j === 3);
return {granted ? '✓' : '·'};
})}
))}
);
}
function ATC12_Empty() {
return (
The desk is clear.
Start with a draw → invite your GC
+ INVITE GC
);
}
// === detail page ===
function TemplateDetailAtelier() {
return (
{/* HERO */}
// 02 of 06 · template
differentiator
Atelier.
The artifact is the screen. The app retreats to the margin.
Atelier renders the marquee document — the G702 packet, the BEO, the policy, the grant award letter — at full page scale, on real paper stock. Each vertical gets its own paper: blueprint cyan for construction, ruled cream for restaurants, linen for weddings, manila for compliance.
The app shrinks to folder tabs across the top, handwritten margin notes, stamps, and sticky-note actions. The customer is reading their business, not their software.
DOC G702 · APPLICATION & CERTIFICATE FOR PAYMENT
Riverline Plaza
CORNERSTONE CAPITAL · APP NO. 07 · 2026·05·31
THIS PERIOD
$142,000
NET RETAINAGE $14,200
G703 · SCHEDULE OF VALUES · 12 LINES
{[['03','Concrete','410,000','92'],['05','Structural steel','540,000','85'],['06','Drywall · L3','92,000','82'],['07','MEP rough','380,000','64'],['09','Glazing','145,000','55']].map(r => (
{r[0]}
{r[1]}
{r[2]}
{r[3]}
))}
UNDER REVIEW
Diego Ortega
SHEET 1 / 4
BANQUET · EVENT · ORDER
Whitfield & Choi
Saturday, June twenty-second
THE ALDER BARN · 187 GUESTS
{[['5:00','CEREMONY'],['7:00','DINNER'],['9:00','DANCING']].map(([t, l], i) => (
))}
) },
{ name: 'PolicyDesk', industry: 'Policy + attestation', url: 'policydesk.ustack.ai', actors: 7, signature: 'Policy as a document · multi-stage review · employee attestation', accent: D.accent,
preview: (
HR-2026-014 · ACCEPTABLE USE POLICY
Acceptable Use
v3 · effective Aug 1
1. Scope · all employees and contractors
2. Substantive changes require re-attestation
3. Reviewed annually or upon material change
APPROVED
) },
{ name: 'GrantCycle', industry: 'Grant lifecycle', url: 'grantcycle.ustack.ai', actors: 7, signature: 'LOI · application · award letter · grantee reporting', accent: D.accent,
preview: (
THE HALLOWELL FOUNDATION
Letter of Award
To: Riverside Youth Coalition
$ 120,000
over 18 months · paid quarterly
R. Hallowell, Chair
) },
]} />
);
}
window.TemplateDetailAtelier = TemplateDetailAtelier;