ThinkGen 웹사이트(thinkgenius.net)는 NextSchool 웹 디자인 언어의 구조와 요소를 그대로 계승하고, 색만 ThinkGen 팔레트로 교체합니다. 학부모·학교·기업이 읽는 화면이므로 문체는 앱과 달리 격식 있는 존댓말(corporate)을 씁니다. 앱 화면의 규칙은 ThinkGen App 가이드라인을 따릅니다.

1. 원칙

항목규칙
구조·컴포넌트NextSchool 가이드라인과 동일 — 플로팅 필 헤더, 글래스 카드, Apple 타입 스케일(H1 80/64/48 등), CTA 페어(더 알아보기 필 + 텍스트 링크), 라이트 풋터, 모바일 서클 메뉴
색아래 매핑 표대로 전면 교체. 그 외 어떤 것도 바꾸지 않는다
문체존댓말 · 성과와 신뢰 중심 · 아이 말투 금지(앱 전용) · 느낌표 자제
그라데이션UI 표면 금지 (NextSchool과 동일)

2. 컬러 — NextSchool 매핑

TG Taupe · #5F534B — Ink 대응 (다크 섹션·헤더)
Deep Taupe · #57493F — Deep Ink 대응
ThinkGen Blue · #6FC0EA — Mint 대응 (액센트·CTA)
Blue Soft · #BFE3F5 — Mint Soft 대응
Tan · #CFA98C — Steel 대응 (보조·헤딩)
Cream · #F9EEDC — Mist 대응 (밝은 밴드)
Paper · #FAF3E8 — Paper 대응 (풋터)
Sun Yellow · #F7E84B — 강조 전용, 한 화면 1회

액센트 규칙 계승: 한 화면에 Blue 액센트 모먼트는 하나.

3. 타이포그래피

항목규칙
스케일Apple 타입 스케일 그대로 (parent theme: H1 80/64/48 · H2 48/40/32 · 본문 17/1.47)
서체본문·헤딩 = 사이트 기본 고딕. 라운드체는 로고·앱 전용 — 웹 본문 사용 금지
헤딩 색라이트 배경 = Tan 또는 Deep Taupe · 다크(Taupe) 배경 = 흰색

4. 컴포넌트 스킨

피지컬 AI 클래스

생각 천재를 키우는 피지컬 AI 교육을 만나 보세요.

더 알아보기신청하기 ›

글래스 카드 + CTA 페어 — NextSchool과 동일 구조, Taupe 다크 그라운드 + Blue 액센트

헤더플로팅 필, Taupe 글래스(rgba(95,83,75,.78)) + 흰 내비
버튼기본 = Blue 배경 + Deep Taupe 글자 · 글래스 필 · 신청형 CTA는 Blue 텍스트 링크
메타 칩NextSchool 민트 칩 대응 = Blue Soft 칩 (#BFE3F5 + Deep Taupe 글자)
풋터라이트(Paper #FAF3E8) — 타이틀 Deep Taupe 12px, 본문 #8a7a6c, 로고 모노톤
모바일 메뉴서클 버튼 – 라운드 패널, Taupe 글래스, 심볼 135도 회전 — NextSchool 규칙 동일

5. 문체 (corporate)

앱웹
같은 내용“앙! 하고 깨물어버릴 수 있는 능력!”“근접 센서 기반의 즉각 반응 스킬을 제공합니다.”
호칭친구 말투존댓말 고정, 고객·보호자·기관 관점
문장짧고 감탄형서술형, 근거와 신뢰 중심

6. Do / Don’t

Do
· NextSchool 컴포넌트를 그대로 쓰고 색 토큰만 교체
· 다크 섹션 = Taupe, 액센트 = Blue 하나
· 카피는 존댓말 · 성과 중심
· 앱 스크린샷은 크림 배경 그대로 노출
Don’t
· 카드 카테고리색(그린·핑크 등)을 웹 UI에 쓰지 않기 — 카드 이미지 안에서만
· 라운드 서체를 웹 본문에 쓰지 않기
· Yellow 남용 금지 (한 화면 1회)
· 앱 말투를 웹 카피에 쓰지 않기