厳選・オープン・無料

Snogproductions

A bold, image-forward portfolio for a creative production studio, defined by a massive red logotype and a chaotic gallery of project visuals.

StudioPhotographicBold TypographyPortfolioPremium

↓ デザインシステムをダウンロード (30 MB)OpenDesign で開く

オリジナル: https://www.snogproductions.com

📦 パックの中身を見る →

デザイン DNA

Creative StudioProductionBoldGallery

A high-end creative production studio's portfolio

カラー

#EE242FAccent

#000000Ink

#FFFFFFBG

rgba(238, 36, 47, 1)Line

Stark white background acts as a neutral canvas for a single high-chroma red accent and dense, colorful imagery.

タイポグラフィ

condensed-grotesque · grotesque-sans

display172px · 700
body14px · 700

Navigation text is consistently uppercase and bold · Display logotype dominates the top of the layout · Minimal type hierarchy, mostly just logotype and links

余白

4px

8px

16px

24px

32px

48px

64px

96px

Irregular gallery layout relies on large, absolute whitespace rather than a strict grid.

サーフェス (角丸 / 影 / 罫線)

sm · 0px

md · 0px

lg · 0px

pill · 200px

No structural borders, only image contents and a single 1px border-width rule noted in the facts.

レイアウト

12columns

24pxgutter

768 / 1024breakpoints

Asymmetrical scattered gallery, images of varying sizes overlap and float over a white background.

モーションとインタラクション

50msmicro

50mssmall

50msmedium

lineareasing

Minimal, near-instant transitions of 0.05s on elements

Cursor changes to pointer on interactive elements · Standard link navigation

コンポーネント

button Plain uppercase text links with cursor pointer
card Edge-to-edge project imagery without padding or borders
hero Massive red typography overlapping a vertically stacked gallery of project posters.

文体と禁止事項

トーン Confident, bold, direct
見出し Massive, condensed, uppercase logotype
CTA Simple, uppercase text links

don't use a muted or pastel palette — screenshot shows a stark white background with a single bold red accent
don't center-align all content symmetrically — screenshot shows an asymmetrical, scattered gallery layout
don't use thin, delicate typography — screenshot shows a massive, ultra-bold condensed logotype
don't add padding or borders to image cards — screenshot shows imagery edge-to-edge or floating freely
don't implement slow, sweeping animations — screenshot facts show rapid 0.05s transitions
don't rely on complex UI components — screenshot shows only text links and floating project imagery
避ける: Subtle animations
避ける: Muted palettes
避ける: Centered symmetrical layouts

パック内の実スクリーンショット

Snogproductions — 桌面首屏（hero） — 桌面首屏（hero）

Snogproductions — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

実ページから取得 · 実 computed styles

System Prompt

This site is a creative production studio portfolio defined by extreme visual confidence. It uses a stark white background (#FFFFFF) as a canvas for a massive, ultra-bold red condensed logotype (#EE242F) and a scattered gallery of high-impact project imagery. The typography is dominated by the display font (Druk) at 172.8px, with navigation in a secondary grotesque sans (GT Zirkon) at 14px uppercase. Key colors are strictly red (#EE242F) and black (#000000) on white. Critical donts: 1) Don't use subtle UI components like shadows or borders on images, as the layout relies on raw, floating photography. 2) Don't symmetricaly align content, as the scattered gallery is intentionally asymmetrical. 3) Don't use long, smooth animations, as the interaction model relies on near-instant 0.05s transitions.

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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