Eric Johnson

BrightfieldRedesign

The Project#

Brightfield is my generative art studio, where WebGL shaders become shirts you can wear. In September 2026 I redesigned its homepage in Figma around three things: the art, the person making it, and a tool that lets visitors make their own.

I own the brand, the design, and the build. Below is the page from top to bottom, followed by the variables it's built from. For the story of the studio itself, see Work I've Done.

View in Figma

The Hero#

The art fills the first screen, edge to edge, before anything is said about it. The headline is three words, and the two buttons name the two things you can do at Brightfield: shop a design, or create one.

Hero section: a full-bleed orange shader render with the Brightfield wordmark and navigation, the headline Art for your body, the line Sculpted with code by a human, and Shop and Create buttons.
Hero, 1440 × 1024.

The Human#

“By a human” is a claim, so the second section backs it up with a face and a short bio. It is the one place on the page set in Merriweather, so it reads like a person talking and not like interface.

The human behind the designs.

The Designs#

Nine designs on one card component. Each card gives the art the whole frame and keeps the name and price to a single bar along the bottom.

Product grid. The Figma file uses one piece, Square Dance, as the stand-in on every card.

The Tool#

After the shop comes the invitation to make your own. The controls are the parameters of the code itself: a palette, line width, line spacing, and three print effects.

Craft your own section: a canvas showing a generative line design beside controls for the Coastal color palette, line width, line spacing, and Distress, Crosshatch and Halftone dots effects, above a Preview on shirt button.
Craft your own.

The Sign-Up#

New art arrives monthly, so the page ends with one field and one button, then a footer that stays out of the way.

Get notified, and the footer.

The Wordmark#

The final wordmark stacks “bright” over “field” in lowercase, with the dot on the i in pink. Alongside it is a lettermark built from a frame of dots, drawn in three versions: pink dots around a b, white dots with a single pink corner, and a b with dots fading from white to grey.

Brightfield wordmark: bright stacked over field in white lowercase, the dot on the i in pink.
Lettermark: a white b inside a frame of pink dots.Lettermark: a frame of white dots with one pink dot in the top right corner.Lettermark: a white b inside a frame of dots fading from white at the top to grey at the bottom.
The final wordmark and three versions of the lettermark.

The System#

Every value on the page is a Figma variable, named the way it will be named in CSS. Two typefaces, nine spacing steps, five radii, and a neutral ramp that leans slightly red all the way down, so that even the black sits comfortably next to the pink.

Color

  • color-bg-page#121111
  • color-bg-surface#191818
  • color-neutral-10#1e1b1b
  • color-border-default#372e2e
  • color-border-strong#665c5c
  • color-neutral-50#7f7575
  • color-text-secondary#cfc4c4
  • color-neutral-99#fffbfb
  • color-pink-54#ff0a54
  • color-text-brand#ff516a

Type

  • ART FOR YOUR BODYH1, Poppins Bold 80 / 96
  • The designsH2, Bold 72 / 74
  • Sculpted with code by a humanLead, Regular 32 / 40
  • Turning math into original designsQuote, Merriweather 32 / 40
  • Create and discover your own designBody, Regular 25 / 30
  • Contour PareidoliaSmall, Regular 20 / 24
  • CODE SETTINGSOverline, SemiBold 15, +22%

Spacing

  • 3xs 2
  • 2xs 4
  • xs 8
  • sm 12
  • md 16
  • lg 24
  • xl 32
  • 2xl 48
  • 3xl 64

Radius

  • sm 4
  • md 8
  • lg 12
  • xl 32
  • full 999

The File#

Everything above comes from one Figma frame. Here it is, with the variables and components intact. You can also open it in Figma.

Opens Figma's viewer here. Pan and zoom to explore.

The Figma file, Desktop frame.

Back to all work