@godxjp/ui 28.7.0 → 28.8.0

package/docs/showcase/acme-website.tsx

@@ -32,7 +32,7 @@ import {
   Warehouse,
 } from "lucide-react";
 
-import { Button, Text } from "@godxjp/ui/general";
+import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
 import { Avatar, AvatarFallback, Card, CardContent, CardCover } from "@godxjp/ui/data-display";
 import { Flex, ResponsiveGrid } from "@godxjp/ui/layout";
 
@@ -52,6 +52,7 @@ const THEME = `
      3.18 on --muted. It was 216 16% 80% = 1.46:1. --border is decorative chrome; it stays. */
   --border: 214 27% 90%; --input: 216 16% 55%;
   --success: 152 100% 25%; --warning: 41 73% 53%; --destructive: 11 82% 56%; --info: 203 100% 37%;
+  --letter-spacing-tight: -0.02em; /* the display tracking .tx-display/.tx-h2 hand-wrote, once */
   --radius: 0.875rem; --radius-md: 10px; --radius-lg: 14px;
   --card-radius: var(--radius); --control-radius: var(--radius);
   --shadow-color: 38 79 145;
@@ -62,33 +63,44 @@ const THEME = `
   --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-family-sans: var(--font-family-body);
   --text-brand: 41 84% 26%;          /* dark gold, eyebrows clear AA on light sections */
+  /* The glass bar, opted into once (gh#831). These two used to be a literal 0.85 alpha and a
+     literal 10px blur on .tx-navbar. futurelastic-web.tsx hand-wrote the identical pair. */
+  --topbar-background-alpha: 85%;
+  --topbar-backdrop-blur-size: 10px;
 }
 /* Marketing layout + type (a consumer's section stylesheet) */
-[data-tenant="acme-web"] .tx-shell { margin-inline: auto; width: 100%; max-width: 1200px; padding-inline: 2rem;
+[data-tenant="acme-web"] .tx-shell { margin-inline: auto; width: 100%; max-inline-size: var(--page-measure-wide);
+  padding-inline: var(--space-8);
   /* ResponsiveGrid uses @container queries, so establish the container here (PageContainer does this
    * in an app; a marketing composition provides it on its own shell). */
   container-type: inline-size; }
-[data-tenant="acme-web"] .tx-section { padding-block: 5rem; }
-[data-tenant="acme-web"] .tx-navbar { position: sticky; top: 0; z-index: 30; background: hsl(var(--background) / 0.85);
-  backdrop-filter: blur(10px); border-bottom: 1px solid hsl(var(--border)); }
+[data-tenant="acme-web"] .tx-section { padding-block: var(--space-section-band); }
+/* The sticky header IS this page's bar region, so it reads the --topbar-* glass knobs. It is not a
+   <Topbar> for one reason: the glass must span the full bleed while the bar's CONTENT stays on the
+   .tx-shell measure, and Topbar is a single flex row with no inner shell. */
+[data-tenant="acme-web"] .tx-navbar { position: sticky; inset-block-start: 0; z-index: 30;
+  background-color: hsl(var(--background) / var(--topbar-background-alpha));
+  backdrop-filter: blur(var(--topbar-backdrop-blur-size));
+  border-block-end: var(--stroke-hairline) solid hsl(var(--border)); }
 [data-tenant="acme-web"] .tx-navbar-inner { height: 72px; display: flex; align-items: center; gap: 2.25rem; }
 [data-tenant="acme-web"] .tx-brand { font-family: var(--font-family-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; color: hsl(var(--foreground)); }
 [data-tenant="acme-web"] .tx-eyebrow { font-family: var(--font-family-display); font-weight: 700; font-size: 0.8125rem;
   letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--text-brand)); }
-[data-tenant="acme-web"] .tx-display { font-family: var(--font-family-display); font-weight: 900; font-size: 3.5rem;
-  line-height: 1.05; letter-spacing: -0.02em; margin: 1rem 0; color: hsl(var(--foreground)); }
-[data-tenant="acme-web"] .tx-h2 { font-family: var(--font-family-display); font-weight: 800; font-size: 2.25rem;
-  line-height: 1.15; letter-spacing: -0.02em; margin: 0.75rem 0 0.625rem; color: hsl(var(--foreground)); }
-[data-tenant="acme-web"] .tx-lead { font-size: 1.1875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); max-width: 480px; }
+/* .tx-display / .tx-h2 / .tx-lead are GONE (gh#826). They existed only because the display type
+   ramp had tokens and no prop, so all three were a raw font-size plus the leading that has to come
+   with it. They are now Heading size="5xl", Heading size="4xl" and Text size="xl". The
+   brand face is not lost with them: base.css already points every <h1>-<h6> at
+   --font-family-display, which the token block above sets. The one knob those classes carried that
+   is genuinely brand and not scale is the display tracking, and it IS a token — set once, below. */
 /* --text-brand, not --primary (gh#643): --primary is a FILL role, and as ink it measured
    2.01:1 here. The AA-safe text tier already exists and .tx-eyebrow above already reads it. */
 [data-tenant="acme-web"] .tx-gold { color: hsl(var(--text-brand)); }
 [data-tenant="acme-web"] .tx-stat { font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; color: hsl(var(--primary)); }
-[data-tenant="acme-web"] .tx-hero-grid { display: grid; gap: 3rem; align-items: center; padding-block: 6rem; }
+[data-tenant="acme-web"] .tx-hero-grid { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-section-hero); }
 @media (min-width: 1024px) { [data-tenant="acme-web"] .tx-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
-[data-tenant="acme-web"] .tx-glow { position: absolute; inset: 0; pointer-events: none; }
-[data-tenant="acme-web"] .tx-glow-tr { background: radial-gradient(40% 50% at 88% -10%, hsl(41 73% 53% / 0.22), transparent 70%); }
-[data-tenant="acme-web"] .tx-glow-bl { background: radial-gradient(40% 50% at 12% 120%, hsl(41 73% 53% / 0.18), transparent 70%); }
+/* .tx-glow* are GONE too: .ui-brand-glow shipped with exactly this gradient and these four
+   knobs, and nothing in the repo referenced it while four sections hand-wrote it (gh#826). The
+   halo's position/size/alpha are now per-instance token overrides at the call site. */
 [data-tenant="acme-web"] .tx-field { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
   background: hsl(0 0% 100% / 0.08); border-radius: var(--radius-md); }
 [data-tenant="acme-web"] .tx-quote-total { display: flex; align-items: center; justify-content: space-between;
@@ -98,10 +110,7 @@ const THEME = `
 [data-tenant="acme-web"] .tx-footer-grid { display: grid; gap: 2.25rem; }
 @media (min-width: 768px) { [data-tenant="acme-web"] .tx-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
 [data-tenant="acme-web"] .tx-footer-bottom { display: flex; align-items: center; justify-content: space-between;
-  margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid hsl(0 0% 100% / 0.1); }
-[data-tenant="acme-web"] .tx-medallion svg { width: 1.25rem; height: 1.25rem; }
-[data-tenant="acme-web"] .tx-icon-18 { width: 1.125rem; height: 1.125rem; }
-[data-tenant="acme-web"] .tx-icon-22 { width: 1.375rem; height: 1.375rem; }
+  margin-block-start: 2.25rem; padding-block-start: var(--space-5); border-block-start: var(--stroke-hairline) solid hsl(0 0% 100% / 0.1); }
 /* Navy region: role scoping so descendants render on-dark (white text, glass cards, outline btns). */
 [data-tenant="acme-web"] .tx-navy {
   background: hsl(217 61% 12%); --foreground: 0 0% 100%;
@@ -156,19 +165,28 @@ function Hero() {
   ];
   return (
     <section className="tx-navy relative overflow-hidden">
-      <div className="tx-glow tx-glow-tr" />
+      <div
+        className="ui-brand-glow absolute inset-0"
+        style={
+          {
+            "--brand-glow-size": "40% 50%",
+            "--brand-glow-position": "88% -10%",
+            "--brand-glow-alpha": "0.22",
+          } as React.CSSProperties
+        }
+      />
       <div className={`${SHELL} tx-hero-grid relative`}>
         <Flex direction="col" gap="xl">
           <div className="tx-eyebrow">Mua hộ &amp; vận chuyển quốc tế</div>
-          <h1 className="tx-display">
+          <Heading level={1} size="5xl" weight="bold">
             Mua sắm toàn cầu,
             <br />
             <span className="tx-gold">ACME</span> lo phần còn lại.
-          </h1>
-          <p className="tx-lead">
+          </Heading>
+          <Text as="p" size="xl" tone="muted">
             Đặt mua, thanh toán và vận chuyển hàng từ Nhật, Hàn, Indonesia và Mỹ về tận nhà. Minh
             bạch chi phí, theo dõi từng bước.
-          </p>
+          </Text>
           <Flex direction="row" gap="md">
             <Button size="lg">
               Nhận báo giá miễn phí
@@ -196,9 +214,9 @@ function Hero() {
             <Flex direction="col" gap="md">
               <div className="tx-eyebrow">Ước tính phí vận chuyển</div>
               <Flex direction="col" gap="sm">
-                {fields.map(([Icon, label, value]) => (
+                {fields.map(([Glyph, label, value]) => (
                   <div key={label} className="tx-field">
-                    <Icon aria-hidden="true" className="tx-gold tx-icon-18" />
+                    <Icon as={Glyph} size="lg" className="tx-gold" />
                     <div className="min-w-0 flex-1">
                       <Text as="div" size="2xs" tone="muted">
                         {label}
@@ -207,7 +225,7 @@ function Hero() {
                         {value}
                       </Text>
                     </div>
-                    <ChevronDown aria-hidden="true" className="tx-icon-18" />
+                    <Icon as={ChevronDown} size="lg" />
                   </div>
                 ))}
                 <div className="tx-quote-total">
@@ -241,17 +259,23 @@ function SectionHead({
   return (
     <div className={center ? "mx-auto text-center" : undefined}>
       <div className="tx-eyebrow">{eyebrow}</div>
-      <h2 className="tx-h2">{title}</h2>
-      {sub ? <p className="tx-lead mx-auto">{sub}</p> : null}
+      <Heading level={2} size="4xl" weight="bold">
+        {title}
+      </Heading>
+      {sub ? (
+        <Text as="p" size="xl" tone="muted" className="mx-auto">
+          {sub}
+        </Text>
+      ) : null}
     </div>
   );
 }
 
-function Medallion({ icon: Icon }: { icon: typeof Globe }) {
+function Medallion({ icon: Glyph }: { icon: typeof Globe }) {
   return (
     <Avatar className="rounded-md">
-      <AvatarFallback className="bg-primary/10 text-primary tx-medallion rounded-md">
-        <Icon aria-hidden="true" />
+      <AvatarFallback className="bg-primary/10 text-primary rounded-md">
+        <Icon as={Glyph} size="lg" />
       </AvatarFallback>
     </Avatar>
   );
@@ -315,7 +339,7 @@ function Steps() {
       <Flex direction="col" gap="xl" className={SHELL}>
         <SectionHead eyebrow="Quy trình" title="Mua hàng quốc tế trong 4 bước" />
         <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-          {steps.map(([Icon, t, d], i) => (
+          {steps.map(([Glyph, t, d], i) => (
             <Flex direction="col" gap="md" key={t}>
               <Flex direction="row" gap="sm" align="center">
                 <Avatar>
@@ -323,7 +347,7 @@ function Steps() {
                     {i + 1}
                   </AvatarFallback>
                 </Avatar>
-                <Icon aria-hidden="true" className="text-brand tx-icon-22" />
+                <Icon as={Glyph} size="xl" className="text-brand" />
               </Flex>
               <Text as="div" weight="bold" size="lg">
                 {t}
@@ -380,10 +404,22 @@ function Routes() {
 function CtaBanner() {
   return (
     <section className="tx-navy tx-section relative overflow-hidden">
-      <div className="tx-glow tx-glow-bl" />
+      <div
+        className="ui-brand-glow absolute inset-0"
+        style={
+          {
+            "--brand-glow-size": "40% 50%",
+            "--brand-glow-position": "12% 120%",
+          } as React.CSSProperties
+        }
+      />
       <div className={`${SHELL} relative text-center`}>
-        <h2 className="tx-h2">Sẵn sàng cho đơn hàng đầu tiên?</h2>
-        <p className="tx-lead mx-auto">Tạo tài khoản miễn phí và nhận báo giá trong 5 phút.</p>
+        <Heading level={2} size="4xl" weight="bold">
+          Sẵn sàng cho đơn hàng đầu tiên?
+        </Heading>
+        <Text as="p" size="xl" tone="muted" className="mx-auto">
+          Tạo tài khoản miễn phí và nhận báo giá trong 5 phút.
+        </Text>
         <Flex direction="row" gap="md" justify="center">
           <Button size="lg">
             <UserPlus aria-hidden="true" />
@@ -406,7 +442,7 @@ function Footer() {
   ];
   return (
     <footer className="tx-navy tx-navy-deep">
-      <div className={`${SHELL} tx-footer-grid`} style={{ paddingBlock: "3.5rem 2rem" }}>
+      <div className={`${SHELL} tx-footer-grid`} style={{ paddingBlock: "3.5rem var(--space-8)" }}>
         <Flex direction="col" gap="md">
           <span className="tx-brand">
             TIXI<span className="tx-gold">MAX</span>
@@ -438,8 +474,8 @@ function Footer() {
           2026 ACME Logistics. All rights reserved.
         </Text>
         <Flex direction="row" gap="md">
-          {[Mail, Phone, Globe].map((Icon, i) => (
-            <Icon key={i} aria-hidden="true" className="text-muted-foreground tx-icon-18" />
+          {[Mail, Phone, Globe].map((Glyph, i) => (
+            <Icon key={i} as={Glyph} size="lg" tone="muted" />
           ))}
         </Flex>
       </div>

package/docs/showcase/futurelastic-web.tsx

@@ -23,7 +23,7 @@ import {
   AtSign,
 } from "lucide-react";
 
-import { Button, Text } from "@godxjp/ui/general";
+import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
 import { Avatar, AvatarFallback, Card, CardContent } from "@godxjp/ui/data-display";
 import { Flex } from "@godxjp/ui/layout";
 
@@ -46,6 +46,7 @@ const THEME = `
      a card, 3.21 on --muted. It was 36 18% 22% = 1.52:1. --border is decorative chrome; it stays. */
   --border: 36 22% 14%; --input: 36 18% 40%;
   --success: 145 63% 49%; --warning: 33 90% 44%; --destructive: 0 84% 60%; --info: 213 94% 68%;
+  --letter-spacing-tight: -0.03em; /* the display tracking .fl-display/.fl-h2 hand-wrote, once */
   --radius: 1rem; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 24px;
   --card-radius: var(--radius-2xl); --control-radius: var(--radius-lg);
   --shadow-color: 0 0 0;
@@ -54,15 +55,32 @@ const THEME = `
   --font-family-display: "Sora", system-ui, sans-serif;
   --font-family-body: "Be Vietnam Pro", system-ui, "Noto Sans JP", sans-serif;
   --font-family-sans: var(--font-family-body);
-  --font-size-display: 5rem;         /* 80px hero via text-5xl */
+  /* 80px hero. --font-size-display is the display ramp's BASE KNOB, but overriding it HERE does
+     not move the derived steps: --font-size-5xl is declared at :root as var(--font-size-display),
+     so it computes on :root and merely INHERITS down — the freeze docs/TOKENS.md names, and the
+     reason its role-mirror knobs are declared initial. The whole --font-size-* scale is built this way
+     (--font-size-lg freezes on --font-size-base identically), so it is a systemic token-tier
+     defect, not this ramp's, and not gh#826's to fix. Measured, not assumed: with only the line
+     below, <Heading size="5xl"> painted 54px here, the :root value. Setting the STEP works,
+     because this declaration is on an ancestor of the heading. */
+  --font-size-display: 5rem;
+  --font-size-5xl: 5rem;
+  /* The glass bar, opted into once (gh#831). acme-website.tsx hand-wrote the identical pair,
+     which is why these are framework knobs now and not two literals on .fl-navbar. */
+  --topbar-background-alpha: 80%;
+  --topbar-backdrop-blur-size: 12px;
   color-scheme: dark;
 }
 /* Marketing surface (consumer section stylesheet) */
 [data-tenant="futurelastic"] { background: hsl(var(--background)); color: hsl(var(--foreground)); min-height: 100vh; }
-[data-tenant="futurelastic"] .fl-shell { margin-inline: auto; width: 100%; max-width: 1140px; padding-inline: 2rem; container-type: inline-size; }
-[data-tenant="futurelastic"] .fl-section { padding-block: 5.5rem; }
-[data-tenant="futurelastic"] .fl-navbar { position: sticky; top: 0; z-index: 30; background: hsl(var(--background) / 0.8);
-  backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
+[data-tenant="futurelastic"] .fl-shell { margin-inline: auto; width: 100%; max-inline-size: var(--page-measure-wide); padding-inline: var(--space-8); container-type: inline-size; }
+[data-tenant="futurelastic"] .fl-section { padding-block: var(--space-section-band); }
+/* The sticky header IS this page's bar region, so it reads the --topbar-* glass knobs. See the
+   matching note in acme-website.tsx for why it is not a <Topbar>. */
+[data-tenant="futurelastic"] .fl-navbar { position: sticky; inset-block-start: 0; z-index: 30;
+  background-color: hsl(var(--background) / var(--topbar-background-alpha));
+  backdrop-filter: blur(var(--topbar-backdrop-blur-size));
+  border-block-end: var(--stroke-hairline) solid hsl(var(--border)); }
 /* REFLOW, NOT DECORATION (gh#643). This row was a fixed 68px flex line with no wrap, so at 320 its
    content ran to x=569.6 inside a 320px nav: every link painted OUTSIDE the navbar's own
    translucent box, over the page behind it, and axe read the white labels against the light
@@ -71,53 +89,57 @@ const THEME = `
    element looks like from the outside. min-height rather than height, so a wrapped row may be
    taller than one line and the language cluster stops overflowing the bar vertically (measured at
    320: it was 148.3px tall, starting at y=-40.2). */
-[data-tenant="futurelastic"] .fl-navbar-inner { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 2rem; row-gap: 0.75rem; padding-block: 0.75rem; }
+[data-tenant="futurelastic"] .fl-navbar-inner { min-block-size: 68px; display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-8); row-gap: var(--space-3); padding-block: var(--space-3); }
 [data-tenant="futurelastic"] .fl-brand { font-family: var(--font-family-display); font-weight: 700; font-size: 1.25rem; color: hsl(var(--foreground)); }
 [data-tenant="futurelastic"] .fl-eyebrow { font-family: var(--font-family-body); font-weight: 600; font-size: 0.75rem;
   letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--primary)); }
-[data-tenant="futurelastic"] .fl-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem;
-  border: 1px solid hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.08); border-radius: 999px;
+[data-tenant="futurelastic"] .fl-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.375rem 0.875rem;
+  border: var(--stroke-hairline) solid hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.08); border-radius: var(--radius-pill);
   font-size: 0.8125rem; font-weight: 500; color: hsl(var(--foreground)); }
-[data-tenant="futurelastic"] .fl-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(var(--primary)); }
-[data-tenant="futurelastic"] .fl-hero { position: relative; overflow: hidden; padding-block: clamp(5rem, 3rem + 9vw, 10rem); }
-[data-tenant="futurelastic"] .fl-hero-glow { position: absolute; inset: 0; pointer-events: none;
-  background: radial-gradient(60% 50% at 70% 0%, hsl(42 54% 54% / 0.12), transparent 70%); }
+[data-tenant="futurelastic"] .fl-badge .dot { inline-size: 6px; block-size: 6px; border-radius: var(--radius-pill); background: hsl(var(--primary)); }
+/* The hero band still breathes with the viewport, but both ends of the clamp are now the band/hero
+   steps rather than an eyeballed 5rem…10rem (gh#831). */
+[data-tenant="futurelastic"] .fl-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-section-band), 3rem + 9vw, var(--space-section-hero)); }
+/* The halo is .ui-brand-glow (src/styles/layout.css), which ships and was going unused. This
+   class and .fl-cta-glow now only place it and set its documented knobs. */
+[data-tenant="futurelastic"] .fl-hero-glow { position: absolute; inset: 0;
+  --brand-glow-color: 42 54% 54%; --brand-glow-size: 60% 50%; --brand-glow-position: 70% 0%; --brand-glow-alpha: 0.12; }
 [data-tenant="futurelastic"] .fl-hero-inner { position: relative; max-width: 860px; }
-[data-tenant="futurelastic"] .fl-display { font-family: var(--font-family-display); font-weight: 700; font-size: 5rem;
-  line-height: 1.05; letter-spacing: -0.03em; color: hsl(var(--foreground)); margin: 1.25rem 0; }
-[data-tenant="futurelastic"] .fl-h2 { font-family: var(--font-family-display); font-weight: 700; font-size: 2.5rem;
-  line-height: 1.1; letter-spacing: -0.02em; color: hsl(var(--foreground)); margin: 0.75rem 0; }
+/* .fl-display / .fl-h2 / .fl-lead / .fl-hero-glow / .fl-cta-glow are GONE (gh#826) — and the fact
+   that this file and acme-website.tsx, two unrelated brands, had independently written the SAME
+   five is what made them a missing API rather than brand styling. They are now
+   Heading size="5xl", Heading size="4xl", Text size="xl" and two .ui-brand-glow
+   layers. The display face still arrives through --font-family-display (base.css points every
+   <h1>-<h6> at it); the tracking is a token, set once above. */
 [data-tenant="futurelastic"] .fl-gold { color: hsl(var(--primary)); }
-[data-tenant="futurelastic"] .fl-lead { font-size: 1.25rem; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 620px; }
-[data-tenant="futurelastic"] .fl-note { font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin-top: 2.5rem; }
+[data-tenant="futurelastic"] .fl-note { font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin-block-start: var(--space-10); }
 [data-tenant="futurelastic"] .fl-head { max-width: 640px; margin-inline: auto; text-align: center; }
-[data-tenant="futurelastic"] .fl-hero-actions { margin-top: 1.75rem; }
+[data-tenant="futurelastic"] .fl-hero-actions { margin-block-start: 1.75rem; }
 [data-tenant="futurelastic"] .fl-cta-inner { position: relative; max-width: 680px; margin-inline: auto; }
 [data-tenant="futurelastic"] .fl-footer-tagline { max-width: 260px; }
-[data-tenant="futurelastic"] .fl-logocloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; }
-[data-tenant="futurelastic"] .fl-logo-item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-family-display);
+[data-tenant="futurelastic"] .fl-logocloud { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-10); }
+[data-tenant="futurelastic"] .fl-logo-item { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family-display);
   font-weight: 600; font-size: 1.0625rem; color: hsl(var(--foreground) / 0.85); }
 [data-tenant="futurelastic"] .fl-logo-item .tag { font-family: var(--font-family-body); font-weight: 500; font-size: 0.6875rem;
   letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--primary)); }
-[data-tenant="futurelastic"] .fl-section-tint { background: hsl(var(--card) / 0.5); border-block: 1px solid hsl(var(--border)); padding-block: 3rem; }
-[data-tenant="futurelastic"] .fl-bento { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
+[data-tenant="futurelastic"] .fl-section-tint { background: hsl(var(--card) / 0.5); border-block: var(--stroke-hairline) solid hsl(var(--border)); padding-block: var(--space-12); }
+[data-tenant="futurelastic"] .fl-bento { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-bento { grid-template-columns: repeat(6, 1fr); } }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-bento > .fl-cell { grid-column: span 2; } }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-bento > .fl-cell.wide { grid-column: span 4; } }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-bento > .fl-cell.half { grid-column: span 3; } }
-[data-tenant="futurelastic"] .fl-medallion svg { width: 1.5rem; height: 1.5rem; }
-[data-tenant="futurelastic"] .fl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
+[data-tenant="futurelastic"] .fl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-stats { grid-template-columns: repeat(4, 1fr); } }
 [data-tenant="futurelastic"] .fl-stat-num { font-family: var(--font-family-display); font-weight: 700; font-size: 3rem; color: hsl(var(--primary)); line-height: 1; }
-[data-tenant="futurelastic"] .fl-cta { position: relative; overflow: hidden; text-align: center; border: 1px solid hsl(var(--primary) / 0.2);
-  border-radius: var(--radius-2xl); background: hsl(var(--card)); padding: 4rem 2rem; }
-[data-tenant="futurelastic"] .fl-cta-glow { position: absolute; inset: 0; pointer-events: none;
-  background: radial-gradient(60% 80% at 50% 0%, hsl(42 54% 54% / 0.14), transparent 70%); }
-[data-tenant="futurelastic"] .fl-footer { border-top: 1px solid hsl(var(--border)); padding-block: 3.5rem 2rem; }
-[data-tenant="futurelastic"] .fl-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
+[data-tenant="futurelastic"] .fl-cta { position: relative; overflow: hidden; text-align: center; border: var(--stroke-hairline) solid hsl(var(--primary) / 0.2);
+  border-radius: var(--radius-2xl); background: hsl(var(--card)); padding: 4rem var(--space-8); }
+[data-tenant="futurelastic"] .fl-cta-glow { position: absolute; inset: 0;
+  --brand-glow-color: 42 54% 54%; --brand-glow-size: 60% 80%; --brand-glow-position: 50% 0%; --brand-glow-alpha: 0.14; }
+[data-tenant="futurelastic"] .fl-footer { border-block-start: var(--stroke-hairline) solid hsl(var(--border)); padding-block: 3.5rem var(--space-8); }
+[data-tenant="futurelastic"] .fl-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
 @container (min-width: 768px) { [data-tenant="futurelastic"] .fl-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
-[data-tenant="futurelastic"] .fl-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
-  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
+[data-tenant="futurelastic"] .fl-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
+  margin-block-start: var(--space-10); padding-block-start: var(--space-6); border-block-start: var(--stroke-hairline) solid hsl(var(--border)); }
 `;
 
 const SHELL = "fl-shell";
@@ -151,18 +173,26 @@ function Navbar() {
 function Hero() {
   return (
     <header className="fl-hero">
-      <div className="fl-hero-glow" />
+      <div
+        className="ui-brand-glow absolute inset-0"
+        style={
+          {
+            "--brand-glow-alpha": "0.12",
+            "--brand-glow-position": "70% 0%",
+          } as React.CSSProperties
+        }
+      />
       <div className={`${SHELL} fl-hero-inner`}>
         <span className="fl-badge">
           <span className="dot" /> Tech · AI · Holdings
         </span>
-        <h1 className="fl-display">
+        <Heading level={1} size="5xl" weight="bold">
           Building the <span className="fl-gold">elastic</span> infrastructure of the future.
-        </h1>
-        <p className="fl-lead">
+        </Heading>
+        <Text as="p" size="xl" tone="muted">
           Futurelastic là pháp nhân holding của nhóm công ty công nghệ &amp; AI vận hành xuyên Nhật
           Bản và Việt Nam, từ logistics, fintech đến F&amp;B và thương mại.
-        </p>
+        </Text>
         <Flex direction="row" gap="md" className="fl-hero-actions">
           <Button size="lg">Khám phá hệ sinh thái</Button>
           <Button variant="outline" size="lg">
@@ -201,11 +231,11 @@ function LogoCloud() {
   );
 }
 
-function Medallion({ icon: Icon }: { icon: typeof Boxes }) {
+function Medallion({ icon: Glyph }: { icon: typeof Boxes }) {
   return (
     <Avatar className="rounded-lg">
-      <AvatarFallback className="bg-primary/10 text-primary fl-medallion rounded-lg">
-        <Icon aria-hidden="true" />
+      <AvatarFallback className="bg-primary/10 text-primary rounded-lg">
+        <Icon as={Glyph} size="xl" />
       </AvatarFallback>
     </Avatar>
   );
@@ -247,10 +277,12 @@ function Bento() {
       <Flex direction="col" gap="xl" className={SHELL}>
         <div className="fl-head">
           <div className="fl-eyebrow">Hệ sinh thái</div>
-          <h2 className="fl-h2">Một mái nhà, nhiều mũi nhọn</h2>
-          <p className="fl-lead mx-auto">
+          <Heading level={2} size="4xl" weight="bold">
+            Một mái nhà, nhiều mũi nhọn
+          </Heading>
+          <Text as="p" size="xl" tone="muted" className="mx-auto">
             Mỗi entity tự chủ vận hành; Futurelastic cung cấp vốn, công nghệ nền và quản trị chung.
-          </p>
+          </Text>
         </div>
         <div className="fl-bento">
           {cells.map((c) => (
@@ -304,13 +336,23 @@ function Cta() {
     <section className="fl-section">
       <div className={SHELL}>
         <div className="fl-cta">
-          <div className="fl-cta-glow" />
+          <div
+            className="ui-brand-glow absolute inset-0"
+            style={
+              {
+                "--brand-glow-alpha": "0.14",
+                "--brand-glow-size": "60% 80%",
+              } as React.CSSProperties
+            }
+          />
           <Flex direction="col" gap="xl" className="fl-cta-inner">
-            <h2 className="fl-h2">Cùng xây điều mới?</h2>
-            <p className="fl-lead mx-auto">
+            <Heading level={2} size="4xl" weight="bold">
+              Cùng xây điều mới?
+            </Heading>
+            <Text as="p" size="xl" tone="muted" className="mx-auto">
               Chúng tôi tìm đối tác, nhân tài và cơ hội M&amp;A trong công nghệ, logistics và
               F&amp;B tại Nhật Bản &amp; Việt Nam.
-            </p>
+            </Text>
             <Flex direction="row" gap="md" className="justify-center">
               <Button size="lg">Đặt lịch trao đổi</Button>
               <Button variant="ghost" size="lg">