From bbe64bd54b75bf99943f2bc5056e3103d04aa054 Mon Sep 17 00:00:00 2001 From: Haksung Jang Date: Sat, 13 Jun 2026 08:03:19 +0900 Subject: [PATCH 1/3] brand(trusca): teal accent logo + emphasized SCA wordmark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The logo mark was a solid near-black (#18181b) tile and read as plain black. Introduce TRUSCA's own brand accent — teal #0f766e — and use it as the mark tile colour (hexagon + check stay paper #fafafa), and for the 'SCA' half of the wordmark so the SCA (the SCA-tool half of the name) is emphasized. - BrandMark + all logo assets (frontend favicon, docs logo + favicon): tile fill #18181b -> #0f766e. Teal on white is 5.47:1 (WCAG AA); paper marks on teal clear AA too. - New BrandWordmark component: TRU (ink, inherits) + SCA (teal). Used in the AppShell sidebar lockup and the AuthLayout (login / register / forgot) header so the gateway and the app shell match. Sentence mentions of the name (e.g. 'Sign in to TRUSCA') stay plain — locale word order differs. - brand-trusca.md: accent recorded as teal #0f766e (was planned blue #2563eb), tile now uses the accent instead of ink; rationale noted. Logo geometry (Hex Check), wordmark text, and the W11 theme are unchanged. --- apps/frontend/public/favicon.svg | 2 +- apps/frontend/src/components/AppShell.tsx | 3 ++- apps/frontend/src/components/BrandMark.tsx | 9 ++++++--- .../frontend/src/components/BrandWordmark.tsx | 19 +++++++++++++++++++ apps/frontend/src/pages/auth/AuthLayout.tsx | 9 +++++---- docs-site/static/img/favicon.svg | 2 +- docs-site/static/img/logo.svg | 2 +- docs/brand-trusca.md | 16 ++++++++++------ 8 files changed, 45 insertions(+), 17 deletions(-) create mode 100644 apps/frontend/src/components/BrandWordmark.tsx diff --git a/apps/frontend/public/favicon.svg b/apps/frontend/public/favicon.svg index 988cd35b..a8aa1cd0 100644 --- a/apps/frontend/public/favicon.svg +++ b/apps/frontend/public/favicon.svg @@ -1,5 +1,5 @@ - + diff --git a/apps/frontend/src/components/AppShell.tsx b/apps/frontend/src/components/AppShell.tsx index 62eea958..558aaff7 100644 --- a/apps/frontend/src/components/AppShell.tsx +++ b/apps/frontend/src/components/AppShell.tsx @@ -27,6 +27,7 @@ import { useCommandMenuShortcut, } from "@/components/CommandMenu"; import { BrandMark } from "@/components/BrandMark"; +import { BrandWordmark } from "@/components/BrandWordmark"; import { DemoBanner } from "@/components/DemoBanner"; import { HeaderBell } from "@/components/HeaderBell"; import { LanguageToggle } from "@/components/LanguageToggle"; @@ -214,7 +215,7 @@ function SidebarNav({ ) : ( - {t("app.name")} + )} diff --git a/apps/frontend/src/components/BrandMark.tsx b/apps/frontend/src/components/BrandMark.tsx index d29d84c8..58070ead 100644 --- a/apps/frontend/src/components/BrandMark.tsx +++ b/apps/frontend/src/components/BrandMark.tsx @@ -7,8 +7,11 @@ * rail; reuse this component anywhere the symbol is needed instead of * re-inlining the paths. * - * Palette is fixed brand ink/paper (not theme tokens) so the tile reads - * identically on any surface, matching the favicon. + * Palette is fixed brand colour (not theme tokens) so the tile reads + * identically on any surface, matching the favicon: teal accent tile + * (#0f766e) with the hexagon + check in paper (#fafafa). The teal is the + * TRUSCA brand accent — also used for the "SCA" half of the wordmark + * (see BrandWordmark / docs/brand-trusca.md). */ export function BrandMark({ size = 24 }: { size?: number }) { @@ -22,7 +25,7 @@ export function BrandMark({ size = 24 }: { size?: number }) { aria-hidden focusable="false" > - + + TRUSCA + + ); +} diff --git a/apps/frontend/src/pages/auth/AuthLayout.tsx b/apps/frontend/src/pages/auth/AuthLayout.tsx index 8b4b066a..218fb296 100644 --- a/apps/frontend/src/pages/auth/AuthLayout.tsx +++ b/apps/frontend/src/pages/auth/AuthLayout.tsx @@ -1,6 +1,7 @@ import type { ReactNode } from "react"; -import { useTranslation } from "react-i18next"; +import { BrandMark } from "@/components/BrandMark"; +import { BrandWordmark } from "@/components/BrandWordmark"; import { DemoBanner } from "@/components/DemoBanner"; import { LanguageToggle } from "@/components/LanguageToggle"; import { @@ -32,7 +33,6 @@ export function AuthLayout({ footer, testId, }: AuthLayoutProps) { - const { t } = useTranslation(); return (
{/* B5 — surface read-only demo mode to unauthenticated visitors too, not @@ -43,8 +43,9 @@ export function AuthLayout({ className="flex items-center justify-between border-b px-6" style={{ height: "var(--layout-header)" }} > - - {t("app.name")} + + + diff --git a/docs-site/static/img/favicon.svg b/docs-site/static/img/favicon.svg index 988cd35b..a8aa1cd0 100644 --- a/docs-site/static/img/favicon.svg +++ b/docs-site/static/img/favicon.svg @@ -1,5 +1,5 @@ - + diff --git a/docs-site/static/img/logo.svg b/docs-site/static/img/logo.svg index 988cd35b..a8aa1cd0 100644 --- a/docs-site/static/img/logo.svg +++ b/docs-site/static/img/logo.svg @@ -1,5 +1,5 @@ - + diff --git a/docs/brand-trusca.md b/docs/brand-trusca.md index a64f65a0..c2c5fca7 100644 --- a/docs/brand-trusca.md +++ b/docs/brand-trusca.md @@ -50,12 +50,16 @@ - **C Stacked SBOM** — 구성요소 목록 막대 + 최상단 검증 - **선정안**: **A Hex Check** (2026-06-12 확정) — 패키지 육각 + 검증 체크. 16px 가독성이 가장 좋고 보안 도구 관례에 부합. -- **팔레트**: 기존 토큰만 — ink `#18181b`(warm near-black), paper `#fafafa`, - accent `#2563eb`(README 배지에 이미 쓰는 블루). 새 브랜드 컬러를 만들지 않는다. -- **워드마크**: Inter semibold tracking-tight, `TRU`(ink) + `SCA`(accent). -- **적용 자산**(선정 후 교체): `docs-site/static/img/{logo,favicon}.svg`, - `apps/frontend/public/favicon.svg`(+ `index.html` link), AppShell 접힘 레일 - 모노그램. +- **팔레트**(2026-06-13 갱신): ink `#18181b`(warm near-black), paper `#fafafa`, + **accent = 틸 `#0f766e`(teal-700)**. 마크 타일은 ink가 아닌 **accent(틸)** 로 칠한다 + — 단색 near-black 타일이 "너무 검다"는 사용자 피드백(2026-06-13)에 따라, TRUSCA + 고유 브랜드 컬러로 틸을 도입(기존 계획의 블루 `#2563eb`에서 변경, 리스크 Low의 + 블루와도 분리). 틸은 흰 배경 5.47:1로 WCAG AA 통과. +- **워드마크**: Inter semibold tracking-tight, `TRU`(ink) + `SCA`(**틸 accent**). + 구현은 `apps/frontend/src/components/BrandWordmark.tsx`(AppShell 확장 락업). + 로그인 등 문장 속 "TRUSCA" 표기는 평문 유지(로케일별 어순 상이). +- **적용 자산**: 타일 틸 = `apps/frontend/src/components/BrandMark.tsx`, + `apps/frontend/public/favicon.svg`, `docs-site/static/img/{logo,favicon}.svg`. ## 5. 보존 식별자 (의도적 비변경) From 366381c285ede4ff8ca66fcd57ee066111cbe0ec Mon Sep 17 00:00:00 2001 From: Haksung Jang Date: Sat, 13 Jun 2026 08:39:06 +0900 Subject: [PATCH 2/3] brand(trusca): gradient logo + single-teal wordmark + tagline (BomLens-grade) Refines the logo per user direction (option 1 + 'Software Composition Analysis' tagline), replacing the flat-teal tile + two-tone TRU/SCA split (which read cheap): - Mark tile: flat #0f766e -> teal gradient #2dd4bf -> #0f766e (per-instance gradient id via useId); hexagon + check stay paper. Applied to BrandMark and the three SVG assets (frontend favicon, docs logo + favicon). - Wordmark: single brand-teal 'TRUSCA' (bold), dropping the mid-word colour split. Emphasis on the SCA side now comes from the tagline, not a split. - New BrandLockup: mark + wordmark + 'Software Composition Analysis' tagline (uppercase, letter-spaced, muted-foreground = AA). Featured on the auth gateway (AuthLayout) above the card; the top bar drops its redundant brand and keeps only the language toggle. The 48 px sidebar keeps the compact mark + wordmark (no room for a tagline). - brand-trusca.md: palette/wordmark/tagline/lockup updated. Gates: typecheck, vitest 1,249, lint 0 errors, i18n, build all green. --- apps/frontend/public/favicon.svg | 3 +- apps/frontend/src/components/BrandLockup.tsx | 30 +++++++++++++++++++ apps/frontend/src/components/BrandMark.tsx | 23 +++++++++----- .../frontend/src/components/BrandWordmark.tsx | 21 +++++-------- apps/frontend/src/pages/auth/AuthLayout.tsx | 17 +++++------ docs-site/static/img/favicon.svg | 3 +- docs-site/static/img/logo.svg | 3 +- docs/brand-trusca.md | 23 +++++++++----- 8 files changed, 82 insertions(+), 41 deletions(-) create mode 100644 apps/frontend/src/components/BrandLockup.tsx diff --git a/apps/frontend/public/favicon.svg b/apps/frontend/public/favicon.svg index a8aa1cd0..7a4918fb 100644 --- a/apps/frontend/public/favicon.svg +++ b/apps/frontend/public/favicon.svg @@ -1,5 +1,6 @@ - + + diff --git a/apps/frontend/src/components/BrandLockup.tsx b/apps/frontend/src/components/BrandLockup.tsx new file mode 100644 index 00000000..06b04f40 --- /dev/null +++ b/apps/frontend/src/components/BrandLockup.tsx @@ -0,0 +1,30 @@ +/** + * BrandLockup — the full TRUSCA logo: mark + "TRUSCA" wordmark + the + * "Software Composition Analysis" tagline (uppercase, letter-spaced, muted). + * + * Used where there is vertical room (the auth gateway, brand showcase). + * Tight surfaces — the 48 px sidebar / header — use the reduced lockup + * (BrandMark + BrandWordmark, no tagline). See docs/brand-trusca.md. + * + * The tagline is a brand string (not translated). Its colour uses the + * theme's muted-foreground token (passes WCAG AA), while the mark gradient + * and the teal wordmark are fixed brand colours. + */ +import { BrandMark } from "@/components/BrandMark"; +import { BrandWordmark } from "@/components/BrandWordmark"; + +export function BrandLockup() { + return ( +
+ +
+ + + + + Software Composition Analysis + +
+
+ ); +} diff --git a/apps/frontend/src/components/BrandMark.tsx b/apps/frontend/src/components/BrandMark.tsx index 58070ead..182928ab 100644 --- a/apps/frontend/src/components/BrandMark.tsx +++ b/apps/frontend/src/components/BrandMark.tsx @@ -3,18 +3,19 @@ * check), picked in the W1 rebrand (see docs/brand-trusca.md). * * Canonical in-app rendering of the mark (the same geometry ships as - * public/favicon.svg and the docs-site logo). Used by the AppShell collapsed - * rail; reuse this component anywhere the symbol is needed instead of - * re-inlining the paths. + * public/favicon.svg and the docs-site logo). Reuse this component anywhere + * the symbol is needed instead of re-inlining the paths. * * Palette is fixed brand colour (not theme tokens) so the tile reads - * identically on any surface, matching the favicon: teal accent tile - * (#0f766e) with the hexagon + check in paper (#fafafa). The teal is the - * TRUSCA brand accent — also used for the "SCA" half of the wordmark - * (see BrandWordmark / docs/brand-trusca.md). + * identically on any surface: a teal gradient tile (#2dd4bf → #0f766e) with + * the hexagon + check in paper (#fafafa). Teal is the TRUSCA brand colour; + * the wordmark (BrandWordmark) uses the same teal. The gradient id is + * per-instance (useId) so multiple marks on one page never collide. */ +import { useId } from "react"; export function BrandMark({ size = 24 }: { size?: number }) { + const gradId = useId(); return ( - + + + + + + + - TRUSCA - - ); + return TRUSCA; } diff --git a/apps/frontend/src/pages/auth/AuthLayout.tsx b/apps/frontend/src/pages/auth/AuthLayout.tsx index 218fb296..65ec773f 100644 --- a/apps/frontend/src/pages/auth/AuthLayout.tsx +++ b/apps/frontend/src/pages/auth/AuthLayout.tsx @@ -1,7 +1,6 @@ import type { ReactNode } from "react"; -import { BrandMark } from "@/components/BrandMark"; -import { BrandWordmark } from "@/components/BrandWordmark"; +import { BrandLockup } from "@/components/BrandLockup"; import { DemoBanner } from "@/components/DemoBanner"; import { LanguageToggle } from "@/components/LanguageToggle"; import { @@ -40,20 +39,20 @@ export function AuthLayout({ normal deploy. */}
- - - -
- + {/* Full brand logo (mark + wordmark + tagline) — the gateway is the + one surface with room for the tagline; the post-login sidebar uses + the compact mark + wordmark. */} + + {title} {subtitle ? {subtitle} : null} diff --git a/docs-site/static/img/favicon.svg b/docs-site/static/img/favicon.svg index a8aa1cd0..7a4918fb 100644 --- a/docs-site/static/img/favicon.svg +++ b/docs-site/static/img/favicon.svg @@ -1,5 +1,6 @@ - + + diff --git a/docs-site/static/img/logo.svg b/docs-site/static/img/logo.svg index a8aa1cd0..7a4918fb 100644 --- a/docs-site/static/img/logo.svg +++ b/docs-site/static/img/logo.svg @@ -1,5 +1,6 @@ - + + diff --git a/docs/brand-trusca.md b/docs/brand-trusca.md index c2c5fca7..85a81de9 100644 --- a/docs/brand-trusca.md +++ b/docs/brand-trusca.md @@ -50,14 +50,21 @@ - **C Stacked SBOM** — 구성요소 목록 막대 + 최상단 검증 - **선정안**: **A Hex Check** (2026-06-12 확정) — 패키지 육각 + 검증 체크. 16px 가독성이 가장 좋고 보안 도구 관례에 부합. -- **팔레트**(2026-06-13 갱신): ink `#18181b`(warm near-black), paper `#fafafa`, - **accent = 틸 `#0f766e`(teal-700)**. 마크 타일은 ink가 아닌 **accent(틸)** 로 칠한다 - — 단색 near-black 타일이 "너무 검다"는 사용자 피드백(2026-06-13)에 따라, TRUSCA - 고유 브랜드 컬러로 틸을 도입(기존 계획의 블루 `#2563eb`에서 변경, 리스크 Low의 - 블루와도 분리). 틸은 흰 배경 5.47:1로 WCAG AA 통과. -- **워드마크**: Inter semibold tracking-tight, `TRU`(ink) + `SCA`(**틸 accent**). - 구현은 `apps/frontend/src/components/BrandWordmark.tsx`(AppShell 확장 락업). - 로그인 등 문장 속 "TRUSCA" 표기는 평문 유지(로케일별 어순 상이). +- **팔레트**(2026-06-13 갱신): 브랜드 컬러 = **틸**, paper `#fafafa`, ink `#18181b`. + 단색 near-black 타일이 "너무 검다"는 피드백 + BomLens 레퍼런스(그라데이션 타일· + 단색 굵은 워드마크·태그라인) 검토를 거쳐, **마크 타일은 틸 그라데이션 + `#2dd4bf → #0f766e`**(대각, top-left→bottom-right)로, 육각+체크는 paper로 칠한다. + (기존 계획의 블루 `#2563eb`에서 틸로 변경, 리스크 Low의 블루와도 분리.) + 틸 `#0f766e`는 흰 배경 5.47:1로 WCAG AA 통과. +- **워드마크**: Inter, 굵게(extrabold), tracking-tight, **"TRUSCA" 단색 틸 `#0f766e`**. + 단어 중간 색 분리(구 `TRU`+`SCA`)는 폐기 — 싸구려로 읽혀 BomLens식 단색으로 통일. +- **태그라인**: "Software Composition Analysis"(uppercase, 자간 넓게, muted gray). + SCA 강조는 단어 색 분리 대신 태그라인이 담당. +- **락업**: 풀 락업(마크+워드마크+태그라인)은 여유 있는 곳(로그인 게이트웨이·브랜드 + 쇼케이스)에 — `apps/frontend/src/components/BrandLockup.tsx`. 좁은 48px + 사이드바/헤더는 축약 락업(마크+워드마크, 태그라인 생략). + 구현: `BrandMark.tsx`(그라데이션 타일)·`BrandWordmark.tsx`(틸 워드마크). + 로그인 카드 타이틀 등 문장 속 "TRUSCA"는 평문 유지(로케일별 어순 상이). - **적용 자산**: 타일 틸 = `apps/frontend/src/components/BrandMark.tsx`, `apps/frontend/public/favicon.svg`, `docs-site/static/img/{logo,favicon}.svg`. From 8bd668c04ecf31e084828242688708ca9f2f1d8b Mon Sep 17 00:00:00 2001 From: Haksung Jang Date: Sat, 13 Jun 2026 16:04:24 +0900 Subject: [PATCH 3/3] brand(trusca): tagline -> 'TrustedOSS SCA' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Swaps the lockup tagline from the generic 'Software Composition Analysis' to 'TrustedOSS SCA' — it states the brand relationship (TRUSCA is the SCA tool of the TrustedOSS initiative) and carries the SCA emphasis the user wanted. Not uppercased: the umbrella name 'TrustedOSS' keeps its camel casing (uppercasing would render 'TRUSTEDOSS'). Muted-foreground, AA. --- apps/frontend/src/components/BrandLockup.tsx | 9 +++++---- docs/brand-trusca.md | 5 +++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/frontend/src/components/BrandLockup.tsx b/apps/frontend/src/components/BrandLockup.tsx index 06b04f40..5904ed4b 100644 --- a/apps/frontend/src/components/BrandLockup.tsx +++ b/apps/frontend/src/components/BrandLockup.tsx @@ -1,12 +1,13 @@ /** * BrandLockup — the full TRUSCA logo: mark + "TRUSCA" wordmark + the - * "Software Composition Analysis" tagline (uppercase, letter-spaced, muted). + * "TrustedOSS SCA" tagline (the SCA tool of the TrustedOSS initiative). * * Used where there is vertical room (the auth gateway, brand showcase). * Tight surfaces — the 48 px sidebar / header — use the reduced lockup * (BrandMark + BrandWordmark, no tagline). See docs/brand-trusca.md. * - * The tagline is a brand string (not translated). Its colour uses the + * The tagline is a brand string (not translated) and is NOT uppercased — + * the umbrella name "TrustedOSS" keeps its camel casing. Its colour uses the * theme's muted-foreground token (passes WCAG AA), while the mark gradient * and the teal wordmark are fixed brand colours. */ @@ -21,8 +22,8 @@ export function BrandLockup() { - - Software Composition Analysis + + TrustedOSS SCA
diff --git a/docs/brand-trusca.md b/docs/brand-trusca.md index 85a81de9..7d80f496 100644 --- a/docs/brand-trusca.md +++ b/docs/brand-trusca.md @@ -58,8 +58,9 @@ 틸 `#0f766e`는 흰 배경 5.47:1로 WCAG AA 통과. - **워드마크**: Inter, 굵게(extrabold), tracking-tight, **"TRUSCA" 단색 틸 `#0f766e`**. 단어 중간 색 분리(구 `TRU`+`SCA`)는 폐기 — 싸구려로 읽혀 BomLens식 단색으로 통일. -- **태그라인**: "Software Composition Analysis"(uppercase, 자간 넓게, muted gray). - SCA 강조는 단어 색 분리 대신 태그라인이 담당. +- **태그라인**: "TrustedOSS SCA"(= TrustedOSS 이니셔티브의 SCA 도구). muted gray, + 대문자 변환 안 함(우산명 "TrustedOSS" 카멜표기 보존). 단어 색 분리 대신 이 + 태그라인이 SCA·우산 관계를 담당. - **락업**: 풀 락업(마크+워드마크+태그라인)은 여유 있는 곳(로그인 게이트웨이·브랜드 쇼케이스)에 — `apps/frontend/src/components/BrandLockup.tsx`. 좁은 48px 사이드바/헤더는 축약 락업(마크+워드마크, 태그라인 생략).