---
title: UI Style Guide | Marco Pontili   
description: User interface style guide with visual elements and design rules for a consistent, responsive user experience across the site.   
url: https://marcopontili.com/styleguide   
canonical: https://marcopontili.com/styleguide   
lastmod: 2026-09-15   
author: Marco Pontili   
lang: en-US   
type: page   
---

# UI Style Guide

This is the guide that defines the visual standards for this website’s user interface (UI).

This UI style guide defines a shared visual language and sets the visual and functional standards for this website. It ensures the UI is consistent, responsive, accessible, and enjoyable to use, whether in light or dark mode.

## Grid system

This site uses a simple, flexible, and responsive 12-column grid system.  
On screens up to 767px wide, columns stack vertically unless stated otherwise. At 768px and above, columns align horizontally according to the grid.  
The main layout breakpoints are 1100 px, 992 px, 768 px, and 576 px, with custom values as needed.

```css
@media (max-width: 768px) {
  [class^="grid__col"] {
    flex-basis: 100%;
  }
}
```html
100%

91.66%

83.33%

75%

66.66%

58.33%

50%

41.66%

33%

25%

16.66%

8.33%

## Spacing System

The spacing system uses a consistent scale based on rem units. Spacing utilities are available for margins and padding, with directional variants for top, bottom, left, and right.

`.m0` 0

`.m1` var(--space-100)

`.m1-5` var(--space-150)

`.m2` var(--space-200)

`.m3` var(--space-300)

`.m4` var(--space-400)

`.m5` var(--space-500)

`.m6` var(--space-600)

`.p0` 0

`.p1` var(--space-100)

`.p1-5` var(--space-150)

`.p2` var(--space-200)

`.p3` var(--space-300)

`.p4` var(--space-400)

`.p5` var(--space-500)

`.p6` var(--space-600)

## Colors

### Color Tokens

Semantic tokens provide meaning and ensure consistent color usage across the site. These tokens automatically adapt to light and dark mode themes.

**Brand Base**  
`--c-brand-base`

**Brand Light**  
`--c-brand-light`

**Body Background**  
`--c-body-bg`

**Body Text**  
`--c-body-text`

**Warning**  
`--c-warning`

**Alert**  
`--c-alert`

**Focus Visible**  
`--c-focus-visible`

### Color Palettes

The color palettes are the foundational color scales defined in OKLCH units. These raw color values are used to build semantic tokens. For example, `--c-brand-base` references `var(--orange-650)` from the orange scale below.

0.98 0.001 260

0.79 0.003 260

0.69 0.003 260

0.53 0.003 260

0.35 0.003 260

0.19 0.002 260

0.88 0.1 90

0.86 0.13 82

0.675 0.203 38.78

0.54 0.15 40

0.48 0.15 40

0.43 0.15 40)

0.52 0.17 255

## Text elements

All text elements should be responsive across browsers and viewport sizes. Avoid horizontal scrollbars whenever possible.  
Some elements, such as headings, may adjust their size based on the viewport width.

### Headings

These are standard headings. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

These are custom headings. .headline

.title-second .title-third

.Title-Display

### Inline text elements

The [a element](#) example  
A muted [a element](#) example  
The abbr element and abbr element with title examples  
The **b element** example  
The cite element example  
The `code element` example  
The del element example  
The dfn element and dfn element with title examples  
The *em element* example  
The *i element* example  
The img element ![placeholder image](https://marcopontili.com/assets/images/placeholder-16x16.jpg) example  
The mark element example  
The ins element example  
The kbd element example  
The q element inside a q element example  
The s element example  
The samp element example  
The small element example  
The span element example  
The **strong element** example  
The sub element example  
The sup element example  
The u element example  
The var element example

### Paragraphs

This a sans-serif font paragraph (default).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a serif font paragraph.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a monospaced font paragraph.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a leading font paragraph.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable.

### pre

           SUN
         SHINES
      THROUGH THE
  CLOUDS AND LIGHTS UP THE EARTH BELOW WITH WARMTH,
     BRINGING HOPE AND JOY TO ALL WHO FEEL ITS RAYS,
      SOFT BREEZES CARRY SONGS OF HAPPINESS AND PEACE,
       WHILE FLOWERS BLOOM AND BIRDS SING LOUD AND CLEAR,
        SPREADING SMILES FAR AND WIDE, LIKE GOLD THAT GLIMMERS,
          ILLUMINATING HEARTS WITH KINDNESS EVERY DAY,
           A BEAUTIFUL REMINDER THAT LIFE IS BRIGHT,
             AND MOMENTS LIKE THIS MAKE ALL FEEL RIGHT,
               BASK IN THE LIGHT,
                 FEEL THE LOVE,
                   CHERISH NOW.

### pre & code

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width="device-width", initial-scale="1">
    <title>...</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
    <script src="app.js"></script>
  </body>
</html>
```

### blockquotes

> Some sort of famous witty quote marked up with a `<blockquote>` and a child `<p>` element.
> 
> Tom Whatever

Blockquote-styled variant.

> This is a styled blockquote variant used for testimonials and contact pages.
> 
> Author Name

### Summary & details

The `<details>` and `<summary>` elements create collapsible content sections.

What is this?

This is a `<details>` element with a `<summary>`.

### Lists

#### Ordered list

1.  list item
2.  list item
3.  -   list item
    - list item
    - list item
    - list item
4.  list item
5.  list item

#### Unordered list

- list item
- list item
- -   list item
    - list item
    - list item
    - list item
- list item
- list item

#### Styled ordered list

1.  list item
2.  list item
3.  -   list item
    - list item
    - list item
    - list item
4.  list item
5.  list item

#### Styled unordered list

- list item
- list item
- -   list item
    - list item
    - list item
    - list item
- list item
- list item

#### Unstyled ordered list

1.  list item
2.  list item
3.  -   list item
    - list item
    - list item
    - list item
4.  list item
5.  list item

#### Unstyled unordered list

- list item
- list item
- -   list item
    - list item
    - list item
    - list item
- list item
- list item

## Emoji

[This is the official UNICODE Emoji list](https://unicode.org/emoji/charts/full-emoji-list.html) of 3,790 emojis (v16.0).  
Emojis can be copied and pasted directly into the code, or their codepoints can be used by replacing `U+` with `&#x`. This is a hamburger emoji: `& # x 1 F 3 5 4` (spaces added for clarity) → `🍔`.

The first cell contains a codepoint; the others contain copied and pasted emojis.

🔥

😁

🤣

😍

😝

😴

😵

😎

🙉

💘

💯

💥

👋

👌

...

...

## Embedded content

All elements must be fully responsive, although the UI may appear inconsistent across browsers and platforms.

### Image in a figure with a caption

[![placeholder image](https://marcopontili.com/ assets/images/placeholder-800x400.jpg)](#)

The image above is 800x400 pixels

### Canvas

### HTML Video & Audio Embeds

  Your browser does not support the HTML video tag.

  Your browser does not support the HTML audio tag.

### YouTube embed

## Forms

By default, `<input>`, `<select>`, and `<textarea>` elements are set to 100% width. To avoid cross-browser inconsistencies and accessibility issues, it is recommended to wrap these elements in a container.  
The appearance of some elements (such as `<select>` and checkboxes) may vary between browsers.

### Inputs

These are inputs.

Text 

Email 

Email (with error) 

Please enter a valid email address.

Tel 

Password 

URL 

Date 

Search 

Range 

These are options.

 Radio

 Radio checked

 Checkbox

 Checkbox checked

Switch

Switch checked

### Select & Textarea

This is a select.

Select Please select Option 01 Option 02 Option 03 Option 04 Other...

This is a textarea. Textarea 

### Buttons

Buttons can be created using a `<button>` (preferred), `<input type="button">`, or `<a>`s styled as buttons. In all cases, the UI should remain consistent.

Buttons support multiple states. Disabled buttons should use the `disabled` attribute (for `<button>` and `<input>`) or `aria-disabled="true"` (for links styled as buttons).

These are standard size buttons.

Default

Secondary

Outline

Hover state.

Default

Secondary

Outline

Disabled state.

Disabled

Disabled

Disabled

These are large buttons.

Default

Secondary

Outline

## Tables

Tables should be responsive to ensure they display correctly on all screen sizes without breaking the layout.

This is a caption.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Header 7

Header 8

row1\_cell1

row1\_cell2

row1\_cell3

row1\_cell4

row1\_cell5

row1\_cell6

row1\_cell7

row1\_cell8

row2\_cell1

row2\_cell2

row2\_cell3

row2\_cell4

row2\_cell5

row2\_cell6

row2\_cell7

row2\_cell8

row3\_cell1

row3\_cell2

row3\_cell3

row3\_cell4

row3\_cell5

row3\_cell6

row3\_cell7

row3\_cell8

row4\_cell1

row4\_cell2

row4\_cell3

row4\_cell4

row4\_cell5

row4\_cell6

row4\_cell7

row4\_cell8

row5\_cell1

row5\_cell2

row5\_cell3

row5\_cell4

row5\_cell5

row5\_cell6

row5\_cell7

row5\_cell8

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Header 7

Header 8

## Components

Reusable UI components that can be combined to build consistent interfaces across the site. Each component is designed to be responsive and accessible.

### Carousel

A responsive image carousel. Supports lazy loading and navigation controls.

![Example slide 1](https://marcopontili.com/assets/images/placeholder-800x400.jpg)

Example slide 1

![Example slide 2](https://marcopontili.com/assets/images/placeholder-slider-2nd.jpg)

Example slide 2

![Example slide 3](https://marcopontili.com/assets/images/placeholder-slider-2.jpg)

Example slide 3

```html
<div class="container-embla">
  <div class="embla">
    <div class="embla__viewport">
      <div class="embla__container">
        <div class="embla__slide">
          <figure class="project-single__image-container">
            <img loading="lazy" src="image-1.jpg" alt="Slide 1">
            <figcaption>Slide 1 caption</figcaption>
          </figure>
        </div>
        <div class="embla__slide">
          <figure class="project-single__image-container">
            <img loading="lazy" data-src="image-2.jpg" alt="Slide 2">
            <figcaption>Slide 2 caption</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="embla__controls">
      <div class="embla__dots"></div>
    </div>
  </div>
</div>
```html
### Media Object (Bio)

A media object pattern with an avatar image and text content. The avatar floats left on larger screens. On mobile devices, the avatar stops floating and stacks above the text in two rows.

![Abstract illustrated avatar (example)](https://marcopontili.com/assets/images/placeholder-avatar.svg)

This is an example of the bio component. The avatar image floats to the left on larger screens, creating a media object layout. On mobile devices, the avatar stops floating and stacks above the text.

```html
<div class="bio clearfix">
  <div class="container-avatar">
    <img class="avatar" src="image.jpg" alt="Person name" width="200" height="200">
  </div>
  <p class="lead">
    Bio text content goes here. The avatar will float left on larger screens. On mobile, it stacks above the text.
  </p>
</div>
```

### Testimonial

A styled blockquote with decorative quotation marks. Attribution via `render_testimonial_cite()`: name · role (optional context), then a LinkedIn or Upwork source link.

> *“*This is an example testimonial. The component uses a styled blockquote with decorative quotation marks that scale on larger screens. It's perfect for showcasing client feedback and quotes.*”*
> 
> Author N. · Role Title ([LinkedIn recommendation ↗](https://www.linkedin.com/in/marcop135/#recommendations "Read this recommendation on LinkedIn"))

```html
<blockquote class="blockquote-styled">
  <p>
    <i>"</i>Testimonial text goes here.<i>"</i>
  </p>
  <small class="testimonial-cite">
    <span class="testimonial-cite__name">Author N.</span> · Role Title
    <span class="testimonial-cite__source"><span class="testimonial-cite__paren">(</span><a class="t-link-muted" href="…" target="_blank" rel="noopener">LinkedIn recommendation &nearr;</a><span class="testimonial-cite__paren">)</span></span>
  </small>
</blockquote>
```html
### Stats Bar

A short metrics list for project case studies. Up to four figures with brief labels.

- 100+Websitesdelivered
- 20+Marketscovered
- 25%Fewerrevisions
- 7M+Monthlyvisits

```html
<ul class="stats-bar" aria-label="Example project figures">
  <li class="stats-bar__item">
    <span class="stats-bar__value">
      <span class="js-stats-bar-value"
        data-stats-value="100"
        data-stats-prefix=""
        data-stats-suffix="+"
        data-stats-decimals="0">100</span>
    </span>
    <span class="stats-bar__label">
      <span class="stats-bar__label-word">Websites</span>
      <span class="stats-bar__label-word">delivered</span>
    </span>
  </li>
  <!-- up to 3 more .stats-bar__item -->
</ul>
```

### Timeline

A dated vertical list with a connector line and one marker per step.

1.   

    Alpha2024–present

2.   

    Beta2022–2024

3.   

    Gamma2020–2022

4.   

    Delta

```html
<ol class="timeline list-unstyled" aria-label="Example timeline">
  <li class="timeline__item timeline__item--current" aria-current="true">
    <span class="timeline__marker" aria-hidden="true"></span>
    <div class="timeline__body">
      <span class="timeline__label">Alpha</span>
      <span class="timeline__period">
        <time datetime="2024">2024</time>&ndash;present
      </span>
    </div>
  </li>
  <!-- more .timeline__item -->
</ol>
```html
### Project Details

A sidebar component used on project pages to display metadata. Features a sticky position on larger screens and a styled background with border.

## Project Details

Project Example Project Name

Company Example Company

Year 2026

Technologies HTML, CSS, JavaScript, PHP

```html
<div class="project-single__details">
  <aside>
    <h2 class="sr-only">Project Details</h2>
    <div class="mb3">
      <span>Project</span>
      Project Name
    </div>
    <div class="mb3">
      <span>Company</span>
      Company Name
    </div>
    <div class="mb3">
      <span>Year</span>
      2024
    </div>
    <div>
      <span>Technologies</span>
      Technology list
    </div>
  </aside>
</div>
```

### Table of Contents

A navigation component for displaying page sections. Links wrap responsively.

```html
<nav class="table-of-contents" aria-label="Table of contents">
  <span>On This Page</span>
  <ul class="list-unstyled">
    <li><a class="btn btn--outline" href="#section-1">Section 1</a></li>
    <li><a class="btn btn--outline" href="#section-2">Section 2</a></li>
    <li><a class="btn btn--outline" href="#section-3">Section 3</a></li>
    <li><a class="btn btn--outline" href="#section-4">Section 4</a></li>
    <li><a class="btn btn--outline" href="#section-5">Section 5</a></li>
  </ul>
</nav>
```html
### Project Card

A card component for displaying work/project previews. Features hover effects and a link.

### Project Title

Project description goes here. This card component is used to showcase work and projects with a clean, hover-interactive design.[View project details](#)

```html
<div class="card-work">
  <a href="#">
    <span>Category</span>
    <h3 class="title-display">Project Title</h3>
    <p>Project description text.</p>
  </a>
  <a href="#">
    View project details
  </a>
</div>
```