Ojibwe & Anishinaabe Beadwork

Ojibwe & Anishinaabe Beadwork

The Ojibwe and Anishinaabe peoples are among the most populous Indigenous nations in North America, with communities across Minnesota, North Dakota, Wisconsin, Michigan, and Canada. They belong to the Algonquian language family and are often referred to collectively as Anishinaabe, a word meaning "the original people."

Ojibwe beadwork is known for rich blue tones, deep reds, and flowing symmetrical forms. Before glass beads arrived through European trade in the 17th and 18th centuries, artists created similar patterns using porcupine quills, shells, and seeds, a tradition called quillwork that is still practiced today. Glass seed beads expanded the palette and allowed for finer detail, but the visual language of the patterns remained rooted in the traditions that came before.

Many Ojibwe beadwork pieces feature bilateral symmetry: each half of a piece mirrors the other. You can see this in floral motifs, medallion patterns, and geometric bands. The pattern you will build in this stage uses that symmetrical structure, two matching forms placed side by side.

CSS Custom Properties: Your Bead Palette

Before a beader starts a piece, they lay out their palette: the specific colors they will use and how they will combine them. CSS custom properties let you do the same thing in your stylesheet. You define your colors once at the top, give each one a name, and then use that name everywhere in your code. If you decide to change a color later, you only update one line.

A CSS custom property is defined inside a :root block, which targets the whole page, and its name always starts with two dashes (--). You use it with var().

These six colors are your full bead palette for the whole project. Every beadwork section will draw from this same set, the same way different pieces by the same beader often share a color family even when the patterns differ.

• --bead-white: #f5f0eb, a warm off-white, like the natural base material or undyed quillwork. Used as the background color for most of the grid.
• --bead-blue: #1a4a7a, deep navy blue, the dominant color in Ojibwe and Anishinaabe beadwork. Referencing the waters of the Great Lakes region.
• --bead-red: #8b2020, a deep, earthy red. Used as an accent color inside the pattern to draw the eye to key points.
• --bead-yellow: #c8901a, warm gold, representing harvest, ceremony, and the warmth of firelight.
• --bead-black: #1a1a1a, a near-black used in bold geometric outlines, especially in Dakota and Lakota work.
• --bead-teal: #1a6a5a, deep green-blue, representing the land and water together.

The Bead Grid

Now add the CSS that builds the bead grid structure and the color classes. Add this inside your <style> tag, after the :root block and before the closing </style> tag.

• display: grid on .bead-grid, activates CSS Grid. Without this, the bead divs would stack vertically in a column. Grid places them in a two-dimensional layout.
• grid-template-columns: repeat(10, 1fr), creates 10 equal columns. repeat(10, 1fr) means "repeat a 1 fractional unit column 10 times." Each column takes up an equal share of the available width. When you add divs, they fill left to right and wrap to the next row automatically after every 10th bead.
• gap: 4px, puts 4 pixels of space between every bead, both horizontally and vertically. This represents the thread or backing material showing between beads.
• max-width: 300px, keeps the grid compact. Without this, the grid would stretch across the full section width and each bead would be enormous.
• aspect-ratio: 1 / 1 on .bead-grid div, forces every bead cell to be a perfect square regardless of the grid's width. Without this, the cells would be rectangles.
• border-radius: 50% on .bead-grid div, rounds the corners of each square cell all the way to 50%, turning it into a circle. That is what makes the cells look like beads.

Add the Ojibwe Section and Bead Pattern

Now add the HTML. Place this after your closing </section> tag for the hero and before </body>.

The bead pattern below creates a symmetrical two-medallion design with a blue field and red accent beads inside, inspired by the bilateral symmetry and jewel-like color placement in Ojibwe beadwork. Read through the pattern row by row as you type it: you will see it take shape.

The pattern preview you are building:

Two symmetrical blue medallions with red accent beads at the center of each form. Read each row left to right as you type: white border, blue field, red center points.

Try It

• Try changing --bead-blue in your :root block to a different shade of blue, like #2563eb or #0d3b6e. Because you used var(--bead-blue) throughout, all blue beads update at once, this is the power of custom properties.
• Try changing one b-w bead in the middle of the grid to b-y. What happens? Can you add a yellow accent that still feels balanced?
• Try changing border-radius: 50% in .bead-grid div to border-radius: 0%. The beads become squares. Try border-radius: 20% for a rounded square. Each shape creates a different feel.