added a placeholder title and description to pages/index, fixed imports in highlight toolbar, adjusted our secondary color

components/Pages/index.tsx

···
 import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
 import { PaintSmall } from "components/Icons/PaintSmall";
 import { ShareSmall } from "components/Icons/ShareSmall";
+import Link from "next/link";
 
 export function Pages(props: { rootPage: string }) {
   let rootPage = useEntity(props.rootPage, "root/page")[0];
···
           }}
         />
       ) : null}
+      <div
+        className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-6 ${cardBorderHidden?.data.value ? "sm:pt-4 pt-0" : "sm:pt-6 pt-2"}`}
+      >
+        <Link
+          href="/"
+          className="text-accent-contrast font-bold hover:no-underline"
+        >
+          Publication Name
+        </Link>
+        <h2 className="">Titles Are Cool</h2>
+        <p className="italic text-secondary">
+          This is a description! What happens if it's just a little but longer,
+          since it's nice to be able to say a few more words...
+        </p>
+        <p className="text-sm text-tertiary">Draft</p>
+      </div>
       <Blocks entityID={props.entityID} />
       {/* we handle page bg in this sepate div so that
     we can apply an opacity the background image

components/Toolbar/HighlightToolbar.tsx

···
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { theme } from "../../tailwind.config";
 import {
-  ColorPicker,
   pickers,
   SectionArrow,
   setColorAttribute,
 } from "components/ThemeManager/ThemeSetter";
+import { ColorPicker } from "components/ThemeManager/ColorPicker";
 import { useEntity, useReplicache } from "src/replicache";
 import { useEffect, useMemo, useState } from "react";
 import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
···
 import { PopoverArrow } from "components/Icons/PopoverArrow";
 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { PaintSmall } from "components/Icons/PaintSmall";
+import { Color } from "react-aria-components";
 
 export const HighlightButton = (props: {
   lastUsedHighlight: string;

tailwind.config.js

···
       //TEXT COLORS.
       primary: "rgb(var(--primary))",
       secondary:
-        "color-mix(in oklab, rgb(var(--primary)),  rgb(var(--bg-page)) 15%)",
+        "color-mix(in oklab, rgb(var(--primary)),  rgb(var(--bg-page)) 25%)",
       tertiary:
         "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 55%)",
       border: