Top bar Gagan

Home screen top bar with rotated logo mark, time-aware greeting text, and current user avatar. Simple flex layout — three slots: mark, greeting, avatar. No actions, no search, no notifications. It is purely a contextual header.

Preview

Greeting variants

Time window	Greeting prefix
5:00 – 11:59	morning
12:00 – 17:59	afternoon
18:00 – 22:59	evening
23:00 – 4:59	hey

Greetings are lowercase — sentence case does not apply here because these are not sentences, they are direct addresses. "morning, Aarav" reads correctly; "Morning, Aarav" reads like a header label.

Use the first name only — never the full name in the greeting. If the display name is absent, fall back to "hey there" (no name).

Anatomy

Part	Element	Notes
Logo mark	`.topbar-mark`	36×36px ink square, 10px radius, rotated −6°. Uses "S" glyph in Bricolage Grotesque 700 19px. See flag below.
Greeting	`.topbar-greeting`	14px Onest body. Prefix muted, first name bold ink. Flex: 1 so it fills the middle slot.
User avatar	`.topbar-avatar`	34px circle, teal-pale background, teal-deep text. Initials. Taps to profile/settings.

Logo mark — update needed The logo mark in this component uses an "S" glyph in a rotated ink square — the old logo mark approach. The design system has moved to a pure-type wordmark (Bricolage Grotesque 700, teal bridged #2A9D8F). Gagan should update this component in the Home screen prototype: either replace the rotated square with the wordmark, or use a different left-side identifier (e.g. an app icon asset). Do not ship the "S" mark to production.

Usage

Do Use the top bar only on the home screen. It is a contextual header for the primary view — not a global navigation bar. Deeper screens should use the standard back-button nav pattern from Nav bar.

Don't Don't add actions (notifications bell, search icon) to the top bar slots. The three slots — mark, greeting, avatar — are fixed. Adding a fourth breaks the balance and turns this into a nav bar, which is a different component.

Do The user avatar is a touch target for profile and settings. Give it a minimum hit area of 44×44px using padding or a pseudo-element, even though the visible circle is only 34px.

Don't Don't use a generic silhouette icon as a fallback avatar. If the user has no photo and no name, show their initials from their phone number's contact name, or "Me" as a two-letter fallback.

Code

HTML

<header class="topbar">
  <!-- Logo mark (pending wordmark update) -->
  <div class="topbar-mark" aria-hidden="true">S</div>

  <!-- Greeting -->
  <p class="topbar-greeting">
    evening, <strong>Aarav</strong>
  </p>

  <!-- User avatar -->
  <button
    class="topbar-avatar"
    aria-label="Profile and settings"
  >A</button>
</header>

Greeting logic

function greeting(firstName: string): string {
  const h = new Date().getHours();
  const prefix =
    h >= 5  && h < 12 ? 'morning'   :
    h >= 12 && h < 18 ? 'afternoon' :
    h >= 18 && h < 23 ? 'evening'   : 'hey';
  return firstName
    ? `${prefix}, ${firstName}`
    : `hey there`;
}

Design tokens used

Token	Role
`--ink`	Logo mark background; first name text
`--s-paper`	Logo mark glyph color
`--shadow-sm`	Logo mark subtle elevation
`--ink-body`	Greeting prefix text
`--teal-pale`	User avatar background
`--teal-deep`	User avatar initials color

See it in context

Interactive prototype — this component is live below. Tap, swipe, and drag to explore.

The top bar is the first element below the status bar — logo mark, greeting text, and avatar pill. Scroll the home screen to see how content flows under it.