T3 Chat
tweakcnApache-2.0Light and dark · bothMedium · mediumPink · pinkVivid · vividSerif · serifGeneral · generalLanding · landingProfessional · professional
A theme based on the T3 Chat color palette.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"T3 Chat" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9.
https://github.com/jnsahaj/tweakcn · r/themes/t3-chat.json · a3b47b37cba9 · © jnsahaj
Prompt
Design a user interface in the "T3 Chat" style. A theme based on the T3 Chat color palette. Apply these tokens to every surface. Do not invent a second palette. - Background oklch(0.9754 0.0084 325.6414), foreground oklch(0.3257 0.1161 325.0372) - Primary oklch(0.5316 0.1409 355.1999) on oklch(1.0000 0 0) - Accent oklch(0.8696 0.0675 334.8991), muted oklch(0.9395 0.0260 331.5454), border oklch(0.8568 0.0829 328.9110) - Radius 0.5rem, type ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' - Shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04) "T3 Chat" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9. powered by Styledex — https://styledex.dev
Tokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "T3 Chat. \"T3 Chat\" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9.",
"$extensions": {
"dev.styledex": {
"id": "tweakcn-t3-chat",
"license": "Apache-2.0",
"attribution": "\"T3 Chat\" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "oklch(0.9754 0.0084 325.6414)"
},
"foreground": {
"$type": "color",
"$value": "oklch(0.3257 0.1161 325.0372)"
},
"card": {
"$type": "color",
"$value": "oklch(0.9754 0.0084 325.6414)"
},
"card-foreground": {
"$type": "color",
"$value": "oklch(0.3257 0.1161 325.0372)"
},
"primary": {
"$type": "color",
"$value": "oklch(0.5316 0.1409 355.1999)"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(1.0000 0 0)"
},
"secondary": {
"$type": "color",
"$value": "oklch(0.8696 0.0675 334.8991)"
},
"secondary-foreground": {
"$type": "color",
"$value": "oklch(0.4448 0.1341 324.7991)"
},
"accent": {
"$type": "color",
"$value": "oklch(0.8696 0.0675 334.8991)"
},
"accent-foreground": {
"$type": "color",
"$value": "oklch(0.4448 0.1341 324.7991)"
},
"muted": {
"$type": "color",
"$value": "oklch(0.9395 0.0260 331.5454)"
},
"muted-foreground": {
"$type": "color",
"$value": "oklch(0.4924 0.1244 324.4523)"
},
"border": {
"$type": "color",
"$value": "oklch(0.8568 0.0829 328.9110)"
},
"destructive": {
"$type": "color",
"$value": "oklch(0.5248 0.1368 20.8317)"
},
"ring": {
"$type": "color",
"$value": "oklch(0.5916 0.2180 0.5844)"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"Cambria",
"Times New Roman",
"Times",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "0.25rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
},
"dark": {
"color": {
"background": {
"$type": "color",
"$value": "oklch(0.2409 0.0201 307.5346)"
},
"foreground": {
"$type": "color",
"$value": "oklch(0.8398 0.0387 309.5391)"
},
"card": {
"$type": "color",
"$value": "oklch(0.2803 0.0232 307.5413)"
},
"card-foreground": {
"$type": "color",
"$value": "oklch(0.8456 0.0302 341.4597)"
},
"primary": {
"$type": "color",
"$value": "oklch(0.4607 0.1853 4.0994)"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.8560 0.0618 346.3684)"
},
"secondary": {
"$type": "color",
"$value": "oklch(0.3137 0.0306 310.0610)"
},
"secondary-foreground": {
"$type": "color",
"$value": "oklch(0.8483 0.0382 307.9613)"
},
"accent": {
"$type": "color",
"$value": "oklch(0.3649 0.0508 308.4911)"
},
"accent-foreground": {
"$type": "color",
"$value": "oklch(0.9647 0.0091 341.8035)"
},
"muted": {
"$type": "color",
"$value": "oklch(0.2634 0.0219 309.4748)"
},
"muted-foreground": {
"$type": "color",
"$value": "oklch(0.7940 0.0372 307.1032)"
},
"border": {
"$type": "color",
"$value": "oklch(0.3286 0.0154 343.4461)"
},
"destructive": {
"$type": "color",
"$value": "oklch(0.2258 0.0524 12.6119)"
},
"ring": {
"$type": "color",
"$value": "oklch(0.5916 0.2180 0.5844)"
}
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "T3 Chat" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9. */
:root {
--background: oklch(0.9754 0.0084 325.6414);
--foreground: oklch(0.3257 0.1161 325.0372);
--card: oklch(0.9754 0.0084 325.6414);
--card-foreground: oklch(0.3257 0.1161 325.0372);
--primary: oklch(0.5316 0.1409 355.1999);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.8696 0.0675 334.8991);
--secondary-foreground: oklch(0.4448 0.1341 324.7991);
--accent: oklch(0.8696 0.0675 334.8991);
--accent-foreground: oklch(0.4448 0.1341 324.7991);
--muted: oklch(0.9395 0.0260 331.5454);
--muted-foreground: oklch(0.4924 0.1244 324.4523);
--border: oklch(0.8568 0.0829 328.9110);
--destructive: oklch(0.5248 0.1368 20.8317);
--ring: oklch(0.5916 0.2180 0.5844);
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
.dark {
--background: oklch(0.2409 0.0201 307.5346);
--foreground: oklch(0.8398 0.0387 309.5391);
--card: oklch(0.2803 0.0232 307.5413);
--card-foreground: oklch(0.8456 0.0302 341.4597);
--primary: oklch(0.4607 0.1853 4.0994);
--primary-foreground: oklch(0.8560 0.0618 346.3684);
--secondary: oklch(0.3137 0.0306 310.0610);
--secondary-foreground: oklch(0.8483 0.0382 307.9613);
--accent: oklch(0.3649 0.0508 308.4911);
--accent-foreground: oklch(0.9647 0.0091 341.8035);
--muted: oklch(0.2634 0.0219 309.4748);
--muted-foreground: oklch(0.7940 0.0372 307.1032);
--border: oklch(0.3286 0.0154 343.4461);
--destructive: oklch(0.2258 0.0524 12.6119);
--ring: oklch(0.5916 0.2180 0.5844);
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "T3 Chat" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9. */
/** Tailwind theme extend for T3 Chat (tweakcn-t3-chat) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "oklch(0.9754 0.0084 325.6414)",
"foreground": "oklch(0.3257 0.1161 325.0372)",
"card": "oklch(0.9754 0.0084 325.6414)",
"primary": "oklch(0.5316 0.1409 355.1999)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.8696 0.0675 334.8991)",
"accent": "oklch(0.8696 0.0675 334.8991)",
"muted": "oklch(0.9395 0.0260 331.5454)",
"border": "oklch(0.8568 0.0829 328.9110)",
"destructive": "oklch(0.5248 0.1368 20.8317)",
"ring": "oklch(0.5916 0.2180 0.5844)"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
],
"serif": [
"ui-serif",
"Georgia",
"Cambria",
"Times New Roman",
"Times",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "T3 Chat" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/t3-chat.json @ a3b47b37cba9. */
@layer base {
:root {
--background: oklch(0.9754 0.0084 325.6414);
--foreground: oklch(0.3257 0.1161 325.0372);
--card: oklch(0.9754 0.0084 325.6414);
--card-foreground: oklch(0.3257 0.1161 325.0372);
--primary: oklch(0.5316 0.1409 355.1999);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.8696 0.0675 334.8991);
--secondary-foreground: oklch(0.4448 0.1341 324.7991);
--accent: oklch(0.8696 0.0675 334.8991);
--accent-foreground: oklch(0.4448 0.1341 324.7991);
--muted: oklch(0.9395 0.0260 331.5454);
--muted-foreground: oklch(0.4924 0.1244 324.4523);
--border: oklch(0.8568 0.0829 328.9110);
--destructive: oklch(0.5248 0.1368 20.8317);
--ring: oklch(0.5916 0.2180 0.5844);
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
.dark {
--background: oklch(0.2409 0.0201 307.5346);
--foreground: oklch(0.8398 0.0387 309.5391);
--card: oklch(0.2803 0.0232 307.5413);
--card-foreground: oklch(0.8456 0.0302 341.4597);
--primary: oklch(0.4607 0.1853 4.0994);
--primary-foreground: oklch(0.8560 0.0618 346.3684);
--secondary: oklch(0.3137 0.0306 310.0610);
--secondary-foreground: oklch(0.8483 0.0382 307.9613);
--accent: oklch(0.3649 0.0508 308.4911);
--accent-foreground: oklch(0.9647 0.0091 341.8035);
--muted: oklch(0.2634 0.0219 309.4748);
--muted-foreground: oklch(0.7940 0.0372 307.1032);
--border: oklch(0.3286 0.0154 343.4461);
--destructive: oklch(0.2258 0.0524 12.6119);
--ring: oklch(0.5916 0.2180 0.5844);
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}