브랜드 가이드
모든 자료(프레젠테이션부터 웹사이트까지)에 걸쳐 일관되고 자신감 넘치며 세련된 브랜드를 유지하기 위한 가이드라인.
01 우리의 브랜드 정체성 철학 및 원칙
본 가이드는 ISJ의 모든 구성원을 위한 것입니다. 모든 자료에서 일관되고 전문적인 브랜드 이미지를 유지하기 위해 로고, 색상, 타이포그래피, 메시지 사용 방법에 대한 명확한 지침을 제공합니다. 프레젠테이션, 뉴스레터, 학교 행사 포스터, 소셜 미디어 콘텐츠 등 어떤 자료를 제작하든, 본 가이드를 통해 우리가 제작하는 모든 것이 ISJ의 정체성을 명확하고 통일된 방식으로 반영할 수 있도록 합니다.
우리 브랜드는 우리의 정체성을 반영합니다. 일관된 사용은 우리 브랜드를 강화합니다.
디자인 철학
ISJ의 시각적 정체성은 절제된 고급스러움의 전통에서 비롯됩니다 — 따뜻하고, 자신감 넘치며, 절제된. 우리의 자료는 브로슈어가 아닌 밝게 비춰진 독서실 같은 느낌을 줘야 합니다. 우리는 넉넉한 여백, 따뜻한 톤, 신중하게 고려된 타이포그래피, 그리고 시각적 잡음의 부재를 통해 조용한 권위를 전달합니다.
핵심 원칙
차가움보다 따뜻함. 차가운 회색도, 무미건조한 흰색도 없습니다. 모든 중성색은 따뜻합니다 — 크림, 스톤, 샌드. 우리의 색조는 학교 공동체를 반영하는 친근하고 다가갈 수 있는 느낌을 만들어냅니다.
장식보다 절제. 각 요소는 그 존재 가치를 증명한다. 장식 자체를 위한 장식은 없다. 깔끔한 레이아웃, 의도된 여백, 그리고 절제된 자신감은 시각적 혼란보다 더 강력하다.
설득보다 확신. ISJ는 소리 지를 필요가 없습니다. 우리의 품질은 우리가 자신을 표현하는 방식—절제되고, 사려 깊으며, 확신에 찬 태도—을 통해 말해줍니다.
스톡 이미지보다 진정성. ISJ 자료는 학교 생활 사진과 학생들이 제작한 작품으로 시각적 흥미를 더하며, 모든 매체에서 진정성 있고 매력적인 표현을 유지합니다.
02 목소리와 어조 우리의 어조
우리 브랜드가 사람이라면 이런 목소리를 낼 것입니다. 우리의 목소리는 진정성 있고 사려 깊으며 자신감 넘칩니다. 허세 부리는 듯한 어조는 피해야 합니다. 우리는 명확하고 간결하게 말하며, 우리 자신의 시각이 아닌 청중의 눈으로 세상을 바라보고자 합니다.
언어 및 용어
언어의 일관성은 브랜드 정체성을 강화하고 모든 커뮤니케이션에서 명확성을 보장합니다.
| 규칙 | 상세 정보 | 예시 |
|---|---|---|
| 영국식 영어 | 모든 서면 자료는 영국식 철자를 사용합니다 | 색상, 행동, 프로그램 |
| 학생이 아니라 제자들 | 어린이를 지칭할 때는 '학생들'을 사용하십시오. | "우리 학생들은 잘 자라납니다…" |
| 주어를 대문자로 표기하십시오 | 학문 분야명은 항상 대문자로 표기하십시오 | 수학, 과학, 영어 |
| 학교명 | 이름을 먼저 쓰고, 그다음에 ISJ | 자카르타 독립 학교(ISJ)… |
| 학교 신탁 | 항상 정관사 "The"를 포함하십시오 | "스쿨스 트러스트의 일부" |
03 왜 ISJ인가 브랜드 핵심 가치
ISJ는 영국 사립학교의 우수한 전통을 계승합니다. 이는 인성 함양, 학문적 탁월성, 그리고 전인적 교육에 대한 헌신을 의미합니다. 도덕적 성실성, 리더십, 자기 수양을 중시하면서도 활기찬 예술, 스포츠, 교과 외 활동의 기회를 균형 있게 제공합니다. 이러한 전통은 글로벌화된 세계에서 성공할 준비가 된 다방면으로 발전된 자신감 넘치는 인재를 양성합니다.
ISJ는 모든 어린이가 서로를 알고, 소중히 여기며, 지원받는다고 느끼는 행복하고 양육적인 학교입니다. 우리 커뮤니티는 따뜻하고 포용적이며 신뢰와 배려를 바탕으로 구축되어 학생과 가족 모두에게 소속감을 조성합니다. 행복은 성공의 척도일 뿐만 아니라 성취의 토대이며, 안전하고 자신감을 느끼는 아이들은 자유롭게 탐구하고 위험을 감수하며 자신의 잠재력을 최대한 발휘할 수 있다고 믿습니다.
저희는 학생 개개인의 관심에 기반한 학업 성취를 위해 최선을 다하고 있습니다. 교장과 교사는 모든 학생을 개인적으로 알고 있으며 각 학생의 강점, 관심사, 열망을 이해합니다. 헌신적인 교육팀은 호기심, 엄격함, 독립적인 사고를 장려하는 국제적으로 인정받는 커리큘럼을 제공하여 모든 학생이 최선을 다하고 평생 배움에 대한 애정을 키울 수 있도록 지원합니다.
ISJ에서 학습은 교실을 훨씬 뛰어넘습니다. 우리의 총체적인 접근 방식은 학업과 스포츠, 음악, 예술, 야외 학습으로 구성된 풍부한 프로그램의 균형을 맞추고 있습니다. 이러한 경험을 통해 학생들은 창의력, 자신감, 회복탄력성을 키웁니다. 우리는 세상에 대한 호기심을 불러일으키고 아이들이 인생을 준비할 수 있는 인성, 팀워크, 리더십 기술을 키우는 것을 목표로 합니다.
인성 교육은 우리가 하는 모든 일의 중심입니다. 존중, 친절, 바른 행동에 대한 우리의 가치와 기대는 일상적인 학교 생활에 녹아 있습니다. 학생들은 정직하게 행동하고, 공감을 표현하며, 자신과 타인에 대해 책임감을 갖도록 권장됩니다. 이러한 습관은 교육 과정과 그 이후에도 학생들을 인도하는 도덕적 나침반이 됩니다.
녹음이 우거진 가족 친화적인 폰독 인다 지역에 위치한 ISJ는 자카르타 남부 지역 내에서 안전하고 편리한 위치를 자랑합니다. 현대적인 캠퍼스는 학습과 놀이를 위한 조용하고 영감을 주는 환경을 조성하는 개방적인 녹지 공간을 제공하며, 아이들이 학업적으로나 개인적으로 번창할 수 있는 도시 중심부에서 보기 드문 환경입니다.
ISJ 교육은 세계로 향하는 문을 열어줍니다. 국제적으로 인정받는 커리큘럼과 40개 이상의 국적을 대표하는 다양한 커뮤니티를 통해 학생들은 글로벌한 시각과 어디서든 성공할 수 있는 자신감을 얻게 됩니다. 우리의 접근 방식은 학생들이 전 세계 유수의 학교와 대학에 진학하고 상호 연결된 세상에서 의미 있는 기여를 하는 데 필요한 지식, 기술 및 인성을 갖추도록 합니다.
04 컬러 팔레트 브랜드 및 웹 색상
저희의 색상 팔레트는 깔끔하고 전문적이며 일관된 브랜드 정체성을 보장합니다. ISJ 블루는 신뢰, 안정성, 학문적 우수성을 상징하는 주요 색상입니다. 레드는 매우 절제해서 사용해야 합니다. 골드는 더 자주 사용될 수 있으나 절제된 방식으로 사용해야 합니다.
주요 브랜드 색상
| 컬러 | HEX | CMYK |
|---|---|---|
| ISJ Blue | #182B55 | 71.76%, 49.41%, 0%, 66.67% |
| 파우더 블루 | #B0D0E8 | 28%, 10%, 0%, 9% |
| ISJ 골드 | #E79819 | 0%, 34.2%, 89.18%, 9.41% |
| ISJ 그레이 | #C0C0C0 | 0%, 0%, 0%, 24.71% |
| ISJ Red | #E30513 | 0%, 97.8%, 91.63%, 10.98% |
선호하는 텍스트 색상
| 사용법 | 컬러 |
|---|---|
| 본문과 제목 | #333333 |
| 경계와 보조 악센트 | #666666 |
웹 전용: 확장 색상 체계
웹사이트 배경 톤
웹사이트에서는 표준 회색 배경을 따뜻하고 친근한 색조로 대체합니다. 섹션별로 이러한 색조가 순환되며 시각적 리듬을 창출합니다.
배경 회전
| 배경 | 때 | ~주파수 |
|---|---|---|
| 크림 | 기본 콘텐츠 | 40% |
| 하얀색 | 교대로, 사진 옆에 | 20% |
| 파우더 틴트 | 핵심 정보, 통계, "한눈에 보기" | 15% |
| 해군 | CTA, 인용문, 고효율 | 10% |
| 골드 | 강조 진술 | 5% |
해군 용어 사용 가이드
| 문맥 | 가치 | 메모 |
|---|---|---|
| 전체 배경 | #182B55 | 규모에 따른 풍부함 |
| 카드 액센트 (3px) | #182B55 | 상단 또는 왼쪽 테두리 |
| 본문 텍스트는 네이비색 | #1d3461 | 라이터 — 너무 어둡게 읽히는 것을 방지합니다 |
| 큰 제목 | #182B55 | 2rem+만 |
05 우리의 로고 마스터, 스포츠 및 하우스
마스터 로고
우리 브랜드의 핵심 시각적 상징입니다. 모든 플랫폼에서 이루어지는 브랜드 커뮤니케이션의 초석 역할을 합니다. 로고는 항상 원본 형태로 사용되어야 하며, 명확한 공간, 비율, 색상 일관성을 유지해야 합니다.
두 가지 기본 버전: 흰색 바탕에 네이비 (밝은 배경, 웹사이트 헤더)와 네이비 바탕에 흰색 또는 골드 (어두운 배경, 푸터).
제외 영역
로고에 충분한 공간을 확보하십시오. 안전 영역은 로고 마크의 높이만큼으로, 로고의 네 변 모두에 적용됩니다. 이 공간을 침범하지 마십시오. 이를 통해 로고가 페이지에서 두드러지게 표현됩니다.
스포츠 로고 — 라이온스
"LIONS" 방패 배지는 스포츠 및 팀 관련 맥락에서 사용됩니다. 네이비색 방패 위에 금색 사자가 우뚝 서 있습니다. 워드마크는 Regan Slab Ultra 서체를 사용합니다.
| 요소 | CMYK | RGB |
|---|---|---|
| 골드 | C=3.65 M=40.6 Y=99.96 K=0.27 | 245, 149, 2 |
| 해군 | C=95.88 M=72.06 Y=40.51 K=45.47 | 11, 24, 50 |
하우스 제도
네 개의 하우스, 각각 고유의 문장, 마스코트, 색상 팔레트를 지녔습니다. 모든 하우스 워드마크는 Celtic Garamond the 2nd 서체를 사용합니다.
06 타이포그래피 폰트 및 타이포그래피 스케일
ISJ는 두 가지 서체 시스템을 사용합니다: 제목에는 세리프체를, 본문 텍스트에는 깔끔한 산세리프체를 적용합니다. 이 조합은 권위성과 가독성 사이의 균형을 이루도록 합니다.
| 역할 | 글꼴 | 메모 |
|---|---|---|
| 제목 | 리브레 바스커빌 | 세리프. 모든 제목 레벨 및 디스플레이 텍스트. |
| 본문 | 로보토 | 산세리프. 단락, 캡션, 레이블. |
| 잡다한 것들 | 알마라이 | 내비게이션 및 UI 요소. |
타입 스케일
웹 전용: 타이포그래피 규칙
글꼴 가족 사용자 정의 코드에서 제목에 세리프 글꼴을 적용해야 할 때.| 레벨 | 크기 (데스크톱) | 무게 | 사용법 |
|---|---|---|---|
| 디스플레이 | 2.8–3.5rem | 400 | 영웅 선언문 |
| H1 | 2–2.4rem | 400 | 페이지 제목 |
| H2 | 1.6–1.8rem | 400 | 섹션 제목 |
| 눈썹 | 0.72rem | 700 | 대문자 레이블 · 1.8px 간격 |
눈썹 패턴
07 이미지 및 사진 가이드라인
이미지는 아마도 우리가 사용하는 가장 강력한 의사소통 도구일 것입니다. 최고의 이미지는 행복하고 적극적으로 참여하는 학생들이 진정성 있는 호기심, 기쁨, 또는 집중의 순간을 보여줍니다. 이들은 특별한 흥미로운 순간들을 부각시켜 이야기를 전하고 감정을 불러일으킵니다.
강력한 사진은 또한 선명하고 깔끔하여 학생들과 그들의 경험에 가장 중요한 요소에 주목하게 합니다. 제대로 구현될 때, 이러한 이미지는 학교 생활을 진정성 있고 매력적으로 반영하여 학부모와 예비 가족들에게 오래도록 기억에 남는 인상을 남깁니다.
| 하 | 하지 마세요 |
|---|---|
| 진정성 있는, 꾸밈없는 순간을 포착하세요 | 무대용 인공 그룹 포즈 |
| 참여에 집중하라 — 호기심, 집중력, 기쁨 | 일반적인 스톡 스타일 이미지를 사용하십시오 |
| 배경을 깔끔하고 복잡하지 않게 유지하세요 | 주의를 분산시키는 간판이나 어수선한 물건을 포함시키다 |
| 우리 커뮤니티의 다양성을 보여주세요 | 단일 유형의 활동만 촬영하십시오 |
| 녹지 공간과 현대식 시설을 강조하다 | 실내 전용 사진의 과도한 사용 |
| 자연광을 선호합니다 | 과도하게 필터링되거나 과포화된 이미지 |
08 웹 디자인 시스템 컴포넌트 및 코드
스퀘어스페이스 기반 ISJ 웹사이트용 컴포넌트 라이브러리, 간격 규칙 및 코드 패턴
레이아웃
| 문맥 | 최대 너비 |
|---|---|
| 기사 / 산문 | 700px |
| 넓은 콘텐츠(표) | 900px |
| 전체 너비 (푸터, 히어로) | 1200px |
| 문맥 | 데스크톱 | 모바일 |
|---|---|---|
| 섹션 패딩 | 60px 40px | 40px 20px |
| 카드 패딩 | 24–28px | 18–20px |
| CTA 블록 | 60px 40px | 48px 24px |
구성 요소
신뢰 그리드
통계 행
카드 및 패널
CTA 섹션 및 버튼
인용문 & 메모
탐색 (브레드크럼 & 사이드바)
테이블
푸터
호버 상태
| 요소 | 행동 |
|---|---|
| 텍스트 링크 | 색상 → #E79819 |
| 카드 | translateY(-2px) + 그림자 |
| 카드 테두리 | → #B0D0E8 |
| 금 단추 | → #d08a15 |
| 테이블 행 | rgba(176,208,232,0.06) |
중단점
| px | 변경 사항 |
|---|---|
900 | 4-col → 2-col |
768 | 3열 → 1열; 사이드바 스택 |
640 | 푸터 접기 |
480 | 버튼 전체 너비 |
흔히 저지르는 실수
| 하지 마세요 | 대신 하라 |
|---|---|
| 모든 섹션을 크림색으로 기본 설정 | 배경 회전 |
사용 #182B55 작은 글씨용 | 사용 #1d3461 또는 #333 |
| 파우더 블루 무시 | 테두리, 정보 패널용으로 사용 |
| Squarespace 글꼴 재정의 | 상속; 제목에만 세리프를 선언하십시오 |
| 코드에 이미지 삽입하기 | 블록으로 나누기; 이미지 블록 사용 |
| 모든 것의 모서리를 둥글게 처리하세요 | 버튼(50px)과 CTA(12px)만 |
| "학생들"이라고 쓰세요 | "pupils"라고 쓰세요 |
빠른 참조
