Rebrand to Plebeian Signer with updated colors and UI improvements

- Fix project name from "Plebian" to "Plebeian" throughout codebase
- Replace gooti logo with Plebeian Market logo across all screens
- Update color scheme to match Plebeian Market (pink accent #ff3eb5)
- Add IBM Plex Mono fonts and Reglisse heading font
- Center vault create/import screen content vertically
- Reduce spacing on sync preference screen to prevent scrolling
- Add Enter key support on vault login password field
- Update options page with new logo and color scheme
- Bump version to 0.0.5

Files modified:
- package.json (version bump, name fix)
- projects/*/public/{logo.svg,options.html,manifest.json}
- projects/*/src/app/components/vault-*/*.{html,scss}
- projects/*/src/app/components/welcome/*.html
- projects/common/src/lib/styles/*.scss
- Various component files for branding updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

projects/common/src/lib/components/icon-button/icon-button.component.scss

@@ -5,14 +5,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    //padding: 10px;
-
     border-radius: 100%;
-
     cursor: pointer;
+    color: var(--foreground);
+    transition: background-color 0.2s ease, color 0.2s ease;
 
     &:hover {
-      background: gray;
+      background: var(--muted);
+      color: var(--primary);
     }
   }
 }

projects/common/src/lib/components/nav-item/nav-item.component.scss

@@ -5,19 +5,23 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-left: 16px;
-  padding-right: 8px;
+  padding-left: var(--size);
+  padding-right: var(--size-h);
   background: var(--background-light);
-  border-radius: 8px;
-  margin-bottom: 8px;
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--size-h);
+  border: 1px solid var(--border);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
     background: var(--background-light-hover);
+    border-color: var(--primary);
   }
 
   .text {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: var(--foreground);
   }
 }

projects/common/src/lib/services/startup/startup.service.ts

@@ -25,7 +25,7 @@ export class StartupService {
     // Step 1: Load the user settings
     const signerMetaData = await this.#storage.loadSignerMetaData();
     if (typeof signerMetaData?.syncFlow === 'undefined') {
-      // Very first run. The user has not set up Plebian Signer yet.
+      // Very first run. The user has not set up Plebeian Signer yet.
       this.#router.navigateByUrl('/welcome');
       return;
     }

projects/common/src/lib/styles/_color.scss

@@ -2,6 +2,33 @@
   color: var(--primary);
 }
 
-.sam-color-danger {
-    color: var(--bs-danger);
+.sam-color-secondary {
+  color: var(--secondary);
+}
+
+.sam-color-focus {
+  color: var(--focus);
+}
+
+.sam-color-danger {
+  color: var(--destructive);
+}
+
+.sam-color-muted {
+  color: var(--muted-foreground);
+}
+
+// Background color utilities
+.sam-bg-primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.sam-bg-secondary {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.sam-bg-muted {
+  background-color: var(--muted);
 }

projects/common/src/lib/styles/_common.scss

@@ -30,8 +30,9 @@
 .sam-card {
   padding: var(--size);
   background: var(--background-light);
-  border-radius: 8px;
-  color: #ffffff;
+  border-radius: var(--radius-lg);
+  color: var(--foreground);
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--border);
 }

projects/common/src/lib/styles/_fonts.scss

@@ -0,0 +1,86 @@
+// Plebeian Market Font Definitions
+
+// Reglisse - Heading font
+@font-face {
+  font-family: 'reglisse';
+  src: url('../assets/fonts/Reglisse_Fill.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  font-synthesis: none;
+}
+
+// IBM Plex Mono - Body font
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+// TheYLive - Display font
+@font-face {
+  font-family: 'theylive';
+  src: url('../assets/fonts/theylive.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  font-synthesis: none;
+}
+
+// Font utility classes
+.font-heading {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  letter-spacing: 0.1rem;
+  font-synthesis: none;
+}
+
+.font-theylive {
+  font-family: var(--font-theylive);
+  font-weight: normal;
+  letter-spacing: 0.1em;
+  font-synthesis: none;
+}
+
+.font-mono {
+  font-family: var(--font-sans);
+}
+
+// Heading sizes
+h1.font-heading {
+  font-size: 2rem;
+}
+
+h2.font-heading {
+  font-size: 1.6rem;
+}
+
+h3.font-heading {
+  font-size: 1.4rem;
+}

projects/common/src/lib/styles/_typography.scss

@@ -1,5 +1,5 @@
 .sam-text-muted {
-  color: gray;
+  color: var(--muted-foreground);
 }
 
 .sam-text-lg {
@@ -14,6 +14,26 @@
   font-size: 12px;
 }
 
+.sam-text-xs {
+  font-size: 10px;
+}
+
 .sam-text-align-center {
   text-align: center;
 }
+
+.sam-text-uppercase {
+  text-transform: uppercase;
+}
+
+.sam-text-bold {
+  font-weight: 700;
+}
+
+.sam-text-semibold {
+  font-weight: 600;
+}
+
+.sam-text-medium {
+  font-weight: 500;
+}

projects/common/src/lib/styles/styles.scss

@@ -3,16 +3,84 @@
 @use "_typography.scss";
 @use "_spacing.scss";
 @use "_color.scss";
+@use "_fonts.scss";
 
 :root {
+  // Sizing
   --size-2: 32px;
   --size: 16px;
   --size-h: 8px;
   --size-hh: 4px;
 
-  --background: #161c26;
-  --background-light: #202733;
-  --background-light-hover: #383844;
-  --border: #525b6a;
-  --primary: #0d6efd;
+  // Fonts
+  --font-sans: 'IBM Plex Mono', monospace;
+  --font-heading: 'reglisse', sans-serif;
+  --font-theylive: 'theylive', sans-serif;
+
+  // Background colors (dark theme based on market)
+  --background: #0a0a0a;
+  --background-light: #131313;
+  --background-light-hover: #1d1d1d;
+  --foreground: #fafafa;
+
+  // Border colors (adapted from market --border: #dac8d3)
+  --border: #3d3d3d;
+  --border-light: #4d4d4d;
+
+  // Primary colors (dark buttons like market, inverted for dark theme)
+  --primary: #fafafa;
+  --primary-hover: #ff3eb5;
+  --primary-foreground: #1d1d1d;
+  --primary-foreground-hover: #ff3eb5;
+  --primary-border: #fafafa;
+  --primary-border-hover: #ff3eb5;
+
+  // Secondary colors (pink accent - the main brand color from market)
+  --secondary: #ff3eb5;
+  --secondary-hover: #0a0a0a;
+  --secondary-foreground: #0a0a0a;
+  --secondary-foreground-hover: #ff3eb5;
+  --secondary-border: #ff3eb5;
+  --secondary-border-hover: #ff3eb5;
+
+  // Focus colors (yellow from market)
+  --focus: #ffd53d;
+  --focus-hover: #0a0a0a;
+  --focus-foreground: #0a0a0a;
+  --focus-foreground-hover: #ffd53d;
+  --focus-border: #ffd53d;
+  --focus-border-hover: #ffd53d;
+
+  // Muted colors
+  --muted: #1d1d1d;
+  --muted-foreground: #666666;
+
+  // Accent colors
+  --accent: #2a2a2a;
+  --accent-foreground: #fafafa;
+
+  // Destructive colors
+  --destructive: #bf4040;
+  --destructive-foreground: #fafafa;
+
+  // Additional brand colors (from market)
+  --off-black: #0a0a0a;
+  --neo-purple: #ff3eb5;
+  --secondary-black: #131313;
+  --tertiary-black: #1d1d1d;
+  --neo-blue: #18b9fe;
+  --neo-yellow: #ffd53d;
+  --light-gray: #ebebeb;
+  --neo-gray: #f8f8f8;
+
+  // Ring color for focus states
+  --ring: #ff3eb5;
+  --input: #996685;
+
+  // Border radius (from market)
+  --radius: 0.25rem;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 24px;
 }