Traffic Productions

This design system projects a raw, industrial efficiency, like a minimalist print workshop. Bold, condensed typography in Suisse (or a similar sans-serif) dominates the visual field, creating an assertive, no-nonsense tone. The stark black and white palette is punctured by a single, aggressive yellow accent, reminiscent of hazard tape or highlighting, which directs attention and provides visual adrenaline. Understated component styling, characterized by sharp angles and strong lines, reinforces the functional and direct approach. Use Suisse (or a substitute with similar condensed, impactful qualities) for all typography. Maintain a stark, high-contrast palette with Midnight Ink (#151515) for text and Canvas White (#f3f3f3) for backgrounds. Reserve Highlight Yellow (#fff824) exclusively for active states, small accents, or critical interactive elements. Apply 0px border radius to all elements except explicitly pill-shaped buttons (9999px). Utilize fine lines (1px) in Midnight Ink (#151515) for borders and dividers to emphasize structure. Employ the aggressive letter-spacing and low line-height values defined in the typography section to create dense, impactful text blocks. Do not introduce additional color accents or gradients, as they dilute the system's impact. Avoid soft shadows or subtle gradients; the design relies on flat colors and sharp distinctions. Do not use rounded corners unless it's a specific pill button; maintain a rectilinear aesthetic. Never use generic body text; all text should adhere to the Suisse font family and its specified weights/sizes. Do not use varied padding or margin values for similar components; adhere to the defined spacing tokens (e.g., 9px for component padding, 20px for larger element margins). Avoid complex layouts or overlapping elements; maintain a clean, grid-like structure with clear visual separation.