Header

stablev1.0.0

Headers from Figma SCDC sheet 106:137. Header/Default 106:95008: status island, page title, glass twins (alert + RM chat), logout. Used For: L1 Home, Key Tabs, Key Tabs Nav, AI, Search.

Open in Figma

Live preview

Red dot

Header/Default

Figma sheet 106:137 · node 106:95008. 402×115. Status island, left title, glass twins, logout.

Page Title

L1. Home Screen

Morning ☀️

L1. Key Tabs Header (7.0)

Morning ☀️

L1. Key Tabs Header+Nav (7.5)

Sub Nav is interactive. Click Explore / Invest / Insure / Market News — the green underline follows the selected tab.

Invest & Insure

Explore

✨ AI Header

SC AIbeta

Search Header

Type in the field. Empty state keeps the Figma “Search Fund by Name” copy.

Implementation

import { Header } from '@nitro-core/ui';

<Header
  badges="chat"
  title="Page Title"
/>

Design → Code

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

Header/Default

106:137

Used For: Default
Page Title: Page Title

Code

Header

@nitro-core/ui

variant: "default"
title: "Page Title"

Token inspector

Width

Figma Variable

402px

Nitro Token

size.header

CSS

--nitro-size-header

Chain

Figma → Token → CSS → Component

Height

Figma Variable

115px · status 62 + top bar 53

Nitro Token

size.headerHeight

CSS

--nitro-size-header-height

Chain

Figma → Token → CSS → Component

Title

Figma Variable

SC Prosper Sans Bold 16 tracking 3%

Nitro Token

typography.size.300

CSS

--nitro-typography-size-300

Chain

Figma → Token → CSS → Component

Chat badge

Figma Variable

core/red/500 #d0021b

Nitro Token

color.nav.badge

CSS

--nitro-color-nav-badge

Chain

Figma → Token → CSS → Component

Tab underline

Figma Variable

core/brand/green #38d200

Nitro Token

color.brand.green

CSS

--nitro-color-brand-green

Chain

Figma → Token → CSS → Component