website refactor

2026-01-21 01:27:08 +01:00
parent 5f3712e5ab
commit d30a725fe7
44 changed files with 702 additions and 572 deletions
--- a/apps/website/ui/Card.tsx
+++ b/apps/website/ui/Card.tsx
@@ -7,37 +7,60 @@ export interface CardProps {
  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
  title?: string | ReactNode;
  footer?: ReactNode;
-  padding?: Spacing | number | any;
-  className?: string;
-  style?: React.CSSProperties;
-  bg?: string;
-  p?: number;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | number;
  onClick?: () => void;
-  responsiveColSpan?: { lg: number };
-  overflow?: string;
-  rounded?: string | boolean;
-  borderLeft?: boolean;
-  borderColor?: string;
-  center?: boolean;
-  transition?: string | boolean;
-  hoverBorderColor?: string;
-  border?: boolean;
-  position?: string;
-  mb?: number;
-  display?: string;
-  alignItems?: string;
-  gap?: number;
+  fullHeight?: boolean;
+  /** @deprecated Use semantic props instead. */
+  className?: string;
+  /** @deprecated Use semantic props instead. */
+  style?: React.CSSProperties;
+  /** @deprecated Use semantic props instead. */
+  p?: number;
+  /** @deprecated Use semantic props instead. */
  py?: number;
+  /** @deprecated Use semantic props instead. */
+  mb?: number;
+  /** @deprecated Use semantic props instead. */
+  bg?: string;
+  /** @deprecated Use semantic props instead. */
+  borderColor?: string;
+  /** @deprecated Use semantic props instead. */
+  hoverBorderColor?: string;
+  /** @deprecated Use semantic props instead. */
+  border?: boolean;
+  /** @deprecated Use semantic props instead. */
+  position?: string;
+  /** @deprecated Use semantic props instead. */
+  overflow?: string;
+  /** @deprecated Use semantic props instead. */
+  center?: boolean;
+  /** @deprecated Use semantic props instead. */
+  rounded?: string | boolean;
+  /** @deprecated Use semantic props instead. */
+  transition?: string | boolean;
+  /** @deprecated Use semantic props instead. */
+  group?: boolean;
+  /** @deprecated Use semantic props instead. */
+  responsiveColSpan?: { lg: number };
+  /** @deprecated Use semantic props instead. */
  backgroundColor?: string;
-  group?: boolean | any;
-  w?: string | any;
-  justifyContent?: string | any;
-  fullHeight?: boolean | any;
+  /** @deprecated Use semantic props instead. */
+  w?: string | number;
+  /** @deprecated Use semantic props instead. */
+  display?: string;
+  /** @deprecated Use semantic props instead. */
+  alignItems?: string;
+  /** @deprecated Use semantic props instead. */
+  gap?: number;
+  /** @deprecated Use semantic props instead. */
+  borderLeft?: boolean;
+  /** @deprecated Use semantic props instead. */
+  justifyContent?: string;
 }

 /**
 * Card - Redesigned for "Modern Precision" theme.
- * Includes extensive compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
 */
 export const Card = forwardRef<HTMLDivElement, CardProps>(({ 
  children, 
@@ -45,28 +68,31 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
  title,
  footer,
  padding = 'md',
-  className,
-  style,
-  bg,
-  p,
  onClick,
-  responsiveColSpan,
-  overflow,
-  rounded,
-  borderLeft,
+  fullHeight,
+  className,
+  style: styleProp,
+  p,
+  py,
+  mb,
+  bg,
  borderColor,
-  center,
-  transition,
  hoverBorderColor,
  border,
  position,
-  mb,
+  overflow,
+  center,
+  rounded,
+  transition,
+  group,
+  responsiveColSpan,
+  backgroundColor,
+  w,
  display,
  alignItems,
  gap,
-  py,
-  backgroundColor,
-  fullHeight,
+  borderLeft,
+  justifyContent,
 }, ref) => {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-sm',
@@ -83,61 +109,69 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
    'rarity-legendary': 'bg-orange-500/10 border-orange-500/50',
  };

-  const paddingClasses = {
+  const paddingClasses: Record<string, string> = {
    none: 'p-0',
    sm: 'p-2',
    md: 'p-4',
    lg: 'p-8',
  };

-  const getPaddingClass = (pad: any) => {
-    if (typeof pad === 'string') return `p-${pad}`;
-    return ''; // Handled in style
-  };
+  const classes = [
+    'border',
+    variantClasses[variant as keyof typeof variantClasses] || variantClasses.default,
+    typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : '',
+    onClick ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200' : '',
+    fullHeight ? 'h-full flex flex-col' : '',
+    group ? 'group' : '',
+    rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none'),
+    className,
+  ].filter(Boolean).join(' ');

-  const combinedStyle: React.CSSProperties = {
-    ...style,
+  const style: React.CSSProperties = {
+    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
+    ...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
+    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
+    ...(mb !== undefined ? { marginBottom: `${mb * 0.25}rem` } : {}),
    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
    ...(backgroundColor ? { backgroundColor } : {}),
-    ...(p !== undefined ? { padding: typeof p === 'number' ? `${p * 0.25}rem` : undefined } : {}),
-    ...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : undefined, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : undefined } : {}),
-    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
-    ...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
-    ...(overflow ? { overflow } : {}),
    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
-    ...(borderLeft ? { borderLeft: `4px solid ${borderColor || 'var(--ui-color-intent-primary)'}` } : {}),
+    ...(hoverBorderColor ? { '--hover-border-color': hoverBorderColor } as any : {}),
+    ...(border === false ? { border: 'none' } : {}),
+    ...(position ? { position: position as any } : {}),
+    ...(overflow ? { overflow } : {}),
    ...(center ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
    ...(typeof transition === 'string' ? { transition } : {}),
-    ...(position ? { position: position as any } : {}),
-    ...(mb !== undefined ? { marginBottom: `${mb * 0.25}rem` } : {}),
+    ...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
+    ...(w !== undefined ? { width: w } : {}),
    ...(display ? { display } : {}),
    ...(alignItems ? { alignItems } : {}),
+    ...(justifyContent ? { justifyContent } : {}),
    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
-    ...(border === false ? { border: 'none' } : {}),
-    ...(fullHeight ? { height: '100%' } : {}),
+    ...(borderLeft ? { borderLeft: `4px solid var(--ui-color-intent-primary)` } : {}),
+    ...(styleProp || {}),
  };

  return (
    <div 
      ref={ref}
-      className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} ${onClick ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)]' : ''} ${transition === true ? 'transition-all duration-200' : ''} ${rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none')} ${className || ''}`}
-      style={combinedStyle}
+      className={classes}
      onClick={onClick}
+      style={Object.keys(style).length > 0 ? style : undefined}
    >
      {title && (
-        <div className={`border-b border-[var(--ui-color-border-muted)] ${getPaddingClass(padding)}`}>
+        <div className={`border-b border-[var(--ui-color-border-muted)] ${typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : ''}`}>
          {typeof title === 'string' ? (
            <Heading level={5} weight="bold" uppercase>{title}</Heading>
          ) : title}
        </div>
      )}
      
-      <div className={`${typeof padding === 'number' || p !== undefined ? '' : getPaddingClass(padding)} ${fullHeight ? 'h-full flex flex-col' : ''}`}>
+      <div className={fullHeight ? 'h-full flex flex-col' : ''}>
        {children}
      </div>
      
      {footer && (
-        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
+        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : ''}`}>
          {footer}
        </div>
      )}
--- a/apps/website/ui/Container.tsx
+++ b/apps/website/ui/Container.tsx
@@ -2,28 +2,27 @@ import { ReactNode } from 'react';

 export interface ContainerProps {
  children: ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | any;
-  padding?: 'none' | 'sm' | 'md' | 'lg' | any;
-  py?: number | any;
-  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | any;
-  zIndex?: number | any;
-  paddingX?: number | any;
-  fullWidth?: boolean | any;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+  zIndex?: number;
+  /** @deprecated Use semantic props instead. */
+  py?: number;
 }

 /**
 * Container - Redesigned for "Modern Precision" theme.
- * Includes compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
 */
 export const Container = ({ 
  children, 
  size = 'lg',
  padding = 'md',
-  py,
+  spacing = 'none',
  position,
  zIndex,
-  paddingX,
-  fullWidth,
+  py,
 }: ContainerProps) => {
  const sizeMap = {
    sm: 'max-w-[40rem]',
@@ -40,17 +39,23 @@ export const Container = ({
    lg: 'px-8',
  };

+  const spacingMap = {
+    none: 'py-0',
+    sm: 'py-4',
+    md: 'py-8',
+    lg: 'py-12',
+    xl: 'py-16',
+  };
+
  const combinedStyle: React.CSSProperties = {
-    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
-    ...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
    ...(position ? { position } : {}),
    ...(zIndex !== undefined ? { zIndex } : {}),
-    ...(fullWidth ? { width: '100%' } : {}),
+    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
  };

  return (
    <div 
-      className={`mx-auto w-full ${sizeMap[size as keyof typeof sizeMap] || sizeMap.lg} ${paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}`}
+      className={`mx-auto w-full ${sizeMap[size]} ${paddingMap[padding]} ${spacingMap[spacing]}`}
      style={combinedStyle}
    >
      {children}
--- a/apps/website/ui/DurationField.tsx
+++ b/apps/website/ui/DurationField.tsx
@@ -33,7 +33,7 @@ export const DurationField = ({

  return (
    <Box>
-      <Text as="label" size="xs" weight="bold" variant="low" block marginBottom={1.5}>
+      <Text as="label" size="xs" weight="bold" variant="low" block>
        {label}
      </Text>
      <Box display="flex" alignItems="center" gap={4}>
--- a/apps/website/ui/FeatureItem.tsx
+++ b/apps/website/ui/FeatureItem.tsx
@@ -6,6 +6,8 @@ import { Text } from './Text';
 import { LucideIcon } from 'lucide-react';
 import { IconContainer } from './IconContainer';

+import { Icon } from './Icon';
+
 interface FeatureItemProps {
  title: string;
  description: string;
@@ -16,12 +18,12 @@ interface FeatureItemProps {
 * FeatureItem - A semantic UI component for a single feature/pillar.
 * Allowed to use Stack primitive.
 */
-export function FeatureItem({ title, description, icon: Icon }: FeatureItemProps) {
+export function FeatureItem({ title, description, icon }: FeatureItemProps) {
  return (
    <Panel variant="default" padding="lg">
      <Stack direction="col" gap={6}>
        <IconContainer>
-          <Icon className="w-5 h-5 text-[var(--ui-color-intent-primary)]" />
+          <Icon icon={icon} size={5} intent="primary" />
        </IconContainer>
        <Stack direction="col" gap={4}>
          <Heading level={3} weight="bold" uppercase>
--- a/apps/website/ui/FormSection.tsx
+++ b/apps/website/ui/FormSection.tsx
@@ -16,7 +16,7 @@ export const FormSection = ({
  return (
    <Box display="flex" flexDirection="col" gap={6}>
      <Box borderBottom paddingBottom={4}>
-        <Text weight="bold" variant="high" size="lg" marginBottom={1} block>
+        <Text weight="bold" variant="high" size="lg" block>
          {title}
        </Text>
        {description && (
--- a/apps/website/ui/Heading.tsx
+++ b/apps/website/ui/Heading.tsx
@@ -6,28 +6,41 @@ export interface HeadingProps {
  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
  align?: 'left' | 'center' | 'right';
  uppercase?: boolean;
-  intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any;
-  className?: string;
-  style?: CSSProperties;
-  mb?: number | any;
-  marginBottom?: number | any;
-  mt?: number | any;
-  marginTop?: number | any;
-  color?: string;
-  fontSize?: string | { base: string; sm?: string; md: string; lg?: string; xl?: string };
-  letterSpacing?: string;
+  intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default';
  truncate?: boolean;
-  size?: string;
  icon?: ReactNode;
  id?: string;
-  lineHeight?: string | any;
-  groupHoverColor?: string | any;
-  transition?: boolean | any;
+  /** @deprecated Use semantic props instead. */
+  className?: string;
+  /** @deprecated Use semantic props instead. */
+  style?: CSSProperties;
+  /** @deprecated Use semantic props instead. */
+  mb?: number | string;
+  /** @deprecated Use semantic props instead. */
+  marginBottom?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mt?: number | string;
+  /** @deprecated Use semantic props instead. */
+  marginTop?: number | string;
+  /** @deprecated Use semantic props instead. */
+  color?: string;
+  /** @deprecated Use semantic props instead. */
+  fontSize?: string | { base: string; sm?: string; md: string; lg?: string; xl?: string };
+  /** @deprecated Use semantic props instead. */
+  letterSpacing?: string;
+  /** @deprecated Use semantic props instead. */
+  size?: string;
+  /** @deprecated Use semantic props instead. */
+  groupHoverColor?: string;
+  /** @deprecated Use semantic props instead. */
+  lineHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  transition?: boolean;
 }

 /**
 * Heading - Redesigned for "Modern Precision" theme.
- * Includes extensive compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
 */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ 
  children, 
@@ -36,8 +49,11 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
  align = 'left',
  uppercase = false,
  intent = 'default',
+  truncate,
+  icon,
+  id,
  className,
-  style,
+  style: styleProp,
  mb,
  marginBottom,
  mt,
@@ -45,9 +61,10 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
  color,
  fontSize,
  letterSpacing,
-  truncate,
  size,
-  icon,
+  groupHoverColor,
+  lineHeight,
+  transition,
 }, ref) => {
  const Tag = `h${level}` as const;
  
@@ -76,8 +93,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
  };

  const getResponsiveFontSize = (fs: HeadingProps['fontSize']) => {
-    if (!fs) return '';
-    if (typeof fs === 'string') return ''; // Handled in style
+    if (!fs || typeof fs === 'string') return '';
    const classes = [];
    if (fs.base) classes.push(`text-${fs.base}`);
    if (fs.sm) classes.push(`sm:text-${fs.sm}`);
@@ -94,22 +110,25 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
    align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
    uppercase ? 'uppercase tracking-widest' : '',
    truncate ? 'truncate' : '',
+    transition ? 'transition-all duration-200' : '',
+    color?.startsWith('text-') ? color : '',
    className,
  ].join(' ');

  const combinedStyle: React.CSSProperties = {
-    ...style,
    ...(mb !== undefined ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
    ...(marginBottom !== undefined ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
    ...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
    ...(marginTop !== undefined ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
-    ...(color ? { color } : {}),
+    ...(color && !color.startsWith('text-') ? { color } : {}),
    ...(letterSpacing ? { letterSpacing } : {}),
    ...(typeof fontSize === 'string' ? { fontSize } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
+    ...(styleProp || {}),
  };

  return (
-    <Tag ref={ref} className={classes} style={combinedStyle}>
+    <Tag ref={ref} className={classes} style={Object.keys(combinedStyle).length > 0 ? combinedStyle : undefined} id={id}>
      <div className="flex items-center gap-2">
        {icon}
        {children}
--- a/apps/website/ui/InfoItem.tsx
+++ b/apps/website/ui/InfoItem.tsx
@@ -22,10 +22,10 @@ export const InfoItem = ({
        <Icon icon={icon} size={4} intent={intent as any} />
      </Box>
      <Box>
-        <Text size="xs" variant="low" block marginBottom={0.5} style={{ fontSize: '10px' }}>
+        <Text size="xs" variant="low" block style={{ fontSize: '10px' }}>
          {label}
        </Text>
-        <Text size="xs" weight="medium" variant="high" block className="truncate">
+        <Text size="xs" weight="medium" variant="high" block truncate>
          {value}
        </Text>
      </Box>
--- a/apps/website/ui/LandingHero.tsx
+++ b/apps/website/ui/LandingHero.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Section } from './Section';
 import { Container } from './Container';
-import { Box } from './Box';
+import { Stack } from './Stack';
 import { Glow } from './Glow';
 import { Heading } from './Heading';
 import { Text } from './Text';
@@ -37,7 +37,7 @@ export function LandingHero({
      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
      
      <Container>
-        <Box display="flex" flexDirection="col" gap={8} maxWidth="3xl">
+        <Stack gap={8} maxWidth="3xl">
          <Text size="xs" weight="bold" uppercase variant="primary">
            {subtitle}
          </Text>
@@ -68,7 +68,7 @@ export function LandingHero({
              {secondaryAction.label}
            </Button>
          </ButtonGroup>
-        </Box>
+        </Stack>
      </Container>
    </Section>
  );
--- a/apps/website/ui/LandingItems.tsx
+++ b/apps/website/ui/LandingItems.tsx
@@ -24,7 +24,7 @@ export const LandingItem = ({
          <Icon icon={icon} size={6} intent={intent} />
        </Box>
        <Box>
-          <Text weight="bold" variant="high" size="lg" marginBottom={2} block>
+          <Text weight="bold" variant="high" size="lg" block>
            {title}
          </Text>
          <Text variant="low" leading="relaxed">
--- a/apps/website/ui/LeagueCard.tsx
+++ b/apps/website/ui/LeagueCard.tsx
@@ -21,7 +21,7 @@ export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: League
    <Card 
      variant="precision" 
      onClick={onClick} 
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      fullHeight
      padding="none"
    >
      <Box height="10rem" position="relative" overflow="hidden">
--- a/apps/website/ui/NotificationContent.tsx
+++ b/apps/website/ui/NotificationContent.tsx
@@ -11,7 +11,7 @@ export interface NotificationStatProps {

 export const NotificationStat = ({ label, value, intent = 'low' }: NotificationStatProps) => (
  <Box bg="var(--ui-color-bg-base)" padding={4} style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
-    <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>{label}</Text>
+    <Text size="xs" variant="low" weight="bold" uppercase block>{label}</Text>
    <Text size="2xl" weight="bold" variant={intent} block>{value}</Text>
  </Box>
 );
@@ -27,7 +27,7 @@ export const NotificationDeadline = ({ label, deadline, icon }: NotificationDead
    <Icon icon={icon} size={5} intent="warning" />
    <Box>
      <Text size="sm" weight="bold" variant="warning" block uppercase>{label}</Text>
-      <Text size="xs" variant="low" block marginTop={0.5}>{deadline}</Text>
+      <Text size="xs" variant="low" block>{deadline}</Text>
    </Box>
  </Box>
 );
--- a/apps/website/ui/PageHeader.tsx
+++ b/apps/website/ui/PageHeader.tsx
@@ -31,26 +31,26 @@ export function PageHeader({
      justifyContent="space-between" 
      gap={6} 
      borderBottom="1px solid var(--ui-color-border-muted)"
-      paddingBottom={8}
+      paddingBottom={6}
    >
      <Box>
-        <Box display="flex" alignItems="center" gap={3} marginBottom={2}>
+        <Stack direction="row" align="center" gap={4} marginBottom={2}>
          {icon ? (
            <Icon icon={icon} size={8} intent="primary" />
          ) : (
            <Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
          )}
-          <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </Box>
+          <Heading level={1} weight="bold" uppercase letterSpacing="tight">{title}</Heading>
+        </Stack>
        {description && (
-          <Text variant="low" size="lg" uppercase mono letterSpacing="0.2em">
+          <Text variant="low" size="lg" uppercase mono letterSpacing="widest">
            {description}
          </Text>
        )}
      </Box>
      
      {action && (
-        <Box display="flex" alignItems="center">
+        <Box display="flex" alignItems="center" paddingBottom={1}>
          {action}
        </Box>
      )}
--- a/apps/website/ui/ProfileCard.tsx
+++ b/apps/website/ui/ProfileCard.tsx
@@ -16,7 +16,7 @@ export const ProfileCard = ({ identity, stats, actions, variant = 'default', onC
      variant={variant} 
      padding="md" 
      onClick={onClick} 
-      className="h-full flex flex-col gap-6 transition-all duration-200 hover:border-[var(--ui-color-border-bright)]"
+      fullHeight
    >
       <Box display="flex" justifyContent="between" alignItems="start" gap={4}>
         <Box flex={1} minWidth="0">
--- a/apps/website/ui/Section.tsx
+++ b/apps/website/ui/Section.tsx
@@ -4,13 +4,12 @@ import { Box } from './Box';
 export interface SectionProps {
  children: ReactNode;
  variant?: 'default' | 'dark' | 'muted';
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  id?: string;
  minHeight?: string;
-  py?: number;
  fullWidth?: boolean;
  maxWidth?: string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  /** @deprecated Use semantic props instead. */
  className?: string;
 }

@@ -20,10 +19,9 @@ export const Section = ({
  padding = 'md',
  id,
  minHeight,
-  py,
-  className,
  fullWidth = false,
-  maxWidth = '80rem'
+  maxWidth = '80rem',
+  className,
 }: SectionProps) => {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-base)]',
@@ -36,18 +34,18 @@ export const Section = ({
    sm: 'py-8',
    md: 'py-16',
    lg: 'py-24',
+    xl: 'py-32',
  };

  const classes = [
    variantClasses[variant],
-    py !== undefined ? '' : paddingClasses[padding],
+    paddingClasses[padding],
    className,
  ].join(' ');

  return (
    <section id={id} className={classes} style={{ 
      ...(minHeight ? { minHeight } : {}),
-      ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {})
    }}>
      {fullWidth ? (
        children
--- a/apps/website/ui/StatItem.tsx
+++ b/apps/website/ui/StatItem.tsx
@@ -16,7 +16,7 @@ export const StatItem = ({
 }: StatItemProps) => {
  return (
    <Box textAlign={align}>
-      <Text size="xs" variant="low" block marginBottom={0.5}>{label}</Text>
+      <Text size="xs" variant="low" block>{label}</Text>
      <Text size="sm" weight="semibold" variant={intent}>{value}</Text>
    </Box>
  );
--- a/apps/website/ui/Text.tsx
+++ b/apps/website/ui/Text.tsx
@@ -5,69 +5,106 @@ export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'

 export interface TextProps {
  children: ReactNode;
-  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit' | any;
-  size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize } | any;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | any;
+  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
+  size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize };
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
  as?: ElementType;
-  align?: 'left' | 'center' | 'right' | any;
+  align?: 'left' | 'center' | 'right';
  mono?: boolean;
+  font?: 'sans' | 'mono';
  uppercase?: boolean;
-  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | any;
+  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
  block?: boolean;
  truncate?: boolean;
-  mt?: number | any;
-  mb?: number | any;
-  ml?: number | any;
-  mr?: number | any;
-  marginTop?: number | any;
-  marginBottom?: number | any;
-  font?: 'sans' | 'mono' | string;
-  color?: string;
-  letterSpacing?: string;
-  lineHeight?: string | number;
-  flexGrow?: number;
-  flexShrink?: number;
-  lineClamp?: number;
-  display?: string | ResponsiveValue<string | any>;
-  opacity?: number;
  maxWidth?: string | number;
-  maxHeight?: string | number;
-  overflow?: string;
-  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
-  mx?: string | number;
-  pl?: number;
-  px?: number;
-  py?: number;
-  paddingX?: number;
-  paddingY?: number;
-  textAlign?: string;
-  groupHoverTextColor?: string;
-  transition?: boolean;
-  borderLeft?: boolean;
-  borderStyle?: string;
-  borderColor?: string;
-  ariaLabel?: string;
-  hoverVariant?: string;
-  fontSize?: string | any;
-  italic?: boolean;
-  animate?: string;
-  capitalize?: boolean;
-  alignItems?: string;
-  gap?: number;
-  cursor?: string;
-  width?: string | number;
-  height?: string | number;
-  htmlFor?: string;
-  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  lineClamp?: number;
+  letterSpacing?: 'tight' | 'normal' | 'wide' | 'widest' | string;
+  id?: string;
+  /** @deprecated Use semantic props (variant, intent) instead. */
+  color?: string;
+  /** @deprecated Use semantic props instead. */
  className?: string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  /** @deprecated Use semantic props instead. */
  style?: CSSProperties;
+  /** @deprecated Use semantic props instead. */
+  marginBottom?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  marginTop?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  mb?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  mt?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  ml?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mr?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mx?: string | number;
+  /** @deprecated Use semantic props instead. */
+  px?: number | string;
+  /** @deprecated Use semantic props instead. */
+  py?: number | string;
+  /** @deprecated Use semantic props instead. */
+  textAlign?: 'left' | 'center' | 'right';
+  /** @deprecated Use semantic props instead. */
+  flexGrow?: number;
+  /** @deprecated Use semantic props instead. */
+  maxHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  overflow?: string;
+  /** @deprecated Use semantic props instead. */
+  opacity?: number;
+  /** @deprecated Use semantic props instead. */
+  groupHoverTextColor?: string;
+  /** @deprecated Use semantic props instead. */
+  lineHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+  /** @deprecated Use semantic props instead. */
+  animate?: string;
+  /** @deprecated Use semantic props instead. */
+  transition?: boolean;
+  /** @deprecated Use semantic props instead. */
+  display?: string | ResponsiveValue<string>;
+  /** @deprecated Use semantic props instead. */
+  alignItems?: string;
+  /** @deprecated Use semantic props instead. */
+  gap?: number;
+  /** @deprecated Use semantic props instead. */
+  italic?: boolean;
+  /** @deprecated Use semantic props instead. */
+  fontSize?: string | any;
+  /** @deprecated Use semantic props instead. */
+  borderLeft?: boolean;
+  /** @deprecated Use semantic props instead. */
+  borderColor?: string;
+  /** @deprecated Use semantic props instead. */
+  pl?: number;
+  /** @deprecated Use semantic props instead. */
+  borderStyle?: string;
+  /** @deprecated Use semantic props instead. */
+  paddingX?: number;
+  /** @deprecated Use semantic props instead. */
+  whiteSpace?: string;
+  /** @deprecated Use semantic props instead. */
+  htmlFor?: string;
+  /** @deprecated Use semantic props instead. */
+  width?: string | number;
+  /** @deprecated Use semantic props instead. */
+  height?: string | number;
+  /** @deprecated Use semantic props instead. */
+  flexShrink?: number;
+  /** @deprecated Use semantic props instead. */
+  capitalize?: boolean;
+  /** @deprecated Use semantic props instead. */
+  hoverVariant?: string;
+  /** @deprecated Use semantic props instead. */
+  cursor?: string;
 }

 /**
 * Text - Redesigned for "Modern Precision" theme.
- * Includes extensive compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
 */
 export const Text = forwardRef<HTMLElement, TextProps>(({ 
  children, 
@@ -77,56 +114,55 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
  as = 'p',
  align = 'left',
  mono = false,
+  font,
  uppercase = false,
  leading = 'normal',
  block = false,
  truncate = false,
+  maxWidth,
+  lineClamp,
+  letterSpacing,
+  id,
+  color,
  className,
-  style,
-  mt,
+  style: styleProp,
+  marginBottom,
+  marginTop,
  mb,
+  mt,
  ml,
  mr,
-  marginTop,
-  marginBottom,
-  font,
-  color,
-  letterSpacing,
-  lineHeight,
-  flexGrow,
-  flexShrink,
-  lineClamp,
-  display,
-  opacity,
-  maxWidth,
-  maxHeight,
-  overflow,
-  whiteSpace,
  mx,
-  pl,
  px,
  py,
-  paddingX,
-  paddingY,
  textAlign,
+  flexGrow,
+  maxHeight,
+  overflow,
+  opacity,
  groupHoverTextColor,
-  transition,
-  borderLeft,
-  borderStyle,
-  borderColor,
-  ariaLabel,
-  hoverVariant,
-  fontSize,
-  italic,
+  lineHeight,
+  transform,
  animate,
-  capitalize,
+  transition,
+  display,
  alignItems,
  gap,
-  cursor,
+  italic,
+  fontSize,
+  borderLeft,
+  borderColor,
+  pl,
+  borderStyle,
+  paddingX,
+  whiteSpace,
+  htmlFor,
  width,
  height,
-  htmlFor,
-  transform,
+  flexShrink,
+  capitalize,
+  hoverVariant,
+  cursor,
 }, ref) => {
  const variantClasses = {
    high: 'text-[var(--ui-color-text-high)]',
@@ -181,79 +217,99 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
    loose: 'leading-loose',
  };

-  const getResponsiveClasses = (prefix: string, value: any | ResponsiveValue<any> | undefined) => {
+  const letterSpacingClasses: Record<string, string> = {
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    widest: 'tracking-widest',
+  };
+
+  const getResponsiveSpacing = (prefix: string, value: any) => {
    if (value === undefined) return '';
    if (typeof value === 'object') {
      const classes = [];
-      if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
-      if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
-      if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
-      if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
-      if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
+      if (value.base !== undefined) classes.push(`${prefix}-${value.base}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${value.sm}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${value.md}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${value.lg}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${value.xl}`);
      return classes.join(' ');
    }
-    return prefix ? `${prefix}-${value}` : String(value);
+    return ''; // Handled in style
+  };
+
+  const getResponsiveDisplay = (d: any) => {
+    if (!d) return '';
+    if (typeof d === 'string') return d.includes(':') ? d : `flex`; // Fallback
+    const classes = [];
+    if (d.base) classes.push(d.base);
+    if (d.sm) classes.push(`sm:${d.sm}`);
+    if (d.md) classes.push(`md:${d.md}`);
+    if (d.lg) classes.push(`lg:${d.lg}`);
+    if (d.xl) classes.push(`xl:${d.xl}`);
+    return classes.join(' ');
  };

  const classes = [
    variantClasses[variant as keyof typeof variantClasses] || '',
    getResponsiveSize(size),
    weightClasses[weight as keyof typeof weightClasses] || '',
-    align === 'center' || textAlign === 'center' ? 'text-center' : (align === 'right' || textAlign === 'right' ? 'text-right' : 'text-left'),
+    (align === 'center' || textAlign === 'center') ? 'text-center' : ((align === 'right' || textAlign === 'right') ? 'text-right' : 'text-left'),
    (mono || font === 'mono') ? 'font-mono' : 'font-sans',
-    uppercase ? 'uppercase tracking-widest' : '',
+    uppercase ? 'uppercase' : '',
+    letterSpacing ? (letterSpacingClasses[letterSpacing] || '') : (uppercase ? 'tracking-widest' : ''),
    leadingClasses[leading as keyof typeof leadingClasses] || '',
    block ? 'block' : 'inline',
    truncate ? 'truncate' : '',
-    getResponsiveClasses('display', display),
-    transition ? 'transition-all duration-200' : '',
+    getResponsiveSpacing('mb', mb || marginBottom),
+    getResponsiveSpacing('mt', mt || marginTop),
+    getResponsiveDisplay(display),
    italic ? 'italic' : '',
    animate === 'pulse' ? 'animate-pulse' : '',
+    transition ? 'transition-all duration-200' : '',
    capitalize ? 'capitalize' : '',
    color?.startsWith('text-') ? color : '',
    className,
  ].filter(Boolean).join(' ');

-  const combinedStyle: React.CSSProperties = {
-    ...style,
-    ...(typeof display === 'string' ? { display } : {}),
-    ...(alignItems ? { alignItems } : {}),
-    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
-    ...(cursor ? { cursor } : {}),
-    ...(width !== undefined ? { width } : {}),
-    ...(height !== undefined ? { height } : {}),
-    ...(opacity !== undefined ? { opacity } : {}),
+  const style: React.CSSProperties = {
    ...(maxWidth !== undefined ? { maxWidth } : {}),
    ...(maxHeight !== undefined ? { maxHeight } : {}),
    ...(overflow !== undefined ? { overflow } : {}),
-    ...(whiteSpace !== undefined ? { whiteSpace } : {}),
-    ...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
-    ...(pl !== undefined ? { paddingLeft: `${pl * 0.25}rem` } : {}),
-    ...(px !== undefined ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
-    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
-    ...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
-    ...(paddingY !== undefined ? { paddingTop: `${paddingY * 0.25}rem`, paddingBottom: `${paddingY * 0.25}rem` } : {}),
-    ...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
-    ...(mb !== undefined ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
-    ...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
-    ...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
-    ...(marginTop !== undefined ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
-    ...(marginBottom !== undefined ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
-    ...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
-    ...(letterSpacing ? { letterSpacing } : {}),
-    ...(lineHeight ? { lineHeight } : {}),
    ...(flexGrow !== undefined ? { flexGrow } : {}),
    ...(flexShrink !== undefined ? { flexShrink } : {}),
+    ...(opacity !== undefined ? { opacity } : {}),
    ...(lineClamp !== undefined ? { display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } : {}),
-    ...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
-    ...(fontSize ? { fontSize } : {}),
+    ...(color && !color.startsWith('text-') ? { color } : {}),
+    ...(typeof mb === 'number' || typeof mb === 'string' ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
+    ...(typeof marginBottom === 'number' || typeof marginBottom === 'string' ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
+    ...(typeof mt === 'number' || typeof mt === 'string' ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
+    ...(typeof marginTop === 'number' || typeof marginTop === 'string' ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
+    ...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
+    ...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
+    ...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
+    ...(px !== undefined ? { paddingLeft: typeof px === 'number' ? `${px * 0.25}rem` : px, paddingRight: typeof px === 'number' ? `${px * 0.25}rem` : px } : {}),
+    ...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : py, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : py } : {}),
+    ...(pl !== undefined ? { paddingLeft: typeof pl === 'number' ? `${pl * 0.25}rem` : pl } : {}),
+    ...(paddingX !== undefined ? { paddingLeft: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX, paddingRight: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX } : {}),
+    ...(letterSpacing && !letterSpacingClasses[letterSpacing] ? { letterSpacing } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
    ...(transform ? { textTransform: transform as any } : {}),
+    ...(alignItems ? { alignItems } : {}),
+    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
+    ...(cursor ? { cursor } : {}),
+    ...(fontSize && typeof fontSize === 'string' ? { fontSize } : {}),
+    ...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
+    ...(whiteSpace ? { whiteSpace: whiteSpace as any } : {}),
+    ...(width !== undefined ? { width } : {}),
+    ...(height !== undefined ? { height } : {}),
+    ...(styleProp || {}),
  };

  const Tag = as || 'p';

  return (
-    <Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>
+    <Tag ref={ref} className={classes} style={Object.keys(style).length > 0 ? style : undefined} id={id} htmlFor={htmlFor}>
      {children}
    </Tag>
  );