Complete reference for Gort — a neobrutalist design system for Compose Multiplatform. Use this skill whenever building UI with Gort components, theming with GortColorScheme, using Gort typography, creating layouts with GortScaffold, rendering markdown, building chat interfaces, or working with any Gort component. Also triggers on: 'gort theme', 'gort button', 'gort colors', 'neobrutalist compose', 'GortTheme', 'gort table', 'gort chat', 'gort markdown', 'gort callout', 'gort design system', 'zone.clanker.gort', 'hard shadows compose', 'thick borders compose'.
Bold shadows. Thick borders. Flat colors. Pure Foundation — zero Material 3. 61 components across actions, inputs, display, navigation, feedback, data, chat, content, and layout.
Package: zone.clanker:gort
Targets: Android, Desktop (JVM), WASM, JS, iOS, macOS
Gort is an opinionated neobrutalist design system built entirely on Compose Foundation. No Material 3 dependency. Every component reads style from the Gort theme object — never from parameters.
dependencies {
implementation("zone.clanker:gort:<version>")
// Lucide icons come transitively via api() — no extra dep needed
}
Gort ObjectGort.colors // GortColors — semantic color tokens
Gort.typography // GortTypography — text styles
Gort.spacing // GortSpacing — padding/margin scale
Gort.borders // GortBorders — border widths
Gort.corners // GortCorners — corner shapes
Gort.shadows // GortShadows — shadow sizes
Gort.animation // GortAnimation — animation specs
// From seed (HSL hue rotation)
GortColorScheme.fromSeed(seed = Color(0xFFFF6B6B), isDark = false)
// Presets
GortColorScheme.coral() // Warm reds
GortColorScheme.ocean() // Cool blues
GortColorScheme.forest() // Greens
GortColorScheme.neon() // Bright accents
GortColorScheme.mono() // Black & white
GortColorScheme.gazette() // Newspaper feel
GortTypography() // System default
GortTypography.monospace() // Hacker vibes
GortTypography.editorial() // Newspaper feel
GortTypography.sansSerif() // Clean modern
GortTypography.withFonts(body = myFont, display = myDisplayFont)
GortTheme(
colors = GortColorScheme.fromSeed(myColor),
typography = GortTypography.editorial(),
) { /* your app */ }
Button (Primary/Secondary/Ghost/Danger variants), IconButton
TextField (label, placeholder, leadingIcon, error, isPassword, required, validateOnBlur), TextArea, Checkbox, RadioButton, Toggle, GortSlider, NumberStepper, Rating, SegmentedControl, ChoiceGroup, ColorPicker
Tag (selected, onRemove), Code (syntax highlight, filePath, onCopy), InlineCode, Callout (Severity), Badge, Card, Avatar, Tooltip, Stamp
Tabs, Breadcrumb, Pagination, GortBottomBar, GortDrawer, GortSearchBar
Banner (severity, onDismiss), Notification, Dialog, Snackbar, Spinner
Table (sortable, paginated, expandable), Timeline (vertical/horizontal, expandable), FileTree, ListGroup
ChatView (full-screen, markdown, search), ChatMessageBubble, ChatInput
MarkdownRenderer — full GFM: headings, bold, italic, links, images, code blocks, tables, lists, checkboxes, blockquotes, callouts, color swatches
GortScaffold, GortDrawer, GortSideSheet, GortBottomSheet, GortBottomBar, GortSearchBar, GortListDetail, GortFab
Surface, GortDivider, Divider, WindowSize.current() (Compact/Medium/Expanded)
enum class Severity(val label: String, val icon: ImageVector) {
Info("Note", Lucide.Info), Success("Tip", Lucide.Lightbulb),
Warning("Warning", Lucide.TriangleAlert), Danger("Danger", Lucide.OctagonAlert),
}
data class ChatMessage(
val id: String, val role: MessageRole, val content: String,
val sender: String? = null, val timestamp: String = "",
val status: MessageStatus? = null, val tags: List<String> = emptyList(),
val steps: List<ResponseStep> = emptyList(),
)
Lucide (1,600+) included transitively:
import com.composables.icons.lucide.*
Image(
imageVector = Lucide.Search,
contentDescription = "Search",
colorFilter = ColorFilter.tint(Gort.colors.onSurface),
modifier = Modifier.size(20.dp),
)
content: @Composable () -> Unit over stringsColor(0x40FFFFFF) white glowDampingRatioMediumBouncy for tactile feel| ❌ Don't | ✅ Do Instead |
|---|---|
| Import Material 3 alongside Gort | Gort replaces Material entirely |
| Pass colors/borders as component params | Read from Gort.colors, Gort.borders |
| Use Material icons | Use Lucide: com.composables.icons.lucide.* |
| Hold state inside Gort components | Hoist state — pass checked, value, onChanged |
| Use black shadows in dark mode | They're invisible — Gort uses white glow automatically |
Hardcode Color(0x...) in component code | Use semantic tokens: Gort.colors.primary |
GortTheme wraps the app contentfromSeed)Gort.* for all styling