<!-- LLM_VERSION_INFO
FORMAT: text/markdown
CONTENT_TYPE: article
ORIGINAL_URL: https://qpoint.io/dev/typography
ALTERNATE_VERSION: dev/typography/index.html (text/html)
EXTRACTION_DATE: 2026-04-17T03:55:51.380Z

This is the markdown version with text-only content (images converted to alt-text).
For rich formatting with images, request the HTML version at: dev/typography/index.html
-->

# Typography & Design System

A comprehensive showcase of our design system's typography, buttons, and UI components.

## Typography

### Headings

# Heading 1 (text-48)

Main page titles and hero headings

## Heading 2 (text-35)

Section titles and major content divisions

### Heading 3 (text-24)

Subsection titles and card headers

#### Heading 4 (text-20)

Minor section headers

##### Heading 5 (text-18)

Small section headers

###### Heading 6 (text-16)

Smallest section headers

### Body Text

Body Large (text-18) - This is the standard large body text used for important content and descriptions. It provides good readability and maintains consistent spacing.

Used for hero descriptions and important content

Body Regular (text-16) - This is the standard paragraph text used throughout the site. It provides good readability and maintains consistent spacing.

Default body text for most content

Body Small (text-14) - This is smaller text used for secondary information, captions, and metadata.

Used for captions, metadata, and secondary information

Caption (text-12) - Very small text used for fine print, legal text, and minimal metadata.

Used for fine print and minimal metadata

### Font Weights

Regular (font-reg) - 400 weight

Medium (font-med) - 500 weight

Semi Bold (font-semi) - 600 weight

Bold (font-bold) - 700 weight

Extra Bold (font-exbold) - 800 weight

Black (font-black) - 900 weight

### Links

This is a paragraph with a [standard link](/content/dev/typography/#/index.html) that follows our link styling.

Here's another [link example](/content/dev/typography/#/index.html) to show consistency.

## Buttons

### Primary Buttons

Default Button

Disabled Button

Loading Button

Default primary buttons with grape background and white text

### Secondary Buttons

Stroke Button

Disabled Stroke

Loading Stroke

Secondary buttons with white background and grape border

### Call to Action Buttons

Call to Action

Disabled CTA

Loading CTA

Larger CTA buttons with enhanced styling for important actions

### Button Sizes

Small Button
Regular Button

Large CTA

Different button sizes for various use cases

## Form Elements

### Input Fields

Text Input

Email Input

Disabled Input

### Select Dropdown

Select OptionChoose an optionOption 1Option 2Option 3

## Color Palette

### Primary Colors

Grape 400

Grape 500

Grape 600

Grape 50

### Grey Scale

50

100

300

500

600

900

## Spacing & Layout

### Spacing Scale

4px (w-4 h-4)

8px (w-8 h-8)

12px (w-12 h-12)

16px (w-16 h-16)

24px (w-24 h-24)

### Layout Utilities

Screenshot Style

shadow box

Shadow Box

_shadow-box class

Card Marketing

card-marketing class

## Component Examples

### Section Headline Component

## Example Section Title

This is an example description for the section headline component.

### Big Point Component

#### Example Big Point

This is a subtitle for the big point component that demonstrates the styling and layout.

[Go to QPoint homepage](/content/site-root.html)