Loading Lithia
Preparing your development environment...
DESIGN KIT
Lithia Design System
Colors, typography, components, and guidelines for building with Lithia
Design Kit Overview
The Lithia.js design kit contains all the resources you need to create beautiful and consistent designs. It includes the logo, color palette, typography, and more. Use these resources to create stunning designs that reflect the Lithia.js brand.
Lithia.js Logo
The logo is made from a combination of a leaf and the wordmark. In most cases, they should appear together. The leaf can be used as a standalone icon in some cases, but the wordmark should never be used without the leaf.
Icon
Color Palette
Our color palette is inspired by the colors of nature. The primary color is Spring green, which represents growth and harmony. The background color is Rich black, which provides a sense of stability and depth. When creating Lithia.js content, always use these colors to maintain consistency.
Spring Green
#2CFC81
Primary brand color representing growth and harmony
Rich Black
#030712
Background color providing stability and depth
Typography
Heading 1
text-4xl font-boldBuild APIs with zero configuration
Heading 2
text-2xl font-boldWhat makes Lithia different
Heading 3
text-xl font-semiboldCore Features
Body Large
text-lgLithia is a modern Node.js framework built for TypeScript developers.
Body
text-baseGet started with Lithia in minutes. No configuration required.
Body Small
text-smBuilt with TypeScript and modern tooling.
Components
Button Primary
Main call-to-action button
Button Secondary
Secondary action button
Card
Content container with glassmorphism effect
Card Title
Card content goes here
Badge
Status indicator or label
New Feature
Spacing Scale
xs
4px
p-1sm
8px
p-2md
16px
p-4lg
24px
p-6xl
32px
p-82xl
48px
p-12Shadows
Small
Subtle shadow for cards
shadow-smMedium
Standard shadow for components
shadow-mdLarge
Prominent shadow for modals
shadow-lgGlow
Glowing effect with primary color
shadow-primary/20 shadow-lgUsage Guidelines
Do's
- • Use consistent spacing throughout your design
- • Maintain proper contrast ratios for accessibility
- • Follow the established color hierarchy
- • Use semantic HTML elements
- • Test components across different screen sizes
Don'ts
- • Don't use colors outside the defined palette
- • Don't create custom spacing values
- • Don't ignore accessibility guidelines
- • Don't use too many different font sizes
- • Don't break the established component patterns
Contribute to Design
Help improve the Lithia.js design system by contributing to our design guidelines and assets.