큐레이션 · 오픈 · 무료

Remix

개발자를 위한 현대적이고 고성능의 웹 프레임워크입니다.

01

디자인 DNA

웹 개발을 위한 고속 레이싱 트랙

02

컬러

생생하고 역동적인 액센트가 있는 고대비 다크 모드입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display84px · 700
• heading56px · 700
• body16px · 400
• caption13px · 400

내비게이션 및 UI 레이블에는 대문자와 고정폭 글꼴을 사용합니다. · 디스플레이 헤드라인에는 볼드하고 자간을 좁힌 기하학적 산세리프를 사용합니다. · 본문 텍스트에는 깔끔한 휴머니스틱 산세리프를 사용합니다.

04

여백

주요 콘텐츠 섹션 간에는 넉넉한 수직 패딩(120px)으로 분리됩니다.

05

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

1px solid rgba(255, 255, 255, 0.12)

rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px

06

레이아웃

전체 폭의 다크 히어로에 중앙 정렬된 콘텐츠 블록을 배치하고, 기능을 위한 2열 레이아웃으로 전환됩니다.

07

모션과 인터랙션

미세한 배경 파티클 애니메이션과 빛나는 빛의 궤적입니다. · UI 요소의 부드러운 불투명도 전환입니다.

인터랙티브 요소의 색상 전환입니다. · 버튼 및 링크에 대한 포인터 커서입니다.

08

컴포넌트

• button 미니멀한 텍스트 버튼으로, 주로 대문자 고정폭 레이블을 사용합니다.
• card 어두운 배경과 구문 강조가 적용된 코드 블록 또는 미세한 테두리가 있는 유리 질감 패널입니다.
• chip 내비게이션용 대문자 고정폭 태그(예: [G] GITHUB).
• input 고정폭 글꼴을 사용한 명령줄 스타일(예: npx remix@next new).
• hero 애니메이션이 적용된 다크 파티클 필드 배경 위에 배치된, 크고 자간을 좁힌 디스플레이 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 자신감 있고, 기술적이며, 사용자에게 힘을 실어주는 어조입니다.
• 헤드라인 강력함과 유연함을 강조하는 대담하고 직접적인 진술.
• CTA 명령줄 코드 조각을 포함하는 직접적인 지시.

• 라이트 모드나 파스텔 배경을 사용하지 마십시오 — 스크린샷은 다크하고 고대비 환경을 보여줍니다.
• 헤드라인에 세리프 또는 스크립트 글꼴을 사용하지 마십시오 — 스크린샷은 볼드하고 자간을 좁힌 기하학적 산세리프를 보여줍니다.
• 요소에 크고 무거운 테두리를 사용하지 마십시오 — 스크린샷은 미세하고 얇으며 불투명도가 낮은 테두리를 보여줍니다.
• 내비게이션에 표준 문장 형식(소문자 시작)을 사용하지 마십시오 — 스크린샷은 대문자 고정폭 레이블을 보여줍니다.
• 정적이고 평평한 배경을 사용하지 마십시오 — 스크린샷은 역동적이고 애니메이션이 적용된 파티클 필드와 빛나는 빛의 궤적을 보여줍니다.
• 좁고 비좁은 간격을 사용하지 마십시오 — 스크린샷은 섹션 간 넉넉한 수직 패딩을 보여줍니다.
• 피하기: 명확한 이점 없는 지나치게 복잡한 기술 전문 용어.
• 피하기: 수동적이거나 망설이는 어조.
• 피하기: 밝거나 파스텔 팔레트.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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