Careloop

Overview

Careloop is a participant and clinic workspace for clinical study follow-up. It makes weekly check-ins feel short, humane and optional-in-spirit, so that participants on a long programme (here, a GLP-1 study across 52 weeks) can report how they feel without being graded. The aesthetic is a quiet Organic Botanical Minimalism: warm off-white paper, deep forest green ink, and a pale lime accent that reads like new leaf growth against the dark panels. The emotional response is calm, attentive and unhurried.

Voice is plain, warm and second-person: "Welcome back, Alex. Let's capture how your week has been." Copy avoids clinical jargon in participant-facing surfaces, pairs every ask with a time estimate, and explicitly removes penalty language ("No streak penalties"). Example sentence: "Share what you noticed, even if nothing changed. Every honest check-in helps your study team understand your experience."

Colors

Primary (#275e4d) is the signature action colour: the primary CTA, the active sidebar item, the role toggle text and the hero panel fill. Its darker companion ink (#193b35) carries all headings and body text at 15px on the #f6f7f1 paper, giving a contrast ratio well above AA. Secondary (#829568) is a muted sage used only as an accent dot in the wordmark and supporting hover states; it never fills a control. Tertiary (#a95d29) is a burnt orange reserved for warnings such as Pending status pills and the urgent-symptom notice, never for decoration.

The surface stack is intentionally shallow. The page sits on #f6f7f1, the sidebar and footer rail sit on #edf1e8 with a 1px #dfe5dd border, the top bar uses #fafbf7, and content cards are #ffffff with the same #dfe5dd hairline. Lime #e4edba is the

Typography

The type system pairs Manrope (headings, 700 weight, tight tracking) with DM Sans (body and labels, 400 to 600). Manrope's geometric forms make the 37px display heading feel confident; DM Sans keeps 13 to 15px copy legible. Display uses letter-spacing -1.6px and line-height 1.2; section headings at 21px and sub-hero headings at 29px use -0.8px. Overline eyebrows are DM Sans 10px, weight 700, uppercase, letter-spacing 2px, colour #6c8073, placed above every heading as a category cue. Small muted helper text uses #708079 at 12 to 13px and should never drop below 11px. Use weight 700 only for headings and stat numbers; use 600 for button labels.

Layout

The layout is a fixed two-column shell: a 235px sticky sidebar and a fluid content column capped at a 1250px container with 45px horizontal padding (25px under 1100px, 17px under 720px). Content uses a 12-column mental grid expressed as a 1.65fr / 1fr split for the primary and secondary panels with a 22px gutter. Three equal stat cards use a 17px gap. Vertical rhythm is set by the lg (16px) and xl (20px) spacing steps between related blocks and 2xl (25px) between major sections, with heading blocks separated by 25px margins. White space is generous; sections never touch, and the topbar is a fixed 88px band.

Elevation & Depth

Elevation is almost entirely flat. Separation comes from 1px #dfe5dd borders rather than shadows. The only true shadows are on the active role-toggle (0 1px 4px rgba(0,0,0,0.067)) and on floating toasts (0 6px 30px rgba(0,0,0,0.133)). The hero panel adds decorative concentric rings with box-shadow 0 0 0 22px rgba(255,255,255,0.024) and 0 0 0 45px rgba(255,255,255,0.016) to suggest a soft halo around the illustration. Depth is therefore conveyed by layered tints (paper, sidebar green, lime) and hairlines, not by lift.

Shapes

The shape philosophy is Soft Organic Geometry: rounded but not bubbly. Buttons and the sidebar items use 10px, secondary buttons and inputs use 8 to 9px, cards use 14px and the hero panel uses 18px. Icon tiles are 11px and the logomark is 12px, so every radius stays in the 8 to 18px band and reads as one family. Pills and avatars are fully round (30px pills, 50% avatars) so status and identity are visually distinct from actionable containers.

Components

Action Elements Primary buttons are solid #275e4d with white 13px/600 labels, 13px by 15px padding, 10px radius, and a 48px min-height on touch targets. On hover they shift to #264c3b over a 150ms ease transition. Secondary actions on the hero use lime #e4edba with #264c3b text. Ghost links such as "View all" drop the fill and padding entirely and keep the #275e4d colour.

Containers & Surfaces Cards are white with a 1px #dfe5dd border, 14px radius and 24px padding (20px under 1100px). Stat cards stack an eyebrow, a 30px/700 numeric value with -1px tracking, and a 12px muted caption. The hero is a full-bleed #275e4d block with 18px radius and 32px by 35px padding, carrying the only illustration in the system.

Inputs & Interaction Inputs are white with a 1px #dce3d7 border, 8px

Do's and Don'ts

**Do**

• Do reserve #275e4d for every primary action and active navigation state so the user always knows where the next step lives.
• Do pair each participant ask with a visible time estimate such as "About 4 minutes" in the 10px uppercase eyebrow.
• Do use #a95d29 only for warnings and pending states, never as decoration.
• Do keep borders at 1px #dfe5dd and let tints, not shadows, separate surfaces.

**Don't**

• Don't fill secondary controls with #275e4d; use lime #e4edba so primary remains unique.
• Don't introduce gradients, glassmorphism or heavy drop shadows; the system is flat and botanical.
• Don't use Manrope for body copy or DM Sans for 700-weight headings.
• Don't set participant-facing copy below 11px or introduce penalty or streak language.