큐레이션 · 오픈 · 무료

Yannickgregoire Nl

터미널 미학과 키보드 중심 탐색을 활용한, 크리에이티브 개발자를 위한 브루탈리즘 인터랙티브 포트폴리오.

01

디자인 DNA

해커의 터미널이 하이패션 에디토리얼과 만나다

02

컬러

핵심 요소를 강조하기 위해, 흰색과 검정색의 강렬한 고대비 흑백 배경에 단일 네온 그린 악센트를 사용합니다.

03

타이포그래피

monospace

• display74px · 400
• heading37px · 400
• body24px · 400
• caption14px · 400

모든 텍스트는 엄격히 대문자로 표기합니다. · 주 서체는 LT Terminal Mono(모노스페이스)를 사용합니다. · 가변 폰트 두께를 사용하지 않습니다.

04

여백

엄격한 그리드 정렬과 눈에 띄는 여백을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

인터랙티브 요소와 패널에는 1px solid 검정색 테두리를 적용합니다.

06

레이아웃

떠 있는 터미널 창과 ASCII 아트 블록을 배치한 비대칭 그리드입니다.

07

모션과 인터랙션

매끄러운 스크롤을 활용한 키보드 중심 탐색 · 터미널 스타일의 텍스트 애니메이션 · 슬라이딩 윈도우 전환 효과

배경색 반전 또는 악센트 색상 강조 · 터미널 스타일의 사운드 효과와 함께 즉각적인 시각적 피드백 제공

08

컴포넌트

• button 검정 배경의 모노스페이스 텍스트 레이블로, 때로는 그린 악센트를 포함합니다.
• card 엄격한 테두리와 ASCII 아트를 가진, 터미널과 같은 떠 있는 창입니다.
• chip 모노스페이스 폰트와 검정색 배경의 작은 태그입니다.
• input 하단 테두리가 있는 표준 모노스페이스 텍스트 필드입니다.
• hero 떠 있는 터미널 창과 함께 배치된, 대형 ASCII 아트 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 기술적이고 직접적이며, 약간은 알쏭달쏭한 어조
• 헤드라인 ASCII 아트를 포함한 대형 모노스페이스 대문자 텍스트
• CTA 간결한 명령어 스타일의 프롬프트

• 세리프 폰트를 사용하지 마십시오 — 스크린샷은 엄격한 모노스페이스 타이포그래피를 보여줍니다.
• 둥근 모서리를 추가하지 마십시오 — 스크린샷은 날카로운 직사각형 요소를 보여줍니다.
• 부드러운 그림자를 사용하지 마십시오 — 스크린샷은 단단한 테두리의 플랫 디자인을 보여줍니다.
• 일상적인 UI 패턴을 사용하지 마십시오 — 스크린샷은 터미널과 같은 명령 프롬프트를 보여줍니다.
• 장식적인 일러스트를 추가하지 마십시오 — 스크린샷은 ASCII 아트만을 사용합니다.
• 여러 악센트 색상을 사용하지 마십시오 — 스크린샷은 단일 그린 악센트(#00FFA8)만을 사용합니다.
• 피하기: 일상적인 대화체 언어
• 피하기: 장식적인 요소
• 피하기: 부드럽거나 둥근 미학

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

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