Design system

Brand foundations, token CSS, a React component library and click-through UI kits for SukoWise's two surfaces — the mobile app and the marketing site.

UI kits

Click through the product

Full surfaces built from this system's own primitives.

Marketing site Hero, how it works, conditions, pricing, footer Mobile app Onboarding, Today, Plan, Suko chat and profile

Components

Component library

React primitives, grouped by concern. Each ships with a props contract and usage notes.

CoreButtons, icon buttons, badges, tags, cards FormsInputs, select, checkbox, radio, switch, stepper FeedbackToasts, tooltip and modal sheet NavigationPill tabs, underline tabs, app tab bar Nutrition & agentRings, macro bars, meal rows, the orb, chat

Brand

Foundations

Fluid, organic, gradient-forward — a warm bowl of food and a clinical chart, reconciled.

WordmarkKnocked-out letters — never on apricot Signature gradientsAlways travel warm → cool, 120–150° Atmosphere & scrimsMesh behind heroes, scrim over imagery MotionOrganic easing, no bounce on layout Organic shapesBlob masks for avatars and the agent orb

Colour

Palette

Brand primariesApricot, forest, jade Apricot rampWarmth, appetite, primary CTAs Forest rampGrounding ink and inverse surfaces Jade rampThe agent colour — progress, focus Sand neutralsWarm greys — never pure grey FeedbackSuccess, warning, info, error Macro data coloursFixed mapping for nutrition charts Semantic aliasesWhat product code should reference

Type

Typography

Display — GabaritoHeadlines and figures Body — Hanken GroteskLong-form and UI copy Mono — DM MonoEvery number a user compares Labels & eyebrowsUppercase micro-labels

Space & shape

Spacing, radius, elevation

Spacing scale4px base, 6px organic half-step Spacing in useCard padding, stack gap, section rhythm Corner radiiNothing is square; the pill is default ElevationForest-tinted shadows, never neutral black