improvement(landing): refine hero and mothership visuals

.claude/commands/add-block.md

@@ -732,6 +732,13 @@ Please provide the SVG and I'll convert it to a React component.
 You can usually find this in the service's brand/press kit page, or copy it from their website.
 ```
 
+When converting the SVG: a **monochrome** logo (single white or black mark) must
+use `fill='currentColor'`, never a hardcoded `#fff`/`#000000`. Block icons render
+both inside their `bgColor` tile and "bare" on a neutral page (the home Suggested
+actions list) in light and dark mode; a hardcoded white/black mark goes invisible
+bare on the matching background. Multi-color brand logos keep their own fills.
+Verify with `bun run check:bare-icons`.
+
 ## Advanced Mode for Optional Fields
 
 Optional fields that are rarely used should be set to `mode: 'advanced'` so they don't clutter the basic UI. This includes:

.claude/commands/add-integration.md

@@ -279,6 +279,31 @@ Once the user provides the SVG:
 2. Create a React component that spreads props
 3. Ensure viewBox is preserved from the original SVG
 
+### Theme-safety (bare rendering) — REQUIRED
+
+The icon renders both inside its colored `bgColor` tile AND "bare" (no tile) on a
+neutral page — e.g. the home **Suggested actions** list — in both light and dark
+mode. A monochrome logo whose paths hardcode a single near-white or near-black
+fill is invisible bare on the matching background (white-on-white in light mode,
+black-on-black in dark mode).
+
+Rules when adding the SVG:
+
+- **Monochrome logos** (a single white or black mark): draw the shape with
+  `fill='currentColor'`, not `fill='#fff'` / `fill='#000000'`. It then inherits
+  white inside dark tiles, near-black inside light tiles (via
+  `getTileIconColorClass`), and the theme-aware `var(--text-icon)` bare — legible
+  everywhere. Do NOT set `iconColor` for these.
+- **Multi-color brand logos** (their own vivid fills): keep the hardcoded fills.
+  They read on any background. Only set `iconColor` (a vivid brand hex, never a
+  near-black/near-white tile color) if the bare icon should adopt a brand tint.
+- A large white shape with a tiny vivid accent (e.g. a logo where the body is the
+  white negative space) still vanishes bare — convert the body to `currentColor`.
+
+Verify with `bun run check:bare-icons` (also runs in CI). It flags purely
+monochrome hazards; for partial-accent logos, eyeball the suggested-actions list
+in both light and dark mode.
+
 ## Step 5: Create Triggers (Optional)
 
 If the service supports webhooks, create triggers using the generic `buildTriggerSubBlocks` helper.
@@ -466,6 +491,7 @@ If creating V2 versions (API-aligned outputs):
 - [ ] Asked user to provide SVG
 - [ ] Added icon to `components/icons.tsx`
 - [ ] Icon spreads props correctly
+- [ ] Monochrome marks use `fill='currentColor'` (not hardcoded white/black) so the icon renders bare in light AND dark mode — verified with `bun run check:bare-icons`
 
 ### Triggers (if service supports webhooks)
 - [ ] Created `triggers/{service}/` directory

.claude/skills/design-taste-frontend

@@ -0,0 +1 @@
+../../.agents/skills/design-taste-frontend

.claude/skills/emil-design-eng

@@ -0,0 +1 @@
+../../.agents/skills/emil-design-eng

.cursor/rules/constitution.mdc

@@ -1,6 +1,6 @@
 ---
 description: Sim product language, positioning, and tone guidelines
-globs: ["apps/sim/app/(landing)/**", "apps/sim/app/(home)/**", "apps/docs/**", "apps/sim/app/manifest.ts", "apps/sim/app/sitemap.ts", "apps/sim/app/robots.ts", "apps/sim/app/llms.txt/**", "apps/sim/app/llms-full.txt/**", "apps/sim/app/(landing)/**/structured-data*", "apps/docs/**/structured-data*", "**/metadata*", "**/seo*"]
+globs: ["apps/sim/app/(landing)/**", "apps/docs/**", "apps/sim/app/manifest.ts", "apps/sim/app/sitemap.ts", "apps/sim/app/robots.ts", "apps/sim/app/llms.txt/**", "apps/sim/app/llms-full.txt/**", "apps/sim/app/(landing)/**/structured-data*", "apps/docs/**/structured-data*", "**/metadata*", "**/seo*"]
 ---
 
 # Sim — Language & Positioning

.cursor/rules/landing-seo-geo.mdc

@@ -1,6 +1,6 @@
 ---
 description: SEO and GEO guidelines for the landing page
-globs: ["apps/sim/app/(home)/**/*.tsx"]
+globs: ["apps/sim/app/(landing)/**/*.tsx"]
 ---
 # Landing Page — SEO / GEO
 

.github/workflows/test-build.yml

@@ -125,6 +125,9 @@ jobs:
       - name: Client boundary import audit
         run: bun run check:client-boundary
 
+      - name: Bare-icon theme-safety audit
+        run: bun run check:bare-icons
+
       - name: Verify realtime prune graph
         run: bun run check:realtime-prune
 

apps/sim/app/(auth)/auth-layout-client.tsx

@@ -1,27 +1,5 @@
-'use client'
-
-import { useEffect } from 'react'
-import AuthBackground from '@/app/(auth)/components/auth-background'
-import Navbar from '@/app/(landing)/components/navbar/navbar'
+import { AuthShell } from '@/app/(auth)/components'
 
 export default function AuthLayoutClient({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    document.documentElement.classList.add('dark')
-    return () => {
-      document.documentElement.classList.remove('dark')
-    }
-  }, [])
-
-  return (
-    <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
-        <header className='shrink-0 bg-[var(--landing-bg)]'>
-          <Navbar logoOnly />
-        </header>
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='w-full max-w-lg px-4'>{children}</div>
-        </div>
-      </main>
-    </AuthBackground>
-  )
+  return <AuthShell>{children}</AuthShell>
 }

apps/sim/app/(auth)/components/auth-divider.tsx

@@ -0,0 +1,21 @@
+interface AuthDividerProps {
+  label: string
+}
+
+/**
+ * The "Or continue with" rule separating the email/password form from the
+ * social/SSO options. Light tokens only: a `--border` hairline with the label
+ * knocked out over the `--bg` canvas in `--text-muted`.
+ */
+export function AuthDivider({ label }: AuthDividerProps) {
+  return (
+    <div className='relative'>
+      <div className='absolute inset-0 flex items-center'>
+        <div className='w-full border-[var(--border)] border-t' />
+      </div>
+      <div className='relative flex justify-center'>
+        <span className='bg-[var(--bg)] px-4 text-[var(--text-muted)] text-sm'>{label}</span>
+      </div>
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-field.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react'
+import { Label } from '@sim/emcn'
+
+interface AuthFieldProps {
+  /** Matches the `id` set on the control rendered as {@link children}. */
+  htmlFor: string
+  label: string
+  /** Validation messages to render beneath the control. */
+  errors?: string[]
+  /** Optional right-aligned action shown next to the label (e.g. Forgot password). */
+  action?: ReactNode
+  /** The field control — a {@link ChipInput}/{@link PasswordInput}. */
+  children: ReactNode
+}
+
+/**
+ * A labeled form field row: canonical {@link Label}, an optional inline label
+ * action, the control, and a validation-message list in the error token. The
+ * control drives its own invalid chrome through its `error` prop — this wrapper
+ * only owns the label row and the message list, so every auth field reads and
+ * spaces identically.
+ */
+export function AuthField({ htmlFor, label, errors, action, children }: AuthFieldProps) {
+  const hasErrors = Boolean(errors && errors.length > 0)
+  return (
+    <div className='space-y-2'>
+      <div className='flex items-center justify-between'>
+        <Label htmlFor={htmlFor}>{label}</Label>
+        {action}
+      </div>
+      {children}
+      {hasErrors && (
+        <div className='space-y-1 text-[var(--text-error)] text-caption' aria-live='polite'>
+          {errors?.map((error) => (
+            <p key={error}>{error}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-form-message.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface AuthFormMessageProps {
+  type: 'error' | 'success'
+  align?: 'left' | 'center'
+  children: ReactNode
+}
+
+/**
+ * Form-level status copy (not tied to a single field) in the canonical tokens:
+ * errors in `--text-error`, success in `--brand-accent`. One place owns the
+ * auth message chrome so success/error states never drift to ad-hoc hex or
+ * `text-red-*`/`#4CAF50` colors.
+ */
+export function AuthFormMessage({ type, align = 'left', children }: AuthFormMessageProps) {
+  return (
+    <div
+      className={cn(
+        'space-y-1 text-caption',
+        align === 'center' && 'text-center',
+        type === 'error' ? 'text-[var(--text-error)]' : 'text-[var(--brand-accent)]'
+      )}
+    >
+      {children}
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-header.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+interface AuthHeaderProps {
+  title: string
+  description: ReactNode
+}
+
+/**
+ * The centered heading + subcopy block shared by every auth page and status
+ * page. One source of truth for auth heading typography (light tokens, normal
+ * weight, no bespoke tracking — aligned with the landing scale, sized down for
+ * the single-column form).
+ */
+export function AuthHeader({ title, description }: AuthHeaderProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <h1 className='text-balance text-[32px] text-[var(--text-primary)] leading-[1.2]'>{title}</h1>
+      <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-input.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import * as React from 'react'
+import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
+import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+
+/**
+ * The auth text field — a {@link ChipInput} raised to the auth control height
+ * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
+ * surfaces shares one slightly-taller geometry. All chip props pass through
+ * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
+ * caller's `className` (layout only) still composes on top.
+ */
+export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
+  ({ className, ...props }, ref) => (
+    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
+  )
+)
+
+AuthInput.displayName = 'AuthInput'

apps/sim/app/(auth)/components/auth-legal-footer.tsx

@@ -0,0 +1,26 @@
+import { AuthTextLink } from '@/app/(auth)/components/auth-text-link'
+
+interface AuthLegalFooterProps {
+  /** The gerund describing the consent action, e.g. "signing in". */
+  action: string
+}
+
+/**
+ * The "By {action}, you agree to our Terms / Privacy" fine print shared by the
+ * login and signup pages. Restyled to muted light tokens with the legal links
+ * routed through {@link AuthTextLink}, so the consent copy has one source.
+ */
+export function AuthLegalFooter({ action }: AuthLegalFooterProps) {
+  return (
+    <p className='text-center text-[var(--text-muted)] text-caption leading-relaxed'>
+      By {action}, you agree to our{' '}
+      <AuthTextLink href='/terms' external>
+        Terms of Service
+      </AuthTextLink>{' '}
+      and{' '}
+      <AuthTextLink href='/privacy' external>
+        Privacy Policy
+      </AuthTextLink>
+    </p>
+  )
+}

apps/sim/app/(auth)/components/auth-nav-prompt.tsx

@@ -0,0 +1,27 @@
+import { ChipLink } from '@sim/emcn'
+
+interface AuthNavPromptProps {
+  /** Muted lead text before the link (e.g. "Don't have an account?"). */
+  prompt?: string
+  href: string
+  linkLabel: string
+  /** Side effect to run before navigation (e.g. clearing verification state). */
+  onNavigate?: () => void
+}
+
+/**
+ * The cross-page navigation row (Sign up / Sign in / Back to login) — an
+ * optional muted prompt followed by an outline {@link ChipLink} pill, matching
+ * the landing's secondary chip CTAs. Centralizes the auth nav affordance so the
+ * pill chrome is described by props, never restyled per page.
+ */
+export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPromptProps) {
+  return (
+    <div className='flex items-center justify-center gap-1 text-sm'>
+      {prompt && <span className='text-[var(--text-muted)]'>{prompt}</span>}
+      <ChipLink href={href} onClick={onNavigate} className='border border-[var(--border-1)]'>
+        {linkLabel}
+      </ChipLink>
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-shell.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { LogoMark, SimWordmark } from '@/app/(landing)/components/navbar/components'
+
+interface AuthShellProps {
+  /** Centered content column (the form, status copy, etc.). */
+  children: ReactNode
+  /** Optional element pinned to the bottom of the shell (e.g. the support footer). */
+  footer?: ReactNode
+}
+
+/**
+ * The light auth/status page frame — the single source of truth for the shell
+ * every auth page and standalone status page wears.
+ *
+ * Mirrors the landing chrome: it pins the `light` token layer (so the platform's
+ * light-mode `var(--*)` tokens resolve regardless of the visitor's theme), uses
+ * the canvas/`--text-primary` surface, and renders a logo-only header that reuses
+ * the landing {@link LogoMark} + {@link SimWordmark} at the same nav gutters. The
+ * single content column is centered and capped for a calm single-form layout.
+ */
+export function AuthShell({ children, footer }: AuthShellProps) {
+  return (
+    <div className='light relative flex min-h-screen flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
+      <header>
+        <nav className='mx-auto flex w-full max-w-[1446px] items-center px-12 py-4 max-sm:px-5 max-lg:px-8'>
+          <Link href='/' aria-label='Sim home' className='flex h-[30px] items-center'>
+            <LogoMark>
+              <SimWordmark />
+            </LogoMark>
+          </Link>
+        </nav>
+      </header>
+      <div className='flex flex-1 items-center justify-center px-4 pb-16'>
+        <div className='w-full max-w-[400px]'>{children}</div>
+      </div>
+      {footer}
+    </div>
+  )
+}

apps/sim/app/(auth)/components/auth-submit-button.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+import { Chip, Loader } from '@sim/emcn'
+import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+
+interface AuthSubmitButtonProps {
+  children: ReactNode
+  /** Label shown beside the spinner while the action is in flight. */
+  loadingLabel: string
+  loading?: boolean
+  disabled?: boolean
+  type?: 'submit' | 'button'
+  onClick?: () => void
+}
+
+/**
+ * The canonical full-width primary auth action — a `primary`-variant {@link Chip}
+ * with the shared in-flight spinner. Replaces the legacy dark
+ * `AUTH_SUBMIT_BTN` class string for every in-scope auth submit (login, signup,
+ * verify, reset), so the primary CTA chrome lives in exactly one place.
+ */
+export function AuthSubmitButton({
+  children,
+  loadingLabel,
+  loading = false,
+  disabled = false,
+  type = 'submit',
+  onClick,
+}: AuthSubmitButtonProps) {
+  return (
+    <Chip
+      variant='primary'
+      type={type}
+      onClick={onClick}
+      disabled={disabled || loading}
+      fullWidth
+      flush
+      className={AUTH_BUTTON_CLASS}
+    >
+      {loading ? (
+        <span className='flex items-center gap-2'>
+          <Loader className='size-4' animate />
+          {loadingLabel}
+        </span>
+      ) : (
+        children
+      )}
+    </Chip>
+  )
+}