Style it like the landing page

Check before submitting

• I searched existing issues and did not find a duplicate

What problem would this solve?

On https://usememos.com/ the timeline looks hot, but in the real application (like on the demo), it looks bland. The former looks planned and designed, the latter looks very "programmed".

What would you like to happen?

A theme which renders it like the little component on the landing page.

Additional context

Custom CSS seems to cut it, but it's weird that the landing page and the "product" designs differ so much. I was able to get pretty close with this:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root[data-theme="default"],
:root[data-theme="paper"],
:root[data-theme="default-dark"] {
  --radius: 0.75rem;
}

.bg-card.rounded-lg.border-border:not(.rounded-b-none) {
  margin-bottom: 14px !important;
}

.bg-card.rounded-lg.border-border {
  padding: 1rem 1.25rem;
}

aside {
  border-right: none;
}

span[data-tag] {
  border-color: transparent;
  background-color: color-mix(in oklch, var(--primary) 12%, transparent);
  padding-inline: 0.4rem;
}

:root[data-theme="default"],
:root[data-theme="paper"] {
  --background: oklch(0.977 0.004 90);
  --foreground: oklch(0.24 0.008 80);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.008 80);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.008 80);
  --muted: oklch(0.955 0.004 90);
  --muted-foreground: oklch(0.57 0.006 90);
  --secondary: oklch(0.955 0.004 90);
  --secondary-foreground: oklch(0.24 0.008 80);
  --accent: oklch(0.955 0.004 90);
  --accent-foreground: oklch(0.24 0.008 80);
  --border: oklch(0.912 0.003 90);
  --input: oklch(0.9 0.003 90);
  --sidebar: oklch(0.977 0.004 90);
  --primary: oklch(0.45 0.08 250);
  --primary-foreground: oklch(0.98 0.005 95);
  --ring: oklch(0.45 0.08 250);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="default"] .bg-card.rounded-lg.border-border,
:root[data-theme="paper"] .bg-card.rounded-lg.border-border {
  border-color: color-mix(in oklch, var(--border) 65%, transparent);
  box-shadow: 0 1px 2px hsl(40 10% 20% / 0.04);
}

:root[data-theme="default"] .bg-card.rounded-lg.border-border:hover,
:root[data-theme="paper"] .bg-card.rounded-lg.border-border:hover {
  border-color: var(--border);
  box-shadow: 0 2px 8px hsl(40 10% 20% / 0.07);
}

:root[data-theme="default-dark"] {
  --background: oklch(0.15 0 0);
  --foreground: oklch(0.87 0 0);
  --card: oklch(0.185 0 0);
  --card-foreground: oklch(0.87 0 0);
  --popover: oklch(0.21 0 0);
  --popover-foreground: oklch(0.89 0 0);
  --muted: oklch(0.24 0 0);
  --muted-foreground: oklch(0.63 0 0);
  --secondary: oklch(0.23 0 0);
  --secondary-foreground: oklch(0.85 0 0);
  --accent: oklch(0.26 0 0);
  --accent-foreground: oklch(0.9 0 0);
  --border: oklch(0.27 0 0);
  --input: oklch(0.3 0 0);
  --sidebar: oklch(0.13 0 0);
  --sidebar-foreground: oklch(0.69 0 0);
  --sidebar-accent: oklch(0.22 0 0);
  --sidebar-accent-foreground: oklch(0.87 0 0);
  --primary: oklch(0.66 0.11 250);
  --primary-foreground: oklch(0.15 0 0);
  --ring: oklch(0.58 0.095 250);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="default-dark"] .bg-card.rounded-lg.border-border {
  box-shadow: none;
}