Skip to main content

Typography

Each element of the scale has its own component, so you don't have to worry about setting the right styles for each text.

Although each component has its default values, you are always free to override these values according to your needs.

Large Title​

The Art of Modern Design

Building Better Experiences

Innovation Through Simplicity

Creating Digital Harmony

Typography Matters

 
import { VStack, LargeTitle } from "@spirokit/ui";

const LargeTitleComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <LargeTitle>The Art of Modern Design</LargeTitle>

      {/* Font weight: Semibold */}
      <LargeTitle fontWeight="$semibold">
        Building Better Experiences
      </LargeTitle>

      {/* Font weight: Medium */}
      <LargeTitle fontWeight="$medium">
        Innovation Through Simplicity
      </LargeTitle>

      {/* Font weight: Normal */}
      <LargeTitle fontWeight="$normal">Creating Digital Harmony</LargeTitle>

      {/* Letter spacing: 3xl */}
      <LargeTitle letterSpacing="$3xl">Typography Matters</LargeTitle>
    </VStack>
  );
};

Title One​

Crafting Memorable Interfaces

Design System Excellence

User-Centered Approach

Pixels with Purpose

Beautiful Typography

 
import { VStack, TitleOne } from "@spirokit/ui";

const TitleOneComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <TitleOne>Crafting Memorable Interfaces</TitleOne>

      {/* Font weight: Semibold */}
      <TitleOne fontWeight="$semibold">Design System Excellence</TitleOne>

      {/* Font weight: Medium */}
      <TitleOne fontWeight="$medium">User-Centered Approach</TitleOne>

      {/* Font weight: Normal */}
      <TitleOne fontWeight="$normal">Pixels with Purpose</TitleOne>

      {/* Letter spacing: 3xl */}
      <TitleOne letterSpacing="$3xl">Beautiful Typography</TitleOne>
    </VStack>
  );
};

Title Two​

Designing for Tomorrow

Motion and Meaning

Form Meets Function

Creative Solutions

Digital Excellence

 
import { VStack, TitleTwo } from "@spirokit/ui";

const TitleTwoComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <TitleTwo>Designing for Tomorrow</TitleTwo>

      {/* Font weight: Bold */}
      <TitleTwo fontWeight="$bold">Motion and Meaning</TitleTwo>

      {/* Font weight: Semibold */}
      <TitleTwo fontWeight="$semibold">Form Meets Function</TitleTwo>

      {/* Font weight: Normal */}
      <TitleTwo fontWeight="$normal">Creative Solutions</TitleTwo>

      {/* Letter spacing: 2xl */}
      <TitleTwo letterSpacing="$2xl">Digital Excellence</TitleTwo>
    </VStack>
  );
};

Title Three​

Attention to Detail

Interactive Storytelling

Visual Hierarchy

Modern Aesthetics

Refined Typography

 
import { VStack, TitleThree } from "@spirokit/ui";

const TitleThreeComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <TitleThree>Attention to Detail</TitleThree>

      {/* Font weight: Bold */}
      <TitleThree fontWeight="$bold">Interactive Storytelling</TitleThree>

      {/* Font weight: Semibold */}
      <TitleThree fontWeight="$semibold">Visual Hierarchy</TitleThree>

      {/* Font weight: Normal */}
      <TitleThree fontWeight="$normal">Modern Aesthetics</TitleThree>

      {/* Letter spacing: 2xl */}
      <TitleThree letterSpacing="$2xl">Refined Typography</TitleThree>
    </VStack>
  );
};

Body​

Great design is about finding the perfect balance between aesthetics and functionality.

Typography is the voice of your visual design, speaking volumes before words are read.

Every pixel matters when crafting experiences that users will remember.

Consistency creates confidence in design.

 
import { Body, VStack } from "@spirokit/ui";

const BodyComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <Body>
        Great design is about finding the perfect balance between aesthetics
        and functionality.
      </Body>

      {/* Font weight: Bold */}
      <Body fontWeight="$bold">
        Typography is the voice of your visual design, speaking volumes before
        words are read.
      </Body>

      {/* Font weight: Semibold */}
      <Body fontWeight="$semibold">
        Every pixel matters when crafting experiences that users will remember.
      </Body>

      {/* Letter spacing: 3xl */}
      <Body letterSpacing="$3xl">
        Consistency creates confidence in design.
      </Body>
    </VStack>
  );
};

Subhead​

Exploring the intersection of design and technology

Building bridges between users and interfaces

Where creativity meets code elegantly

Design systems at scale

 
import { VStack, Subhead } from "@spirokit/ui";

const SubheadComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <Subhead>Exploring the intersection of design and technology</Subhead>

      {/* Font weight: Bold */}
      <Subhead fontWeight="$bold">
        Building bridges between users and interfaces
      </Subhead>

      {/* Font weight: Semibold */}
      <Subhead fontWeight="$semibold">
        Where creativity meets code elegantly
      </Subhead>

      {/* Letter spacing: 3xl */}
      <Subhead letterSpacing="$3xl">Design systems at scale</Subhead>
    </VStack>
  );
};

Footnote​

Last updated: December 2024

Published by Design Team

Version 2.0 - Stable Release

Documentation in progress

 
import { VStack, Footnote } from "@spirokit/ui";

const FootnoteComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <Footnote>Last updated: December 2024</Footnote>

      {/* Font weight: Bold */}
      <Footnote fontWeight="$bold">Published by Design Team</Footnote>

      {/* Font weight: Semibold */}
      <Footnote fontWeight="$semibold">Version 2.0 - Stable Release</Footnote>

      {/* Letter spacing: xl */}
      <Footnote letterSpacing="$xl">Documentation in progress</Footnote>
    </VStack>
  );
};

Caption​

Image courtesy of Unsplash

Figure 1: Component Architecture

Source: Design Guidelines 2024

Table 1: Typography Scale

 
import { VStack, Caption } from "@spirokit/ui";

const CaptionComponent = () => {
  return (
    <VStack gap="$4" width="$full">
      {/* Default */}
      <Caption>Image courtesy of Unsplash</Caption>

      {/* Font weight: Bold */}
      <Caption fontWeight="$bold">Figure 1: Component Architecture</Caption>

      {/* Font weight: Semibold */}
      <Caption fontWeight="$semibold">Source: Design Guidelines 2024</Caption>

      {/* Letter spacing: 3xl */}
      <Caption letterSpacing="$3xl">Table 1: Typography Scale</Caption>
    </VStack>
  );
};