374f239e3d
- Created design-tokens.ts with standardized width, typography, spacing, padding, and grid constants - Reduced max-w-7xl to max-w-6xl across homepage and major landing pages (Index, Labs, Realms, Foundation) - Reduced oversized hero text-7xl to text-6xl for better readability - Applied consistent design standards to dev platform pages (Templates, Marketplace, CodeExamples, DevLanding) - Improved visual consistency and content readability site-wide
101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
/**
|
|
* AeThex Design System Tokens
|
|
* Centralized design constants for consistent layout, typography, and spacing
|
|
*/
|
|
|
|
export const DESIGN_TOKENS = {
|
|
/**
|
|
* Content Width Constraints
|
|
* Use appropriate container based on content type
|
|
*/
|
|
width: {
|
|
// Text-heavy content (docs, articles, reading material)
|
|
prose: "max-w-5xl",
|
|
// Standard content sections (most pages)
|
|
content: "max-w-6xl",
|
|
// Wide layouts (dashboards, data tables, complex grids)
|
|
wide: "max-w-7xl",
|
|
},
|
|
|
|
/**
|
|
* Typography Scale
|
|
* Consistent heading and text sizes across the application
|
|
*/
|
|
typography: {
|
|
// Page hero headings (H1)
|
|
hero: "text-4xl md:text-5xl lg:text-6xl",
|
|
// Major section headings (H2)
|
|
sectionHeading: "text-3xl md:text-4xl",
|
|
// Subsection headings (H3)
|
|
subsectionHeading: "text-2xl md:text-3xl",
|
|
// Card/component titles (H4)
|
|
cardTitle: "text-xl md:text-2xl",
|
|
// Stats and large numbers
|
|
statNumber: "text-3xl md:text-4xl",
|
|
// Body text (large)
|
|
bodyLarge: "text-lg md:text-xl",
|
|
// Body text (standard)
|
|
body: "text-base",
|
|
// Body text (small)
|
|
bodySmall: "text-sm",
|
|
},
|
|
|
|
/**
|
|
* Spacing Scale
|
|
* Vertical spacing between sections and elements
|
|
*/
|
|
spacing: {
|
|
// Tight spacing within components
|
|
tight: "space-y-4",
|
|
// Standard spacing between related elements
|
|
standard: "space-y-6",
|
|
// Spacing between sections
|
|
section: "space-y-12",
|
|
// Major page sections
|
|
page: "space-y-20",
|
|
},
|
|
|
|
/**
|
|
* Padding Scale
|
|
* Internal padding for cards and containers
|
|
*/
|
|
padding: {
|
|
// Compact elements
|
|
compact: "p-4",
|
|
// Standard cards and containers
|
|
standard: "p-6",
|
|
// Feature cards with more emphasis
|
|
feature: "p-8",
|
|
// Hero sections and CTAs
|
|
hero: "p-12",
|
|
// Responsive vertical padding for page sections
|
|
sectionY: "py-16 lg:py-24",
|
|
},
|
|
|
|
/**
|
|
* Grid Layouts
|
|
* Standard grid configurations for responsive layouts
|
|
*/
|
|
grid: {
|
|
// Two-column layout
|
|
cols2: "grid-cols-1 md:grid-cols-2",
|
|
// Three-column layout
|
|
cols3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
// Four-column layout
|
|
cols4: "grid-cols-2 md:grid-cols-4",
|
|
// Standard gap between grid items
|
|
gapStandard: "gap-6",
|
|
// Larger gap for emphasized spacing
|
|
gapLarge: "gap-8",
|
|
},
|
|
} as const;
|
|
|
|
/**
|
|
* Helper function to combine design tokens
|
|
* Usage: cn(DESIGN_TOKENS.width.content, "mx-auto", "px-4")
|
|
*/
|
|
export const getContentContainer = (
|
|
width: keyof typeof DESIGN_TOKENS.width = "content"
|
|
) => {
|
|
return `${DESIGN_TOKENS.width[width]} mx-auto px-4`;
|
|
};
|