Archive of Our Own

Example

            <div class="phone">
              <div class="datetime__wrapper">
                <p class="date">Wed 24 June</p>
                <p class="time">11:44</p>
              </div>
              <div class="push__wrapper">
                <div class="push__box">
                  <div class="push__content">
                    <div class="push__left">
                      <img src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/26/apple_phone_icon.png">
                      <b class="no_display">Phone call</b>
                    </div>
                    <div class="push__main">
                      <div class="push__top">
                        <p class="push__person">Dad</p>
                        <p class="push__time">3 mins ago</p>
                      </div>
                      <p>Missed Call (2)</p>
                    </div>
                  </div>
                </div>
            
                <div class="push__box">
                  <div class="push__content">
                    <div class="push__left">
                      <img src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/26/apple_message_icon.png">
                      <b class="no_display">Text message</b>
                    </div>
                    <div class="push__main">
                      <div class="push__top">
                        <p class="push__person">Jane</p>
                        <p class="push__time">7 mins ago</p>
                      </div>
                      <p>Are you still free to meet up tonight?</p>
                    </div>
                  </div>
                </div>
            
                <div class="push__box">
                  <div class="push__content">
                    <div class="push__left">
                      <img src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/26/apple_message_icon.png">
                      <b class="no_display">Text message</b>
                    </div>
                    <div class="push__main">
                      <div class="push__top">
                        <p class="push__person">Gülçin</p>
                        <p class="push__time">1 hour ago</p>
                      </div>
                      <p>Babe! How are you???</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          

A more extensive example is also shown in my work A Well-Organized Life.

Just the CSS

            #workskin .phone {
              align-items: center;
              background: black; /* replace this with a color or image */
              border: 1px solid white;
              border-radius: 40px;
              display: flex;
              flex-flow: column nowrap;
              font-family: "Helvetica Neue", Helvetica, system-ui;
              justify-content: flex-end;
              margin: auto;
              max-width: 350px;
              min-height: 700px;
              overflow: auto;
              padding: 0 1em;
            }
            
            #workskin .phone p {
              margin: 0;
            }
            
            /* elements with this class will not display when the workskin is enabled
               but will show if the workskin is disabled
               you can use this to display a contextual title for notifications
               for users with workskins disabled
            */
            #workskin .phone .no_display {
              display: none;
            }
            
            #workskin .phone .datetime__wrapper {
              color: rgba(255, 255, 255, 0.7);
              font-size: 1.5em;
              flex-grow: 2;
              line-height: 1;
              padding: 2.5rem 0 3rem 0;
              text-align: center;
              width: 100%;
            }
            
            #workskin .phone .date {
              padding-bottom: 2rem;
            }
            
            #workskin .phone .time {
              font-size: 6rem;
              font-weight: lighter;
              padding-bottom: 2rem;
            }
            
            #workskin .phone .push__wrapper {
              margin-bottom: 2rem;
              width: 95%;
            }
            
            #workskin .phone .push__box {
              background: rgba(255, 255, 255, 0.4);
              border-radius: 12px;
              box-shadow: inset 0 0 100px rgba(255, 255, 255, .6);
              color: black;
              margin: 8px 0;
              padding: 10px 12px;
            }
            
            #workskin .phone .push__content {
              column-gap: 10px;
              display: grid;
              grid-template-columns: 35px auto;
            }
            
            #workskin .phone .push__left {
              align-self: center;
              display: flex;
            }
            
            #workskin .phone .push__left > img {
              max-width: 35px;
              width: auto;
            }
            
            #workskin .phone .push__main {
              font-size: 14px;
            }
            
            #workskin .phone .push__top {
              display: flex;
              justify-content: space-between;
            }
            
            #workskin .phone .push__person {
              font-weight: 600;
              max-width: 12.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            #workskin .phone .push__time {
              font-size: 12px;
            }
          

Phone screen

The phone screen is wrapped in a phone class.

            <div class="phone">
            </div>
          

If you want to edit the screen's colour or background image, the #workskin .phone CSS is the place to do so:

            #workskin .phone {
              background: black; /* replace this with a color or image */
            }
          

Date and time

The date and time are wrapped in a datetime__wrapper class as follows:

            <div class="datetime__wrapper">
              <p class="date">Wed 24 Jun</p>
              <p class="time">11:44</p>
            </div>
          

Notifications

All notifications are wrapped in a push__wrapper class.

Each individual notification is wrapped in a push__content class.

            <div class="push__wrapper">
              <div class="push__content">
                /* ... */
              </div>
              <div class="push__content">
                /* ... */
              </div>
            </div>
          

The notification icon is wrapped in a push__left class.

            <div class="push__wrapper">
              <div class="push__content">
                <div class="push__left">
                  <img src="" />
                </div>
              </div>
            </div>
          

To improve readability when readers have your workskin disabled, it's also possible to add some explanatory text here, using the no_display class.

For example, with workskins disabled, this snippet of HTML:

            <div class="push__left">
              <img src="" />
              <b class="no_display">Phone call</b>
            </div>
          

Will render like so:

Phone call

The remainder of the notification is wrapped in the push__main class.

The person and time are wrapped in the push__top class, and use the push__person and push__time classes, respectively.

Then, the body of the notification is just a <p> element.

            <div class="push__main">
              <div class="push__top">
                <p class="push__person">Dad</p>
                <p class="push__time">3 mins ago</p>
              </div>
              <p>Missed Call (2)</p>
            </div>