How Cloud Native Days Italy looks
Pop and neo brutalist: hard edges, black borders, flat colour bands, hard shadows. Every example on this page is rendered with the components and the tokens of this website, so it cannot drift from what you see everywhere else.
Colour
Six colours, one job each. The palette is flat by design: no gradients, no tints beyond the ones listed here.
Palette
Colour goes in large surfaces, atoms stay neutral. One magenta per block, and magenta never becomes a text band.
Blue
#3069DE · brand-blue
Use for: Identity. Hero dates and titles, Call for Papers band, FAQ band, links.
Not for: Primary action in the content: that one is magenta.
Magenta
#F91B71 · brand-magenta
Use for: Action and accent. Primary CTA, prices, highlighted cards, accents on dark bands.
Not for: Section background with text on it. Allowed as an image only band, like the photo strip in home.
Yellow
#FBC430 · brand-yellow
Use for: Accents and blocks. Chips, agenda time cells, titles on dark surfaces, invite boxes, navbar primary CTA.
Not for: Section band. The theme band is the one declared exception, an editorial one off.
Yellow Light
#FADD64 · brand-yellow-light
Use for: Soft surfaces where full yellow shouts too much: notes, quotes, callouts.
Not for: Text colour, and anything that has to look like an action.
Ink
#111111 · ink
Use for: Body text, every pop border, dark bands like the numbers strip and the venue.
Not for: Buttons sitting on a yellow surface: there magenta wins.
Cream
#FDF6E3 · cream
Use for: Warm alternative band, tickets and photo wall. Separates two light sections.
Not for: Text colour. It is a surface.
Text hierarchy
Four levels, in decreasing order. Never the default Tailwind greys.
Body text
text-ink · #111111
Strong secondary
text-ink-soft · #333333
Secondary
text-ink-muted · #555555
Micro copy and captions
text-ink-faint · #666666
Contrast pairs
These are the combinations that hold. Magenta on white is fine from 18px bold or in display, never for small text.
Aa
White on blue
Aa
White on magenta
Aa
White on ink
Aa
Yellow on ink
Aa
Ink on yellow
Aa
Ink on cream
Typography
Two typefaces, one rule that never bends: the display font is always uppercase and never runs a paragraph.
Display scale
Anton (Extenda in the official version) for titles, numbers and stamps. Always uppercase, never for body or UI copy.
2027
text-display · clamp(3rem, 7vw, 7.5rem) · Hero display, one per page.
Be part of it
text-section · clamp(2rem, 3.5vw, 2.875rem) · Section titles (h2).
285
text-stat · clamp(1.75rem, 3vw, 2.5rem) · Numbers, prices, timeline years.
Save the date
text-stamp · clamp(0.875rem, 1.5vw, 1.25rem) · Stamps and badges.
Body scale
Poppins for everything else: bold for calls to action and leads, regular for reading.
Lead paragraph
text-xlBold body, CTA and labels
font-boldBody copy, the default
text-baseSecondary copy and notes
text-smOverline label
text-xs uppercaseThe two typefaces
One display, one text. No third font, ever.
Extenda / Anton
Extenda is the official display typeface. It is licensed, so we cannot redistribute it: it never travels inside a logo pack or a zip. The site renders Anton, the substitute we picked for the web, and swaps to Extenda where the licence allows it.
Anton on Google FontsPoppins
Body font for paragraphs, buttons, labels and every piece of interface copy. Regular for reading, bold for anything that has to be clicked or scanned. Free on Google Fonts, so it can travel with the assets.
Poppins on Google FontsSurfaces, borders, shadows
Hard edges and hard shadows. No radius, no blur, no gradient: a shadow is a black block offset by a few pixels.
Section rhythm
Every section is a full width band with its own background; the content lives in a 1200px container. Two light bands touching each other are separated by a solid ink border.
Content container
max-w-[1200px] mx-auto px-6
Band: full width background, py-16 md:py-24
The three shadows
Same direction, three sizes. Against the ink band they turn white, and so do the borders: black on black is nothing. On blue and magenta the black shadow still reads and stays as it is.
Aa
shadow-pop-sm · 3px 3px 0 0 #111111
Stamps and small badges.
Aa
shadow-pop · 4px 4px 0 0 #111111
Buttons, dropdown panels, cards on hover.
Aa
shadow-pop-lg · 6px 6px 0 0 #111111
Feature blocks and document covers.
Aa
shadow-pop-white-sm
Aa
shadow-pop-white
Borders
Ink on everything, magenta only to mark the one option that stands out.
Default border
border-pop border-ink · 2px solid
Highlighted card
card-pop-accent · 3px magenta
Shadows: the three levels
Always, only on hover, never. If a surface is dense and informative it carries no shadow at all.
Always: stamps, primary CTA, feature cards, open dropdowns
Talk card
Hover me
Only on hover: interactive grid cards
Welcome
Opening keynote
Never: agenda rows, FAQ accordions, inputs, dense surfaces
Logo
There is one logo, the cloud with the wordmark, in three colour versions. There is no symbol only mark and no square mark: do not build one.
The three versions
Same lockup, three fills. Colour is the default, white is for dark and saturated surfaces, ink was drawn for yellow and is available even though the site does not use it yet.
Colour
The default. On white and cream, and anywhere the surface is quiet.
White
For ink, blue and magenta. The only version that is a real vector file.
Ink
Monochrome #1D1D1B, made for yellow. Available, not used on the site today.
Clear space and minimum size
Keep free space around the logo at least as tall as the cloud, on all four sides. Nothing enters that area: no text, no ring, no photo edge.
The yellow field is the clear space
Minimum size on screen: 140px wide, the size rendered here. In print keep the whole lockup at least 25mm wide. Below that the wordmark closes up and the pizza slice turns into a smudge.
Which version on which background
The white version needs a dark or saturated surface underneath. On yellow it disappears, so there the choice is between ink and colour.
On white: colour
On cream: colour
On ink: white
On blue: white
On magenta: white
On yellow: ink or colour
The yellow case, side by side. In the colour version the filling of the pizza slice is yellow and melts into the background, and the blue wordmark holds a weak contrast. The ink version was drawn for this: the slice becomes a silhouette with the background showing through. The site keeps using the colour one, and both are correct.
What breaks the logo
The lockup is fixed. Scale it, place it, and stop there.
Don't
Stretched or squeezed. Scale both sides together, always.
Don't
Recoloured. Blue, black, white: those are the versions that exist.
Don't
Blurred shadow behind it. Our shadows are hard blocks, and the logo carries none.
Don't
White version on yellow: not enough contrast. Switch to the ink or the colour version, or change the surface.
Atoms
Buttons, chips, inputs. Small pieces stay neutral: the colour lives in the surface around them, except where it carries a meaning.
Buttons
Every button is uppercase, bold, square, with an ink border and a hard shadow. On hover it moves two pixels down and right and the shadow shrinks: it looks pressed.
Resting
Hover
btn-pop-primaryPrimary action in the content. One per block.
Resting
Hover
btn-pop-secondarySecondary action, next to a primary one. Documents and downloads use this one too, with a Download icon.
Resting
Hover
btn-pop bg-brand-yellowPrimary action in the navbar only.
Resting
Hover
btn-pop-darkInk button. Belongs on the ink band, where it takes the white companions below. Available, not in use anywhere yet.
Buttons on the ink band
Against ink, a black border and a black shadow disappear into the background. The modifier turns both white and it goes next to a variant, it does not replace it. On blue and magenta nothing changes: there the black shadow still reads.
White filled is the loud one, ink with a white outline is the quiet one, and the yellow bold link is what the venue band uses today: a button here is for an action worth stopping for, not for every link.
btn-pop btn-pop-secondary btn-pop-on-ink · btn-pop btn-pop-dark btn-pop-on-ink
Chips and tags
Colour in a tag is allowed only when it means something. A tag that just decorates is white with an ink border.
Generic chip: chip-pop
Session types: the colour follows the type
Ticket status: yellow live, white upcoming, grey closed
Anchor chips
In page navigation: bordered chips on the hero, hover inverts to ink and white.
Inputs
Square, ink border, no shadow. The focus ring is blue: it is the only place where blue behaves like a system colour.
Label above, bold and uppercase. Helper text below in text-ink-muted.
A form ends with one action, and that action is a button, not a link.
SendStamp or eyebrow
Both sit above a title. The stamp says "act here", the eyebrow says "read here". Picking the wrong one changes the meaning of the whole section.
The two cases, side by side
Stamp on page titles, in hero moments and on the action sections: Call for Papers, Tickets, Become a Sponsor. Eyebrow on informative section titles, magenta on light surfaces, yellow on blue or ink.
You could be on this stage
Submissions are open until the end of February.
Submit a talkAction section: it asks for something, so it gets a .stamp.
Two days, one community
Talks, workshops and the corridor track, which is where the good conversations happen anyway.
Informative section: it tells something, so it gets an .eyebrow.
Never two stamps in the same view: a second one makes both look decorative.
On the ink band use the eyebrow, never the stamp: a stamp there would need a white border and a white shadow, and it would end up looking like a button. The venue band and the numbers band already work this way.
Stamp variants
Same shape, same rotation, three surfaces. The rotation alternates between minus and plus two degrees when stamps repeat down a page.
White, the default. Works on any surface.
Yellow, when the section is already an invitation.
Magenta with white text, for urgency. Rare, on purpose.
Eyebrow colours
The eyebrow takes the colour that survives on its background.
Magenta
Yellow
Ink
Components
The recurring pieces of the site, rendered here with the same code that runs the home page.
Grid card and feature card
Grid cards are white and lift on hover. A feature card is a coloured surface that stays put and always carries its shadow.
Running Kubernetes on a pizza budget
Ada Lovelace, Platform Engineer
09:30 Main room
Hover: lift and shadow
One day, three tracks
- Keynotes in the main room
- Hands on workshops
Coloured surface, neutral atoms
Dropdown panel
A full colour surface with an ink border and a hard shadow: blue for the Hub, magenta for About. Items invert on hover, a rings sticker sits in the bottom right corner.
Hub
- Agenda
- Speakers
- Content hub
- Brand & Media Kit
About
- Agenda
- Speakers
- Content hub
- Brand & Media Kit
Timeline
Square yellow node, ink line, year in display blue. The node of the edition that is coming blinks between blue and magenta, and stops still for anyone who asked for reduced motion.
- 2026
Bologna, second edition
285 attendees and a bigger room.
- 2027
Bologna, third edition
20 May, Savoia Hotel Regency.
Downloads
An asset that does not exist yet is a disabled button with a Soon chip, never a dead link. Filling in the url turns it into a real download.
Invite box and document preview
Yellow is the container of an invitation, so the buttons inside it stay magenta, white or ink. The document cover carries the large shadow and becomes a link when the file is published.
Become a Sponsor
Cloud Native Days Italy is made possible by the support of our sponsors. We offer various sponsorship packages to fit your needs.
SoonSponsorship prospectusNumbers band
Ink band, display numbers in the three brand colours, labels in white. It counts up when it enters the viewport: it is the celebratory one. For documental numbers, look at the press facts in the brand kit.
0
Attendees 2026
0
Speakers
0
Sponsors
Component: src/components/metrics/metrics.js
Speaker: role, company, credentials
One composition for the whole site: whoever fills a profile can write the company inside the role, it is never repeated. In cards and lists everything is grey, because those surfaces are dense. The profile page is the only place with colour, and the only place where magenta marks a recognition of the person instead of an action.
Eleni Grosdouli
DevOps Consulting Engineer @Cisco Systems
Kubestronaut
Cards, agenda, talk page: all grey, two roles at most
Eleni Grosdouli
Role
DevOps Consulting Engineer @Cisco Systems
Community role
Kubestronaut
Profile page: labelled, blue role, magenta credential
Composition: src/lib/speakerMeta.js. The company is a link only on the profile page, and only when the profile carries a real URL. Credentials sit on one line, separated by a pipe, from the most recognisable to the most niche, and the organisers close the line with CND Italy Organizer. Vendor certifications stay in the bio: this field is a community role.
Section link
Inline links are blue and turn magenta on hover. A link that has to look like a button is a button.
Patterns
How the pieces behave next to each other: which button in which context, what happens on hover, where decorations go, and the order of the bands down a page.
Calls to action by context
The colour of a call to action depends on the surface it sits on, not on the kind of action. The same action can be yellow in the navbar and magenta in the content, and that is on purpose. The fourth context is the ink band, where borders and shadows turn white: it is in the atoms section.
Navbar: yellow primary, white secondary. Yellow keeps the bar readable over the magenta scrolling underneath.
Content: magenta primary, white secondary. One magenta per block. A document is a white button with the Download icon: the icon carries the meaning, not a colour of its own.
Become a sponsor
Contact usYellow surface: the yellow is the container of the invitation, the button inside stays magenta.
Hover: two patterns and nothing else
Cards lift. Menu items and coloured card footers invert. Anything else stays still.
Lift
Translate up two pixels, the shadow appears.
Invert: ink background, white text. Hover one of the two rows.
Ring clusters
At least two elements in a decorated section, never a lonely ring in a corner, smaller sizes below the md breakpoint.
duo · The minimum accent. Two rings, never one.
a · Big tricolour ring with a satellite.
c · Large duotone pair.
d · Diagonal trio, small to large to small.
e · Giant ring with a close satellite.
dot · Single ring: only next to another cluster, never alone in a corner.
Halftone
Four weights of the same texture, picked by density exactly like the ring clusters. They live at 20 to 30 percent opacity, keep a larger scale that is not reduced on mobile, and can sit in the middle of a band.
halftone · The brand book original. Diagonal blob, the biggest dots, the loudest of the four.
halftone-b · Rectangular field, medium density fading to the bottom right.
halftone-c · The sparsest. For dense sections where the texture must not compete.
halftone-d · The densest, strong gradient from one corner. Holds tall bands.
Shown at full strength to compare the four. In a page they never go above 30 percent.
On a colour band
The asset is a very light grey, so on blue, magenta or ink it takes invert: it turns dark and appears. Kept at opacity-20 so the text stays first.
On white and cream
No invert here: the grey stays light and the texture is barely there, which is the point. If you can read it as a shape, it is too strong.
Where they live
What is ours travels, what is licensed does not.
Ours
Rings and halftone are ours: the two base patterns are downloadable in the brand kit, the four halftone weights and the ring clusters live in the code and are documented here.
Layer: src/components/decor/DecorLayer.js, ten curated hero compositions in heroVariants.js.
Not ours
The decorative elements on the social cards (donuts, diamonds, stars, clouds) are licensed material we cannot redistribute: the card generator is the way to get graphics that use them.
Band rhythm
Never two strong colours touching. Two light bands are separated by an ink border, and yellow is an accent, not a band: the theme band is the one declared exception and it is off in config.
Hero
Numbers
About the event
Photo strip, images only
Theme, off in config
OffWhat to expect
Call for Papers
Agenda at a glance
Tickets
Sponsors
Venue
Communities
FAQ and newsletter
This is the home page from top to bottom, in the order the components sit in src/app/(home)/page.js.
Do and don't
Ten mistakes we made while building this design system, next to the fix. If you are in doubt about something, it is probably one of these.
1. Eyebrow on an action section
Don't
You could be on this stage
The magenta eyebrow makes a section that asks for something read like a paragraph of information.
Do
You could be on this stage
The stamp marks it as an action section, like Tickets and Become a Sponsor.
2. A single ring in a corner
Don't
One lonely ring reads as a mistake in the layout, not as a decoration.
Do
At least two elements, so it reads as a composition. The duo cluster is the minimum.
3. Two white bands touching
Don't
Two white sections in a row collapse into one long section: the reader loses the rhythm.
Do
Cream in between, or an ink border where the two light bands meet.
4. Soft shadows
Don't
shadow-lg
A blurred shadow belongs to another design language. It looks like a bug next to a hard one.
Do
shadow-pop
A hard block, offset, no blur. Three sizes, same direction.
5. Display font in lowercase
Don't
Be part of it
The display face was drawn for capitals. In lowercase it loses the weight that makes it work.
Do
Be part of it
Always uppercase, and only for titles, numbers and stamps.
6. Em dash and en dash
Don't
Two days of talks — and one long evening – in Bologna.
Dashes as punctuation are not part of our voice, and they break when copy travels through other systems.
Do
Two days of talks, and one long evening, in Bologna.
A comma, a colon or a pair of brackets. Shorter sentences work even better.
7. Black shadow on the ink band
Don't
Border and shadow are ink and so is the band: they disappear, and with them the shape of the button and the press effect on hover.
Do
On the ink band border and shadow turn white, with btn-pop-on-ink. The venue photo frame already works this way.
8. White logo on yellow
Don't
Not enough contrast: the cloud disappears and the wordmark goes grey.
Do
On yellow the ink version is the safest, and the colour one works too. Keep the white version for blue, magenta and ink.
9. Rounded corners
Don't
Rounded card
ButtonA radius softens everything the borders and the shadows are trying to say.
Do
Square card
ButtonSharp corners everywhere. The only round shapes are the decorative rings.
10. Tag colours picked by taste
Don't
If the colour does not carry a meaning, the reader learns nothing from it and stops trusting the tags.
Do
The colour and the icon follow the type, from the shared map in sessionTypes.js.
Copy
The visual system holds only if the writing follows it. Six rules, and the last word goes to the rules file.
No em dash, no en dash
A comma, a colon or a pair of brackets. It reads better and it survives every copy and paste.
Display is always uppercase
Titles, numbers and stamps in capitals. Never a paragraph, never a button label longer than a few words.
Short fields stay short
Card headlines are two lines and the generator enforces the limit. A title that has to be shrunk to fit is a title to rewrite.
Say what happens next
A call to action names the action: submit a talk, get your ticket, contact us. Not "click here", not "learn more".
Plain and warm
We are a community event, not a vendor keynote. No hype, no superlatives, no exclamation marks in a row.
One voice for numbers
Numbers come from a source we can point at, and we say which edition they belong to.
The rules live in the repository
This page shows what the system looks like. The rules behind it, the when and the why, are in docs/design-system.md, next to the code: that is the file to read before changing anything, and the file to update when a rule changes.