브랜드 시스템 v1

FlytBase 시각 및 언어 시스템

색상, 글꼴, 구성 요소, 모션 및 음성. FlytBase 브랜드로 출시되는 제품, 마케팅 및 파트너 팀을 위한 단일 참조 자료입니다.

판: 2026년 4월판
청중: 제품, 브랜드 및 엔지니어링 팀을 위해

그림 물감

세 가지 핵심 요소가 시스템을 지탱합니다. 차콜 색상은 기본 페이지 배경색이며, 모드가 아닙니다. 시그널 오렌지 색상은 주요 강조 색상입니다. 유칼립투스 색상은 플랫폼 화면에서 사용되는 보조 강조 색상입니다. 시그널 오렌지 색상과 유칼립투스 색상을 같은 화면에서 혼합해서 사용하지 마십시오.

엄격한 규칙

같은 뷰포트에서 o400과 e400을 혼합해서 사용하지 마십시오. 각 구역마다 하나의 강조 색상만 선택하십시오.

차콜(어두운 바탕)

기본 페이지 배경. 표면, 테두리 및 텍스트는 모두 이 크기를 기준으로 합니다.

시그널 오렌지

CTA, 눈썹, 브랜드 로고 및 열화상 효과에 주요 강조 요소를 적용합니다.

유칼립투스

플랫폼 및 데이터 이벤트에 대한 보조 강조 표시입니다. 밝게 반전된 부분에서 사용됩니다.

쿨 그레이(밝은 베이스)

유칼립투스 향이 강조되는 반전된 부분.

의미 상태 색상

브랜드와는 별개의 기능 레이어입니다. 모든 상태에는 아이콘과 레이블을 함께 사용하고, 색상만 단독으로 사용하지 마세요. 성공 상태에는 유칼립투스 색상을 재사용하고, 오류/경고/정보/진행 상황/검토 상태에는 각각 고유한 색상을 사용하세요.

토큰 이름으로 참조해야 하며, 16진수 값으로는 참조하지 마십시오. 토큰은 src/app/globals.css 파일의 @theme 태그 안에 선언되어 있습니다.

타이포그래피

세 가지 패밀리, 엄격한 역할 분담. Lora는 디스플레이용, Geist는 인터페이스 텍스트용, Geist Mono는 메타데이터용. next/font를 통해 로드되며, 런타임 시 fonts.googleapis.com에서 직접 로드되지 않습니다.

표시하다

Lora

자율 운영

제목, 표시, 편집 강조. 이탤릭체 Lora는 제목에서 단어 하나만 강조하며, 문장 전체를 강조하지는 않습니다.

인터페이스

Geist

확장성을 고려하여 설계된 기업용 드론 운용 소프트웨어.

본문, 버튼, 내비게이션 및 폼. 모든 UI 텍스트는 Geist에 있습니다.

메타데이터

Geist Mono

FLT-2026.04 - 12:00 UTC

눈썹, 라벨, 타임스탬프, 숫자 및 코드.

규모

제목은 clamp(32px, 4vw, 56px) 곡선을 따라 배치됩니다. 본문은 17px/1.6의 간격을 유지합니다. 눈썹은 10px 위치에 0.12em의 자간으로 배치됩니다.

도상학

아이콘은 @phosphor-icons/react의 thin(1px 획) 두께로 고정됩니다. 일반 두께는 테두리가 있는 32~40px 정사각형 프레임 아이콘 내부에서만 사용 가능합니다.

허용하다

- 인광 박막이 기본값으로 설정됨
- 테두리가 있는 사각형 안에 있는 일반 인광체
- src/components/icons/ 폴더에 특정 글리프가 누락된 경우, 인광체 획과 일치하는 일회성 SVG 파일이 생성됩니다.

절대

- 듀오톤 또는 필 웨이트
- 이모티콘 아이콘
- 기타 아이콘 라이브러리(Lucide, Heroicons, Material, Tabler, Font Awesome)

import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

구성 요소

모든 구성 요소는 토큰 크기를 상속합니다. 프레임 요소가 필요한 디자인이 아닌 이상 테두리 반경은 없습니다. 전환은 cubic-bezier(0.22, 1, 0.36, 1) 함수를 사용하여 200ms 간격으로 실행됩니다.

기본 - 신호 주황색 배경, 단색 레이블, 마우스 오버 시 발광 효과.

고스트 - 투명하며, 마우스 오버 시 테두리가 따뜻한 색감으로 변합니다.

눈썹과 라벨

신호 01 - 자율성2026년 4월 21일 업데이트됨

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

간격 및 레이아웃

8px 기본 그리드와 단일 최대 콘텐츠 너비를 사용합니다. 표면은 둥글게 처리되지 않습니다.

그리드

기본값은 8px입니다. 8, 16, 24, 32, 48, 64, 96 단위로 증가시켜 사용하세요.

컨테이너

최대 페이지 너비는 1200px입니다. 모바일에서는 가로 여백이 24px이고, 모바일에서는 48px입니다.

경계 반경

기본값은 0입니다. 테두리가 있는 아이콘 사각형과 유효성 검사 입력란은 드문 예외입니다.

패턴과 표면

타일링 가능한 패턴 3개와 온도 구배 패턴 1개가 있습니다. 구역당 하나씩 사용하세요.

그리드

차콜 색상 바탕에 알파값 4%로 32px 크기의 선이 표시됩니다.

점들

차콜 색상 바탕에 알파값 14%의 20px 방사형 도트.

열의

시그널 오렌지에서 차콜로 이어지는 일회성 대각선 그라데이션입니다. 특별한 순간에만 사용되며 카드 내부에는 절대 사용하지 않습니다.

곡물

어두운 표면에 적용되는 애니메이션 필름 그레인 오버레이입니다. 장식용이며, 이 오버레이가 없어도 본문 내용은 완전히 읽을 수 있습니다.

운동

움직임은 목적이 있으며, 주변 환경에 좌우되지 않습니다. 스크롤하여 블록을 표시한 다음 길게 누르세요. Honor는 움직임을 최소화하는 것을 선호합니다.

드러내다

duration 0.9s - ease power3.out

0.9초 완화, 24px 상승, 12% 임계값. 요소당 한 번 실행됩니다.

마우스 커서를 올려놓으세요

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

200ms ease cubic-bezier(0.22, 1, 0.36, 1). 기본 버튼이 1px 상승하고 빛납니다.

움직임 감소

prefers-reduced-motion: reduce

모든 정보가 즉시 공개됩니다. 곡물 생산이 중단됩니다. 호버 리프트가 비활성화됩니다.

메디아

동영상 및 기타 모션 기반 콘텐츠가 시스템의 나머지 부분과 어떻게 통합되는지 설명합니다. 모든 자동 재생 클립(랜딩 페이지, 홈 고객 홍보 영상, 브랜드 쇼케이스 등)은 하나의 공유 구성 요소(AutoplayVideo)에 저장되어 재생 규칙이 일관되게 유지됩니다.

자동 재생 비디오

기본적으로 음소거되어 있으며, 오른쪽 하단에 음소거 토글 버튼이 하나 있습니다. 홈 화면의 고객 후기 영상과 랜딩 페이지의 메인 화면에 사용됩니다. 부모 요소에서 전달되는 동일한 컴포넌트와 레이블을 사용합니다.

문화면 안에 있고(IntersectionObserver, 임계값 0.25) 탭이 보이는 경우에만 재생됩니다. 두 조건 중 하나라도 바뀌면 즉시 일시 정지됩니다.
동작 감소Honors는 동작 감소를 선호합니다. 자동 재생이 되지 않으며, 포스터에는 수동 재생 버튼이 있습니다.
무음토글 버튼이 오른쪽 하단에 고정되어 있습니다. 스피커 아이콘은 누를 때마다 켜지고 꺼지며, 재생() 함수를 다시 실행하여 음소거 해제 시 영상이 소리 없이 일시 정지되는 것을 방지합니다.

AutoplayVideo - home/Platform/devices.webm (Bunny Stream 경유)

목소리와 어조

마케터처럼 쓰지 말고, 현장 운영자처럼 쓰세요. 짧은 문장을 사용하고, 구체적인 명사를 쓰세요. 유행어는 쓰지 마세요.

하다

- FlytBase 브랜드 이름을 대문자 F, 대문자 B로 쓰세요.
- 일반 하이픈만 사용하세요.
- 제목은 문장 형식으로 작성하세요.
- 결과가 아니라 특징을 명칭하세요.

하지 마세요

- 엠 대시 또는 엔 대시를 사용하세요.
- 제품, 마케팅 또는 코드에 이모티콘을 사용하세요.
- Flytbase, flytbase, FLYTBASE 또는 FLytbase를 작성하세요.
- 시너지, 레버리지, 잠재력 발휘와 같은 전문 용어를 활용해 보세요.
- 제목, 헤드라인 또는 제목 아래에 쓰는 설명은 마침표로 끝내십시오. 그렇지 않으면 제목이 문장이 아니라 라벨처럼 읽힐 수 있습니다.

사용 규칙

브랜드로 제품을 출시하는 모든 사용자를 위한 빠른 참조 자료입니다. 전체 규칙은 Docs/AGENTS.md 및 Docs/DESIGN-SYSTEM.md에서 확인할 수 있습니다.

01
기본적으로 서버 컴포넌트가 사용됩니다. 클라이언트 컴포넌트는 상태, 효과, 이벤트 핸들러 또는 브라우저 API에만 사용됩니다.
02
인덱싱 가능한 모든 페이지는 generateMetadata에서 buildAlternates(path, locale)를 호출합니다. 페이지 본문에서 링크 관계형 대체 값을 생성하지 마십시오.
03
모든 사용자 표시 텍스트는 useTranslations를 사용합니다. src/messages/en.json 파일만 수동으로 수정합니다.
04
Import Link, useRouter, usePathname 및 redirect는 @/i18n/navigation에서 사용하세요. next/link 또는 next/navigation에서는 절대 사용하지 마세요.
05
인라인 스타일 없음. CSS 모듈 없음. Tailwind 유틸리티 및 토큰 클래스만 사용.
06
Next.js 특수 파일(page, layout, error, loading, not-found) 외에는 기본 내보내기가 없습니다.

서식 있는 텍스트

사례 연구, 블로그 게시물 및 문서와 같은 장문 콘텐츠에서 제목, 본문 및 인라인 마크가 표시되는 방식입니다.

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block quotes set a passage apart from the body — used for pulled statements and emphasis within an article.

First ordered item
Second ordered item
Third ordered item

First unordered item
Second unordered item
Third unordered item

Text link

Bold text

Emphasis