---
title: "The Period Uniform"
description: "Overview & Campaign Platform for The Period Uniform"
image: "https://stddev.fra1.digitaloceanspaces.com/public/media/design/period-uniform/period-uniform-sheet-1.jpg"
canonical: "https://stddev-01.web.app/work/projects/period-uniform"
date_published: "2026-07-31T11:10:46+00:00"
date_modified: "2026-10-01T10:03:06+00:00"
tokens: 2422
content-signal: "ai-train=yes, search=yes, ai-input=yes"
---

> Documentation Index  
> Fetch the complete documentation index at: https://stddev-01.web.app/llms.txt  
> Use this file to discover all available pages before exploring further.

**Sector:** Projects

# The Period Uniform

### Campaign Platform & Technical Architecture

> Overview & Campaign Platform for The Period Uniform

**The Period Uniform is a landmark social initiative that integrates period protection directly into mandatory school uniforms.** Created by Colombian B Corp Somos Martina in collaboration with Serviceplan Innovation, the project addresses the fact that 1 in 4 girls in Latin America regularly misses school during her period due to a lack of access to products and deep-rooted stigma. By making reusable period underwear an expected, everyday part of official schoolwear, the initiative turns menstrual care into standard educational infrastructure.

**To communicate this systemic shift, the campaign required a digital platform that felt authentic, human, and deeply relatable to its teenage audience.** The visual identity deliberately avoided clinical or commercial codes, opting instead for the intimate, hand-drawn aesthetic of a teenager's diary. This included colored-pencil illustrations, scribbled charts, and a bespoke handwritten typeface. To bring this concept to life online, STD.DEV was brought in to engineer the bilingual campaign websites and architect the interactive data components.

### The Engineering Approach

The campaign’s visual style developed iteratively over time, driven by an exploration of what was technically viable on the web. While the design team initially aimed for a dynamic, "living" website with continuous hand-drawn elements, the concrete execution was defined together by testing performance limits and figuring out the asset pipeline. Instead of treating mobile performance constraints as an afterthought, we collaborated from the start to build an efficient data-exchange system. The goal was to let designers retain complete control over variable animation frames, colors, and chart legends within their native workspaces, while delegating the extraction and rendering logic entirely to the frontend.

### The Solution

Rather than relying on heavy third-party animation libraries or Lottie exports, STD.DEV engineered a custom parsing pipeline to deliver a beautifully crafted, unified solution. Through tight collaboration, a workflow was established where designers embedded structural metadata directly into Adobe Illustrator files using named placeholder elements within specific sublayers. On load, a custom SVG parser extracted these properties and integrated the graphics natively into the DOM rather than treating them as isolated external assets. This allowed the exact same data structure to power the wiggling icons, animated section headers, and interactive charts with zero code redundancy. This native integration provided complete programmatic control over line thickness, dynamic colors, and path-drawing animations using highly optimized CSS. Additionally, STD.DEV built custom Drupal modules extending CKEditor, allowing editors to seamlessly highlight inline text using this exact same unified architecture.

### Impact

The Period Uniform initiative successfully helped shift the conversation around period poverty in Colombia from temporary aid to systemic policy, earning official backing from the Vice Minister of Education during its pilot phase. STD.DEV ensured the bilingual campaign website provided a stable, accessible global platform to share this mission. The resulting infrastructure delivered an intimate, diary-like digital experience that perfectly mirrored the empathy of the initiative, allowing the core message to resonate authentically with its teenage audience without technical friction.

**Translating a delicate, hand-drawn aesthetic into a global platform relies on an integrated asset workflow and tailored backend integration.** STD.DEV delivered this digital infrastructure across two key deliverables:

### 1. Campaign Website & Editorial Tooling

Developing the bilingual (EN/ES) campaign platform fueled by a shared frontend architecture. Custom modules were written to handle line animations for typography, native layout styling, and an interactive tracking cursor that preserves the sketchpad layout. For content operations, custom Drupal integrations extended CKEditor, allowing the client's editorial staff to apply native text-highlighting loops directly within the body field.

### 2. Data Visualizations

Rendering UNICEF and UNFPA absenteeism data using the exact same programmatic SVG parser built for the site's layout assets. By using vector paths embedded with localized design values directly from Illustrator, the web platform scales and redraws interactive charts dynamically on the frontend, avoiding isolated scripts or video playback overhead.

**The Period Uniform proves that technical execution can deeply enhance emotional storytelling.** By engineering highly performant animations and custom editorial tools, STD.DEV provided the digital canvas necessary to elevate a crucial social initiative into an immersive, relatable experience.

### Credits

**Client****Somos Martina

Advertising Agency & Creative Direction****Serviceplan Group / Serviceplan Innovation

Web Platform, SVG Animation & CMS Engineering****STD.DEV (Daniel Kuhnlein)

Film Director****Claudia Barral Magaz

Typography & Illustration**
Stefan Marx, ABC Dinamo, Adriana Lozano

**Ready to captivate your audience with unforgettable digital experiences?** Let’s transform your vision into extraordinary moments that inspire and engage.

 [Contact Form](/node/331.md) 

 

 [Schedule a Video Call](https://calendar.app.google/CC6ekPMGq7ntCEAY7) 

 

### Frequently Asked Questions

#### Q: How did the Period Uniform initiative address period poverty in Latin America?

The Period Uniform initiative integrated reusable period underwear into mandatory school uniforms to provide consistent access to menstrual products and combat stigma, addressing the issue of girls missing school due to lack of supplies.

#### Q: What was the design philosophy behind the campaign's digital platform?

The campaign's digital platform deliberately avoided clinical or commercial aesthetics, opting for an intimate, hand-drawn style reminiscent of a teenager's diary, featuring colored-pencil illustrations, scribbled charts, and a handwritten typeface to connect with a teenage audience.

#### Q: How did STD.DEV engineer the interactive data components for the campaign website?

STD.DEV engineered a custom parsing pipeline, avoiding heavy third-party libraries, where designers embedded structural metadata into Adobe Illustrator files, and a custom SVG parser extracted these properties on load to integrate graphics natively into the DOM for powering animations and charts.

#### Q: What was the strategic goal of the Period Uniform initiative beyond providing products?

The strategic goal of the Period Uniform initiative was to shift the conversation around period poverty from temporary aid to systemic policy, gaining official backing from the Vice Minister of Education.

#### Q: Why did STD.DEV choose a custom SVG parser instead of standard animation libraries?

STD.DEV chose a custom SVG parser to deliver a unified solution that avoided heavy third-party animation libraries or Lottie exports, allowing for native integration of graphics into the DOM and programmatic control over animations using optimized CSS.

#### Q: How did the editorial team integrate the campaign's visual style into content?

Custom Drupal modules extending CKEditor allowed the editorial staff to seamlessly highlight inline text using the same unified architecture, enabling them to apply native text-highlighting loops directly within the body field.

#### Q: What was the business impact of the Period Uniform initiative?

The Period Uniform initiative successfully shifted the conversation around period poverty towards systemic policy and earned official backing from the Vice Minister of Education during its pilot phase.

#### Q: How did the team ensure mobile performance was considered during development?

The team collaborated from the start to build an efficient data-exchange system, treating mobile performance constraints as a priority rather than an afterthought, enabling designers to retain control over animation elements while delegating rendering logic to the frontend.

#### Q: What was the rationale for the hand-drawn aesthetic in the campaign's visual identity?

The hand-drawn aesthetic, featuring colored-pencil illustrations and a handwritten typeface, was chosen to create a digital platform that felt authentic, human, and deeply relatable to its teenage audience, deliberately avoiding clinical or commercial codes.

#### Q: How did the website render interactive charts and data visualizations?

The web platform rendered interactive charts dynamically on the frontend by using a programmatic SVG parser that processed vector paths embedded with localized design values directly from Illustrator, avoiding isolated scripts or video playback overhead.

```json
{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "headline": "The Period Uniform",
    "description": "Overview & Campaign Platform for The Period Uniform",
    "url": "https://stddev-01.web.app/work/projects/period-uniform",
    "inLanguage": "en",
    "datePublished": "2026-07-31T11:10:46+00:00",
    "dateModified": "2026-10-01T10:03:06+00:00",
    "image": "https://stddev.fra1.digitaloceanspaces.com/public/media/design/period-uniform/period-uniform-sheet-1.jpg"
}
```