diff --git a/apps/website/pages/foundations/height.tsx b/apps/website/pages/foundations/height.tsx new file mode 100644 index 000000000..5fd25aed4 --- /dev/null +++ b/apps/website/pages/foundations/height.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import HeightPage from "screens/foundations/height/HeightPage"; + +const Height = () => ( + <> + + Height — Halstack Design System + + + +); + +export default Height; diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index bacd551e0..b5b3e1e3c 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -43,6 +43,7 @@ const principlesLinks: LinkDetails[] = [ const foundationsLinks: LinkDetails[] = [ { label: "Color", path: "/foundations/color" }, + { label: "Height", path: "/foundations/height" }, { label: "Iconography", path: "/foundations/iconography" }, ]; diff --git a/apps/website/screens/foundations/height/HeightPage.tsx b/apps/website/screens/foundations/height/HeightPage.tsx new file mode 100644 index 000000000..8de3684ee --- /dev/null +++ b/apps/website/screens/foundations/height/HeightPage.tsx @@ -0,0 +1,176 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + In Halstack, dimensions refer specifically to the height of UI elements such as buttons, + inputs, icons, and other interactive components. While spacing controls the{" "} + distance between elements, dimensions define the vertical size of the + elements themselves. + + + Maintaining consistent height values across the interface ensures a predictable rhythm, enhances scannability, + and simplifies the construction of flexible, responsive layouts. + + + ), + }, + { + title: "Purpose", + content: ( + <> + + Our scale was designed with a balance between flexibility and simplicity. It follows a loosely exponential + progression that prioritizes touch accessibility, icon alignment and{" "} + component density levels. Although not every element of our Design System follows a fixed + height structure, keeping the system as modular and progressive as we can, designers and + developers can reason more easily about vertical alignment and component consistency. + + + In summary, we defined a limited set of height values that serve as our core dimension tokens + . These values are chosen to: + + + Align with our spacing scale (multiples of 4px where possible) + Support common component patterns + Create visual consistency and predictable touch targets + Allow cross-platform scalability and design token standardization + + + ), + }, + { + title: "Core height tokens", + content: ( + + + + Value + Token + Typical usage examples + + + + + 12px + + dimensions/12 + + Small icons, badges, or inline indicators + + + 16px + + dimensions/16 + + Smaller icons size + + + 20px + + dimensions/20 + + Small buttons or compact UI elements + + + 24px + + dimensions/24 + + Standard icon size and input height for dense forms + + + 32px + + dimensions/32 + + Default button/input height in compact UIs + + + 36px + + dimensions/36 + + Secondary button/input variant + + + 40px + + dimensions/40 + + Default form element height + + + 48px + + dimensions/48 + + Primary button, larger input elements + + + 56px + + dimensions/56 + + High emphasis elements, banners + + + + ), + }, + { + title: "Best practices", + content: ( + + + Stick to the core: when designing, try to stick as much as possible with our height tokens to + create consistent layouts across products. Avoid arbitrary custom heights unless strictly necessary. + + + Respect touch targets: Ensure interactive elements like buttons and inputs are at least + height-40 for accessibility and usability. + + + Align height with layout spacing: Use the same spacing unit system (spacing-4,{" "} + spacing-8, etc.) to vertically pad elements so they integrate seamlessly. + + + Don't scale height independently: Avoid resizing components vertically in isolation without + updating spacing or content padding. + + + Use tokens in code and design: Reference tokens (e.g., height-40) directly in + CSS or Figma components for consistency and easier maintenance. + + + Use for more than buttons: These values apply to any vertically bound element, not just + buttons and inputs, but also chips, icons, rows, and list items. + + + ), + }, +]; + +export default function HeightPage() { + return ( + + + + + + + + + + + + ); +}