acaspx · acaspx · Jul 27, 2026 · Jul 27, 2026
diff --git a/app/components/page.tsx b/app/components/page.tsx
@@ -20,12 +20,12 @@ export default function ComponentsOverview() {
       {componentCategories.map((cat) => (
         <section key={cat} className="mt-12">
           <h2 className="text-sm font-medium uppercase tracking-wide text-ash">{cat}</h2>
-          <div className="mt-4 grid gap-5 md:grid-cols-2">
+          <div className="dim-siblings mt-4 grid gap-5 md:grid-cols-2">
             {componentsIn(cat).map((c) => (
               <Link
                 key={c.slug}
                 href={`/components/${c.slug}`}
-                className="group rounded-2xl border border-line bg-carbon p-5 transition-all duration-300 ease-out hover:-translate-y-1 hover:border-ash hover:shadow-[0_12px_32px_rgba(0,0,0,0.45)]"
+                className="group rounded-3xl border border-line bg-carbon p-5 transition-all duration-300 ease-out hover:-translate-y-1 hover:border-ash hover:shadow-[0_12px_32px_rgba(0,0,0,0.45)]"
               >
                 <div className="pointer-events-none">{minis[c.slug]}</div>
                 <div className="mt-4 text-[15px] font-medium text-chalk group-hover:text-pit">

diff --git a/app/full-lap/lap-run.tsx b/app/full-lap/lap-run.tsx
@@ -129,6 +129,7 @@ export function LapRun() {
           title="Start the booking run?"
           reason="I'll search, compare, and hold the best fare. Nothing gets charged without you."
           state={past("contract") || step !== "contract" ? "approved" : "awaiting"}
+          className={`transition-opacity duration-700 ${past("plan") ? "opacity-60" : ""}`}
           scope={[
             { label: "Search flights across 3 providers" },
             { label: "Hold one fare (free to cancel)" },
@@ -145,6 +146,7 @@ export function LapRun() {
                 state={past("search") ? "success" : interrupted ? "pending" : "running"}
                 elapsed={step === "search" ? tick + 1 : undefined}
                 detail={past("search") ? "14 flights found. Cheapest nonstop: $278 (JetBlue 616)." : undefined}
+                className={`transition-opacity duration-700 ${past("confidence") ? "opacity-60" : ""}`}
               />
             </motion.div>
           )}
@@ -157,6 +159,7 @@ export function LapRun() {
                 claim="JetBlue 616 is your best option: $278, nonstop, aisle available"
                 basis="price, your seat history, 92% on-time"
                 confidence={0.86}
+                className={`transition-opacity duration-700 ${atOrPast("book-gate") ? "opacity-60" : ""}`}
               />
             </motion.div>
           )}
@@ -183,6 +186,7 @@ export function LapRun() {
                       ? "Held for 20 minutes. No charge yet."
                       : undefined
                 }
+                className={`transition-opacity duration-700 ${atOrPast("booked") ? "opacity-60" : ""}`}
               />
             </motion.div>
           )}

diff --git a/app/globals.css b/app/globals.css
@@ -10,9 +10,9 @@
   --color-smoke: #9a9aa3;
   --color-ash: #7f7f8a;
   --color-signal: #34d399;
-  --color-caution: #fbbf24;
+  --color-caution: #fde047;
   --color-flag: #f87171;
-  --color-pit: #60a5fa;
+  --color-pit: #fb923c;
 }
 
 @theme inline {
@@ -30,6 +30,20 @@ html {
   background: color-mix(in srgb, var(--color-pit) 30%, transparent);
 }
 
+/* headlights language: faint dot-grid texture for large surfaces */
+.bg-dots {
+  background-image: radial-gradient(color-mix(in srgb, var(--color-line) 55%, transparent) 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+
+/* headlights language: hovering one child ghosts its siblings */
+.dim-siblings > * {
+  transition: opacity 0.35s ease;
+}
+.dim-siblings:hover > :not(:hover) {
+  opacity: 0.45;
+}
+
 :focus-visible {
   outline: 2px solid var(--color-pit);
   outline-offset: 2px;

diff --git a/app/how-it-works/page.tsx b/app/how-it-works/page.tsx
@@ -89,7 +89,7 @@ export default function HowItWorksPage() {
           where humans intervene. Design the pit well and users delegate more laps, the
           same way drivers go faster in cars with better brakes.
         </P>
-        <div className="mt-6 -mx-2 rounded-2xl border border-line bg-carbon p-4 md:p-6">
+        <div className="mt-6 -mx-2 rounded-3xl border border-line bg-carbon bg-dots p-4 md:p-6">
           <TrackLoop variant="full" className="w-full" />
         </div>
         <P>
@@ -147,9 +147,9 @@ export default function HowItWorksPage() {
   --color-smoke: #9a9aa3;    /* secondary */
   --color-ash: #7f7f8a;      /* tertiary (keep >= 4.5:1) */
   /* signals */
-  --color-pit: #60a5fa;      /* accent: swap for your brand */
+  --color-pit: #fb923c;      /* accent: swap for your brand */
   --color-signal: #34d399;   /* success */
-  --color-caution: #fbbf24;  /* attention */
+  --color-caution: #fde047;  /* attention */
   --color-flag: #f87171;     /* danger */
 }`}
           />

diff --git a/app/opengraph-image.png b/app/opengraph-image.png
diff --git a/app/page.tsx b/app/page.tsx
@@ -131,7 +131,7 @@ export default function Home() {
       <Reveal delay={0.1}>
         <div className="mt-10 grid gap-3 lg:grid-cols-[1.55fr_1fr]">
           {/* large card: headline / flag / paragraph */}
-          <div className="flex flex-col gap-7 rounded-2xl border border-line bg-carbon p-7 md:p-9">
+          <div className="flex flex-col gap-7 rounded-3xl border border-line bg-carbon bg-dots p-7 md:p-9">
             <h1 className="max-w-md text-balance text-[27px] font-semibold leading-tight tracking-tight text-chalk md:text-[33px]">
               An open source design system to keep agents on&nbsp;track.
             </h1>
@@ -151,13 +151,13 @@ export default function Home() {
           </div>
 
           {/* three link cards */}
-          <div className="grid gap-3">
+          <div className="dim-siblings grid gap-3">
             {heroCards.map((card) =>
               card.external ? (
                 <a
                   key={card.title}
                   href={card.href}
-                  className="group flex min-h-[150px] flex-col justify-between rounded-2xl border border-line bg-carbon p-6 transition-colors hover:border-ash md:min-h-[172px]"
+                  className="group flex min-h-[150px] flex-col justify-between rounded-3xl border border-line bg-carbon p-6 transition-colors hover:border-ash md:min-h-[172px]"
                 >
                   {card.icon}
                   <div>
@@ -171,7 +171,7 @@ export default function Home() {
                 <Link
                   key={card.title}
                   href={card.href}
-                  className="group flex min-h-[150px] flex-col justify-between rounded-2xl border border-line bg-carbon p-6 transition-colors hover:border-ash md:min-h-[172px]"
+                  className="group flex min-h-[150px] flex-col justify-between rounded-3xl border border-line bg-carbon p-6 transition-colors hover:border-ash md:min-h-[172px]"
                 >
                   {card.icon}
                   <div>
@@ -211,12 +211,12 @@ export default function Home() {
               Browse all 8 →
             </Link>
           </div>
-          <div className="mt-4 grid gap-3 md:grid-cols-3">
+          <div className="dim-siblings mt-4 grid gap-3 md:grid-cols-3">
             {teasers.map((t) => (
               <Link
                 key={t.slug}
                 href={`/components/${t.slug}`}
-                className="group flex flex-col gap-4 rounded-2xl border border-line bg-carbon p-5 transition-colors hover:border-ash"
+                className="group flex flex-col gap-4 rounded-3xl border border-line bg-carbon p-5 transition-colors hover:border-ash"
               >
                 <div className="pointer-events-none">{minis[t.slug]}</div>
                 <div className="mt-auto flex items-baseline justify-between">

diff --git a/app/principles/page.tsx b/app/principles/page.tsx
@@ -95,6 +95,62 @@ export default function PrinciplesOverview() {
         ))}
       </ul>
 
+      <h2 className="mt-12 font-mono text-lg font-semibold tracking-tight text-chalk">
+        The design language: headlights
+      </h2>
+      <p className="mt-3 max-w-prose text-[15px] leading-relaxed text-smoke">
+        A night race. The interface is dark and calm; light is spent only on what matters
+        right now. Attention is the scarcest resource in an agent product, so the visual
+        system is built to spend it deliberately.
+      </p>
+      <ul className="mt-4 max-w-prose space-y-3 text-[15px] leading-relaxed text-smoke">
+        <li>
+          <strong className="text-chalk">One bright thing per surface.</strong> The current
+          element renders at full strength; supporting context ghosts back to ~45–60%.
+          If everything is lit, nothing is.
+        </li>
+        <li>
+          <strong className="text-chalk">The past dims, the present glows, the future is
+          outlined.</strong> Completed work fades to smoke, the active step holds chalk with
+          a pit-orange pulse, pending work is drawn in ash outlines. Time is rendered as
+          light.
+        </li>
+        <li>
+          <strong className="text-chalk">Large calm containers.</strong> Feature surfaces use
+          24px radius, generous padding, hairline borders one step above their background,
+          and a whisper of dot-grid texture. Components inside stay tighter at 12px.
+        </li>
+        <li>
+          <strong className="text-chalk">Pit-lane orange is earned.</strong> The accent marks
+          the live thing: the running dot, the agent car, the primary action. It never
+          decorates. Caution is yellow, success is green, danger is red, and none of them
+          ever speak through color alone.
+        </li>
+      </ul>
+
+      <h2 className="mt-12 font-mono text-lg font-semibold tracking-tight text-chalk">Motion</h2>
+      <ul className="mt-4 max-w-prose space-y-3 text-[15px] leading-relaxed text-smoke">
+        <li>
+          <strong className="text-chalk">Motion is state change, never decoration.</strong>{" "}
+          Every animation answers one question: what just happened, or where should I look?
+        </li>
+        <li>
+          <strong className="text-chalk">Three speeds.</strong> Micro-feedback at ~150ms,
+          element entrances and collapses at 250–400ms with the house ease
+          (0.32, 0.72, 0, 1), ambient pulses at 1.2–1.4s. Nothing else.
+        </li>
+        <li>
+          <strong className="text-chalk">Arrive rising, leave collapsing.</strong> New
+          information enters with a small rise and settle; resolved information collapses
+          to a receipt. Closing is always faster than opening.
+        </li>
+        <li>
+          <strong className="text-chalk">Ambient means honest.</strong> Pulses mark genuinely
+          live processes only; no fake progress, no decorative loops. All motion respects
+          prefers-reduced-motion.
+        </li>
+      </ul>
+
       <h2 className="mt-12 font-mono text-lg font-semibold tracking-tight text-chalk">
         The essentials
       </h2>

diff --git a/app/twitter-image.png b/app/twitter-image.png
diff --git a/components/docs/preview-pane.tsx b/components/docs/preview-pane.tsx
@@ -112,7 +112,7 @@ export function PreviewPane({ formats, children, variants, chatPrompt }: Preview
         ))}
       </div>
 
-      <div className="rounded-2xl border border-line bg-carbon p-6">
+      <div className="rounded-3xl border border-line bg-carbon bg-dots p-6">
         {format === "mobile" ? (
           <div className="mx-auto w-[300px] rounded-[2rem] border border-line bg-track p-3 pt-6 shadow-2xl">
             <div className="mx-auto mb-3 h-1.5 w-16 rounded-full bg-barrier" aria-hidden />