diff --git a/DESIGN.md b/DESIGN.md index d7f5b61..8c7d169 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,210 +1,380 @@ ---- -name: LabPréstamos -description: Sistema institucional UABC para préstamo de material de laboratorio — un ticket de equipo, cruzado con un terminal de desarrollador. -colors: - cream: "#f4efea" - frost: "#ffffff" - chalk: "#f8f8f7" - ice: "#ebf9ff" - ink: "#383838" - pencil: "#a1a1a1" - graphite: "#818181" - primary: "#00723F" - primary-hover: "#005f34" - secondary: "#DD971A" - secondary-hover: "#c78614" - danger: "#f38e84" - danger-hover: "#ec7469" - danger-text: "#a83224" - positive: "#38c1b0" - attention: "#ffde00" -typography: - body: - fontFamily: "JetBrains Mono Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" - fontSize: "0.875rem" - fontWeight: 400 - lineHeight: 1.5 - letterSpacing: "0.02em" - label: - fontFamily: "JetBrains Mono Variable, ui-monospace, monospace" - fontSize: "0.75rem" - fontWeight: 500 - letterSpacing: "0.05em" - textTransform: uppercase -rounded: - control: "2px" -spacing: - tight: "0.5rem" - base: "1rem" - loose: "1.5rem" - section: "2rem" -components: - button-primary: - backgroundColor: "{colors.primary}" - textColor: "#ffffff" - rounded: "{rounded.control}" - padding: "10px 16px" - button-secondary: - backgroundColor: "{colors.secondary}" - textColor: "{colors.ink}" - rounded: "{rounded.control}" - padding: "10px 16px" - button-ghost: - backgroundColor: "transparent" - textColor: "{colors.ink}" - rounded: "{rounded.control}" - padding: "10px 16px" - card: - backgroundColor: "{colors.frost}" - textColor: "{colors.ink}" - rounded: "{rounded.control}" - padding: "24px" - input: - backgroundColor: "{colors.frost}" - textColor: "{colors.ink}" - rounded: "{rounded.control}" - padding: "10px 12px" ---- +# Ease Health — Style Reference +> Botanical greenhouse on cream paper -# Design System: LabPréstamos +**Theme:** light -## Overview +Ease Health uses a clinical-botanical language: a warm cream canvas layered with soft sage, keylime, and slate-blue panels that feel like a greenhouse rendered on paper. Typography carries the entire personality — weight 300 serif headlines (Faire Octave) paired against a humanist sans (Suisse Intl) create a hushed, editorial authority unusual for healthtech. A single deep forest green (#0f3e17) anchors every action and heading, reading like ink on watercolor. Surfaces are flat and shadowless; depth comes from layered tinted panels and generous padding, not elevation. Components are rounded (~14px) and pill-shaped for tags, keeping the whole system soft and approachable without losing clinical seriousness. -**Creative North Star: "The Equipment Tag on a Terminal Readout"** +## Tokens — Colors -LabPréstamos runs the *mechanics* of a fully pinned external brief (MotherDuck's crayon-terminal-on-cream neobrutalism) — a warm cream canvas, monospace type standing in for a terminal readout, hard 2px corners, and a flat charcoal-offset shadow that never blurs — while carrying UABC's own institutional green and gold as its identity colors instead of the source brief's blue and orange. The first pass at this system used the source's literal palette wholesale; that was corrected once the user flagged it — adopting a design *language* is not the same as adopting someone else's brand colors, and UABC's green/gold predate this redesign and outrank it. What replaces MotherDuck's duck mascot is the product's own mark: a loan tag with a punch-hole, echoing the paper ticket this system replaced. +| Name | Value | Token | Role | +|------|-------|-------|------| +| Forest Ink | `#0f3e17` | `--color-forest-ink` | Primary action buttons, headings, links, icon strokes — deep botanical green reads as ink, the only saturated dark in the system | +| Sage Mist | `#b1dbb8` | `--color-sage-mist` | Mid-tone card backgrounds and decorative washes, panel-level surfaces | +| Keylime Wash | `#e1f4df` | `--color-keylime-wash` | Hero panel background, light card surfaces — the dominant tinted canvas tone | +| Mint Veil | `#cfe7d3` | `--color-mint-veil` | Accent card surfaces, soft section dividers between sage and keylime layers | +| Slate Hush | `#b6ced5` | `--color-slate-hush` | Cool counter-balance panel for product preview and feature blocks — breaks the green monotony with desaturated blue-gray | +| Cream Paper | `#fffefc` | `--color-cream-paper` | Page background, badge backgrounds, button text — warm off-white that softens every green | +| Charcoal | `#222222` | `--color-charcoal` | Navigation text and minor UI strokes — restrained secondary ink | +| Border Mist | `#efeeeb` | `--color-border-mist` | Hairline dividers and subtle borders throughout the layout | +| Forest Shadow | `#0c2f10` | `--color-forest-shadow` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color | -Depth here is binary, not a hierarchy: an element either sits flat on the page (bordered, no shadow — tables, list rows, inputs, the nav) or it's a discrete raised object that "presses" into its own shadow on hover (buttons, standalone cards, modals, the login card). There is no soft, no blur, no ambient glow anywhere in the system — every visual weight decision reads as a hard yes/no. +## Tokens — Typography -Color plays a stricter role here than in the source brief. Verde Institucional is reserved for actionable, filled controls — never for status. A teal (Mint Sketch, from the source brief's decorative rainbow set) is fixed as the system's "positive/available" status color, kept distinct from the primary action color because an operational tool needs that distinction and a marketing site never did. Coral Sketch is fixed as the sole danger color, with a separately darkened text variant (`--color-danger-text`, `#a83224`) for body copy, because the coral fill fails AA contrast on white at normal text weight — the fill stays light and loud, the text goes dark and readable. Because Verde Institucional is a dark, saturated green (unlike the source brief's light Sky Crayon), it is the one fill in the system that takes white text rather than charcoal — see the Text-on-Fill Rule below. +### Faire Octave — Display serif for all section headings and hero copy · `--font-faire-octave` +- **Substitute:** Cormorant Garamond, Playfair Display +- **Weights:** 300 +- **Sizes:** 40px, 56px, 74px +- **Line height:** 1.05–1.35 +- **Letter spacing:** -0.01em at 40px, -0.03em at 56–74px +- **Role:** Display serif for all section headings and hero copy -**Key Characteristics:** -- Cream page canvas, white card surfaces, charcoal (`#383838`, never pure black) as the universal line and border color -- Every corner is 2px — buttons, cards, inputs, dialogs, badges, the brand mark's own chip. No pills, no circles, no `rounded-full` anywhere in the system -- One shadow, one behavior: `-6px 6px 0 0 var(--color-ink)`, hard-edged, zero blur, on every button, standalone card, toast, and modal — and it flattens into the element on hover/focus (`translate(-6px, 6px)`) -- JetBrains Mono Variable everywhere, 0.02em tracking, uppercase treatment on nav labels, button labels, section labels, and headlines -- UABC Verde Institucional carries every filled action (white text); UABC Dorado carries the secondary action and a handful of accents (charcoal text) -- Status pills and count badges are tinted or solid fills with a matching-color border — text stays whichever of charcoal/white actually clears contrast against that fill, never picked by habit -- Dense, repeated surfaces (tables, list-item cards, form inputs) stay flat and bordered; only discrete, single-instance elements carry the shadow +### Suisse Intl — Body, navigation, UI labels, buttons, captions — humanist sans at whisper weight for feature lists and normal weight for copy · `--font-suisse-intl` +- **Substitute:** Inter, Söhne, Helvetica Neue +- **Weights:** 300, 400, 600 +- **Sizes:** 10px, 11px, 12px, 14px, 18px, 23px, 28px, 56px +- **Line height:** 1.00–1.61 +- **Letter spacing:** 0.08em uppercase at 11px/600 (eyebrow labels); natural tracking otherwise +- **Role:** Body, navigation, UI labels, buttons, captions — humanist sans at whisper weight for feature lists and normal weight for copy -## Colors +### Type Scale -The shape/shadow/type system is inherited from the pinned MotherDuck brief; the color *values* are UABC's own institutional palette, carried into that system's roles. +| Role | Size | Line Height | Letter Spacing | Token | +|------|------|-------------|----------------|-------| +| caption | 10px | 1.61 | — | `--text-caption` | +| body | 14px | 1.5 | — | `--text-body` | +| subheading | 18px | 1.3 | — | `--text-subheading` | +| heading-sm | 23px | 1.5 | — | `--text-heading-sm` | +| heading | 40px | 1.35 | -0.4px | `--text-heading` | +| heading-lg | 56px | 1.2 | -1.68px | `--text-heading-lg` | +| display | 74px | 1.05 | -2.22px | `--text-display` | -### Primary -- **Verde Institucional** (`#00723F`): the system's primary filled-action color — unchanged from the project's pre-redesign identity. Primary buttons, active nav state, focused/selected chips, "Solicitar"/"Aprobar"/"Filtrar"/"Continuar con Google," the brand mark's chip fill. Dark enough that it always pairs with **white** text/icons, not charcoal — the one fill in the system where that's true. +## Tokens — Spacing & Shapes -### Secondary -- **Dorado UABC** (`#DD971A`): the institutional gold, carried over unchanged. Secondary buttons ("Exportar CSV," "Marcar devuelto"), "Mantenimiento" status tint, the "En préstamo" KPI tone. Light enough to pair with charcoal text (passes AA; white on gold does not). +**Density:** comfortable -### Neutral -- **Cream Paper** (`#f4efea`): the page canvas — every screen's base layer. -- **Frost White** (`#ffffff`): card, dialog, sidebar, and nav surfaces — the raised layer on cream. -- **Chalk Gray** (`#f8f8f7`): hover wash on flat (non-shadowed) interactive rows, and the neutral badge fill for "Baja"/inactive states. -- **Charcoal Ink** (`#383838`): the universal line — every border, most default text, the shadow color itself. Never pure black. -- **Pencil Gray** (`#a1a1a1`): secondary/muted text (labels under headings, metadata, roles) — a real token, not an opacity trick. +### Spacing Scale -### Status colors (extension beyond the source brief) -- **Mint Sketch → Positive** (`#38c1b0`): "disponible," "aprobado," "devuelto" status. Pulled out of the source brief's decorative rainbow-button palette because the operational tool needs a status color distinct from the primary action color; the source brief, built for a marketing site, never had this problem. -- **Coral Sketch → Danger** (`#f38e84` fill / `#a83224` text): "rechazado," "vencido," destructive actions. Split into two values because the fill color (used for badge backgrounds, borders, button fills) is deliberately light and loud, while body text needs the darker `-text` variant to clear 4.5:1 contrast on white. +| Name | Value | Token | +|------|-------|-------| +| 4 | 4px | `--spacing-4` | +| 7 | 7px | `--spacing-7` | +| 9 | 9px | `--spacing-9` | +| 11 | 11px | `--spacing-11` | +| 14 | 14px | `--spacing-14` | +| 18 | 18px | `--spacing-18` | +| 21 | 21px | `--spacing-21` | +| 28 | 28px | `--spacing-28` | +| 35 | 35px | `--spacing-35` | +| 42 | 42px | `--spacing-42` | +| 49 | 49px | `--spacing-49` | +| 56 | 56px | `--spacing-56` | +| 70 | 70px | `--spacing-70` | +| 76 | 76px | `--spacing-76` | +| 99 | 99px | `--spacing-99` | +| 156 | 156px | `--spacing-156` | -### Named Rules -**The Text-on-Fill Rule.** Text and icon color on any filled surface is whichever of Charcoal Ink or white actually clears AA contrast against that specific fill — never a blanket choice. In practice: white on Verde Institucional (dark), Charcoal Ink on everything else (Dorado, the status tints, the danger fill), because that's what the numbers say for each color. Never pick by habit; check the fill. +### Border Radius -**The One Shadow Rule.** `-6px 6px 0 0 var(--color-ink)` is the only shadow value in the system. It never blurs, never softens, never gets a second variant for "subtle" elevation — an element either has this exact shadow or it has none. +| Element | Value | +|---------|-------| +| nav | 7px | +| cards | 14px | +| badges | 999px | +| buttons | 14px | +| sections | 9999px | -## Typography +### Layout -**Body & Display Font:** JetBrains Mono Variable (weights 100–800 available; the system uses 400/500/600), with `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` fallback. Chosen as the pinned brief's own named substitute for the licensed Aeonik Mono. - -**Character:** One monospace face for the entire system, 0.02em letter-spacing throughout to open up the mechanical density of mono at small sizes. Uppercase tracking is reserved for structural labels (nav items, button text, form labels, section headers, the login headline) — body copy, names, and descriptions stay in normal case so real data (student names, material names) stays legible rather than shouting. - -### Hierarchy -- **Headline** (600, 1.5rem → 1.875rem at `md:`, uppercase): page `

`s, the login screen's title. -- **Title** (600, 1.125rem): section and card headers, dialog titles — not uppercased by default, uppercased where it doubles as a nav/label element. -- **Body** (400, 0.875rem, 1.5 line-height): the default text size — table cells, descriptions, list content. -- **Label** (500, 0.75rem, 0.05em tracking, uppercase): every form field label (`.label`), nav items, badge text. -- **Caption** (400, 0.75rem, Pencil Gray): metadata — matrícula, inventory numbers, timestamps. - -### Named Rules -**The Tabular Numbers Rule.** Any figure representing a count — cantidad, stock, KPI values, dates — carries `font-variant-numeric: tabular-nums`, inherited unchanged from the prior system. JetBrains Mono's own distinctive dotted-zero glyph reinforces the "terminal readout" reading at large KPI sizes. - -## Layout - -Unchanged from the incumbent structural system — the redesign is a full re-skin, not a re-architecture. `md:` (768px) remains the single hard breakpoint between mobile and desktop. Desktop keeps the fixed 256px collapsible sidebar; mobile keeps a bottom navigation bar, now a flush, flat, full-width strip (not a floating pill) with a 2px charcoal top border and no shadow — matching the source brief's own flat, unshadowed nav-button treatment. Content still ships both a `md:block` table and a `md:hidden` card-list rendering for every data-dense admin view. - -## Elevation & Depth - -Binary, not graduated. An element is either **flat** (a 1.5–2px charcoal border, no shadow — the default for anything dense or repeated: tables, list-item cards, inputs, the nav) or **raised** (2px charcoal border plus the one hard shadow — reserved for discrete, single-instance, actionable surfaces: buttons, the login card, modals/dialogs, toasts, KPI tiles, and clickable dashboard tiles). There is no third state, no blur, no soft ambient shadow anywhere in the system. - -### Shadow Vocabulary -- **Hard** (`box-shadow: -6px 6px 0 0 var(--color-ink)`, token `--shadow-hard`): every raised element at rest. -- **Hard, pressed** (`transform: translate(-6px, 6px)`, shadow reads as `0 0 0 0`): the same element on hover/focus — it visually "presses" into its own shadow. Active state presses halfway (`--shadow-hard-sm`, `-3px 3px`) for a two-stage press. - -### Named Rules -**The Press Rule.** Every raised element's hover state is the same transform: translate exactly the shadow's own offset, so the shadow disappears under the element. No brightness filter, no color darken — motion is the only hover signal on raised elements. - -## Shapes - -One radius for the entire system: **2px** (`--radius-card`, and Tailwind's `rounded-lg`/`rounded-2xl`/`rounded-full` are globally overridden to resolve to it). Buttons, cards, inputs, dialogs, badges, the brand mark's chip — everything is a near-square corner. There is no pill, no circle, no soft/emphasis radius tier; the prior system's `rounded-full` nav dock and status pills were converted wholesale. Borders are always 1.5–2px solid Charcoal Ink (never a tinted or literal-gray border) — the system has no hairline-border convention. +- **Page max-width:** 1200px +- **Section gap:** 64-96px +- **Card padding:** 28-42px +- **Element gap:** 14-21px ## Components -### Buttons -- **Shape:** 2px radius, 2px Charcoal Ink border, 44px minimum height, `touch-action: manipulation`. -- **Primary:** Verde Institucional fill, **white** text, hard shadow. The default call to action. -- **Secondary:** Dorado UABC fill, Charcoal Ink text, hard shadow. "Exportar CSV," "Marcar devuelto." -- **Ghost:** transparent fill, Charcoal Ink text, a lighter border (35% ink-mix), no shadow. Used for "Cancelar"/"Limpiar." -- **Hover / Focus / Active:** see Elevation → The Press Rule. +### Primary Forest Button +**Role:** Filled CTA for demos, explores, and form submits -### Badges / Status Pills -- **Style:** 2px radius, 1.5px border in the semantic color, uppercase text at 0.03em tracking. -- **The Tinted-Fill-Bordered Rule.** Background = the semantic color mixed 18–25% into white; border = the semantic color at full strength; text = Charcoal Ink (the tinted backgrounds are always light enough for it). Count badges (the "N pendientes" chip beside a heading) use a **solid** semantic fill instead of a tint, bordered in Charcoal Ink — text on those follows the Text-on-Fill Rule (white on a solid Verde Institucional count badge, Charcoal Ink on a solid Positive/mint one). -- **Semantic mapping:** disponible / aprobado / devuelto → Positive (mint). mantenimiento / en préstamo (KPI) → Secondary (Dorado). rechazado / vencido → Danger (coral). baja / neutral counts → Chalk Gray with a graphite border. +Background #0f3e17, text #fffefc, 14px border-radius, padding 14px 21px, Suisse Intl 14px/400. Arrow icon in white at trailing edge. Hover transitions to #0c2f10. -### Cards / Containers -- **Corner:** 2px. -- **Background:** Frost White, always. -- **Flat variant** (`.card-flat`, `.card`): 1.5–2px Charcoal Ink border, no shadow. Used for tables, list rows, dense repeated content. -- **Raised variant** (`.card-raised`, `.card-link`): adds the hard shadow. Used for the login card, clickable dashboard tiles, KPI tiles — anything discrete and singular rather than part of a repeated list. -- **Internal Padding:** `p-6` standard, `p-4` for dense KPI tiles, `p-0` when the card wraps a table (the table supplies its own cell padding). +### Large Forest Button +**Role:** Hero-scale CTA with generous breathing room -### Inputs / Fields -- **Style:** Frost White background, 2px Charcoal Ink border, 2px radius, 44px minimum height. No shadow — inputs are always flat, matching the source brief's own Text Input spec. -- **Focus:** border color shifts to Verde Institucional; no glow, no ring. -- **Label:** `.label` — uppercase, 0.75rem, 0.05em tracking, Charcoal Ink. -- **Error:** inline `role="alert"` text in Danger-text below the field. +Same Forest Ink fill and white text, but padding scales to 42px all sides for hero placement. Rounded 14px corners. Used sparingly for maximum-weight calls to action. -### Navigation -- **Desktop sidebar:** Frost White panel (a deliberate departure from the pre-redesign solid-green sidebar, matching the source brief's flat white nav-bar structure — the *color* identity moved to the active-state chip instead of the whole panel), 2px Charcoal Ink right border. Active item = solid Verde Institucional chip with white text and a 2px Charcoal border; inactive = transparent with a Chalk Gray hover wash. Uppercase labels throughout. Collapsible, same mechanism as before (localStorage + blocking inline script, no flash). -- **Mobile nav:** a flush, full-width bottom bar (not a floating pill), Frost White, 2px Charcoal top border, no shadow — flat, matching the source brief's "nav buttons are flat" rule. Active icon = a 2px-radius Verde Institucional square with white icon and Charcoal border. -- **Brand mark chip:** a Verde Institucional fill with a white glyph and a 2px Charcoal border, used identically on the sidebar header, mobile header, login screen, and 404 page. The 403 page uses the same chip shape in the Danger color instead. +### Pill Badge / Tag +**Role:** Category labels, CRM/EHR/RCM module tags, status indicators -### Toasts -- Frost White, 2px Charcoal Ink border, hard shadow, 2px radius (down from the prior system's blurred glass `rounded-2xl` treatment — MotherDuck bans blur and ambient shadow outright). -- A 2px-bordered color chip (36px) leads each toast: Positive for success, Danger for error, Secondary (Dorado) for info — Charcoal Ink stroke icon (all three chip colors clear contrast with charcoal). -- Entrance: 260ms translate+fade, same timing as before; still respects `prefers-reduced-motion`; still survives `location.reload()` via the sessionStorage queue. +Background #fffefc, text Forest Ink #0f3e17, 999px border-radius (full pill), padding 9px 14px, Suisse Intl 14px/400. Inverted cream-on-green relationship makes tags feel like paper labels. -### Modals -- Native ``, 2px radius, 2px Charcoal Ink border, hard shadow, `backdrop:bg-black/40`. The prior system's borderless, shadowless dialog surface gained both a border and the system's one shadow — modals are a "raised" surface by the binary elevation rule. -- Close controls are always a drawn SVG X (never a `×` character), matching the rest of the icon system. +### Sage Feature Card +**Role:** Heavier-tinted content panel for feature highlights + +Background Sage Mist #b1dbb8, 14px border-radius, 42px padding all sides, no shadow. Hosts illustration or product preview content. Flat surface — depth comes from color not elevation. + +### Keylime Soft Card +**Role:** Light-tinted content panel for secondary features + +Background Keylime Wash #e1f4df, 14px border-radius, 28px padding, no shadow. Tighter padding than sage variant for compact content blocks. + +### Slate Product Panel +**Role:** Cool-toned container for product UI screenshots and demos + +Background Slate Hush #b6ced5, 14px border-radius, 42px padding, no shadow. Provides cool visual counterpoint to warm green panels — the only non-green tinted surface. + +### Product Preview Card (Inner) +**Role:** White floating card within Slate Product Panel + +Background Cream Paper #fffefc, 14px border-radius, 28px padding, no border or shadow. Represents a product screen mockup (CRM, EHR, RCM). Sits on the Slate panel like a printed screenshot. + +### Navigation Bar +**Role:** Top-level site navigation + +Transparent over cream canvas, text Charcoal #222222, Suisse Intl 14px/400, 7px radius on interactive items. 'Book a Demo' CTA pill on the right uses Forest Ink fill. + +### Eyebrow Label +**Role:** Section category tag above headings + +Suisse Intl 11px/600, letter-spacing 0.08em, uppercase, Forest Ink color. Tiny typographic marker that labels each section's theme (e.g. 'QUICK ANSWER'). + +### FAQ Row +**Role:** Two-column question/answer layout + +Left column: Faire Octave 40px/300 in Forest Ink for question. Right column: Suisse Intl 14px/400 in Charcoal for answer. 1px Border Mist divider between rows. + +### Investor Logo Strip +**Role:** Social proof row of VC logos + +Single horizontal row, monochrome treatment in Charcoal #222222 on cream canvas, generous vertical padding (42px+). No decorative borders — relies on whitespace for rhythm. ## Do's and Don'ts -### Do: -- **Do** use the exact shadow `-6px 6px 0 0 var(--color-ink)` (`--shadow-hard`) for every raised element, and the exact press transform `translate(-6px, 6px)` on its hover/focus state. -- **Do** keep every radius at 2px — buttons, cards, inputs, dialogs, badges, chips. No exceptions, no emphasis tier. -- **Do** check contrast per fill before choosing text color (Text-on-Fill Rule) — don't assume charcoal always works. -- **Do** keep Verde Institucional for actionable, filled controls; use Positive (mint), Danger (coral), or Secondary (Dorado) for status and non-primary accents. -- **Do** keep dense/repeated surfaces (tables, list cards, inputs, nav) flat and bordered; reserve the hard shadow for discrete, singular, actionable surfaces. -- **Do** draw every icon as an SVG in the shared heroicons-outline language (or the `BrandMark` glyph for identity) — never a unicode glyph or emoji standing in for one. -- **Do** apply `font-variant-numeric: tabular-nums` to every numeric quantity, stock figure, or date. -- **Do** ship both a `md:block` table and a `md:hidden` card-list rendering for every data-dense admin view. +### Do +- Use Forest Ink (#0f3e17) for every CTA, heading, and primary link — it is the only saturated dark and must remain singular +- Set all display headings in Faire Octave weight 300 with tight tracking (-0.03em at 56–74px) — never bold the serif +- Pair serif questions with sans-serif answers in FAQ and feature blocks to create typographic contrast +- Layer surfaces using cream → keylime → mint → sage → slate in order to create depth without shadows +- Use 14px border-radius on all cards and buttons, 999px on all badges and tags — consistency is non-negotiable +- Apply 0.08em letter-spacing with uppercase and 600 weight for eyebrow labels only — nowhere else +- Keep the Slate Hush panel as the exclusive home for product screenshots — it provides the cool counterbalance to warm green panels -### Don't: -- **Don't** use blur, glass, or a soft ambient shadow anywhere — every shadow is the one hard-edged offset value, or there is no shadow. -- **Don't** introduce a radius above 2px, or a pill/circle shape, anywhere in the UI. -- **Don't** adopt a borrowed style system's literal brand colors — take its shape/shadow/type mechanics, keep the project's own identity colors in them. This system exists because that line was crossed once and had to be corrected. -- **Don't** reuse Verde Institucional for status pills — status has its own colors (Positive/Danger/Secondary); Verde Institucional means "you can act on this." -- **Don't** introduce a second typeface. JetBrains Mono Variable carries every role through weight, size, and case. -- **Don't** stand a unicode glyph in for an icon. +### Don't +- Never add box-shadow to cards — the system communicates elevation through tinted layers only +- Don't use Forest Ink as a background tint — it is too dark for surface washes; reserve for text and action fills only +- Avoid mixing multiple heading weights — everything is weight 300 in Faire Octave; bold would break the hushed editorial tone +- Don't place colored borders on cards — depth comes from fill contrast, not strokes +- Never use more than one serif at a time — Faire Octave owns display, Suisse Intl owns everything else +- Don't introduce new accent hues — the palette is strictly botanical greens + slate; any other color breaks the greenhouse metaphor +- Avoid tight padding under 21px on cards — generous 28–42px padding is essential to the soft, breathing-room aesthetic +- Don't use the sage or keylime tones for text — they are surface colors only and fail contrast for copy + +## Surfaces + +| Level | Name | Value | Purpose | +|-------|------|-------|---------| +| 0 | Cream Paper | `#fffefc` | Base page background — warm off-white dominates the canvas | +| 1 | Keylime Wash | `#e1f4df` | Primary tinted panel — hero left column, light feature blocks | +| 2 | Mint Veil | `#cfe7d3` | Mid-tone section surface between keylime and sage | +| 3 | Sage Mist | `#b1dbb8` | Heavier tinted panels — hero accents, feature highlights | +| 4 | Slate Hush | `#b6ced5` | Cool counter-panel for product showcases and visual contrast | + +## Elevation + +The system deliberately avoids shadows entirely — boxShadow=none on all card variants. Depth and hierarchy are communicated through layered tinted surfaces (cream → keylime → sage → slate) rather than elevation. This keeps the interface feeling like watercolor paper rather than glassmorphic UI, matching the botanical-greenhouse metaphor. + +## Imagery + +Imagery is product-first and UI-native: floating product screenshots (CRM cards, EHR patient views, RCM revenue graphs) rendered as crisp white cards on Slate Hush panels. No lifestyle photography, no stock imagery. Iconography is minimal stroke-based, rendered in Forest Ink. Illustrations, where present, use the same sage/keylime palette to stay on-system. The visual density is text-dominant with product mockups serving as proof, not decoration. + +## Layout + +Max-width 1200px centered container with 64–96px vertical section gaps. Hero is a two-column split: left panel tinted Keylime Wash with serif headline + body + CTA; right panel tinted Slate Hush housing three product preview cards (CRM, EHR, RCM) in a row. Below the hero, sections alternate between cream canvas and tinted panels in a botanical rhythm. FAQ uses a two-column text grid (serif question left, sans answer right). The investor logo strip is a single full-width row on cream. Navigation is minimal — left-aligned logo, centered text links, right-aligned CTA pill — no sticky behavior or mega-menu. The overall page rhythm is generous and editorial rather than dense. + +## Agent Prompt Guide + +**Quick Color Reference** +- Text/Heading: #0f3e17 (Forest Ink) +- Page background: #fffefc (Cream Paper) +- Hero/light panel: #e1f4df (Keylime Wash) +- Feature panel: #b1dbb8 (Sage Mist) +- Product showcase panel: #b6ced5 (Slate Hush) +- Border: #efeeeb +- primary action: #0f3e17 (filled action) + +**Example Component Prompts** +1. Create a Primary Action Button: #0f3e17 background, #fffefc text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. + +2. **Feature card**: Sage Mist #b1dbb8 background, 14px border-radius, 42px padding all sides, no shadow. Eyebrow label in Suisse Intl 11px/600 uppercase with 0.08em tracking, Forest Ink color. Heading in Faire Octave 40px/300, Forest Ink. Body in Suisse Intl 14px/400, Charcoal #222222. + +3. **Pill badge**: Background Cream Paper #fffefc, text Forest Ink #0f3e17, 999px border-radius, padding 9px 14px, Suisse Intl 14px/400. Place above section headings as a category tag. + +4. **FAQ row**: Two-column grid. Left: Faire Octave 40px/300 question in Forest Ink. Right: Suisse Intl 14px/400 answer in Charcoal #222222. Separator: 1px solid Border Mist #efeeeb below each row. + + +## Type Pairing Philosophy + +The serif/sans split is the system's defining typographic move. Faire Octave (or Cormorant Garamond as substitute) handles ALL headings at weight 300 — never bold. Suisse Intl (or Inter) handles ALL UI and body text. The whisper-weight serif creates editorial calm unusual in healthtech, where most competitors use bold geometric sans headlines. Tracking tightens as size grows: -0.01em at 40px, -0.03em at 56–74px. Body text uses natural tracking. The only uppercase treatment is 11px/600 eyebrows at 0.08em — these are navigational markers, not decorative caps. + +## Similar Brands + +- **Headspace** — Same botanical palette approach with sage greens and soft tinted panels, plus serif-leaning editorial calm and generous breathing room +- **Calm** — Nature-inspired muted greens against cream, generous whitespace, flat surfaces without shadows, and a serene clinical-adjacent tone +- **Mercury** — Deep single-color ink (#0f3e17 forest vs Mercury's near-black) against a warm off-white canvas with editorial serif display type at weight 300 +- **Spring Health** — Behavioral health branding with green-dominant palette, soft panel layering, and humanist sans body type paired with serif accents +- **Grow Therapy** — Healthcare SaaS using sage and mint greens against cream, with rounded components and a botanical rather than clinical visual mood + +## Quick Start + +### CSS Custom Properties + +```css +:root { + /* Colors */ + --color-forest-ink: #0f3e17; + --color-sage-mist: #b1dbb8; + --color-keylime-wash: #e1f4df; + --color-mint-veil: #cfe7d3; + --color-slate-hush: #b6ced5; + --color-cream-paper: #fffefc; + --color-charcoal: #222222; + --color-border-mist: #efeeeb; + --color-forest-shadow: #0c2f10; + + /* Typography — Font Families */ + --font-faire-octave: 'Faire Octave', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + /* Typography — Scale */ + --text-caption: 10px; + --leading-caption: 1.61; + --text-body: 14px; + --leading-body: 1.5; + --text-subheading: 18px; + --leading-subheading: 1.3; + --text-heading-sm: 23px; + --leading-heading-sm: 1.5; + --text-heading: 40px; + --leading-heading: 1.35; + --tracking-heading: -0.4px; + --text-heading-lg: 56px; + --leading-heading-lg: 1.2; + --tracking-heading-lg: -1.68px; + --text-display: 74px; + --leading-display: 1.05; + --tracking-display: -2.22px; + + /* Typography — Weights */ + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-semibold: 600; + + /* Spacing */ + --spacing-4: 4px; + --spacing-7: 7px; + --spacing-9: 9px; + --spacing-11: 11px; + --spacing-14: 14px; + --spacing-18: 18px; + --spacing-21: 21px; + --spacing-28: 28px; + --spacing-35: 35px; + --spacing-42: 42px; + --spacing-49: 49px; + --spacing-56: 56px; + --spacing-70: 70px; + --spacing-76: 76px; + --spacing-99: 99px; + --spacing-156: 156px; + + /* Layout */ + --page-max-width: 1200px; + --section-gap: 64-96px; + --card-padding: 28-42px; + --element-gap: 14-21px; + + /* Border Radius */ + --radius-lg: 7.04px; + --radius-xl: 14.08px; + --radius-full: 999px; + --radius-full-2: 9999px; + + /* Named Radii */ + --radius-nav: 7px; + --radius-cards: 14px; + --radius-badges: 999px; + --radius-buttons: 14px; + --radius-sections: 9999px; + + /* Surfaces */ + --surface-cream-paper: #fffefc; + --surface-keylime-wash: #e1f4df; + --surface-mint-veil: #cfe7d3; + --surface-sage-mist: #b1dbb8; + --surface-slate-hush: #b6ced5; +} +``` + +### Tailwind v4 + +```css +@theme { + /* Colors */ + --color-forest-ink: #0f3e17; + --color-sage-mist: #b1dbb8; + --color-keylime-wash: #e1f4df; + --color-mint-veil: #cfe7d3; + --color-slate-hush: #b6ced5; + --color-cream-paper: #fffefc; + --color-charcoal: #222222; + --color-border-mist: #efeeeb; + --color-forest-shadow: #0c2f10; + + /* Typography */ + --font-faire-octave: 'Faire Octave', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + /* Typography — Scale */ + --text-caption: 10px; + --leading-caption: 1.61; + --text-body: 14px; + --leading-body: 1.5; + --text-subheading: 18px; + --leading-subheading: 1.3; + --text-heading-sm: 23px; + --leading-heading-sm: 1.5; + --text-heading: 40px; + --leading-heading: 1.35; + --tracking-heading: -0.4px; + --text-heading-lg: 56px; + --leading-heading-lg: 1.2; + --tracking-heading-lg: -1.68px; + --text-display: 74px; + --leading-display: 1.05; + --tracking-display: -2.22px; + + /* Spacing */ + --spacing-4: 4px; + --spacing-7: 7px; + --spacing-9: 9px; + --spacing-11: 11px; + --spacing-14: 14px; + --spacing-18: 18px; + --spacing-21: 21px; + --spacing-28: 28px; + --spacing-35: 35px; + --spacing-42: 42px; + --spacing-49: 49px; + --spacing-56: 56px; + --spacing-70: 70px; + --spacing-76: 76px; + --spacing-99: 99px; + --spacing-156: 156px; + + /* Border Radius */ + --radius-lg: 7.04px; + --radius-xl: 14.08px; + --radius-full: 999px; + --radius-full-2: 9999px; +} +```