본문으로 바로가기
브랜드 시스템 v1

FlytBase 시각 및 언어 시스템

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

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

그림 물감

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

01

엄격한 규칙

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

차콜(어두운 바탕)

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

dbg#1A1A1A
ds#242424
de#2E2E2E
db#3D3D3D
dm#5C5C5C
dsc#999999
dbd#D6D6D6
dh#F0F0F0

시그널 오렌지

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

o50#FDF0E8
o100#F4B896
o200#EC7D42
o400#D95B28
o600#A33D14
o800#7A2B0E
o900#4A1808

유칼립투스

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

e50#EAF0EE
e100#BACDD0
e200#72A899
e400#3A7A65
e600#2B5A4A
e800#1B3A30
e900#0F2219

쿨 그레이(밝은 베이스)

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

lbg#F5F5F7
ls#FFFFFF
lb#DDDFE3
lsc#555555
lp#111111

확인

양식 오류 상태에만 사용되는 색상입니다. 브랜드 색상으로는 절대 사용되지 않습니다.

error - #F43F5E

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

타이포그래피

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

02

표시하다

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 정사각형 프레임 아이콘 내부에서만 사용 가능합니다.

03

허용하다

  • - 인광 박막이 기본값으로 설정됨
  • - 테두리가 있는 사각형 안에 있는 일반 인광체
  • - 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 간격으로 실행됩니다.

04

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

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

녹색 - 플랫폼 및 데이터 이벤트용 유칼립투스.

눈썹과 라벨

신호 01 - 자율성플랫폼 02 - 이벤트2026년 4월 21일 업데이트됨

간격 및 레이아웃

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

05

그리드

8
16
24
32
48
64

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

컨테이너

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

경계 반경

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

패턴과 표면

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

06

그리드

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

점들

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

열의

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

곡물

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

운동

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

07

드러내다

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

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

목소리와 어조

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

08

하다

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

하지 마세요

  • - 엠 대시 또는 엔 대시를 사용하세요.
  • - 제품, 마케팅 또는 코드에 이모티콘을 사용하세요.
  • - Flytbase, flytbase, FLYTBASE 또는 FLytbase를 작성하세요.
  • - 시너지, 레버리지, 잠재력 발휘와 같은 전문 용어를 활용해 보세요.

사용 규칙

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

09
  1. 01

    기본적으로 서버 컴포넌트가 사용됩니다. 클라이언트 컴포넌트는 상태, 효과, 이벤트 핸들러 또는 브라우저 API에만 사용됩니다.

  2. 02

    인덱싱 가능한 모든 페이지는 generateMetadata에서 buildAlternates(path, locale)를 호출합니다. 페이지 본문에서 링크 관계형 대체 값을 생성하지 마십시오.

  3. 03

    모든 사용자 표시 텍스트는 useTranslations를 사용합니다. src/messages/en.json 파일만 수동으로 수정합니다.

  4. 04

    Import Link, useRouter, usePathname 및 redirect는 @/i18n/navigation에서 사용하세요. next/link 또는 next/navigation에서는 절대 사용하지 마세요.

  5. 05

    인라인 스타일 없음. CSS 모듈 없음. Tailwind 유틸리티 및 토큰 클래스만 사용.

  6. 06

    Next.js 특수 파일(page, layout, error, loading, not-found) 외에는 기본 내보내기가 없습니다.

백오피스 업무 전체를 위한 단일 플랫폼. 24시간 내내 일하는 무한한 수의 요원들.

BVLOS 경로

사이트별로 직접 승인 절차를 진행하시겠습니까, 아니면 관리형 서비스를 이용하시겠습니까?

ROI 프레임워크

결과가 특정 사용 사례에 갇혀 있을 때, 다음 단계에 필요한 예산을 어떻게 확보할 수 있을까요?

데이터를 지능으로

검토 작업에 파묻힌 팀 없이 수 테라바이트에 달하는 영상을 어떻게 실질적인 결과물로 바꿀 수 있을까요?

IT 및 규정 준수

데이터는 어디에 저장되고, 누가 접근 권한을 가지고 있으며, 하드웨어는 국방수권법(NDAA)을 준수합니까?