s/primary/rebeccapurple/ for public areas

new primary is #007AFF

app/public-area/components/cta-form.tsx

@@ -46,10 +46,13 @@ export default function CTAForm() {
 					<input
 						{...register("email")}
 						type="email"
-						className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500"
+						className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-rebeccapurple-500 focus:border-rebeccapurple-500"
 						placeholder="Enter your email address"
 					/>
-					<button type="submit" className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0">
+					<button
+						type="submit"
+						className="btn text-white bg-rebeccapurple-500 hover:bg-rebeccapurple-400 flex-shrink-0"
+					>
 						Request access
 					</button>
 				</div>

app/public-area/components/faqs.tsx

@@ -40,7 +40,7 @@ const Accordion: FunctionComponent<{ title: string }> = ({ title, children }) =>
 				<>
 					<Disclosure.Button className="flex items-center w-full text-lg font-medium text-left py-5 border-t border-gray-200">
 						<svg
-							className="w-4 h-4 fill-current text-primary-500 flex-shrink-0 mr-8 -ml-12"
+							className="w-4 h-4 fill-current text-rebeccapurple-500 flex-shrink-0 mr-8 -ml-12"
 							viewBox="0 0 16 16"
 							xmlns="http://www.w3.org/2000/svg"
 						>

app/public-area/components/header.tsx

@@ -194,7 +194,7 @@ function MobileNav() {
 												<div className="ml-3 h-7 flex items-center">
 													<button
 														type="button"
-														className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+														className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rebeccapurple-500"
 														onClick={() => setMobileNavOpen(false)}
 													>
 														<span className="sr-only">Close panel</span>

app/public-area/components/hero.tsx

@@ -4,14 +4,14 @@ import mockupImage from "../images/phone-mockup.png";
 
 export default function Hero() {
 	return (
-		<div className="relative bg-gradient-to-b from-primary-100 to-primary-200">
+		<div className="relative bg-gradient-to-b from-rebeccapurple-100 to-rebeccapurple-200">
 			<section className="overflow-hidden">
 				<div className="flex flex-col lg:flex-row lg:items-stretch lg:min-h-screen lg:max-h-[900px]">
 					<div className="flex items-center justify-center w-full lg:order-2 lg:w-7/12">
 						<div className="h-full px-4 pt-24 pb-16 sm:px-6 lg:px-24 2xl:px-32 lg:pt-40 lg:pb-14">
 							<div className="flex flex-col flex-1 justify-center h-full space-y-8">
 								<h1 className="font-heading text-4xl leading-none lg:leading-tight xl:text-5xl xl:leading-tight">
-									<span className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
+									<span className="bg-gradient-to-br from-rebeccapurple-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
 										Take your phone number
 									</span>{" "}
 									<span className="text-[#24185B]">anywhere you go</span>

app/public-area/components/referral-banner.tsx

@@ -8,7 +8,7 @@ export default function ReferralBanner() {
 	}
 
 	return (
-		<div className="relative bg-primary-600 z-40">
+		<div className="relative bg-rebeccapurple-600 z-40">
 			<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
 				<div className="pr-16 sm:text-center sm:px-16">
 					<p className="font-medium text-white">
@@ -24,7 +24,7 @@ export default function ReferralBanner() {
 				<div className="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
 					<button
 						type="button"
-						className="flex p-2 rounded-md hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white"
+						className="flex p-2 rounded-md hover:bg-rebeccapurple-500 focus:outline-none focus:ring-2 focus:ring-white"
 					>
 						<span className="sr-only">Dismiss</span>
 						<IoClose className="h-6 w-6 text-white" aria-hidden="true" />

app/public-area/pages/pricing.tsx

@@ -71,7 +71,7 @@ const Pricing: BlitzPage = () => {
 							<div className="flex-1">
 								<h3 className="text-2xl font-mackinac font-semibold text-gray-900">{tier.title}</h3>
 								{tier.yearly ? (
-									<p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
+									<p className="absolute top-0 py-1.5 px-4 bg-rebeccapurple-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
 										Get 2 months free!
 									</p>
 								) : null}
@@ -111,8 +111,8 @@ const Pricing: BlitzPage = () => {
 									onClick={() => Panelbear.track("redirect-to-join-waitlist")}
 									className={clsx(
 										tier.yearly
-											? "bg-primary-500 text-white hover:bg-primary-600"
+											? "bg-rebeccapurple-500 text-white hover:bg-rebeccapurple-600"
-											: "bg-primary-50 text-primary-700 hover:bg-primary-100",
+											: "bg-rebeccapurple-50 text-rebeccapurple-700 hover:bg-rebeccapurple-100",
 										"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",
 									)}
 								>

app/settings/components/settings-layout.tsx

@@ -7,7 +7,7 @@ import Layout from "../../core/layouts/layout";
 
 const subNavigation = [
 	{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
-	{ name: "Plan & Billing", href: Routes.Billing(), icon: IoCardOutline },
+	{ name: "Billing", href: Routes.Billing(), icon: IoCardOutline },
 	{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
 ];
 
@@ -36,7 +36,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 										<a
 											className={clsx(
 												isCurrentPage
-													? "bg-gray-50 text-orange-600 hover:bg-white"
+													? "bg-gray-50 text-primary-600 hover:bg-white"
 													: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
 												"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
 											)}
@@ -45,7 +45,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 											<item.icon
 												className={clsx(
 													isCurrentPage
-														? "text-orange-500"
+														? "text-primary-500"
 														: "text-gray-400 group-hover:text-gray-500",
 													"flex-shrink-0 -ml-1 mr-3 h-6 w-6",
 												)}

tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
 				mackinac: ["P22 Mackinac Pro", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
 			},
 			colors: {
-				primary: {
+				rebeccapurple: {
 					50: "#f9fafb",
 					100: "#eef1fb",
 					200: "#dbd7f8",
@@ -22,6 +22,18 @@ module.exports = {
 					800: "#39236b",
 					900: "#1f163f",
 				},
+				primary: {
+					50: "#E5F2FF",
+					100: "#CCE4FF",
+					200: "#99CAFF",
+					300: "#66AFFF",
+					400: "#3395FF",
+					500: "#007AFF",
+					600: "#0062CC",
+					700: "#004999",
+					800: "#003166",
+					900: "#001833",
+				},
 				gray: {
 					50: "#FAFAFA",
 					100: "#F4F4F5",