diff --git a/app/components/page.tsx b/app/components/page.tsx index ab95d71..fd2de02 100644 --- a/app/components/page.tsx +++ b/app/components/page.tsx @@ -20,12 +20,12 @@ export default function ComponentsOverview() { {componentCategories.map((cat) => (

{cat}

-
+
{componentsIn(cat).map((c) => (
{minis[c.slug]}
diff --git a/app/full-lap/lap-run.tsx b/app/full-lap/lap-run.tsx index f9a7280..db5d566 100644 --- 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" : ""}`} /> )} @@ -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" : ""}`} /> )} @@ -183,6 +186,7 @@ export function LapRun() { ? "Held for 20 minutes. No charge yet." : undefined } + className={`transition-opacity duration-700 ${atOrPast("booked") ? "opacity-60" : ""}`} /> )} diff --git a/app/globals.css b/app/globals.css index 763f2a5..20b9f19 100644 --- 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 index 2a5bd7a..8f071e3 100644 --- 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.

-
+

@@ -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 index 33bd2c9..02cb2cc 100644 Binary files a/app/opengraph-image.png and b/app/opengraph-image.png differ diff --git a/app/page.tsx b/app/page.tsx index 2cac664..da80533 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -131,7 +131,7 @@ export default function Home() {

{/* large card: headline / flag / paragraph */} -
+

An open source design system to keep agents on track.

@@ -151,13 +151,13 @@ export default function Home() {
{/* three link cards */} -
+
{heroCards.map((card) => card.external ? ( {card.icon}
@@ -171,7 +171,7 @@ export default function Home() { {card.icon}
@@ -211,12 +211,12 @@ export default function Home() { Browse all 8 →
-
+
{teasers.map((t) => (
{minis[t.slug]}
diff --git a/app/principles/page.tsx b/app/principles/page.tsx index fb2f296..049cc55 100644 --- a/app/principles/page.tsx +++ b/app/principles/page.tsx @@ -95,6 +95,62 @@ export default function PrinciplesOverview() { ))} +

+ The design language: headlights +

+

+ 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. +

+
    +
  • + One bright thing per surface. The current + element renders at full strength; supporting context ghosts back to ~45–60%. + If everything is lit, nothing is. +
    • +
  • + The past dims, the present glows, the future is + outlined. 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. +
    • +
  • + Large calm containers. 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. +
    • +
  • + Pit-lane orange is earned. 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. +
    • +
+ +

Motion

+
    +
  • + Motion is state change, never decoration.{" "} + Every animation answers one question: what just happened, or where should I look? +
    • +
  • + Three speeds. 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. +
    • +
  • + Arrive rising, leave collapsing. New + information enters with a small rise and settle; resolved information collapses + to a receipt. Closing is always faster than opening. +
    • +
  • + Ambient means honest. Pulses mark genuinely + live processes only; no fake progress, no decorative loops. All motion respects + prefers-reduced-motion. +
    • +
+

The essentials

diff --git a/app/twitter-image.png b/app/twitter-image.png index 33bd2c9..02cb2cc 100644 Binary files a/app/twitter-image.png and b/app/twitter-image.png differ diff --git a/components/docs/preview-pane.tsx b/components/docs/preview-pane.tsx index 9fe11cd..ac986fb 100644 --- a/components/docs/preview-pane.tsx +++ b/components/docs/preview-pane.tsx @@ -112,7 +112,7 @@ export function PreviewPane({ formats, children, variants, chatPrompt }: Preview ))}
-
+
{format === "mobile" ? (