MingleTribe
MingleTribe
Design System
Design Tokens
Two layers: primitive values and the semantic aliases that consume them. The primitive palette renders live from MGT_TAILWIND_COLORS, and every text token is graded live with GenerateContrastBadge.
Semantic tokens name intent, not hue. Build with these; never reference a raw hex in product code.
| Token | Value | Primitive | Usage | On White |
|---|---|---|---|---|
--accent | #8A2BE2 | purple | Primary actions, links, focus | AA6.0 |
--accent-deep | #5B1EA2 | purpleDark | Hover, pressed states | AAA9.8 |
--accent-soft | #F7F1FF | purple/5 | Selected rows, tint fills | Fill |
--text-strong | #171717 | neutral-900 | Headings, body | AAA18 |
--text-muted | #737373 | neutral-500 | Secondary text, captions | AA4.7 |
--hairline | #E9E7E2 | neutral-150 | Card borders, rules | Line |
| Token | Value | Badge | Use |
|---|---|---|---|
success | #C0D42F | Success | Live, paid, confirmed |
warning | #FEC600 | Warning | Draft, pending, attention |
error | #FF2768 | Error | Failed, destructive, invalid |
info | #4483DB | Info | Neutral notices, hints |
Sourced directly from @generators/commons and rendered with the GenerateColorSwatch primitive. These are the raw hues the semantic layer aliases.
mgt-h1Show Up36 / 48 · 700mgt-h2Show Up28 / 40 · 600mgt-h3Show Up20 / 32 · 600mgt-titleShow Up18 / 24 · 600mgt-bodyShow Up16 / 24 · 400mgt-fineShow Up12 / 16 · 400space-1 · 4space-2 · 8space-4 · 16space-6 · 24space-8 · 32space-12 · 48fast · 120msbase · 180msslow · 280msease-outxs< 480 · mobilesm640md768 · card drops chromelg1024 · sub-page wrapxl1280z-index: base 0 · sticky 10 · dropdown 40 · drawer 50 · dialog 60 · toast 80
Components
Live demos rendered from the real @generators/core library, never a redraw. Each component documents anatomy, variants, every interaction state, props, accessibility, and a copy-ready snippet. Always reach for a generator before hand-rolling a native element.
GenerateButton
Stable| Prop | Type | Default |
|---|---|---|
preset | basic | standard | basic |
variant | contained | empty | contained |
useFullWidth | boolean | true |
isLoading | boolean | false |
onClick | fn | , |
// Inline pill, not full width
<GenerateButton
preset="standard"
useFullWidth={false}
onClick={save}
>
Save Changes
</GenerateButton>Native <button>; focus ring uses --accent-ring (3px, AA). Loading sets aria-busy. Min target 44×44.
One primary action per view. Lead the label with a verb in Title Case.
Stack multiple primaries. Pass useFullWidth for pills inside a toolbar.
GenerateInput
Stable| Prop | Type | Note |
|---|---|---|
useInputMode | wrapped | Admin default |
inputClassName | string | .gen-input wrapper |
errorMsg | string | Shows + reddens |
value/onChange | controlled | RHF Controller |
Label bound via htmlFor; error wires aria-invalid + aria-describedby.
Brand & Voice
Outcome-led, human, real over performative. Logo usage, color proportions, and voice, all derived from VISION.md and made enforceable.
Neutrals dominate, purple accents, the gradient is a rare flourish. Never flood a surface with accent.
Patterns
Wrapper-level contracts, consumed from @generators-ui/wrappers, never re-implemented at route-local scope. Each documents its anatomy, layout specs, and when to reach for it.
Hairline rule, 14px radius, gradient stripe.
Paginating A4 preview…