Kaliop Frontend Guidelines

Appearance

Typography ​

Typography is defined in two parts:

  • Base tokens (font families, sizes, line-heights) in configs/
  • Typography utilities (heading, body, label) in utilities/

Base Tokens ​

Base tokens define the fundamental typographic values that will be used to build typography utilities.

css
/* styles/configs/text.css */

@theme {
  --text-*: initial;

  /* Text sizes — rem relative to the default 16px root */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 2rem;     /* 32px */
  --text-4xl: 2.5rem;   /* 40px */
  --text-5xl: 3.75rem;  /* 60px */
  --text-6xl: 4.5rem;   /* 72px */
  /* ... */

  /* Line heights */
  --leading-s: 1.14;
  --leading-m: 1.2;
  --leading-l: 1.66;
}

Font families are defined in their own config file:

css
/* styles/configs/font.css */

@theme {
  --font-sans: "Inter", sans-serif;
  --font-heading: "Poppins", sans-serif;
}

These generate the matching utilities (font-sans, font-heading, ...).

Typography Utilities ​

Typography utilities are custom utility classes that combine size, line-height, and font-weight into reusable styles. They are defined using @utility in the utilities folder.

css
/* styles/utilities/text.css */

@utility heading-1 {
  @apply leading-s text-4xl font-semibold;

  @variant lg {
    @apply text-6xl;
  }
}

@utility body-m {
  @apply leading-m text-base font-normal;
}

Responsive Typography ​

Designers often define typography styles that change based on screen size (e.g., smaller headings on mobile). Using @variant, you can bundle these responsive variations directly into the utility class.

In the example above, heading-1 is text-4xl (40px) on mobile and becomes text-6xl (72px) on desktop (lg breakpoint). This keeps responsive logic centralized in one place rather than scattered across components.

TIP

These styles are examples. Actual values should match the typographic choices from your design system.

Usage ​

Use typography utilities directly in your markup:

html
<h1 class="heading-1">Page title</h1>
<h2 class="heading-2">Section title</h2>
<p class="body-m">Paragraph text</p>
<span class="label-m">Label text</span>

Utilities usually come as a family (heading-*, body-*, label-*); the exact names come from your design system and vary per project.