Fuel Credit navigation specification

A compact implementation guide for reproducing the Fuel Credit application header. Measurements below describe the final active cascade in app/src/styles.css, not the earlier legacy declarations that it overrides.

Source of truth

• Structure and item order: app/src/App.tsx (SiteHeader)
• Wallet states: app/src/FuelWallet.tsx (HeaderWallet)
• Desktop rules: app/src/styles.css, final Lovable port (.topbar, .brand, .site-nav)
• Mobile rules: @media (max-width: 560px)
• Fonts: Google Fonts import at the top of app/src/styles.css

The order is:

Brand | My Loans when connected | Docs | Stats | GitHub | Theme | Network in open mobile menu | Wallet

GitHub is hidden in the current desktop and compact mobile header, but appears in the open mobile menu.

The current component still links GitHub to SilentCicero/fuel-credit. Change that URL independently if the canonical public link should be FuelLabs/fuel-credit.

Core tokens

Token	Dark	Light	Use
--ink	#fafafa	#171717	Brand, controls, primary nav text
--muted	#9e9e9e	#737373	Default navigation links
--line	#323232	#e5e5e5	Header divider and control borders
--panel	#101010	#ffffff	Header and menu surfaces
--panel-2	#181818	#f5f5f5	Hover/focus and selected neutral surfaces
--fuel	#02e555	#02d653	Focus ring and active network accent

No gradients, glass effects, or decorative shadow belong in this navigation.

Typography

Default navigation type

font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 14px;
font-weight: 400;

• Brand: Space Grotesk, 24px, weight 600, line-height 20px, tracking -0.02em.
• Desktop wallet/connect controls: 14px, weight 500, line-height 1.
• Compact mobile connect/account controls: 12px.
• Open-menu rows: 16px, weight 700.
• Expanded wallet address: IBM Plex Mono, 13px, weight 700.
• Numerical wallet text uses tabular numerals.

Do not substitute a generic geometric sans when matching the production interface. Space Grotesk creates the brand and navigation proportions; IBM Plex Mono is reserved for the expanded address/data treatment.

Desktop header: above 560px

Header frame

Property	Value
Position	sticky, top: 0, z-index: 30
Width	Full viewport; no maximum width
Height	66px
Horizontal padding	40px
Outer margin	0
Item alignment	Centered vertically; brand left, navigation right
Main flex gap	10px inherited base gap; brand/nav separated by space-between
Bottom rule	1px solid var(--line)
Background	var(--panel)

Preferred page alignment: the header intentionally reaches the viewport edges. Do not wrap it in the content column or add an outer top margin.

Brand lockup

Property	Value
Mark	20 × 20px
Wordmark text	24px, weight 600
Mark-to-text gap	10px
Lockup height	20px
Line-height	20px
Letter spacing	-0.02em

The mark and Credit text form one home link. Keep the mark square and do not add a pill, container border, or extra background.

Navigation spacing

Property	Value
Inter-item gap	28px
Link font	14px / 400
Default text	var(--muted)
Hover text	var(--ink)
Vertical alignment	Center

Text links remain visually bare—no permanent pill, underline, or border.

Circular icon control

Used by the theme action.

Property	Value
Box	34 × 34px
Flex basis/minimum width	34px
Radius	50%
Internal icon	16 × 16px
Padding	0
Background	Transparent
Hover/focus background	var(--panel-2)

Wallet and action pills

Property	Value
Height/min-height	34px
Horizontal padding	14px
Border	1px solid var(--line)
Radius	999px
Background	Transparent
Text	14px, weight 500, line-height 1
Wallet internal gap	6px from the base wallet rule
Hover/focus background	var(--panel-2)

The connected account chip also uses a 34px minimum height and full pill radius. Legacy clipped corners and decorative ::after strokes are explicitly disabled in the final cascade.

Mobile header: 560px and below

Closed header

Property	Value
Height	62px
Horizontal padding	16px
Header gap	4px
Brand text	24px
Navigation margin	margin-left: auto
Compact nav gap	4px; 6px when wallet is present
Theme visibility	Hidden while menu is closed
Text links	Hidden while menu is closed

Compact controls

• Menu button: 38 × 38px, circular, no left margin, flex basis 38px.
• Visible icon controls: 38 × 38px; inner icon remains 16 × 16px.
• Disconnected Connect pill: 38px high, 9px horizontal padding, 12px text.
• Connected account/disconnect pills: 38px high, 8px horizontal padding, 12px text, 999px radius.
• Connected wallet group gap: 4px.

Open mobile menu

The open menu becomes a full-screen fixed navigation surface.

position: fixed;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
padding: 82px 16px max(24px, env(safe-area-inset-bottom));
background: var(--panel-2);

Element	Measurement
Menu column gap	8px
Standard row height	56px
Standard row horizontal padding	16px
Standard row radius	10px
Row border	1px solid var(--line)
Row background	var(--panel)
Row icon/text gap	14px
Row text	16px, weight 700
Bottom safe area	At least 24px

Open-menu wallet

• Wallet layout: two columns, minmax(0, 1fr) auto, gap 8px.
• Account container: full width, 56px high, 10px radius, clipped overflow.
• Address link: flexible width, 14px horizontal padding, IBM Plex Mono 13px / 700, ellipsis on overflow.
• Copy button: fixed 44px width, full 56px height, 12px padding, left divider.
• Copy icon: 18 × 18px.
• Disconnect/action button: at least 56px high, 10px radius, 16px / 700.
• Disconnected Connect row: 56px high, Fuel-green background, 10px radius, centered 16px / 700 label.

Network switcher

Only displayed inside the open menu.

Property	Value
Container	Full width, 56px high
Segment gap	8px
Segment height	56px minimum
Segment radius	10px
Segment text	16px, weight 700
Active text	var(--fuel)
Active background	var(--panel-2)

It uses margin-top: auto, anchoring network selection toward the bottom of the menu.

Interaction and accessibility

• Brand is a labeled home link.
• Menu button exposes aria-expanded, aria-controls, and an action-specific label.
• Escape closes the mobile menu.
• Opening the menu adds body.menu-open to prevent background interaction/scroll.
• Theme and GitHub icon controls have accessible labels; mobile text labels appear in the open menu.
• Focus-visible treatment: 2px solid var(--fuel) with 3px offset.
• Hover and focus use the same neutral var(--panel-2) surface.
• Mobile interactive targets are normally 38px in the compact bar and 56px in the open menu. Preserve the larger menu rows for comfortable touch use.
• Keep wallet identity and Disconnect as separate controls.
• Preserve single-line truncation for long addresses rather than allowing the header to expand.

Responsive preferences

1. Keep the full desktop navigation until the 560px breakpoint.
2. At 560px or below, prioritize brand, wallet access, and menu access.
3. Do not squeeze Docs/Stats into the compact row; move them to the full-screen menu.
4. Keep the header edge padding symmetrical: 40px desktop, 16px mobile.
5. Do not add a centered maximum-width container to the header.
6. Maintain the 66px → 62px height transition—avoid content-driven header heights.
7. Respect bottom safe-area insets in the open menu.

Implementation skeleton

<header className="topbar">
  <a className="brand" href="/">…</a>
  <button className="menu-toggle" aria-expanded={open}>…</button>
  <nav className={`site-nav${open ? " open" : ""}`}>
    <a>Docs</a>
    <a>Stats</a>
    <button className="icon-link theme-nav-toggle">…</button>
    <HeaderWallet expanded={open} />
  </nav>
</header>

Do / do not

Do

• Use Space Grotesk and the exact compact weights.
• Keep desktop links unboxed and reserve pills for actions/account state.
• Use one-pixel rules and neutral hover fills.
• Preserve sticky positioning and viewport-edge alignment.
• Keep open-menu rows consistently 56px high.

Do not

• Add gradients, glass effects, heavy shadows, or decorative glow.
• Increase desktop pill height beyond the compact 34px system.
• mix clipped legacy button geometry into the final rounded navigation.
• Expose raw wallet addresses without truncation.
• Hide wallet connection or the mobile menu trigger.
• Copy earlier duplicate CSS declarations without checking the later Lovable override block.