feat(frontend): change brand color for PHPerKaigi 2026

24 files changed, 36 insertions, 37 deletions

diff --git a/frontend/app/components/BorderedContainer.test.tsx b/frontend/app/components/BorderedContainer.test.tsx
index 2d1b663..22a0aec 100644
--- a/frontend/app/components/BorderedContainer.test.tsx
+++ b/frontend/app/components/BorderedContainer.test.tsx
@@ -27,7 +27,7 @@ describe("BorderedContainer", () => {
 		render(<BorderedContainer>Styled</BorderedContainer>);
 		const container = screen.getByText("Styled").closest("div");
 		expect(container?.className).toContain("border-2");
-		expect(container?.className).toContain("border-blue-600");
+		expect(container?.className).toContain("border-brand-600");
 		expect(container?.className).toContain("rounded-xl");
 	});
 });
diff --git a/frontend/app/components/BorderedContainer.tsx b/frontend/app/components/BorderedContainer.tsx
index d9b2fe8..a1bff35 100644
--- a/frontend/app/components/BorderedContainer.tsx
+++ b/frontend/app/components/BorderedContainer.tsx
@@ -8,7 +8,7 @@ type Props = {
 export default function BorderedContainer({ children, className }: Props) {
 	return (
 		<div
-			className={`bg-white border-2 border-blue-600 rounded-xl p-4 ${className}`}
+			className={`bg-white border-2 border-brand-600 rounded-xl p-4 ${className}`}
 		>
 			{children}
 		</div>
diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index f1516ed..2b330dd 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -33,7 +33,7 @@ export default function CodeBlock({ code, language }: Props) {
 				>
 					<FontAwesomeIcon icon={faCopy} className="text-gray-600" />
 					{showCopied && (
-						<span className="ml-1 text-xs text-blue-600">Copied!</span>
+						<span className="ml-1 text-xs text-brand-600">Copied!</span>
 					)}
 				</button>
 			)}
diff --git a/frontend/app/components/Gaming/ExecStatusIndicatorIcon.tsx b/frontend/app/components/Gaming/ExecStatusIndicatorIcon.tsx
index 44d28ad..e4260ec 100644
--- a/frontend/app/components/Gaming/ExecStatusIndicatorIcon.tsx
+++ b/frontend/app/components/Gaming/ExecStatusIndicatorIcon.tsx
@@ -31,7 +31,7 @@ export default function ExecStatusIndicatorIcon({ status }: Props) {
 				<FontAwesomeIcon
 					icon={faCircleCheck}
 					fixedWidth
-					className="text-sky-500"
+					className="text-brand-500"
 				/>
 			);
 		default:
diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx
index 7359d40..4bfdad3 100644
--- a/frontend/app/components/Gaming/RankingTable.tsx
+++ b/frontend/app/components/Gaming/RankingTable.tsx
@@ -38,7 +38,7 @@ export default function RankingTable({ problemLanguage }: Props) {
 	const ranking = useAtomValue(rankingAtom);
 
 	return (
-		<div className="overflow-x-auto border-2 border-blue-600 rounded-xl">
+		<div className="overflow-x-auto border-2 border-brand-600 rounded-xl">
 			<table className="min-w-full divide-y divide-gray-400 border-collapse">
 				<thead className="bg-gray-50">
 					<tr>
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 025e676..7d81c82 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -67,7 +67,7 @@ export default function GolfPlayAppGaming({
 
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
-			<div className="text-white bg-sky-600 flex flex-row justify-between px-4 py-2">
+			<div className="text-white bg-brand-600 flex flex-row justify-between px-4 py-2">
 				<div className="font-bold">
 					<div className="text-gray-100">{gameDisplayName}</div>
 					{isFinished ? (
@@ -122,7 +122,7 @@ export default function GolfPlayAppGaming({
 					</BorderedContainer>
 				</TitledColumn>
 				<TitledColumn title="提出結果">
-					<div className="overflow-hidden border-2 border-blue-600 rounded-xl">
+					<div className="overflow-hidden border-2 border-brand-600 rounded-xl">
 						<table className="min-w-full divide-y divide-gray-400 border-collapse">
 							<thead className="bg-gray-50">
 								<tr>
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
index 07b93d6..b3378fc 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
@@ -10,7 +10,7 @@ export default function GolfPlayAppStarting({ gameDisplayName }: Props) {
 
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
-			<div className="text-white bg-sky-600 p-10 text-center">
+			<div className="text-white bg-brand-600 p-10 text-center">
 				<div className="text-4xl font-bold">{gameDisplayName}</div>
 			</div>
 			<div className="text-center text-black font-black text-10xl">
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
index 303b4a8..1341073 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
@@ -12,7 +12,7 @@ export default function GolfPlayAppWaiting({
 }: Props) {
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center">
-			<div className="text-white bg-sky-600 p-10">
+			<div className="text-white bg-brand-600 p-10">
 				<div className="text-4xl">{gameDisplayName}</div>
 			</div>
 			<div className="grow grid mx-auto text-black">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index 4a9cf92..3d2784e 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -64,8 +64,8 @@ export default function GolfWatchAppGaming1v1({
 			? "bg-orange-400"
 			: gameResultKind === "winB"
 				? "bg-purple-400"
-				: "bg-sky-600"
-		: "bg-sky-600";
+				: "bg-brand-600"
+		: "bg-brand-600";
 
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index 22c6df2..320709b 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -26,7 +26,7 @@ export default function GolfWatchAppGamingMultiplayer({
 
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
-			<div className="text-white bg-sky-600 grid grid-cols-3 px-4 py-2">
+			<div className="text-white bg-brand-600 grid grid-cols-3 px-4 py-2">
 				<div className="font-bold flex justify-between my-auto"></div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
index 82e5334..d9e004e 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
@@ -10,7 +10,7 @@ export default function GolfWatchAppStarting({ gameDisplayName }: Props) {
 
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
-			<div className="text-white bg-sky-600 p-10 text-center">
+			<div className="text-white bg-brand-600 p-10 text-center">
 				<div className="text-4xl font-bold">{gameDisplayName}</div>
 			</div>
 			<div className="text-center text-black font-black text-10xl">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
index ae88295..c7db3a7 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaiting1v1.tsx
@@ -14,7 +14,7 @@ export default function GolfWatchAppWaiting1v1({
 }: Props) {
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center">
-			<div className="text-white bg-sky-600 p-10">
+			<div className="text-white bg-brand-600 p-10">
 				<div className="text-4xl">{gameDisplayName}</div>
 			</div>
 			<div className="grow grid grid-cols-3 gap-10 mx-auto text-black">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx
index 13bcc10..72757f3 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppWaitingMultiplayer.tsx
@@ -7,7 +7,7 @@ export default function GolfWatchAppWaitingMultiplayer({
 }: Props) {
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col font-bold text-center">
-			<div className="text-white bg-sky-600 p-10">
+			<div className="text-white bg-brand-600 p-10">
 				<div className="text-4xl">{gameDisplayName}</div>
 			</div>
 		</div>
diff --git a/frontend/app/components/InputText.test.tsx b/frontend/app/components/InputText.test.tsx
index 2072b37..6fbdd27 100644
--- a/frontend/app/components/InputText.test.tsx
+++ b/frontend/app/components/InputText.test.tsx
@@ -31,6 +31,6 @@ describe("InputText", () => {
 	test("has border styling", () => {
 		render(<InputText data-testid="input" />);
 		const input = screen.getByTestId("input");
-		expect(input.className).toContain("border-sky-600");
+		expect(input.className).toContain("border-brand-600");
 	});
 });
diff --git a/frontend/app/components/InputText.tsx b/frontend/app/components/InputText.tsx
index 6bcceb7..9b57a74 100644
--- a/frontend/app/components/InputText.tsx
+++ b/frontend/app/components/InputText.tsx
@@ -6,7 +6,7 @@ export default function InputText(props: InputProps) {
 	return (
 		<input
 			{...props}
-			className="p-2 block w-full border border-sky-600 rounded-md transition duration-300 focus:ring-3 focus:ring-sky-400 focus:outline-hidden"
+			className="p-2 block w-full border border-brand-600 rounded-md transition duration-300 focus:ring-3 focus:ring-brand-400 focus:outline-hidden"
 		/>
 	);
 }
diff --git a/frontend/app/components/NavigateLink.tsx b/frontend/app/components/NavigateLink.tsx
index 16c7858..8741121 100644
--- a/frontend/app/components/NavigateLink.tsx
+++ b/frontend/app/components/NavigateLink.tsx
@@ -10,7 +10,7 @@ export default function NavigateLink({
 	return (
 		<Link
 			to={to}
-			className="text-lg text-white bg-sky-600 px-4 py-2 border-2 border-sky-50 rounded-sm transition duration-300 hover:bg-sky-500 focus:ring-3 focus:ring-sky-400 focus:outline-hidden"
+			className="text-lg text-white bg-brand-600 px-4 py-2 border-2 border-brand-50 rounded-sm transition duration-300 hover:bg-brand-500 focus:ring-3 focus:ring-brand-400 focus:outline-hidden"
 		>
 			{children}
 		</Link>
diff --git a/frontend/app/components/SubmitButton.test.tsx b/frontend/app/components/SubmitButton.test.tsx
index ebf3416..9a8085e 100644
--- a/frontend/app/components/SubmitButton.test.tsx
+++ b/frontend/app/components/SubmitButton.test.tsx
@@ -33,9 +33,9 @@ describe("SubmitButton", () => {
 		expect(button.disabled).toBe(false);
 	});
 
-	test("has sky-600 background styling", () => {
+	test("has brand-600 background styling", () => {
 		render(<SubmitButton>Submit</SubmitButton>);
 		const button = screen.getByText("Submit");
-		expect(button.className).toContain("bg-sky-600");
+		expect(button.className).toContain("bg-brand-600");
 	});
 });
diff --git a/frontend/app/components/SubmitButton.tsx b/frontend/app/components/SubmitButton.tsx
index 2d5c9d1..916c20f 100644
--- a/frontend/app/components/SubmitButton.tsx
+++ b/frontend/app/components/SubmitButton.tsx
@@ -6,7 +6,7 @@ export default function SubmitButton(props: ButtonProps) {
 	return (
 		<button
 			{...props}
-			className="text-lg text-white px-4 py-2 bg-sky-600 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-sm transition duration-300 hover:bg-sky-500 focus:ring-3 focus:ring-sky-400 focus:outline-hidden"
+			className="text-lg text-white px-4 py-2 bg-brand-600 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-sm transition duration-300 hover:bg-brand-500 focus:ring-3 focus:ring-brand-400 focus:outline-hidden"
 		/>
 	);
 }
diff --git a/frontend/app/pages/DashboardPage.tsx b/frontend/app/pages/DashboardPage.tsx
index 7801739..8f40f22 100644
--- a/frontend/app/pages/DashboardPage.tsx
+++ b/frontend/app/pages/DashboardPage.tsx
@@ -117,7 +117,7 @@ export default function DashboardPage() {
 							? `http://localhost:8007${BASE_PATH}admin/dashboard`
 							: `${BASE_PATH}admin/dashboard`
 					}
-					className="text-lg text-white bg-sky-600 px-4 py-2 rounded-sm transition duration-300 hover:bg-sky-500 focus:ring-3 focus:ring-sky-400 focus:outline-hidden"
+					className="text-lg text-white bg-brand-600 px-4 py-2 rounded-sm transition duration-300 hover:bg-brand-500 focus:ring-3 focus:ring-brand-400 focus:outline-hidden"
 				>
 					Admin Dashboard
 				</a>
diff --git a/frontend/app/pages/IndexPage.tsx b/frontend/app/pages/IndexPage.tsx
index 7a1da4c..8dfbefe 100644
--- a/frontend/app/pages/IndexPage.tsx
+++ b/frontend/app/pages/IndexPage.tsx
@@ -14,7 +14,7 @@ export default function IndexPage() {
 				className="w-96 h-auto"
 			/>
 			<div className="text-center">
-				<div className="font-bold text-transparent bg-clip-text bg-phperkaigi">
+				<div className="font-bold text-transparent bg-clip-text bg-brand-600">
 					<div className="text-6xl">PHPER CODE BATTLE</div>
 				</div>
 			</div>
diff --git a/frontend/app/pages/LoginPage.tsx b/frontend/app/pages/LoginPage.tsx
index c10b819..139b1f0 100644
--- a/frontend/app/pages/LoginPage.tsx
+++ b/frontend/app/pages/LoginPage.tsx
@@ -57,7 +57,7 @@ export default function LoginPage() {
 						<h2 className="text-2xl mb-6 text-center">
 							fortee アカウントでログイン
 						</h2>
-						{error && <p className="text-sky-500 text-sm mb-4">{error}</p>}
+						{error && <p className="text-brand-500 text-sm mb-4">{error}</p>}
 						<div className="mb-4 flex flex-col gap-1">
 							<label
 								htmlFor="username"
diff --git a/frontend/app/pages/SubmissionsPage.tsx b/frontend/app/pages/SubmissionsPage.tsx
index 2c3329d..1f55aa8 100644
--- a/frontend/app/pages/SubmissionsPage.tsx
+++ b/frontend/app/pages/SubmissionsPage.tsx
@@ -68,7 +68,7 @@ export default function SubmissionsPage({ gameId }: { gameId: string }) {
 															: s.submission_id,
 													)
 												}
-												className="text-sm text-sky-600 hover:text-sky-800 underline"
+												className="text-sm text-brand-600 hover:text-brand-800 underline"
 											>
 												{expandedId === s.submission_id
 													? "コードを隠す"
diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index e3ec912..0bf4895 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -304,7 +304,7 @@ export default function TournamentPage({
 	return (
 		<div className="p-6 bg-gray-100 min-h-screen">
 			<div className="max-w-6xl mx-auto">
-				<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-phperkaigi text-center mb-8">
+				<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-brand-600 text-center mb-8">
 					{tournament.display_name}
 				</h1>
 				<TournamentBracket tournament={tournament} />
diff --git a/frontend/app/tailwind.css b/frontend/app/tailwind.css
index 6aa7ebd..4bcb95e 100644
--- a/frontend/app/tailwind.css
+++ b/frontend/app/tailwind.css
@@ -2,15 +2,14 @@
 
 @theme {
 	--text-10xl: 16rem;
-}
-
-@utility bg-phperkaigi {
-	background-image: linear-gradient(
-		to right,
-		#e03468,
-		#ff523d,
-		#f060b2,
-		#a05cff,
-		#008ccf
-	);
+	--color-brand-50: #fdf2f7;
+	--color-brand-100: #fce7f1;
+	--color-brand-200: #fbcfe4;
+	--color-brand-300: #f9a8d0;
+	--color-brand-400: #f472b0;
+	--color-brand-500: #e8458c;
+	--color-brand-600: #a0185d;
+	--color-brand-700: #8b1350;
+	--color-brand-800: #6e1041;
+	--color-brand-900: #5c1239;
 }