ABC AI for the Common Good

Style guide

This page documents the visual tokens and base components of ABC – AI for the Common Good.

Colors

The color tokens keep the site sober, recognizable and easy to read.

--color-primary

#663399

Main color for actions, accents and identity.

--color-primary-dark

#4b2573

Interactive text, active borders and stronger states.

--color-primary-light

#8f63c7

Light accents and secondary details.

--color-accent

#2f8f83

Positive signals, civic emphasis and supporting details.

--color-accent-soft

#dff3ef

Soft backgrounds for callouts and informative messages.

--color-background

#fbfaf8

Overall page background, warm but neutral.

--color-surface

#ffffff

Cards, content areas and form fields.

--color-surface-muted

#f1edf6

Alternate sections and quiet backgrounds.

--color-text

#1f1b24

High-contrast main text.

--color-text-muted

#62596b

Secondary text, descriptions and metadata.

--color-border

#ddd4e8

Thin borders, separators and component outlines.

--color-warning

#b7791f

Warnings and messages that require attention.

--color-success

#2f855a

Confirmations, positive outcomes and completed states.

Typography

The main font is Atkinson Hyperlegible, with clean system fallbacks.

H1 example: AI for the Common Good

H2 example: Why we need a better conversation

H3 example: Understand

Paragraph: clear, accessible content oriented toward civic responsibility.

Small text: updates, notes and service information.

Accessible text link

Clarity does not reduce complexity: it makes complexity shareable.

Spacing and layout

Pages use a max-width container of about 1120px, generous sections and simple grids.

Container

Section

A section creates vertical rhythm and separates content blocks.

Column 1

Responsive grid.

Column 2

Three columns on wide screens.

Column 3

One column on mobile.

Stack item
Stack item
Stack item

Buttons

Main actions are visible, sober and consistent with the project’s tone.

Primary button Secondary button Ghost button Visible focus

Cards

Cards collect short content without weighing down the page.

Standard card

Suitable for themes, activities and recurring content.

Highlight card

Useful for an orienting message or a central question.

Compact card

For short notes and supporting content.

Callout

Not everything that is technically possible is automatically desirable.

The callout brings attention to an important passage without making it sensational.

Licenses and attribution

The footer makes the licensing model visible without relying on JavaScript or external assets.

Except where otherwise noted, the content of this website is licensed under CC BY-SA 4.0. The source code is licensed under GNU AGPL v3.0 or later. Source code.

Attribution

Preferred attribution: “ABC – AI per il Bene Comune, https://abc.olisti.co, licensed under CC BY-SA 4.0.”

Third-party assets may have separate licenses and must be documented in NOTICE.md.

Minimal form for future use

Fields are ready for future static pages or integrations.

Use the name you prefer to be contacted with.

Enter a valid email address.

Design principles

  • Clarity before effect
  • Accessibility before decoration
  • Lightweight content
  • Visual sobriety
  • Compatibility with static sites
  • Performance and sustainability