Firefox

얇은 테두리의 브라우저 탭과 긴 주소창 아래, 풍경 위 검색 캡슐·고정 바로가기·나만의 새 탭

서양소비자생산성복합modern-minimalhumanism고딕compactroundsubtle라이트다크공식출시 2023개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Firefox · 파이어폭스.
한 줄 정체성: 검색·바로가기·읽을거리를 직접 고르는 브라우저.
공식 디자인 철학: 2026년 발표의 핵심은 현대화·유연함·사용자 선택이다.
시그니처 요소 1개: 나만의 새 탭. 외곽선 탭·긴 주소창 아래 풍경, 검색 캡슐, 고정 바로가기가 이어진다.
범위: Acorn Desktop·2026-09-29 Firefox 157 발표. 첫 공개는 2023년 문서 초기 판 기준(추정). 지역·언어·버전별 차이가 있어 미국 영어로 재현했다.
지원 테마: 라이트·다크. Acorn의 사용자 선택과 양쪽 색 토큰이 근거다. 배경 그림은 유지한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 자유로운 · 친숙한 · 명료한.
무드 설명: 개인 배경을 넓게, 검색·기사는 불투명하게. 강조색은 선택·포커스·실행에 쓴다.
비주얼 스타일: 모던 미니멀 · 휴머니즘.
밀도: Compact. 촘촘한 브라우저 틀과 여유 있는 콘텐츠 묶음.
모서리 성향: Round. 카드 16px, 조작부 4·8px, 검색은 캡슐. 축소 비율은 추정이다.
평면성: Subtle. 콘텐츠는 약한 그림자, 활성 탭은 외곽선.

Color System

컬러 시스템 (CSS 변수)

라이트는 파랑, 다크는 청록. Acorn Blue 0~110 중 열 단계와 Border·Color의 회색을 쓴다.

의미색 바탕은 Design tokens / Color, 의미색 글자는 Semantic color를 기준으로 한다. 다크 배경값이 일부 다르다. info·box를 바탕·카드에 매핑했다(추정). 그림·흰 파비콘은 테마와 무관하다.

:root {
--color-primary-50:#E2F7FF; /* Blue 0 */
--color-primary-100:#ABDFFF; /* Blue 10 */
--color-primary-200:#84C6FF; /* Blue 20 */
--color-primary-300:#60ADFF; /* Blue 30 */
--color-primary-400:#3F94FF; /* Blue 40 */
--color-primary-500:#0062FA; /* Blue 60 */
--color-primary-600:#0053CB; /* Blue 70: hover */
--color-primary-700:#0041A4; /* Blue 80: active */
--color-primary-800:#00317E; /* Blue 90 */
--color-primary-900:#08152C; /* Blue 110 */
--color-secondary-500:#00CADB; /* Cyan 30 */
--color-neutral-0:#FFFFFF;
--color-neutral-50:#FBFBFE;
--color-neutral-100:#F0F0F4;
--color-neutral-200:#CFCFD8;
--color-neutral-300:#BFBFC9;
--color-neutral-500:#8F8F9D;
--color-neutral-600:#5B5B66;
--color-neutral-700:#3A3944;
--color-neutral-800:#23222B;
--color-neutral-900:#15141A;
--color-success-bg:#E1FFE1; --color-success-fg:#007700;
--color-warning-bg:#FFF4D0; --color-warning-fg:#9C5200;
--color-error-bg:#FFE8EA; --color-error-fg:#B20037;
--color-info-bg:#E2F7FF; --color-info-fg:#0053CB;
--bg-base:#F0F0F4; --bg-subtle:#F0F0F4;
--bg-elevated:#FFFFFF; --bg-overlay:#FFFFFF;
--text-primary:#15141A; --text-secondary:rgba(21,20,26,.69);
--text-tertiary:rgba(21,20,26,.69); --text-disabled:rgba(21,20,26,.4);
--text-on-primary:#FFFFFF;
--border-default:#BFBFC9; --border-subtle:#CFCFD8; --border-strong:#8F8F9D;
--border-focus:#0062FA; --action-primary:#0062FA;
--action-hover:#0053CB; --action-active:#0041A4;
--action-soft:rgba(0,98,250,.08);
--font-ui:'Segoe UI','SF Pro Text','Noto Sans',Ubuntu,Cantarell,Arial,sans-serif;
}
:root[data-theme="dark"] {
--color-success-bg:#004800; --color-success-fg:#B5F0B5;
--color-warning-bg:#592B00; --color-warning-fg:#FFE699;
--color-error-bg:#6E001F; --color-error-fg:#FFA0AA;
--color-info-bg:#00317E; --color-info-fg:#ABDFFF;
--bg-base:#23222B; --bg-subtle:#23222B;
--bg-elevated:#23222B; --bg-overlay:#23222B;
--text-primary:#FBFBFE; --text-secondary:rgba(251,251,254,.69);
--text-tertiary:rgba(251,251,254,.69); --text-disabled:rgba(251,251,254,.4);
--text-on-primary:#15141A;
--border-default:#5B5B66; --border-subtle:#3A3944; --border-strong:#BFBFC9;
--border-focus:#00CADB; --action-primary:#00CADB;
--action-hover:#61DCE9; --action-active:#A6ECF4;
--action-soft:rgba(0,202,219,.08);
}

Typography

타이포그래피

폰트 페어링: Windows Segoe UI, macOS SF Pro, Linux Noto Sans·Cantarell·Ubuntu. 한글은 OS 대체 서체. 광고의 세리프는 쓰지 않는다.
Display: 26px / 300 / 1.4 / normal. Windows 콘텐츠 Title.
H1: 22px / 400 / 1.4 / normal. 페이지 제목.
H2: 17px / 600 / 1.4 / normal. 콘텐츠 구획 제목.
H3: 15px / 600 / 1.5 / normal. 작은 제목 매핑(추정).
Body Large: 17px / 400 / 1.5 / normal (추정).
Body: 15px / 400 / 1.5 / normal. 콘텐츠 기본.
Body Small: 13px / 400 또는 600 / 1.5 / normal. 보조 설명.
Caption: 12px / 400 / 1.5 / normal. Windows 도구 모음 기준.
브라우저 틀: Windows 14px·macOS 13px. Acorn은 새 탭도 현재 이 체계에 가깝다고 명시한다. 토큰은 일부 미적용이다. ⑫ 11~13px·카드 6~9px는 축소값(추정).

Spacing

스페이싱

15px 기준 rem의 px 대응값이다. 도구 모음은 OS 글자 크기를 따른다.

:root {
--space-2xs:2px; --space-xs:4px; --space-sm:8px;
--space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px;
--page-main-width:664px;
--newtab-max-width:1120px;
}

Container: 일반 콘텐츠 664px. 새 탭은 최대 1120px·좌우 28px, 모바일 16px로 재구성(추정).
리듬: 검색·바로가기는 가운데, 로고·날씨는 양끝. 기사는 3→2→1열.

Border Radius

:root {
--radius-none:0; --radius-xs:2px; --radius-sm:4px;
--radius-md:8px; --radius-lg:16px; --radius-full:9999px;
--border-width:1px;
}

기사·배경은 large, 메뉴 medium, 검색 circle로 매핑했다(추정).

Shadow / Elevation

:root {
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.15);
--shadow-md:0 2px 6px rgba(0,0,0,.1),0 .25px .75px rgba(0,0,0,.05);
--shadow-lg:0 3px 12px rgba(0,0,0,.1),0 .375px 1.5px rgba(0,0,0,.05);
--shadow-xl:0 4px 16px rgba(0,0,0,.1),0 .5px 2px rgba(0,0,0,.05);
}
:root[data-theme="dark"] {
--shadow-sm:0 1px 2px rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.2);
--shadow-md:0 2px 6px rgba(0,0,0,.4),0 .25px .75px rgba(0,0,0,.2);
--shadow-lg:0 3px 12px rgba(0,0,0,.4),0 .375px 1.5px rgba(0,0,0,.2);
--shadow-xl:0 4px 16px rgba(0,0,0,.4),0 .5px 2px rgba(0,0,0,.2);
}

md=카드, lg=패널, xl=카드 hover. 활성 탭은 2026년 화면대로 외곽선을 쓴다. 고대비 모드도 선으로 구분한다.

Iconography

스타일: Outline. 상태·파비콘·날씨에는 채움을 섞는다.
크기: 기본 16px, 배지 12px, 환경설정 20px. 카드 축소값은 추정.
Stroke 굵기: 조작 1.5px·파비콘 1.8px(추정). 공식 공통값은 없다.
모서리 처리: 둥근 곡선. 사이드바는 분할 사각형, 새로고침은 열린 원, 맞춤설정은 연필.
추천 라이브러리: Acorn Desktop Icons. 공식 가로 로고는 SVG, 바로가기·기사 출처는 가상이다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

Acorn Button의 네 종류·다섯 상태를 따른다. Loading·클래스명·그 외 매핑은 재구성(추정).

.fx-demo{font:15px/1.5 var(--font-ui);color:var(--text-primary);background:var(--bg-base);isolation:isolate}
.fx-demo *{box-sizing:border-box}.fx-demo :where(h1,h2,h3,p){margin:0}.fx-demo svg{display:block;max-width:100%}:where(.fx-demo) :is(button,input,select){font:inherit}.fx-demo button{cursor:pointer}:where(.fx-demo) a{color:var(--action-primary)}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:32px;padding:6px 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-primary);font-size:13px;line-height:1.4;transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.fx-btn:hover{background:var(--bg-subtle);border-color:var(--border-strong)}.fx-btn:active{background:var(--action-soft)}
.fx-btn-primary{background:var(--action-primary);border-color:transparent;color:var(--text-on-primary)}.fx-btn-primary:hover{background:var(--action-hover);border-color:transparent}.fx-btn-primary:active{background:var(--action-active)}
.fx-btn-ghost{background:transparent;border-color:transparent}.fx-btn-ghost:hover{background:var(--action-soft);border-color:transparent}.fx-btn-ghost:active{background:var(--bg-subtle)}
.fx-btn-danger{background:var(--color-error-bg);color:var(--color-error-fg);border-color:var(--color-error-fg)}.fx-btn-danger:hover{box-shadow:inset 0 0 0 1px var(--color-error-fg);background:var(--color-error-bg)}.fx-btn-danger:active{box-shadow:inset 0 0 0 2px var(--color-error-fg)}
.fx-demo :where(button,a,input,select,summary):focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.fx-btn:disabled,.fx-btn[aria-disabled="true"]{opacity:.4;cursor:default;box-shadow:none;pointer-events:none}.fx-btn[aria-busy="true"]{pointer-events:none}.fx-btn[aria-busy="true"]::before{content:'';width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fx-spin .8s linear infinite}
.fx-input{min-width:0;min-height:32px;padding:6px 12px;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:13px}.fx-input::placeholder{color:var(--text-secondary);opacity:1}.fx-input:focus{outline:2px solid var(--border-focus);outline-offset:1px}.fx-input[aria-invalid="true"]{border-color:var(--color-error-fg)}.fx-input:disabled{color:var(--text-disabled);background:var(--bg-subtle);cursor:default}.fx-error{color:var(--color-error-fg);font-size:13px}
.fx-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}.fx-card-emphasis{border-color:var(--action-primary)}.fx-card-outline{box-shadow:none;border-color:var(--border-default)}.fx-card:focus-within{outline:2px solid var(--border-focus);outline-offset:2px}
.fx-tag{display:inline-flex;gap:4px;align-items:center;border:1px solid transparent;border-radius:var(--radius-sm);padding:2px 6px;font-size:11px;line-height:1.4;background:var(--action-primary);color:var(--text-on-primary)}.fx-tag-subtle{background:var(--action-soft);color:var(--action-primary)}.fx-tag-outline{border-color:var(--border-default);background:transparent;color:var(--text-secondary)}
.fx-tabs{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--bg-subtle)}.fx-tab{display:flex;align-items:center;gap:8px;min-width:0;min-height:28px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);font-size:12px;padding:3px 12px;white-space:nowrap}.fx-tab[aria-current="page"]{border-color:var(--border-strong);background:var(--bg-elevated);color:var(--text-primary)}.fx-tab:hover{background:var(--action-soft)}.fx-tab:active{border-color:var(--action-primary)}.fx-tab:disabled{opacity:.4}
.fx-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:13px}.fx-toggle input{appearance:none;flex:none;width:32px;height:18px;margin:0;border:1px solid var(--border-strong);border-radius:9999px;background:var(--bg-base);position:relative;cursor:pointer}.fx-toggle input::before{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--text-secondary);transition:transform var(--duration-fast) var(--ease-out)}.fx-toggle input:checked{background:var(--action-primary);border-color:var(--action-primary)}.fx-toggle input:checked::before{background:var(--text-on-primary);transform:translateX(14px)}.fx-toggle input:disabled{opacity:.4;cursor:default}
@media(forced-colors:active){.fx-card,.fx-btn{box-shadow:none;border:1px solid CanvasText}.fx-tab[aria-current="page"]{outline:1px solid Highlight}.fx-toggle input{appearance:auto}.fx-toggle input::before{display:none}}

Button: 실행 Primary, 취소 Default, 더보기 Ghost, 삭제 Danger.
Input: 검색은 캡슐, 설정은 4px. 오류에는 설명을 붙인다.
Card: 그림과 출처·제목·읽는 시간을 한데 묶는다.
Badge / Tag: 선택 개수·탭 묶음에 쓴다.
Navigation: 탭·주소창 두 줄. 좁은 폭은 비활성 탭만 줄인다(추정).

Motion

시간은 추정값이다. 조작부 상태만 움직이고 풍경·기사는 고정한다.

:root{--duration-fast:120ms;--duration-base:180ms;--duration-slow:240ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fx-demo.fx-demo *,.fx-demo.fx-demo *::before,.fx-demo.fx-demo *::after{animation:none;transition:none;scroll-behavior:auto}}

Anti-patterns

1. 주황 버튼 남용: 로고색과 파랑·청록 조작색을 구분한다. 2. 포털 메뉴: 탭·주소창·새 탭 검색을 유지한다. 3. 한 서체 강제: OS 서체·플랫폼별 크기를 따른다. 4. 사진 위 낮은 대비: 카드·검색·날씨에 독립 바탕을 둔다. 5. 선택·포커스 혼동: 활성 탭·포커스·체크를 선과 도형으로 구분한다.

Sources

출처

Firefox 이름과 로고는 각 권리자의 상표입니다.