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.
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.
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.
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.