CURATED · OPEN · FREE

Stinkstudios

A premium creative studio portfolio characterized by bold typography, cinematic photography, and a stark black-and-white palette.

01

Identity DNA

A cinematic gallery showcasing large-scale creative work with high-contrast typography.

02

Color

High-contrast monochrome foundation to let cinematic project photography serve as the primary visual focus.

03

Typography

grotesque-sans · monospace

• display60px · 300
• heading52px · 300
• body16px · 300
• caption14px · 300

Use Helvetica, sans-serif as the primary typeface. · Maintain extremely tight negative letter-spacing on large display text. · All UI text should be lightweight (300 weight).

04

Spacing

Generous padding around large visual elements with tighter, consistent gaps in navigation and lists.

05

Surfaces

Thin 1px solid white or black lines used primarily for separation and underlines.

06

Layout

Full-bleed hero imagery followed by a mixed grid of large and small project cards.

07

Motion & Interaction

Smooth opacity fades on interactive elements. · Transform-based hover states on navigation and cards. · Rotating or spinning animations for logo elements during loading states.

Subtle opacity reduction or slight color shift to indicate interactivity. · Immediate state change or navigation to project details.

08

Components

• button Simple text-based links with underline or hover opacity changes.
• card Edge-to-edge photographic thumbnails with minimal text overlays below or beside them.
• chip Small, uppercase, spaced-out monospaced text for categories like 'ADVERTISING'.
• input Minimal, likely appearing as simple text fields with bottom borders.
• hero Full-viewport immersive video or image background with massive, tightly-tracked display typography.

09

Voice & Don'ts

• Tone Confident, minimalist, and professional.
• Headlines Short, punchy, and visually dominant, relying on scale rather than complex wording.
• CTAs Understated text links that blend into the overall minimalist aesthetic.

• Don't use decorative serif fonts — screenshot shows a clean, geometric grotesque sans-serif across all UI and display text.
• Don't add drop shadows to UI elements — screenshot shows completely flat surfaces with no elevation effects.
• Don't use vibrant, high-chroma accent colors — screenshot shows a strict monochrome palette (black, white, muted gray).
• Don't use centered text alignment for navigation — screenshot shows right-aligned navigation links at the bottom of the hero.
• Don't use heavy font weights for body text — screenshot shows predominantly lightweight (300) text for a refined feel.
• Don't use rounded corners on primary cards — screenshot shows sharp edges on project imagery, with only small 10px radius on minor elements.
• Avoid: Avoid decorative serif fonts.
• Avoid: Avoid vibrant neon or multi-color gradients.
• Avoid: Avoid cluttered UI with excessive borders or drop shadows.
• Avoid: Avoid playful or rounded bubble-like UI elements.
• Avoid: Avoid dense blocks of body text in hero sections.
• Avoid: Avoid complex animations that distract from the photography.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko