Skip to content

Typography: Update font stack for branding #107

@Ayush8923

Description

@Ayush8923

Is your feature request related to a problem?
The app currently uses Geist and Geist Mono, which gives off a neutral, developer-tool aesthetic. This typography doesn’t align with the premium, approachable brand identity needed for Kaapi Konsole, which targets both non-technical users and developers.

Describe the solution you'd like
Replace the font stack with:

  • Plus Jakarta Sans (primary/sans-serif) for all UI text, headings, labels, and body copy
  • JetBrains Mono (monospace) for code contexts like config editors, API keys, and IDs
    Both should be loaded via next/font/google with display: "swap" for optimal performance.
Original issue

Describe the current behavior
The app uses Geist and Geist Mono (Next.js defaults) with a fallback to Arial, Helvetica, sans-serif. Geist is a solid UI font but has a neutral, developer-tool aesthetic. For an Kaapi Konsole Product - which targets non-technical users alongside developers - the typography feels generic and doesn't convey the premium, approachable brand identity the product needs.

Describe the enhancement you'd like

Replace the font stack with:

  • Plus Jakarta Sans (primary/sans-serif) — for all UI text, headings, labels, and body copy
  • JetBrains Mono (monospace) — for code contexts like config editors, API keys, and IDs
    Both loaded via next/font/google with display: "swap" for optimal performance.

Why is this enhancement needed?

  • Brand alignment
  • Readability at small sizes
  • Weight range (200–800)
  • JetBrains Mono for code

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    Status

    Closed

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions