added some of the styling change requests, there's a mix of no-brainers and some that warrant discussion so I haven't applied all of them here. Making a draft PR for now, we can discuss the rest later

frontend/public/branding/StirlingPDFLogoNoTextDark.svg

@@ -1,4 +1,4 @@
-<svg width="146" height="157" viewBox="0 0 146 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="92" height="100" viewBox="0 0 92 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#E6E6E6" fill-opacity="0.4"/>
+<path d="M0 50L60 0V46.5L0 96.5V50Z" fill="#E6E6E6" fill-opacity="0.4"/>
-<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#E6E6E6" fill-opacity="0.7"/>
+<path d="M32 53L92 3V49.5L32 99.5V53Z" fill="#E6E6E6" fill-opacity="0.7"/>
 </svg>

frontend/public/branding/StirlingPDFLogoNoTextLight.svg

@@ -1,4 +1,4 @@
-<svg width="146" height="146" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="92" height="100" viewBox="0 0 92 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#ACACAC" fill-opacity="0.3"/>
+<path d="M0 50L60 0V46.5L0 96.5V50Z" fill="#ACACAC" fill-opacity="0.3"/>
-<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#FC9999" fill-opacity="0.5"/>
+<path d="M32 53L92 3V49.5L32 99.5V53Z" fill="#FC9999" fill-opacity="0.5"/>
 </svg>

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -26,7 +26,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
   const iconNode = (
     <span className="iconContainer">
-      <AppsIcon sx={{ fontSize: '1.5rem' }} />
+      <AppsIcon sx={{ fontSize: '2rem' }} />
     </span>
   );
 

frontend/src/components/shared/LandingPage.tsx

@@ -36,7 +36,7 @@ const LandingPage = () => {
   };
 
   return (
-    <Container size="lg" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
+    <Container size="70rem" p={0} h="102%" className="flex items-center justify-center" style={{ position: 'relative' }}>
       {/* White PDF Page Background */}
       <Dropzone
         onDrop={handleFileDrop}
@@ -48,7 +48,7 @@ const LandingPage = () => {
           left: '50%',
           transform: 'translateX(-50%)',
           bottom: 0,
-          borderRadius: '0.5rem 0.5rem 0 0',
+          borderRadius: '0.25rem 0.25rem 0 0',
           filter: 'var(--drop-shadow-filter)',
           backgroundColor: 'var(--landing-paper-bg)',
           transition: 'background-color 0.4s ease',
@@ -66,7 +66,7 @@ const LandingPage = () => {
           style={{
             position: 'absolute',
             top: 0,
-            right: ".5rem",
+            right: 0,
             zIndex: 10,
 
           }}
@@ -75,15 +75,13 @@ const LandingPage = () => {
             src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
             alt="Stirling PDF Logo"
             style={{
-              width: '10rem',
               height: 'auto',
               pointerEvents: 'none',
-              marginTop: '-0.5rem'
             }}
           />
         </div>
         <div
-          className={`min-h-[25vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[360px] border transition-all duration-200 dropzone-inner relative`}
+          className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
           style={{
             borderRadius: '0.5rem',
             backgroundColor: 'var(--landing-inner-paper-bg)',

frontend/src/components/shared/QuickAccessBar.tsx

@@ -68,7 +68,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
-      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
+      icon: <LocalIcon icon="automation-outline" width="1.6rem" height="1.6rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -80,7 +80,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'files',
       name: t("quickAccess.files", "Files"),
-      icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
+      icon: <LocalIcon icon="folder-rounded" width="1.6rem" height="1.6rem" />,
       isRound: true,
       size: 'lg',
       type: 'modal',
@@ -151,7 +151,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
 
                   <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
                     <ActionIcon
-                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'xl') : 'lg'}
+                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'lg') : 'lg'}
                       variant="subtle"
                        onClick={() => {
                          config.onClick();

frontend/src/components/tools/ToolPanel.tsx

@@ -40,7 +40,7 @@ export default function ToolPanel() {
         isRainbowMode ? rainbowStyles.rainbowPaper : ''
       }`}
       style={{
-        width: isPanelVisible ? '20rem' : '0',
+        width: isPanelVisible ? '18.5rem' : '0',
         padding: '0'
       }}
     >

frontend/src/components/tools/ToolPicker.tsx

@@ -131,7 +131,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
                 padding: "0.5rem 1rem",
-                fontWeight: 700,
+                fontWeight: 600,
                 background: "var(--tool-header-bg)",
                 color: "var(--tool-header-text)",
                 cursor: "pointer",
@@ -141,7 +141,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               }}
               onClick={() => scrollTo(quickAccessRef)}
             >
-              <span>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
               <span
                 style={{
                   background: "var(--tool-header-badge-bg)",
@@ -156,7 +156,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               </span>
             </div>
 
-            <Box ref={quickAccessRef} w="100%">
+            <Box ref={quickAccessRef} w="100%" my="sm">
               <Stack p="sm" gap="xs">
                 {quickSection?.subcategories.map(sc =>
                   renderToolButtons(t, sc, selectedToolKey, onSelect, false)
@@ -177,7 +177,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
                 padding: "0.5rem 1rem",
-                fontWeight: 700,
+                fontWeight: 600,
                 background: "var(--tool-header-bg)",
                 color: "var(--tool-header-text)",
                 cursor: "pointer",
@@ -187,7 +187,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               }}
               onClick={() => scrollTo(allToolsRef)}
             >
-              <span>{t("toolPicker.allTools", "ALL TOOLS")}</span>
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
               <span
                 style={{
                   background: "var(--tool-header-badge-bg)",

frontend/src/components/tools/shared/FileStatusIndicator.tsx

@@ -12,7 +12,6 @@ export interface FileStatusIndicatorProps {
 
 const FileStatusIndicator = ({
   selectedFiles = [],
-  placeholder,
 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
   const { openFilesModal } = useFilesModalContext();
@@ -22,7 +21,6 @@ const FileStatusIndicator = ({
   if (workbenchFiles.length === 0) {
     return (
       <Text size="sm" c="dimmed">
-        {t("files.noFiles", "No files uploaded. ")}{" "}
         <Anchor
           size="sm"
           onClick={openFilesModal}

frontend/src/components/tools/shared/ToolStep.tsx

@@ -50,7 +50,7 @@ const renderTooltipTitle = (
         sidebarTooltip={true}
       >
         <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
-          <Text fw={500} size="lg">
+          <Text fw={400} size="sm">
             {title}
           </Text>
           <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
@@ -60,7 +60,7 @@ const renderTooltipTitle = (
   }
 
   return (
-    <Text fw={500} size="lg">
+    <Text fw={500} size="sm">
       {title}
     </Text>
   );
@@ -96,7 +96,7 @@ const ToolStep = ({
     <div>
       <div
         style={{
-          padding: '1rem',
+          padding: '0.5rem',
           opacity: isCollapsed ? 0.8 : 1,
           color: isCollapsed ? 'var(--mantine-color-dimmed)' : 'inherit',
           transition: 'opacity 0.2s ease, color 0.2s ease'
@@ -114,7 +114,7 @@ const ToolStep = ({
       >
         <Flex align="center" gap="sm">
           {shouldShowNumber && (
-            <Text fw={500} size="lg" c="dimmed">
+            <Text fw={500} size="sm" c="dimmed" mr="0.5rem">
               {stepNumber}
             </Text>
           )}
@@ -135,7 +135,7 @@ const ToolStep = ({
       </Flex>
 
       {!isCollapsed && (
-        <Stack gap="md" pl={_noPadding ? 0 : "md"}>
+        <Stack gap="sm" pl={_noPadding ? 0 : "sm"}>
           {helpText && (
             <Text size="sm" c="dimmed">
               {helpText}
@@ -145,7 +145,7 @@ const ToolStep = ({
         </Stack>
       )}
       </div>
-      <Divider style={{ marginLeft: '1rem', marginRight: '-0.5rem' }} />
+      <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
     </div>
   );
 }

frontend/src/components/tools/shared/renderToolButtons.tsx

@@ -19,7 +19,7 @@ export const renderToolButtons = (
     {showSubcategoryHeader && (
       <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
     )}
-    <Stack gap="xs">
+    <div>
       {subcategory.tools.map(({ id, tool }) => (
         <ToolButton
           key={id}
@@ -29,6 +29,6 @@ export const renderToolButtons = (
           onSelect={onSelect}
         />
       ))}
-    </Stack>
+    </div>
   </Box>
 );

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -27,14 +27,14 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
       <Button
         variant={isSelected ? "filled" : "subtle"}
         onClick={()=> handleClick(id)}
-        size="md"
+        size="sm"
         radius="md"
-        leftSection={<div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}
         fullWidth
         justify="flex-start"
         className="tool-button"
         styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
       >
+        <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center" }}>{tool.icon}</div>
         <FitText
           text={tool.name}
           lines={1}