Footer

The page footer — a centered copyright title above a row of secondary text links (License, Help, Policy). All values pulled directly from the LUSTER Figma component.

Title #24242C (Inter 700 / 16px) · Links #8F8B96 (Inter 400 / 12px) · Gap 12px · Padding 24px

Component · Footer

A centered copyright line above a row of underlined secondary text links, with a 12px gap between the two.

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. The footer links are Secondary (sm) Buttons 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
--sectionTitleFontColor	section/title/font/color	#24242C
--buttonSecondaryDefaultTextFontColor	button/secondary/default/text/font/color	#8F8B96
--footerGap	footer/gap	12px
--footerLinksGap	footer/links/gap	0px
--footerTitleContent	footer/title/content	Osama Eldrieny © 2025
--buttonSmPaddingX	button/sm/padding/x	28px
--buttonSmPaddingY	button/sm/padding/y	12px
--buttonBorderRadius	button/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
--titleFontSize	typography/title/font/size	16px
--titleFontLineHeight	typography/title/font/lineHeight	19px
--titleFontWeight	typography/title/font/weight	700
--buttonSmFontSize	typography/button/sm/font/size	12px
--buttonSmFontLineHeight	typography/button/sm/font/lineHeight	14px
--buttonSmFontWeight	typography/button/sm/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Keep footer links short — legal and help destinations only.

✓ DO

Center the copyright line above the link row for balance.

✗ DON'T

Don't use primary buttons in the footer — use subtle text links.

✗ DON'T

Don't pack the footer with marketing CTAs.

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 './Footer.css';

export interface FooterProps {
  copyright: string;
  links: { label: string; href: string }[];
}

export const Footer = ({ copyright, links }: FooterProps) => (
  <footer className="footer">
    <p className="footer__title">{copyright}</p>
    <nav className="footer__links">
      {links.map(l => (
        <a key={l.href} href={l.href} className="footer__link">{l.label}</a>
      ))}
    </nav>
  </footer>
);

/* Footer tokens — Diamond brand, Light mode */
:root {
  /* footer + section container */
  --sectionBgColor: #FFFFFF; --sectionTitleFontColor: #24242C;
  --sectionPaddingX: 24px; --sectionPaddingY: 24px; --sectionBorderRadius: 0px;
  --sectionShadowColor: #CECBDC; --sectionShadowOffsetX: 0px; --sectionShadowOffsetY: 0px; --sectionShadowBlur: 0px;
  --footerGap: 12px; --footerLinksGap: 0px;
  /* footer links = secondary (sm) buttons */
  --buttonSecondaryDefaultTextFontColor: #8F8B96;
  --buttonSmPaddingX: 28px; --buttonSmPaddingY: 12px; --buttonBorderRadius: 0px;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif;
  --titleFontSize: 16px;    --titleFontLineHeight: 19px;    --titleFontWeight: 700;
  --buttonSmFontSize: 12px; --buttonSmFontLineHeight: 14px; --buttonSmFontWeight: 400;
}

.footer {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--footerGap);
  background: var(--sectionBgColor);
  padding: var(--sectionPaddingY) var(--sectionPaddingX);
  border-radius: var(--sectionBorderRadius);
}
.footer__title { font-family: var(--bodyFontFamily); font-weight: var(--titleFontWeight); font-size: var(--titleFontSize); line-height: var(--titleFontLineHeight); color: var(--sectionTitleFontColor); text-align: center; }
.footer__links { display: flex; gap: var(--footerLinksGap); }
.footer__link {
  padding: var(--buttonSmPaddingY) var(--buttonSmPaddingX);
  border-radius: var(--buttonBorderRadius);
  color: var(--buttonSecondaryDefaultTextFontColor);
  font-family: var(--bodyFontFamily); font-weight: var(--buttonSmFontWeight); font-size: var(--buttonSmFontSize); line-height: var(--buttonSmFontLineHeight);
  text-decoration: underline;
}

<footer class="footer">
  <p class="footer__title">Osama Eldrieny © 2025</p>
  <nav class="footer__links">
    <a href="/license" class="footer__link">License</a>
    <a href="/help" class="footer__link">Help</a>
    <a href="/policy" class="footer__link">Policy</a>
  </nav>
</footer>

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

export default function App() {
  return (
    <Footer
      copyright="Osama Eldrieny © 2025"
      links={[
        { label: 'License', href: '/license' },
        { label: 'Help', href: '/help' },
        { label: 'Policy', href: '/policy' },
      ]}
    />
  );
}