Websites · 2026
SASTIPEN
Complex information. A clear way through.
A multilingual website and private submission workspace, organized around readable resources, distinct reporting paths and a recognizable orange identity.
Visit the website- Format
- Website and private workspace
- Scope
- Design and development
- Typography
- Geist · Geist Mono
- Languages
- Romanian · Romani · English
The brief
Bring depth without losing direction.
Programs, project archives, resources and reporting routes need more structure than a short presentation site. The interface gives each content type a clear place and separates ordinary contact from discrimination reporting.
Our role
The project connects a multilingual public information system with a separate administrative workspace. Page layouts, navigation and forms share a consistent visual language while serving different reading and submission tasks.
Visual direction
Orange gives the structure a clear accent.
White surfaces and dark zinc text support extended reading. Orange marks important actions and identity details; a deeper orange supports text accents on light backgrounds. This division lets colour guide attention while the content establishes the page hierarchy.
Interface palette
- Orange
- #FF8904
- White
- #FFFFFF
- Zinc
- #18181B
- Deep orange
- #A64B00
Direct typography
Geist provides a consistent sans-serif voice. Large, strong headings distinguish sections from supporting material.
Room to read
Generous spacing and recurring editorial sections help long and translated content retain a clear rhythm.
Colour with a role
A vivid brand orange and a darker text accent serve different contrast needs within the same palette.
Interaction design
Find information. Choose the right route.
Public navigation separates discovery, reading and submission.
Choose a subject
Navigation groups the organization, its programs, projects and resources into recognizable destinations.
Read in a familiar language
Romanian, Romani and English follow the same content structure and navigation conventions.
Use the relevant form
General contact and discrimination reporting lead to distinct forms with localized validation and submission feedback.
Design in practice
Public content and private records, clearly scoped.
Next.js and next-intl render the public pages, with local project content and focused client interactions. Validated server submissions use Prisma and PostgreSQL; authenticated administrative views handle review. The public site does not expose those records.
An editorial hierarchy
Distinct routes and recurring section patterns organize programs, projects and downloadable resources without compressing them into a single long page.
Purposeful reporting paths
Contact and discrimination forms have their own language and consent requirements. The paused mediator route explains its availability and links to contact.
A separate working view
The private interface uses tables, filters and detail panels for status, priority and notes, giving administration a different density from the public pages.
The result
A connected public and private experience.
The result is a three-language website with structured editorial content and reporting journeys, paired with a protected submission workspace. The same identity supports public reading and internal review without requiring the same layout for both.