Calendar 2025
A card that doesn't link can hold its own actions.
Design system
01 Colors
Primary
1
Primary variant
1
Secondary
1
Secondary variant
1
Background
1
Surface
1
Error
1
02 Typography
Heading 1 - Serif - 150px
Arthur
Heading 2 - Serif - 100px
Kaamelott
Heading 3 - Serif - 56px
Merlin & Élias
Heading 4 - Serif - 32px
Perceval & Karadoc
Heading 5 - 28px - 4.75 Character Space
Yvain, chevalier au Lion ou l'orphelin de Carmélide
Subheading 1 - Serif - 28px
384,400 pintes de bière
Subheading 2 - Condensed Sans-serif - 14px - 2.35 Character Space
Gauvain, chevalier au Pancréas
Nav Text - Condensed Sans-serif - 16px - 2.7 Character Space
Kadoc
Body Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
03 Interactive elements
Navigation
Accordion
Button
Variants
Sizes
Shapes
Links
With an href, a Button is a link that looks like a button, with every variant.
04 Row & Pane
Columns
One column
Two columns
1:1 by default
Three
equal
columns
Ratio
2:1 — the wide side
narrow side
1:2 — narrow side
the wide side
Gap
gap
small
gap
gap
medium
gap
gap
large
gap
Background
background="background"
Switches with the theme
background="surface"
Switches with the theme
background="primary"
Switches with the theme
background="secondary"
Switches with the theme
Width
width="full"
Spans the whole parent
width="contained"
Content stays within the site container
Pane alignment
align="start"
align="center"
align="end"
valign="start"
valign="center"
valign="end"
center
Text sits in the middle of the taller image beside it, on both axes.
Stacking
A Row stacks to one column when the Row itself is narrower than 40rem, whatever the viewport.
Inside
a narrow
container
05 Image
Sources and credit
Credit slot
Ratio and fit
06 Form controls
Every control wraps a native element, so submission and validation work without JavaScript. Tab through the fields to see the focus ring.
Sizes
An Input, a Select and a Button of the same size are the same height.
Label
Input
We only use it to answer you.
Enter a postal code such as H2X 1Y4.
Textarea
A few words about the print you want.
The message can't be empty.
Select
Pick a format.
A native select has no read-only state; use a read-only Input instead.
Checkbox
One email a month.
You must accept the terms.
Radio group
Print size
Framing is quoted separately.
Print size
Pick a print size.
Disabled
Horizontal
Switch
Checkbox semantics, toggle look.
Turn this on to continue.
Form field
A contact form built from FormFields. Submitting it empty shows the browser's own validation.
Errors from a script
FormField's error is set when the page renders. Validation in the browser calls setFieldError instead: leave this field with an invalid email, then fix it.
We only use it to answer you.
07 Card
Only the body is given, so only the body renders.
08 Badge
primarysecondarymuteddangeroutline
Heron at dawn New Sold out
09 Avatar
Image
Initials fallback
Kevin Verreault (decorative avatar next to the name)
10 Separator
Decorative (role="none"), the default:
Semantic (role="separator"), when the division matters to screen-reader users:
OiseauxMammifèresPaysages
11 Table
| Size | Paper | Edition | Price |
|---|---|---|---|
| 20 × 30 cm | Matte | Open | 45 $ |
| 30 × 45 cm | Lustre | Open | 75 $ |
| 40 × 60 cm | Fine art | 25 | 120 $ |
| 60 × 90 cm | Fine art | 10 | 240 $ |
| Size | Paper | Edition | Price |
|---|---|---|---|
| 20 × 30 cm | Matte | Open | 45 $ |
| 30 × 45 cm | Lustre | Open | 75 $ |
| 40 × 60 cm | Fine art | 25 | 120 $ |
| 60 × 90 cm | Fine art | 10 | 240 $ |
12 Skeleton
13 Gallery
Small square thumbnails
14 Alert
Variants
Shipping
Order received
Limited edition
Payment declined
Without icon or title
15 Toast
One Toast region sits in the layout. Any script queues a message in it with toast(message, { variant, duration }).
16 Tabs
Without JavaScript every panel shows under its heading.
Small
20 × 30 cm, printed on matte paper.
Medium
40 × 60 cm, printed on fine-art paper.
Large
60 × 90 cm, mounted on aluminium.
18 Pagination
20 Dialog
A native modal dialog: Escape or a click outside closes it, and focus returns to the Button that opened it.
Sizes
21 Alert dialog
Asks for an explicit choice: no close button, and a click outside doesn't close it. Escape cancels.
Last choice:
22 Sheet
23 Lightbox
One Lightbox on the page opens every Gallery image at full size, with its credit. The arrow keys move to the previous or next photo, which it loads ahead of time so that it shows at once.
Captioned, responsive photos
A site gallery with its own layout opens in the same Lightbox through the gallery-open contract. Its links can also carry a srcset and sizes for the full-size photo, and a caption that shows under it. A caption longer than three lines scrolls, and Tab reaches it to scroll it with the keyboard.
24 Popover
A small panel anchored to its trigger. Escape or a click outside closes it.
Fine-art print
Pigment ink on 310 g cotton rag, signed and numbered on the back.
26 Tooltip
Shows on hover and on keyboard focus, and describes its trigger. It sits above, or below when there is no room above.
Follow on Instagram
Follow on Facebook
Follow on X