Skip to content
Featured in Illustration

Use currentColor for edge lines

Let the text colour drive the outlines of your blocks.

We prototype every scene on paper first. A sheet of triangle-grid paper, a soft pencil and ten minutes are enough to find out whether a composition works. It is far cheaper to erase a pencil line than to rewrite a dozen nested transforms, and the sketch doubles as documentation when someone asks why a block sits where it does.

Pro tip

Hold Shift while dragging in the Layers panel to rotate the 3D view and spot faces that are drawn in the wrong order.

Share

8 comments

  1. Mateo Rossi

    Tiny typo in the second code block: the unit is missing on the translate value.

    Reply to Mateo Rossi
  2. Nina Ahlberg

    The tip about naming faces instead of colours saved our design system a lot of pain.

    Reply to Nina Ahlberg
  3. Gus Lindgren

    Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.

    Reply to Gus Lindgren
    1. Bea Kowalski

      Same here. Adding will-change on the wrapper fixed it for me.

      Reply to Bea Kowalski
    2. Tess Walsh

      The templates are in the downloads section of the reference post.

      Reply to Tess Walsh
  4. Chen Wei

    Bookmarked. The table alone is worth it.

    Reply to Chen Wei
  5. Omar Haddad

    I teach an intro CSS class and I am going to use this as the final project.

    Reply to Omar Haddad
  6. Alex Moreau

    Love the palette. Could you share the exact lightness values?

    Reply to Alex Moreau

Leave a comment

Your email address won’t be published. Required fields are marked.