## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
### Logo positioning bug on Safari
#### Before
<img width="1538" height="1404" alt="CleanShot 2026-07-01 at 07 11
55@2x_b0d735b7df6470afb861f4e82cfeed554743cec621475197e07ff39a98c5c506"
src="https://github.com/user-attachments/assets/dc8483bd-5a2a-4d89-9b90-d0ab3529b4b5"
/>
#### After
<img width="1177" height="526" alt="Screenshot 2026-07-01 at 15 25 59"
src="https://github.com/user-attachments/assets/e5ab66eb-56eb-4f1b-8a66-783aafad069d"
/>
### Uniform h1 styling
#### Before
Font-weight too heavy
<img width="721" height="504" alt="Screenshot 2026-07-01 at 15 55 53"
src="https://github.com/user-attachments/assets/4dc4e157-f746-4626-9ec7-5e893d7155ba"
/>
#### After
<img width="693" height="410" alt="Screenshot 2026-07-01 at 15 56 04"
src="https://github.com/user-attachments/assets/c012d6e5-0889-4466-b2b2-56d1c9516e27"
/>
### AI Builders platform card
### Before
<img width="675" height="573" alt="Screenshot 2026-07-01 at 16 18 31"
src="https://github.com/user-attachments/assets/a34e2fde-115b-45e8-8d44-9fc32c22c0a1"
/>
### After
<img width="640" height="576" alt="Screenshot 2026-07-01 at 16 18 23"
src="https://github.com/user-attachments/assets/45ebf1c7-6508-40de-a755-dda17824979a"
/>
### Logo theme-awareness on 404 page
#### Before
<img width="1053" height="670" alt="Screenshot 2026-07-02 at 11 22 45"
src="https://github.com/user-attachments/assets/d1f45cc8-00ad-48ad-a21a-3b92bf6097f0"
/>
#### After
<img width="1053" height="666" alt="Screenshot 2026-07-02 at 11 22 28"
src="https://github.com/user-attachments/assets/8b6435aa-da87-46f3-9d5c-750f8222edb1"
/>
---
Plus other minor padding/spacing issues:
- remove customer stories in homepage
- use correct container width and align "Use Supabase with [framework]"
section
- restore default `--font-sm` sizing as it resulted too small for www
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes / UI Improvements**
* Refined spacing, layout, and responsive styling across multiple
homepage sections.
* Improved featured logo positioning and adjusted community/hero copy
sizing.
* Updated site typography for better readability and wrapping.
* Refreshed the 404 experience with a smoother reveal animation and
consistent layout.
* Updated deep dark-mode behavior to apply only during launch weeks.
* **Performance**
* Lazy-loaded multiple homepage sections to improve initial load and
perceived speed.
* **SEO / New Features**
* Added a dedicated 404 page that disables indexing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Update marketing website and docs with new sans-serif fonts:
- `Inter` - sans-serif for all body text
- `Manrope` - sans-serif for headings
PR breakdown of #43455
Related: #47226#47228#47236
## Problem
- We have unused CSS from previous design system (`.sbui-*` classes)
- We use Tailwind `@apply` when we could set the tailwind classes on the
components directly
## Solution
- Delete all `.sbui-*` classes as we don't use them anymore
- Move classes directly on components when that make sense
## Notes
I did not migrate all `sbgrid` classes as they are applied in multiple
components
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated grid editors, placeholders, headers, and dropdowns for cleaner
spacing, truncation, and alignment.
* Improved layout consistency across text, number, time, JSON, and
foreign-key cells.
* Adjusted search and impersonation inputs for better fit and padding.
* **Chores**
* Simplified and removed outdated styling overrides across the Studio
and web app.
* Reduced unused UI package surface by removing an unused input icon
container export.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
