HelixTimelyCare Experience Design System
Light

Logo

The official TimelyCare logo in four brand-approved variants.

Spec · from metadata

When to use

  • •Displaying the TimelyCare brand logo
  • •Header or sidebar branding
  • •Login/auth screens
  • •Footer branding

When not to use

  • •User-uploaded images — use Avatar or plain img
  • •Decorative icons — use lucide-react icons
  • •Optimized images — use framework-specific Image component (e.g., next/image)

Variants

PropValuesDefaultDescription
variantdefaultblackwhite-tealwhitedefaultMaps to a logo source via variantSrcMap. default=2-color, black=monochrome, white-teal=inverse, white=all-white.

Anti-patterns

Avoid<img src="/logos/TC-logo_2C.svg" alt="TimelyCare" />
Prefer<Logo variant="default" />

Use Logo component for consistent variant handling and default sizing.

Avoid<Logo variant="white" />  {/* on white background */}
Prefer<Logo variant="black" />  {/* on white background */}

Choose the correct variant for the background color. White variant is for dark backgrounds.

Accessibility

  • Required ARIAalt (defaults to 'TimelyCare')
  • Screen readerRenders as <img> with alt text. Default alt is 'TimelyCare'. Override with alt prop for different branding.

Import

import { Logo } from "@timelycare/helix-ui"

Props

interface LogoProps {
  variant?: "default" | "black" | "white-teal" | "white"
  width?: number
  height?: number
  className?: string
  alt?: string
}

Variants

VariantUse CaseBackground
defaultPrimary usage across light surfaces, marketing, and product UILight / white
blackPrint, monochrome contexts, or when color is unavailableLight / white
white-tealDark surfaces where brand color contrast is still neededDark / navy
whiteFully inverted surfaces, footers, dark headersDark / navy

Choosing a Variant

  • Default: Use in most contexts — headers, loading screens, onboarding, email. Always prefer this when the background is white or light gray.
  • Black: Reach for this in monochrome print materials, PDF exports, or when the product environment strips color.
  • White-teal: Use on dark navy backgrounds where the teal wordmark still adds brand character.
  • White: Use when the logo must be fully single-color white, such as on dark photography, solid brand-color backgrounds, or when a fully reversed treatment is needed.

Sizing

The default dimensions (width=163, height=59) match the SVG's native viewBox (163.59 × 58.57). Always supply both width and height together to preserve the aspect ratio (~2.79:1).

Use CaseSuggested Width
App header / navbar120 – 160
Marketing hero200 – 280
Favicon / small badgeAvoid — use the icon mark only
Footer100 – 140

Common Patterns

Header logo

<header className="flex items-center px-6 py-4 bg-background">
  <Logo variant="default" width={140} height={50} />
</header>

Dark nav / sidebar

<nav className="bg-[#17385b] px-6 py-4">
  <Logo variant="white" width={120} height={43} />
</nav>

White-teal on a dark surface

<div className="bg-navy-700 p-8">
  <Logo variant="white-teal" width={163} height={59} />
</div>

Custom alt text (e.g. within a link)

<a href="/">
  <Logo variant="default" width={140} height={50} alt="TimelyCare — go to homepage" />
</a>

Accessibility

  • Always provide a descriptive alt prop. The default is "TimelyCare", which is sufficient for most uses.
  • When the logo is inside a link, make alt more descriptive: "TimelyCare — go to homepage".
  • Never set alt="" on the logo — it conveys brand identity and should always be announced to screen readers.
  • Do not use the logo as a decorative element; if you must suppress it, wrap in a container with aria-hidden="true" at the parent level and leave alt intact.

Gotchas

ProblemSolution
Logo appears blurry at small sizesOnly use provided SVG variants — never raster exports. The <Logo> component serves SVGs by default.
Logo invisible on light backgroundCheck your variant. white and white-teal are only legible on dark backgrounds.
Stretched or distorted logoAlways provide width and height together at a 2.79:1 ratio, or let one dimension be derived by CSS.
Wrong color logo in printUse the black variant for all print/PDF contexts.

Last updated: March 20, 2026