feat(ui): add 5 high-end design systems to registry and fix auth logo styling
This commit is contained in:
@@ -178,6 +178,81 @@ export const STARTER_KITS: StarterKitDefinition[] = [
|
||||
foundationNotesForAi:
|
||||
"Premium editorial mood — tokens only. Dark chrome often pairs with subtle borders; respect existing stack.",
|
||||
},
|
||||
{
|
||||
id: "anthropic-claude",
|
||||
name: "Anthropic / Claude",
|
||||
tagline: "Warm terracotta accent · clean editorial layout · serif headers",
|
||||
defaults: {
|
||||
accentHex: "#d97757",
|
||||
radiusMdPx: 8,
|
||||
fontPreset: "system",
|
||||
density: "comfortable",
|
||||
},
|
||||
customizeFields: ["accent", "radius", "font"],
|
||||
uiFoundation: "agnostic",
|
||||
foundationNotesForAi:
|
||||
"Claude Design System — Editorial, warm terracotta accent (#d97757), off-white backgrounds (#f9f8f6). Use serif fonts (like Recoleta or a strong serif fallback) for primary headers and clean sans-serif for body. Buttons are rounded, surfaces are separated by subtle hairlines instead of heavy shadows. Read github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/claude/DESIGN.md for specific token semantics.",
|
||||
},
|
||||
{
|
||||
id: "stripe-fintech",
|
||||
name: "Stripe / Fintech",
|
||||
tagline: "Signature purple gradients · weight-300 elegance · crisp utility",
|
||||
defaults: {
|
||||
accentHex: "#635bff",
|
||||
radiusMdPx: 6,
|
||||
fontPreset: "inter",
|
||||
density: "comfortable",
|
||||
},
|
||||
customizeFields: ["accent", "radius", "font", "density"],
|
||||
uiFoundation: "agnostic",
|
||||
foundationNotesForAi:
|
||||
"Stripe Design System — Crisp precision. Signature blurple accent (#635bff). Use incredibly soft, large shadows (0 50px 100px -20px rgba(50,50,93,0.25)) and crisp borders. Typography is tightly tracked, favoring font-weight 400 and 500. Gradients should be used sparingly but impactfully on active states. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/stripe/DESIGN.md.",
|
||||
},
|
||||
{
|
||||
id: "vercel-dev",
|
||||
name: "Vercel / Developer",
|
||||
tagline: "Black and white precision · Geist font · maximum contrast",
|
||||
defaults: {
|
||||
accentHex: "#000000",
|
||||
radiusMdPx: 6,
|
||||
fontPreset: "system",
|
||||
density: "compact",
|
||||
},
|
||||
customizeFields: ["accent", "radius", "font", "density"],
|
||||
uiFoundation: "agnostic",
|
||||
foundationNotesForAi:
|
||||
"Vercel Design System — Monochrome, high-contrast, developer-oriented. Use Geist or Geist Mono. The primary accent is solid black (#000) on white, or white on black in dark mode. Extremely sparse use of color, only for status (success, error, warning). Layouts are boxy, defined by 1px solid #eaeaea borders. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/vercel/DESIGN.md.",
|
||||
},
|
||||
{
|
||||
id: "linear-app",
|
||||
name: "Linear / Productivity",
|
||||
tagline: "Ultra-minimal · precise dark UI · purple glow",
|
||||
defaults: {
|
||||
accentHex: "#5e6ad2",
|
||||
radiusMdPx: 8,
|
||||
fontPreset: "system",
|
||||
density: "compact",
|
||||
},
|
||||
customizeFields: ["accent", "radius", "font", "density"],
|
||||
uiFoundation: "agnostic",
|
||||
foundationNotesForAi:
|
||||
"Linear Design System — Dark mode first. Very subtle, single-pixel inner borders (box-shadow inset) on surfaces to give them depth. Primary accent is a muted indigo/purple. Backgrounds are deep gray (#111214) rather than pure black. Typography is highly structured, slightly smaller (13px/14px base) for density. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/linear.app/DESIGN.md.",
|
||||
},
|
||||
{
|
||||
id: "airbnb-marketplace",
|
||||
name: "Airbnb / Marketplace",
|
||||
tagline: "Warm coral accent · photography-driven · large rounded UI",
|
||||
defaults: {
|
||||
accentHex: "#ff385c",
|
||||
radiusMdPx: 12,
|
||||
fontPreset: "system",
|
||||
density: "comfortable",
|
||||
},
|
||||
customizeFields: ["accent", "radius", "font"],
|
||||
uiFoundation: "agnostic",
|
||||
foundationNotesForAi:
|
||||
"Airbnb Design System — Friendly, consumer-focused. Large touch targets, heavy border-radius (12px+), and a stark contrast between pure white backgrounds and the vibrant 'Rausch' coral accent (#ff385c). Minimal borders, using white space and soft, dispersed shadows for elevation. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/airbnb/DESIGN.md.",
|
||||
},
|
||||
];
|
||||
|
||||
export function getStarterKit(id: string): StarterKitDefinition | undefined {
|
||||
|
||||
Reference in New Issue
Block a user