Header

A profile header — a large avatar above a name, role and a bold page title. Composes the Large Avatar atom. All values pulled directly from the LUSTER Figma component.

Name #24242C (20px/500) · Role #62626D (16px) · Title #24242C (24px/700) · Avatar 80px

Osama Eldrieny

Design System Designer

Multi-Theme Design System

Component · Header

A Large Avatar (square, 80px), a name (Heading-2) with a role beneath it (Body), and a bold page Title (Heading-1) — all centered.

Osama Eldrieny

Design System Designer

Multi-Theme Design System

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. The header composes the Large Avatar atom inside a section container. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--headerNameFontColor	header/name/font/color	#24242C
--headerRoleFontColor	header/role/font/color	#62626D
--headerTitleFontColor	header/title/font/color	#24242C
--headerNameMarginBottom	header/name/marginBottom	4px
--headerInfoGap	header/info/gap	8px
--headerBodyGap	header/body/gap	16px
--avatarSizeLgHeight	avatar/size/lg/height	80px
--avatarBorderWidth	avatar/border/width	2px
--avatarBorderRadius	avatar/border/radius	0px
--sectionBgColor	section/bg/color	#FFFFFF
--sectionPaddingX	section/padding/x	24px
--sectionPaddingY	section/padding/y	24px
--sectionBorderRadius	section/border/radius	0px
--sectionShadowColor	section/shadow/color	#CECBDC
--sectionShadowOffsetX	section/shadow/offset-x	0px
--sectionShadowOffsetY	section/shadow/offset-y	0px
--sectionShadowBlur	section/shadow/blur	0px
--heading2FontSize	typography/heading-2/font/size	20px
--heading2FontLineHeight	typography/heading-2/font/lineHeight	24px
--heading2FontWeight	typography/heading-2/font/weight	500
--heading1FontSize	typography/heading-1/font/size	24px
--heading1FontLineHeight	typography/heading-1/font/lineHeight	29px
--heading1FontWeight	typography/heading-1/font/weight	700
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Lead with the avatar, then name, role and the page title.

✓ DO

Reuse the XLarge Avatar atom for the profile image.

✗ DON'T

Don't mix multiple bold titles — keep one clear hierarchy.

✗ DON'T

Don't restyle the avatar — reuse the Large Avatar atom (square, 80px).

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import { Avatar } from '@luster/ui';
import './Header.css';

export interface HeaderProps {
  name: string; role: string; title: string; avatarSrc: string;
}

export const Header = ({ name, role, title, avatarSrc }: HeaderProps) => (
  <header className="header">
    <Avatar size="xl" src={avatarSrc} name={name} />
    <div className="header__info">
      <div>
        <h2 className="header__name">{name}</h2>
        <p className="header__role">{role}</p>
      </div>
      <h1 className="header__title">{title}</h1>
    </div>
  </header>
);

/* Header tokens — Diamond brand, Light mode */
:root {
  /* header — Component Brand */
  --headerNameFontColor: #24242C; --headerRoleFontColor: #62626D; --headerTitleFontColor: #24242C;
  /* header — Density */
  --headerBodyGap: 16px; --headerInfoGap: 8px; --headerNameMarginBottom: 4px;
  /* avatar */
  --avatarSizeLgHeight: 80px; --avatarBorderWidth: 2px; --avatarBorderRadius: 0px;
  /* section container */
  --sectionBgColor: #FFFFFF; --sectionPaddingX: 24px; --sectionPaddingY: 24px; --sectionBorderRadius: 0px;
  --sectionShadowColor: #CECBDC; --sectionShadowOffsetX: 0px; --sectionShadowOffsetY: 0px; --sectionShadowBlur: 0px;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif;
  --heading2FontSize: 20px; --heading2FontLineHeight: 24px; --heading2FontWeight: 500;
  --heading1FontSize: 24px; --heading1FontLineHeight: 29px; --heading1FontWeight: 700;
  --bodyFontSize: 16px;     --bodyFontLineHeight: 19px;     --bodyFontWeight: 400;
}

.header {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--headerBodyGap);
  background: var(--sectionBgColor);
  padding: var(--sectionPaddingY) var(--sectionPaddingX);
  border-radius: var(--sectionBorderRadius);
}
.header__avatar { width: var(--avatarSizeLgHeight); height: var(--avatarSizeLgHeight); border-radius: var(--avatarBorderRadius); overflow: hidden; }
.header__info { display: flex; flex-direction: column; align-items: center; gap: var(--headerInfoGap); }
.header__name  { font-family: var(--bodyFontFamily); font-weight: var(--heading2FontWeight); font-size: var(--heading2FontSize); line-height: var(--heading2FontLineHeight); color: var(--headerNameFontColor); margin-bottom: var(--headerNameMarginBottom); }
.header__role  { font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight); font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight); color: var(--headerRoleFontColor); }
.header__title { font-family: var(--bodyFontFamily); font-weight: var(--heading1FontWeight); font-size: var(--heading1FontSize); line-height: var(--heading1FontLineHeight); color: var(--headerTitleFontColor); text-align: center; }

<header class="header">
  <span class="avatar avatar--xl"><img src="/u/osama.png" alt="Osama Eldrieny"></span>
  <div class="header__info">
    <div>
      <h2 class="header__name">Osama Eldrieny</h2>
      <p class="header__role">Design System Designer</p>
    </div>
    <h1 class="header__title">Multi-Theme Design System</h1>
  </div>
</header>

import { Header } from '@luster/ui';

export default function Profile() {
  return (
    <Header
      name="Osama Eldrieny"
      role="Design System Designer"
      title="Multi-Theme Design System"
      avatarSrc="/u/osama.png"
    />
  );
}