Production-ready design system: Material 3–inspired tokens and typography, accessible, themeable components (buttons, text fields, alerts, snackbar), dynamic theming, customization, and type-safe hot-reload ergonomics.
Build beautiful, consistent user interfaces across all platforms with a single codebase
Features • Components • Getting Started • Documentation • Contributing
Orata Design System is a production-ready, comprehensive design system built with Kotlin Multiplatform and Compose Multiplatform. It empowers developers to create beautiful, consistent, and accessible user interfaces across Android, iOS, Desktop, and Web platforms using a single, unified codebase.
Inspired by Material Design 3 principles, Orata provides a complete suite of design tokens, reusable components, and theming capabilities that work seamlessly across all platforms. Whether you're building a mobile app, desktop application, or web interface, Orata ensures your UI remains consistent and professional.
Orata Design System follows a clean, modular architecture that separates concerns and promotes reusability:
Orata Design System provides a comprehensive collection of ready-to-use UI components. Each component is highly customizable, accessible, and optimized for all supported platforms.
A complete 5-tier typography hierarchy for consistent text styling:
Features:
A comprehensive color palette supporting both light and dark themes:
Features:
Four distinct button styles for different use cases:
Common Button Features:
A fully-featured text input component with extensive customization:
Features:
Use Cases:
Four pre-styled alert components for different message types:
Common Alert Features:
Temporary notification component for brief messages:
Features:
Use Cases:
Interactive text link component with hover effects:
Features:
Use Cases:
Note: More components are in active development! Contributions welcome.
Note: Orata Design System can be used as a library in your own projects. More integration guides coming soon!
For now, you can reference the components directly by including this repository as a module or by copying the design system code into your project.
Wrap your app with OrataTheme to enable the design system:
import com.oratakashi.design.foundation.OrataTheme
import androidx.compose.runtime.Composable
@Composable
fun App() {
OrataTheme(
darkTheme = false, // or use isSystemInDarkTheme()
dynamicColor = true // Material You support (Android 12+)
) {
// Your entire app goes here
MyMainScreen()
}
}
import com.oratakashi.design.component.snackbar.*
import androidx.compose.runtime.*
import kotlinx.coroutines.launch
@Composable
fun SnackbarExample() {
val snackbarHostState = remember { OraSnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { OraSnackbarHost(hostState = snackbarHostState) }
) {
Button(
onClick = {
scope.launch {
snackbarHostState.showSnackbar(
message = ,
actionLabel = ,
duration = OraSnackbarDuration.
)
}
}
) {
Text()
}
}
}
import com.oratakashi.design.foundation.OrataTheme
import androidx.compose.material3.Text
@Composable
fun {
Column {
Text(
text = ,
style = OrataTheme.typography.displayLarge(),
color = OrataTheme.colors.primary
)
Text(
text = ,
style = OrataTheme.typography.headlineMedium()
)
Text(
text = ,
style = OrataTheme.typography.titleLarge()
)
Text(
text = ,
style = OrataTheme.typography.bodyMedium()
)
Text(
text = ,
style = OrataTheme.typography.labelLarge()
)
}
}
import com.oratakashi.design.foundation.OrataTheme
import androidx.compose.foundation.background
@Composable
fun ColorExample() {
Column {
// Primary color box
Box(
modifier = Modifier
.background(OrataTheme.colors.primary)
.padding(dp)
) {
Text(
text = ,
color = OrataTheme.colors.onPrimary
)
}
Surface(
color = OrataTheme.colors.surfaceVariant,
shadowElevation = dp
) {
Text(
text = ,
color = OrataTheme.colors.onSurface
)
}
Text(
text = ,
color = OrataTheme.colors.error,
style = OrataTheme.typography.bodySmall()
)
}
}
import com.oratakashi.design.component.anchortext.*
@Composable
fun LinkExample() {
Row {
Text("By continuing, you agree to our ")
OraAnchorText(
text = "Terms of Service",
onClick = { /* Navigate to terms */ },
size = OraAnchorTextDefaults.mediumSize,
color = OraAnchorTextDefaults.primaryColor()
)
Text(" and ")
OraAnchorText(
text = "Privacy Policy",
onClick = { /* Navigate to privacy */ }
)
}
}
Every component in Orata Design System includes comprehensive KDoc documentation following a consistent format:
/**
* [Component/Function description with use cases]
*
* @author oratakashi
* @since [Date]
* @param [parameter] [Detailed parameter description]
* @return [Return value description]
*
* @sample [SampleUsageFunction] (when applicable)
*/
Location: composeApp/src/commonMain/kotlin/com/oratakashi/design/foundation/
Location: composeApp/src/commonMain/kotlin/com/oratakashi/design/component/
Each component folder includes:
For comprehensive design guidelines, component specifications, and best practices, explore the source code documentation. Each component includes:
Q: Is Orata Design System production-ready? A: Yes! The components are stable and tested. However, as it's actively developed, always check the latest version.
Q: Can I use this in commercial projects? A: Yes! Check the license file for specific terms.
Q: Does it work with existing Compose Multiplatform projects? A: Yes! You can integrate Orata components into any Compose Multiplatform project.
Q: What's the bundle size impact? A: Minimal. Only the components you use are included in your final build.
Q: Do I need to support all platforms? A: No! You can target only the platforms you need (e.g., Android + iOS only).
Q: Can I customize the theme colors? A: Yes! The theme is fully customizable. You can provide custom color schemes.
Q: Does it support RTL (Right-to-Left) languages? A: Yes! All components support RTL layouts automatically.
Q: Can I use custom fonts? A: Yes! You can override the default fonts with your own.
Q: Is there hot reload support? A: Yes! Use the Compose Hot Reload plugin for instant updates during development.
Q: Can I create custom button styles?
A: Yes! Use OraButtonColors to create custom color schemes.
Q: Are the components accessible? A: Yes! All components follow accessibility best practices.
Q: Can I nest components? A: Yes! Components are designed to work together seamlessly.
We welcome contributions from the community! Whether it's bug fixes, new components, documentation improvements, or feature suggestions, your help is appreciated.
feat: Add new DatePicker component
fix: Correct button ripple effect on iOS
docs: Update installation instructions
style: Format code according to conventions
refactor: Simplify color token structure
test: Add tests for TextField validation
When contributing a new component:
Want to contribute to the roadmap? Open an issue with your suggestions!
Using Orata Design System in your project? Let us know! We'd love to feature it here.
This project is open source and available under the license terms specified in the repository. Please check the LICENSE file for complete details.
Oratakashi
Passionate about creating beautiful, accessible, and performant user interfaces across all platforms.
Special thanks to:
If you find Orata Design System helpful, please consider giving it a star! It helps others discover the project.
Orata Design System - Beautiful UIs, Everywhere
| Platform | Version | Status | Details |
|---|
| 🤖 Android | SDK 24+ (Android 7.0+) | ✅ Stable | Full Material 3 support, Dynamic color |
| 🍎 iOS | iOS 14+ | ✅ Stable | Native performance, Full integration |
| 🖥️ Desktop | JVM (Java 11+) | ✅ Stable | Windows, macOS, Linux |
| 🌐 Web | WebAssembly (Wasm) | ✅ Stable | Modern browsers (Chrome, Firefox, Safari, Edge) |
OrataDesign/
├── composeApp/ # Main multiplatform module
│ └── src/
│ ├── commonMain/ # 🔄 Shared code (90% of codebase)
│ │ └── kotlin/com/oratakashi/design/
│ │ ├── foundation/ # 🎨 Design system foundation
│ │ │ ├── color/ # Color tokens, schemes, palettes
│ │ │ ├── typography/ # Typography scale, fonts
│ │ │ └── OrataTheme.kt # Main theme composition
│ │ │
│ │ ├── component/ # 🧩 UI Components
│ │ │ ├── button/ # Button variants & tokens
│ │ │ ├── textfield/ # Text input components
│ │ │ ├── alert/ # Alert components
│ │ │ ├── snackbar/ # Snackbar with animations
│ │ │ └── anchortext/ # Interactive link text
│ │ │
│ │ ├── config/ # ⚙️ Configuration & setup
│ │ └── app/ # 📱 Demo application
│ │
│ ├── androidMain/ # 🤖 Android-specific (Platform.kt)
│ ├── iosMain/ # 🍎 iOS-specific (Platform.kt)
│ ├── jvmMain/ # 🖥️ Desktop-specific (Platform.kt)
│ └── wasmJsMain/ # 🌐 Web-specific (Platform.kt)
│
└── iosApp/ # 🍎 iOS app entry point (SwiftUI)
└── iosApp.xcodeproj # Xcode project
| Category | Variants | Font Family | Usage |
|---|
| Display | Large (57sp), Medium (45sp), Small (36sp) | Montserrat | Hero sections, landing pages |
| Headline | Large (32sp), Medium (28sp), Small (24sp) | Poppins | Page titles, section headers |
| Title | Large (22sp), Medium (16sp), Small (14sp) | Poppins | Card titles, dialog headers |
| Label | Large, Medium, Small | System | Button labels, form labels |
| Body | Large, Medium, Small | System | Body text, descriptions |
| Color Token | Purpose | Variants |
|---|
| Primary | Main brand color | Primary, On Primary, Primary Container, On Primary Container |
| Secondary | Complementary accent | Secondary, On Secondary, Secondary Container, On Secondary Container |
| Tertiary | Additional accent | Tertiary, On Tertiary, Tertiary Container, On Tertiary Container |
| Error | Error states | Error, On Error, Error Container, On Error Container |
| Surface | Backgrounds | Surface, On Surface, Surface Variant, Surface Tint |
| Outline | Borders & dividers | Outline, Outline Variant |
OraSnackbarHostState for state management| Component | Variants | States | Customizable | Platform Support |
|---|
| Buttons | 4 types | Enabled, Disabled, Loading | ✅ Full | All platforms |
| TextField | 1 component | 4 states | ✅ Full | All platforms |
| Alerts | 4 types | Show, Hidden | ✅ Full | All platforms |
| Snackbar | 4 themes | Visible, Hidden | ✅ Full | All platforms |
| Anchor Text | 1 component | Normal, Hover | ✅ Full | All platforms |
| Requirement | Version | Purpose |
|---|
| JDK | 11 or higher | Kotlin compilation |
| Gradle | 8.0+ | Build automation |
| Android Studio | Latest stable | Android development (optional) |
| Xcode | 14+ | iOS development (optional, macOS only) |
| Node.js | 16+ | Web development (optional) |
Clone the Repository
git clone https://github.com/uangkuid/OrataDesign.git
cd OrataDesign
Run the Demo App
Choose your target platform:
🤖 Android
./gradlew :composeApp:assembleDebug
# Or open in Android Studio and run
🖥️ Desktop (Fastest way to try)
./gradlew :composeApp:run
🍎 iOS (macOS only)
# Open in Xcode
open iosApp/iosApp.xcodeproj
# Then build and run from Xcode
🌐 Web
./gradlew :composeApp:wasmJsBrowserDevelopmentRun
# Opens automatically in browser at http://localhost:8080
import com.oratakashi.design.component.button.*
fun ButtonExamples() {
Column(spacing = 16.dp) {
// Solid Button (Primary action)
OraButton(
onClick = { /* Handle click */ },
label = "Submit",
style = OraButtonDefaults.buttonSolidColors(),
size = OraButtonDefaults.size,
enabled = true,
isLoading = false
)
// Tonal Button (Secondary action)
OraTonalButton(
onClick = { /* Handle click */ },
label = "Save Draft",
leadingIcon = { Icon(Icons.Default.Save, null) }
)
// Outline Button (Tertiary action)
OraOutlineButton(
onClick = { /* Handle click */ },
label = "Cancel"
)
// Transparent Button (Low priority)
OraTransparentButton(
onClick = { /* Handle click */ },
label = "Learn More"
)
}
}
import com.oratakashi.design.component.textfield.*
import androidx.compose.runtime.*
fun FormExample() {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var error by remember { mutableStateOf(false) }
Column(spacing = 16.dp) {
// Email Field
OraTextField(
value = email,
onValueChange = { email = it },
label = "Email Address",
placeholder = "your@email.com",
state = OraTextFieldState.Default,
size = OraTextFieldDefault.mediumSize,
leadingIcon = { Icon(Icons.Default.Email, null) }
)
// Password Field with Error
OraTextField(
value = password,
onValueChange = { password = it },
label = "Password",
placeholder = "Enter password",
state = if (error) OraTextFieldState.Error else OraTextFieldState.Default,
visualTransformation = PasswordVisualTransformation(),
supportingText = if (error) "Password is required" else null
)
}
}
import com.oratakashi.design.component.alert.*
import androidx.compose.runtime.*
fun AlertExamples() {
var showAlert by remember { mutableStateOf(true) }
Column(spacing = 16.dp) {
// Success Alert
OraSuccessAlert(
title = { Text("Success!") },
description = { Text("Your changes have been saved.") },
onClose = { showAlert = false },
action = {
OraAnchorText(
text = "View Details",
onClick = { /* Navigate */ }
)
}
)
// Error Alert
OraErrorAlert(
title = { Text("Error") },
description = { Text("Failed to connect to server.") },
onClose = { showAlert = false }
)
// Warning Alert
OraWarningAlert(
title = { Text("Warning") },
description = { Text("Your session will expire in 5 minutes.") }
)
// Info Alert
OraInfoAlert(
title = { Text("New Features") },
description = { Text("Check out the latest updates!") }
)
}
}
import androidx.compose.runtime.*
import com.oratakashi.design.foundation.OrataTheme
import com.oratakashi.design.component.button.*
import com.oratakashi.design.component.textfield.*
import com.oratakashi.design.component.alert.*
fun LoginScreen() {
OrataTheme {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var showError by remember { mutableStateOf(false) }
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
verticalArrangement = Arrangement.Center
) {
// Title
Text(
text = "Welcome Back",
style = OrataTheme.typography.displaySmall(),
color = OrataTheme.colors.primary
)
Spacer(modifier = Modifier.height(32.dp))
// Error Alert
if (showError) {
OraErrorAlert(
title = { Text("Login Failed") },
description = { Text("Invalid credentials") },
onClose = { showError = false }
)
Spacer(modifier = Modifier.height(16.dp))
}
// Email Field
OraTextField(
value = email,
onValueChange = { email = it },
label = "Email",
placeholder = "your@email.com"
)
Spacer(modifier = Modifier.height(16.dp))
// Password Field
OraTextField(
value = password,
onValueChange = { password = it },
label = "Password",
placeholder = "Enter password",
visualTransformation = PasswordVisualTransformation()
)
Spacer(modifier = Modifier.height(24.dp))
// Login Button
OraButton(
onClick = { /* Handle login */ },
label = "Sign In",
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
// Sign Up Link
Row {
Text("Don't have an account? ")
OraAnchorText(
text = "Sign Up",
onClick = { /* Navigate to signup */ }
)
}
}
}
}
| Technology | Version | Purpose |
|---|
| Kotlin | 2.2.20 | Programming language |
| Compose Multiplatform | 1.10.0-alpha01 | UI framework |
| Material 3 | 1.10.0-alpha01 | Design system foundation |
| Kotlin Coroutines | 1.10.2 | Asynchronous programming |
| Navigation Compose | 2.9.0 | Navigation framework |
| Kotlinx Serialization | 1.9.0 | Data serialization |
| Gradle | 8.13 | Build system |
Typography System (typography/)
OrataTypography.kt - Typography scale and configurationTextStyleProvider.kt - Style provider for different text typesFontFamily.kt - Custom font configurations (Montserrat, Poppins)Color System (color/)
OrataColors.kt - Main color scheme definitionColorScheme.kt - Light and dark theme colorsColorTokens.kt - Palette and scheme key tokensDynamicColor.kt - Material You dynamic color supportTheme (OrataTheme.kt)
| Component | Files | Documentation Coverage |
|---|
| Button | 8 files | ✅ 100% |
| TextField | 6 files | ✅ 100% |
| Alert | 3 files | ✅ 100% |
| Snackbar | 8 files | ✅ 100% |
| Anchor Text | 4 files | ✅ 100% |
// Button API
OraButton(
onClick: () -> Unit,
label: String,
modifier: Modifier = Modifier,
style: OraButtonColors = OraButtonDefaults.buttonSolidColors(),
size: OraButtonSize = OraButtonDefaults.size,
enabled: Boolean = true,
isLoading: Boolean = false,
leadingIcon: (() -> Unit)? = null,
trailingIcon: (() -> Unit)? = null
)
// TextField API
OraTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
label: String? = null,
placeholder: String? = null,
state: OraTextFieldState = OraTextFieldState.Default,
size: OraTextFieldSize = OraTextFieldDefault.mediumSize,
leadingIcon: (() -> Unit)? = null,
trailingIcon: (() -> Unit)? = null,
supportingText: String? = null,
enabled: Boolean = true,
readOnly: Boolean = false,
singleLine: Boolean = true,
maxLines: Int = 1,
visualTransformation: VisualTransformation = VisualTransformation.None
)
// Alert API
OraAlert(
title: () -> Unit,
modifier: Modifier = Modifier,
icon: (() -> Unit)? = null,
description: (() -> Unit)? = null,
closeIcon: (() -> Unit)? = null,
action: (() -> Unit)? = null,
onClose: (() -> Unit)? = null,
color: OraAlertColors = OraAlertDefaults.defaultColor()
)
// Snackbar API
OraSnackbarHost(
hostState: OraSnackbarHostState,
modifier: Modifier = Modifier,
theme: OraSnackbarTheme = OraSnackbarTheme.Default,
size: OraSnackbarSize = OraSnackbarDefaults.size
)
// Anchor Text API
OraAnchorText(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
color: OraAnchorTextColor = OraAnchorTextDefaults.primaryColor(),
size: OraAnchorTextSize = OraAnchorTextDefaults.mediumSize,
underline: Boolean = true
)
mainSurfaced from shared tags and platforms — no rankings paid for.