feat(frontend): design system tokens update (#11501)

## Changes 🏗️ Update tokens of the design system with new values 🖌️ 🎨 ## Checklist 📋 ### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Storybook build passes, no type errors
2026-04-08 03:00:28 -04:00 · 2025-12-01 18:14:10 +07:00
parent 627a33468b
commit 6db18b8445
6 changed files with 89 additions and 56 deletions
--- a/autogpt_platform/frontend/src/components/atoms/Text/Text.stories.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/Text/Text.stories.tsx
@@ -55,19 +55,39 @@ export function AllVariants() {
        <Text variant="h2">Heading 2</Text>
        <Text variant="h3">Heading 3</Text>
        <Text variant="h4">Heading 4</Text>
+        <Text variant="h5">Heading 5</Text>
        <StoryCode
          code={`<Text variant="h1">Heading 1</Text>
 <Text variant="h2">Heading 2</Text>
 <Text variant="h3">Heading 3</Text>
-<Text variant="h4">Heading 4</Text>`}
+<Text variant="h4">Heading 4</Text>
+<Text variant="h5">Heading 5</Text>`}
        />
      </div>
      {/* Body Text */}
      <h2 className="mb-4 border-b border-border pb-2 text-xl text-zinc-500">
        Body Text
      </h2>
-      <Text variant="lead">Lead</Text>
-      <StoryCode code={`<Text variant="lead">Lead</Text>`} />
+      <div className="flex flex-row gap-8">
+        <Text variant="lead">Lead</Text>
+        <Text variant="lead-medium">Lead Medium</Text>
+        <Text variant="lead-semibold">Lead Semibold</Text>
+      </div>
+      <StoryCode
+        code={`<Text variant="lead">Lead</Text>
+<Text variant="lead-medium">Lead Medium</Text>
+<Text variant="lead-semibold">Lead Semibold</Text>`}
+      />
+      <div className="flex flex-row gap-8">
+        <Text variant="large">Large</Text>
+        <Text variant="large-medium">Large Medium</Text>
+        <Text variant="large-semibold">Large Semibold</Text>
+      </div>
+      <StoryCode
+        code={`<Text variant="large">Large</Text>
+<Text variant="large-medium">Large Medium</Text>
+<Text variant="large-semibold">Large Semibold</Text>`}
+      />
      <div className="flex flex-row gap-8">
        <Text variant="large">Large</Text>
        <Text variant="large-medium">Large Medium</Text>
@@ -108,6 +128,7 @@ export function Headings() {
      <Text variant="h2">Heading 2</Text>
      <Text variant="h3">Heading 3</Text>
      <Text variant="h4">Heading 4</Text>
+      <Text variant="h5">Heading 5</Text>
    </div>
  );
 }
@@ -119,6 +140,8 @@ export function BodyText() {
  return (
    <div className="space-y-8">
      <Text variant="lead">Lead</Text>
+      <Text variant="lead-medium">Lead Medium</Text>
+      <Text variant="lead-semibold">Lead Semibold</Text>
      <Text variant="large">Large</Text>
      <Text variant="large-medium">Large Medium</Text>
      <Text variant="large-semibold">Large Semibold</Text>
--- a/autogpt_platform/frontend/src/components/atoms/Text/helpers.ts
+++ b/autogpt_platform/frontend/src/components/atoms/Text/helpers.ts
@@ -14,24 +14,29 @@ export type As =

 export const variants = {
  // Headings
-  h1: "font-poppins text-[2.75rem] font-semibold leading-[3.5rem] text-zinc-800",
-  h2: "font-poppins text-[2.25rem] font-normal leading-[3.25rem] text-zinc-800",
-  h3: "font-poppins text-[1.75rem] font-medium leading-[2.5rem] text-zinc-800",
-  h4: "font-poppins text-[1rem] font-medium leading-[1.5rem] text-zinc-800",
+  h1: "font-poppins text-[2.75rem] font-[600] leading-[3.5rem] tracking-[-0.033rem] text-zinc-800",
+  h2: "font-poppins text-[2rem] font-[500] leading-[2.5rem] text-zinc-800 tracking-[-0.02rem]",
+  h3: "font-poppins text-[1.75rem] font-[500] leading-[2.5rem] text-zinc-800 tracking-[-0.01313rem]",
+  h4: "font-poppins text-[1.375rem] font-[500] leading-[1.5rem] text-zinc-800",
+  h5: "font-poppins text-[1rem] font-[500] leading-[1.5rem] text-zinc-800",

  // Body Text
-  lead: "font-sans text-[1.25rem] font-normal leading-[2rem] text-zinc-800",
-  large: "font-sans text-[1rem] font-normal leading-[1.5rem] text-zinc-800",
+  lead: "font-sans text-[1.25rem] font-[400] leading-[1.75rem] text-zinc-800",
+  "lead-medium":
+    "font-sans text-[1.25rem] font-[500] leading-[1.75rem] text-zinc-800",
+  "lead-semibold":
+    "font-sans text-[1.25rem] font-[600] leading-[1.75rem] text-zinc-800",
+  large: "font-sans text-[1rem] font-[400] leading-[1.625rem] text-zinc-800",
  "large-medium":
-    "font-sans text-[1rem] font-medium leading-[1.5rem] text-zinc-800",
+    "font-sans text-[1rem] font-[500] leading-[1.625rem] text-zinc-800",
  "large-semibold":
-    "font-sans text-[1rem] font-semibold leading-[1.5rem] text-zinc-800",
-  body: "font-sans text-[0.875rem] font-normal leading-[1.375rem] text-zinc-800",
-  "body-medium": "font-sans text-sm font-medium leading-snug text-zinc-800",
-  small:
-    "font-sans text-[0.75rem] font-normal leading-[1.125rem] text-zinc-800",
+    "font-sans text-[1rem] font-[600] leading-[1.625rem] text-zinc-800",
+  body: "font-sans text-[0.875rem] font-[400] leading-[1.375rem] text-zinc-800",
+  "body-medium":
+    "font-sans text-[0.875rem] font-[500] leading-[1.375rem] text-zinc-800",
+  small: "font-sans text-[0.75rem] font-[400] leading-[1.125rem] text-zinc-800",
  "small-medium":
-    "font-sans text-[0.75rem] font-medium leading-[1.125rem] text-zinc-800",
+    "font-sans text-[0.75rem] font-[500] leading-[1.125rem] text-zinc-800",

  // Label Text
  label:
@@ -45,7 +50,10 @@ export const variantElementMap: Record<Variant, As> = {
  h2: "h2",
  h3: "h3",
  h4: "h4",
+  h5: "h5",
  lead: "p",
+  "lead-medium": "p",
+  "lead-semibold": "p",
  large: "p",
  "large-medium": "p",
  "large-semibold": "p",
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx
@@ -1,17 +1,17 @@
 "use client";

-import { Text } from "@/components/atoms/Text/Text";
+import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/atoms/Input/Input";
+import { Text } from "@/components/atoms/Text/Text";
 import { Bell, MagnifyingGlass, X } from "@phosphor-icons/react";
 import { FixedSizeList as List } from "react-window";
 import { AgentExecutionWithInfo } from "../../helpers";
 import { ActivityItem } from "../ActivityItem";
+import styles from "./styles.module.css";
 import {
  EXECUTION_DISPLAY_WITH_SEARCH,
  useActivityDropdown,
 } from "./useActivityDropdown";
-import styles from "./styles.module.css";
-import { Button } from "@/components/atoms/Button/Button";

 interface Props {
  activeExecutions: AgentExecutionWithInfo[];
@@ -139,7 +139,7 @@ export function ActivityDropdown({
          </List>
        ) : (
          <div className="flex h-full flex-col items-center justify-center gap-5 pb-8 pt-6">
-            <div className="mx-auto inline-flex flex-col items-center justify-center rounded-full bg-lightGrey p-6">
+            <div className="mx-auto inline-flex flex-col items-center justify-center rounded-full bg-bgLightGrey p-6">
              <Bell className="h-6 w-6 text-zinc-300" />
            </div>
            <div className="flex flex-col items-center justify-center">
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityItem.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityItem.tsx
@@ -2,19 +2,19 @@

 import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
 import { Text } from "@/components/atoms/Text/Text";
+import { formatTimeAgo } from "@/lib/utils/time";
 import {
  CheckCircle,
+  CircleDashed,
  CircleNotch,
  Clock,
-  WarningOctagon,
-  StopCircle,
-  CircleDashed,
  Eye,
+  StopCircle,
+  WarningOctagon,
 } from "@phosphor-icons/react";
+import Link from "next/link";
 import type { AgentExecutionWithInfo } from "../helpers";
 import { getExecutionDuration } from "../helpers";
-import Link from "next/link";
-import { formatTimeAgo } from "@/lib/utils/time";

 interface Props {
  execution: AgentExecutionWithInfo;
@@ -119,7 +119,7 @@ export function ActivityItem({ execution }: Props) {

  return withExecutionLink ? (
    <Link
-      className="block cursor-pointer border-b border-slate-50 px-2 py-3 transition-colors last:border-b-0 hover:bg-lightGrey"
+      className="block cursor-pointer border-b border-slate-50 px-2 py-3 transition-colors last:border-b-0 hover:bg-bgLightGrey"
      href={linkUrl}
      role="button"
    >
--- a/autogpt_platform/frontend/src/components/styles/colors.ts
+++ b/autogpt_platform/frontend/src/components/styles/colors.ts
@@ -1,39 +1,39 @@
 export const colors = {
  slate: {
-    50: "#f0f1f3",
-    100: "#cfd4db",
-    200: "#b8bfca",
-    300: "#97a2b1",
-    400: "#8390a2",
-    500: "#64748b",
-    600: "#5b6a7e",
+    50: "#F7F8F9",
+    100: "#EFF1F4",
+    200: "#CFD4DB",
+    300: "#B8BFCA",
+    400: "#8A97A8",
+    500: "#64748B",
+    600: "#5B6A7E",
    700: "#475263",
-    800: "#37404c",
-    900: "#2a313a",
+    800: "#475263",
+    900: "#2A313A",
  },
  zinc: {
-    50: "#f4f4f5",
-    100: "#e5e5e6",
-    200: "#cacace",
-    300: "#adadb3",
-    400: "#8d8d95",
-    500: "#71717a",
-    600: "#65656c",
-    700: "#505057",
-    800: "#3e3e43",
+    50: "#F9F9FA",
+    100: "#EFEFF0",
+    200: "#DADADC",
+    300: "#C5C5C9",
+    400: "#ADADB3",
+    500: "#83838C",
+    600: "#68686F",
+    700: "#8E98A8",
+    800: "#3E3E43",
    900: "#2C2C30",
  },
  red: {
-    50: "#fdecec",
-    100: "#fac5c5",
-    200: "#f8a9a9",
-    300: "#f48282",
-    400: "#f26969",
-    500: "#ef4444",
-    600: "#d93e3e",
-    700: "#aa3030",
+    50: "#FEF5F5",
+    100: "#FDECEC",
+    200: "#FAC5C5",
+    300: "#F69999",
+    400: "#F26969",
+    500: "#EF4444",
+    600: "#D93636",
+    700: "#AA3030",
    800: "#832525",
-    900: "#641d1d",
+    900: "#641D1D ",
  },
  orange: {
    50: "#fff3e6",
@@ -99,5 +99,7 @@ export const colors = {
  // Special semantic colors
  white: "#fefefe",
  black: "#141414",
-  lightGrey: "#F3F4F6",
+  textGrey: "#505057",
+  textBlack: "#1F1F20",
+  bgLightGrey: "#F3F4F6",
 };
--- a/autogpt_platform/frontend/src/components/tokens/colors.stories.tsx
+++ b/autogpt_platform/frontend/src/components/tokens/colors.stories.tsx
@@ -90,8 +90,8 @@ const specialColors = [
      },
      {
        name: "bg-light-grey",
-        hex: colors.lightGrey,
-        rgb: hexToRgb(colors.lightGrey),
+        hex: colors.bgLightGrey,
+        rgb: hexToRgb(colors.bgLightGrey),
        class: "bg-light-grey",
        textClass: "text-light-grey",
      },