// preview in
saved for every page

Typography

Headings and paragraphs in the skin's type. Heading sets the tag from the page outline and the size from the space it has, separately.

Pattern WAI-ARIA heading / paragraphServer componentSource ↗
minimal · light · #3fa34d

How we calculate your invoice

You pay for the seats in use on the last day of each month. Seats you add mid-month are charged from the day you add them.

level
size

Installation

Set up Camaleo once (Installation), then import what you need. It renders on the server.

import { Heading, Text } from "@camaleo/react";

Anatomy

Two separate elements: Heading renders <h1> to <h4>, and Text renders a <p>. Each has a data-slot you can target from CSS.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d

How we calculate your invoice

You pay for the seats in use on the last day of each month. Seats you add mid-month are charged from the day you add them.

Plans for every team

Billing

Payment method

Invoice history

Four sizes

Use the largest size once, for the page hero. Then the large size for sections, the medium one for cards and panels, and the small one for groups inside them.

Notifications

Email

A summary of mentions and comments, every weekday at 9 AM.

On your phone

Only direct messages and failed payments, right away.

Level and size apart

These are an h2 and two h3 in a settings panel, but drawn small. The outline stays right for screen readers, and the panel doesn't shout.

Payment method

The tag stays h2 whatever size you pick, so the page outline doesn't change.

Try the sizes

Click a size. The heading changes how it looks, but it stays an h2, so the page outline doesn't change.

Published 10/28/2026 · 6 min read

Starting in November, every invoice is issued on the first business day of the month, so your finance team gets one date to plan around.

Prices exclude taxes. Your bank may charge a fee for international payments.

Body and small text

Use body text for what people read. Use small text for what they scan or skip: dates, reading time, fine print.

Your trial ends on November 12. After that, the workspace becomes read-only until you choose a plan.

Emphasis and links in a sentence

Use <strong> for the one fact people must not miss and <em> for stress. A Link inside Text keeps the paragraph's size.

How we calculate your invoice

Starting in November, every invoice is issued on the first business day of the month. Until now, each invoice went out on the date you signed up, which meant that teams with several workspaces got bills on different days and had to match them by hand. One date makes approvals simpler: your finance team checks everything at once, and late payments drop because nobody misses a stray invoice in the middle of the month.

Line length

Limit paragraphs to about 65 characters per line with maxInlineSize: "65ch" on the container. Longer lines make it hard to find the start of the next one.

Every skin in Camaleo started as a single question: what would this button look like if it were printed in a newspaper, carved in clay or drawn on a 1990s screen? The answers became thirteen skins that share one set of components.

Drop cap

Pass dropCap to the first paragraph of a long article. Keep it for editorial pages; in an app it only gets in the way.

In context

Headings and text carry most of a page. These are whole pieces of UI you can copy, in the skin you picked.

What we learned shipping 13 skins

By Beatriz Miranda · 10/28/2026 · 6 min read

Every skin in Camaleo started as a single question: what would this button look like if it were printed in a newspaper, carved in clay or drawn on a 1990s screen? The answers became thirteen skins that share one set of components.

Article openingHeading · Text

One library, thirteen looks

Switch from a Swiss grid to soft clay with one attribute. Your components and your markup stay the same.

Landing page heroHeading · Text · Button

Terms of service

By creating a workspace you agree to these terms and to our privacy policy.

Last updated on 10/01/2026. Earlier versions are available on request.

Terms of serviceHeading · Text

Guidelines

Recent activity

DoPick the level from the outline, the size from the space.

An h2 in a sidebar can use size="sm". It looks small and still reads as a section to screen readers.

Plans and pricing

Don’tAn h4 just to change the size.

Jumping from h2 to h4 leaves a gap in the outline, and people who navigate by headings think they missed a section.

Starting in November, every invoice is issued on the first business day of the month. Until now, each invoice went out on the date you signed up, which meant that teams with several workspaces got bills on different days and had to match them by hand. One date makes approvals simpler: your finance team checks everything at once, and late payments drop because nobody misses a stray invoice in the middle of the month.

DoKeep lines between 45 and 75 characters.

At that length the eye finds the next line easily, even in long texts.

Starting in November, every invoice is issued on the first business day of the month. Until now, each invoice went out on the date you signed up, which meant that teams with several workspaces got bills on different days and had to match them by hand. One date makes approvals simpler: your finance team checks everything at once, and late payments drop because nobody misses a stray invoice in the middle of the month.

Don’tParagraphs as wide as the screen.

On a large monitor a line can pass 150 characters, and people lose their place.

Props

PropTypeDefaultDescription
level1 | 2 | 3 | 42The heading tag, h1 to h4. Pick it from the page outline; size sets how big it looks.
size"display" | "lg" | "md" | "sm""lg"How big the heading looks: display for a page hero, lg for sections, md for cards and panels, sm for small groups.
Also accepts every prop of the underlying primitive and native attributes.
PropTypeDefaultDescription
variant"body" | "small""body"body for reading text, small for metadata, captions and fine print.
dropCapbooleanfalseMakes the first letter large and drops it into the first lines, for article openings.

Heading and Text also take the attributes of their HTML element, like id and className.

Styling hooks

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the element itself.

Attributes

data-sizedisplay · lg · md · sm
data-variantbody · small
data-drop-cappresent when dropCap is on

Tokens it reads

Color

--cml-accent-text--cml-fg--cml-fg-muted--cml-fg-secondary

Type & motion

--cml-font-display--cml-font-weight-display

Accessibility

—Headings and paragraphs don't take focus. Screen reader users jump between headings with their own keys (H in NVDA and JAWS, the rotor in VoiceOver).
Was this page helpful? · Edit this page on GitHub