Portable output with no Error Studio runtime. Copy it into the product that actually owns the failure.
"use client";
export default function ErrorPage() {
return (
<main style={styles.page}>
<nav style={styles.nav}>
<strong>northstar</strong>
<span>404</span>
</nav>
<section style={styles.content}>
<p style={styles.eyebrow}>Page not found</p>
<h1 style={styles.title}>{"This page slipped out of view."}</h1>
<p style={styles.body}>{"The address may have changed, or the page may no longer exist. You can return home or retrace your last step."}</p>
<div style={styles.actions}>
<button style={styles.primary} onClick={() => location.assign("/")}>
{"Go home"}
</button>
<button style={styles.secondary} onClick={() => history.back()}>
{"Go back"}
</button>
</div>
<p style={styles.note}>{"Nothing is wrong with your account."}</p>
<code style={styles.reference}>{"ERR-7F3A9C"}</code>
</section>
</main>
);
}
const styles = {
page: {
minHeight: "100dvh",
padding: "32px clamp(24px, 5vw, 72px)",
display: "grid",
gridTemplateRows: "auto 1fr",
background: "#f6f6f3",
color: "#151518",
fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
},
nav: { display: "flex", justifyContent: "space-between", fontSize: 14 },
content: { alignSelf: "center", maxWidth: 680, paddingBottom: "8vh" },
eyebrow: { color: "#5f6cff", fontSize: 13, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase" as const },
title: { margin: "18px 0", fontSize: "clamp(42px, 7vw, 88px)", lineHeight: .98, letterSpacing: "-.055em" },
body: { maxWidth: 560, fontSize: 17, lineHeight: 1.65, opacity: .68 },
actions: { display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" as const },
primary: { border: 0, borderRadius: 999, padding: "13px 20px", background: "#151518", color: "#fff", fontWeight: 650, cursor: "pointer" },
secondary: { border: "1px solid #d8d8d2", borderRadius: 999, padding: "13px 20px", background: "transparent", color: "inherit", fontWeight: 650, cursor: "pointer" },
note: { marginTop: 28, fontSize: 13, opacity: .54 },
reference: { display: "inline-block", marginTop: 10, fontSize: 12, opacity: .46 },
} satisfies Record<string, React.CSSProperties>;