Memphis Postmodern
원색과 파스텔이 충돌하고 지그재그·물방울·반원이 흩뿌려지는 포스트모던 키치 웹 — 색의 과잉이 곧 정체성.
설명
1980년대 Memphis Milano(에토레 소트사스) 계보의 포스트모던 스타일을 웹으로 옮긴다. 크림 바탕 위에 체리·옐로·코발트·민트·핫핑크 5색이 일부러 '잘못된' 듯 명랑하게 부딪히고, 지그재그·속 빈 원·삼각형·반원 같은 기하 도형이 콘텐츠와 무관하게 배경을 무작위로 떠다닌다. 2px 검정 보더 + 흐림 0의 하드 오프셋 섀도, 40px 그리드 선과 테라초 도트 질감, 오버슈트 바운스 모션. 비대칭·중앙정렬 금지가 규칙이다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
폰트 2종 혼합(mixed)이 위계의 핵심: 디스플레이·본문은 Poppins(디스플레이 weight 800), 라벨·캡션·숫자는 Space Mono 대문자 weight 700. 헤드라인은 단어별로 다른 액센트 색을 칠하거나 rotate(-3deg)로 기울여 리듬을 만든다.
골든 예제 (exemplar)
Do
- 크림 바탕에 체리·옐로·코발트·민트·핫핑크를 명랑하게 충돌시킨다(한 섹션 3~4색)
- 지그재그·속 빈 원·삼각형·반원을 화면당 6~10개 무작위 rotate로 흩뿌린다
- 카드·버튼은 2px 검정 보더 + 흐림 0의 5px 5px 하드 섀도로 또렷하게
- 콘텐츠를 12열에서 일부러 어긋나게 비대칭 배치한다
- 헤드라인 단어마다 다른 액센트 색을 칠하거나 rotate로 기울인다
Don't
- 보라/인디고 그라디언트 금지 — 색은 항상 플랫 솔리드
- soft/blur 그림자 금지 — 흐림 0의 하드 오프셋만
- 중앙 정렬 히어로 금지 — 좌·우 어긋난 비대칭만
- 도형을 콘텐츠 위계에 정렬시키지 말 것 — 의도적 무작위·비대칭
- 차분한 무채 팔레트로 후퇴 금지 — 색이 과해야 정상
- 이모지로 장식 도형 대체 금지 — CSS/SVG 기하 도형만
- 도형을 3개 미만으로 쓰지 말 것 — 흩뿌림이 정체성
컴포넌트 노트
- button
- base: radius 4px, 2px solid 검정 보더, 배경은 액센트 솔리드, 5px 5px 0 하드 섀도, Poppins/Space Mono 대문자 라벨hover: 배경색이 다른 액센트로 즉시 스왑(예: 옐로→핫핑크), translate(-3px,-3px), 섀도 8px 8px 0, 220ms 오버슈트focus: 2px offset outline (ring=코발트)
- card
- 2px 검정 보더 + 5px 5px 0 하드 섀도. 배경은 강조색 또는 크림. 모서리 밖으로 작은 삼각형/반원 하나가 삐져나옴. 호버 시 -3px,-3px 이동 + 섀도 확장.
- shape
- 장식 도형은 position:absolute SVG/CSS — 지그재그 라인·속 빈 원·색 채운 삼각형·반원·도트 클러스터. 화면당 6~10개, 각기 다른 액센트, rotate 무작위(-20°~20°). 콘텐츠 위계에 정렬 금지.
- footer
- 코발트 패널로 색 반전 + 크림 텍스트, 테라초 도트 산포, Space Mono 대문자 메뉴, 큰 반원이 좌하단 모서리에 절반 걸침.