Lovable

Light-first warm canvas — #fafafa primary background and #fcfbf8 surface paired with a near-black #030303 foreground doing the dominant reading work (#030303 measured at 656 surface occurrences). Secondary text descends through warm grays: #2e2e2d → #636363 → #9b9b9b for progressive de-emphasis. Semantic color is rationed to four roles — accent blue #1f55f1, special/AI violet #8e48ff, destructive #e12429, positive #338500 — each shipped with a matching ~16% translucent tint (e.g. #1f55f129) for fills. The brand signature is a multi-stop 90deg rainbow gradient (blue→pink→red→orange) used only as a thin accent stroke.

• Near-black #030303 text on a warm #fafafa/#fcfbf8 canvas — the dominant reading layer (#030303 measured at 656 occurrences), full ~19:1 contrast for engineering credibility
• Warm gray descender #2e2e2d / #636363 / #9b9b9b for secondary copy, captions, metadata, and de-emphasized labels
• Accent blue #1f55f1 reserved for primary action and links; its ~16% translucent tint #1f55f129 for soft hover fills and focus glows
• Special violet #8e48ff for AI/generative moments; destructive #e12429 for danger; positive #338500 for success — each with a matching translucent tint, never decorative
• Rainbow signature gradient (blue→pink→red→orange) appears only as a thin accent stroke or border highlight — under ~3% of total surface area, never a fill or hero background
• Hairline borders carry structure at single-digit alpha (#cecece66 / #c9c9c966 tier) — the page is delimited by 1px rims, not by heavy color blocks

linear-gradient(90deg, rgb(28, 28, 28) 0px, rgb(28, 28, 28) 33.33%, rgb(130, 188, 255) 40%, rgb(36, 131, 255) 45%, rgb(255, 102, 244) 50%, rgb(255, 48, 41) 55%, rgb(254, 123, 2) 60%, rgba(0, 0, 0, 0) 66.67%, rgba(0, 0, 0, 0))
linear-gradient(to bottom, transparent, #0000000a)
linear-gradient(to bottom, #00000005, transparent)

• Primary family: Camera Plain Variable (self-hosted, preloaded from /fonts/CameraPlainVariable-c48bd243.woff2, font-display: block). Monospace: Roboto Mono Variable (font-display: swap) for code, tabular numerics, and kbd.
• Weight ladder: 400 (reading body + UI) / 480 (medium emphasis, small labels, display-4) / 600 (headings + hero). The 480 mid-step is the signature — do not flatten it to 500.
• Display scale: 60px hero at weight 600 with line-height 66px and -1.5px tracking; 48px heading at line-height 48px; 36px heading at weight 600 with line-height 39.6px and -0.9px tracking. Negative tracking only on 36px+ display sizes.
• Body: 16px / line-height 24px / weight 400 / letter-spacing normal. Secondary UI text 14-15px at line-height 21-24px. No negative tracking below 36px — body and UI sit at normal spacing.
• Headings carry tight unitless-feeling line-heights (1.0–1.1 at 48–60px); body and UI relax to 1.5 (24px on 16px) for readability on the light canvas.
• Tabular numerals on aligned columns via `font-variant-numeric: tabular-nums`; Roboto Mono Variable handles inline code and kbd automatically.
• Single editorial display family only — no second sans for 'softening'. The expressive range lives in the weight ladder, not in a font collection. Italic (Camera Plain Variable Regular Italic) reserved for quoted editorial content.

• 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 40 / 48 px — the 6px and 12px steps dominate (measured 124 and 54 occurrences) so favor them for default gaps and gutters.
• Container max-widths: 576 (sm / narrow content) / 768 (md / prose) / 1536 (lg / full sections) px. Bounded layout — content never runs edge-to-edge text.
• Flex/grid gutters draw from 4 / 6 / 8 / 16 px for component-level spacing; 80px and 144px for major section separation (measured large-gap rails).
• Card padding: 20-24px on desktop, 12-16px on mobile — always pick from the scale, no magic numbers.
• Section vertical rhythm relies on the 40 / 48 px steps plus the large 80 / 144 px rails for breathing room between major page regions — the generous whitespace is what keeps the light canvas calm.

• Primary elevation is the layered inset 'surface' shadow ladder, not a soft drop shadow — a 1px white inner edge plus a translucent slate ring give every panel a crisp manufactured rim on the light canvas.
• Surface shadow scales xxs → xs → sm → md → lg → xl by appending progressively larger, near-invisible (#0000000a ≈ 4% alpha) outer blur layers — depth grows without the shadow ever looking heavy.
• Buttons use a dedicated inset shadow per semantic role (neutral / accent / destructive / special / positive) combining a top white highlight, a bottom dark line, and a 1px colored rim matching the variant.
• Inputs use an inset top-light shadow (`inset 0px 2px 2px -1px #0000000a, inset 0px 4px 4px -2px #00000005`) plus a 1px bottom white edge — a recessed, pressed-in feel.
• Focus state adds a colored 1px rim at the accent — never an outer glow bloom.

• Radius scale: 8 / 12 / 16 / 24 / 28 px. The 12px step dominates (measured 16 occurrences) — it's the default for cards and medium surfaces.
• Buttons and inputs default to 8px; cards 12px; larger feature panels 16px; hero/marketing surfaces 24-28px for a soft, approachable feel.
• Icons are stroke-based at 1.5-2px weight; no filled or duotone variants — the linear icon language matches the hairline-border structure.
• Tap targets minimum 40×40px on pointer, 44×44px on touch — per the observed pointer/coarse media queries.

• button-primary

  backgroundColor

  #1f55f1

  textColor

  #fafafa

  radius

  8px

  padding

  8px 16px

  border

  none

  boxShadow

  inset 0px 1px 0px 0px #00000014, inset 0px 0px 0px 1px #11318c, inset 0px 1px 0px 0px #ffffff29, 0px 2px 2px -1px #091a481f

  fontWeight

  480

  fontSize

  14px

  lineHeight

  21px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-1.5 rounded-[8px] bg-[#1f55f1] px-4 py-2 text-[14px] font-medium leading-[21px] text-[#fafafa] shadow-[inset_0px_1px_0px_0px_#00000014,inset_0px_0px_0px_1px_#11318c,inset_0px_1px_0px_0px_#ffffff29,0px_2px_2px_-1px_#091a481f] transition-colors duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#123ec5] focus-visible:outline-none focus-visible:shadow-[inset_0px_0px_0px_1px_#11318c,0_0_0_2px_#1f55f129]

• button-secondary

  backgroundColor

  #fcfbf8

  textColor

  #030303

  radius

  8px

  padding

  8px 16px

  border

  none

  boxShadow

  inset 0px 1px 0px 0px #fff, inset 0px 0px 0px 1px #00000029, 0px 2px 2px -1px #0000000a

  fontWeight

  480

  fontSize

  14px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-1.5 rounded-[8px] bg-[#fcfbf8] px-4 py-2 text-[14px] font-medium text-[#030303] shadow-[inset_0px_1px_0px_0px_#fff,inset_0px_0px_0px_1px_#00000029,0px_2px_2px_-1px_#0000000a] transition-[background-color,box-shadow] duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-white hover:shadow-[inset_0px_0px_0px_1px_#77777152,0px_2px_2px_-1px_#0000000a] focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_#1f55f129]

• card-surface

  backgroundColor

  #fcfbf8

  textColor

  #030303

  radius

  12px

  padding

  24px

  border

  none

  boxShadow

  inset 0px 0px 0px 1px #fff, 0px 0px 0px 1px rgba(119, 119, 113, 0.16), 0px 1px 1px 0px #0000000a, 0px 3px 3px -1.5px #0000000a

  Tailwind

  Copy

  rounded-[12px] bg-[#fcfbf8] p-6 text-[#030303] shadow-[inset_0px_0px_0px_1px_#fff,0px_0px_0px_1px_rgba(119,119,113,0.16),0px_1px_1px_0px_#0000000a,0px_3px_3px_-1.5px_#0000000a] transition-shadow duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-[inset_0px_0px_0px_1px_#fff,0px_0px_0px_1px_rgba(119,119,113,0.16),0px_1px_1px_0px_#0000000a,0px_3px_3px_-1.5px_#0000000a,0px_6px_6px_-3px_#0000000a]

• input-field

  backgroundColor

  #fcfbf8

  textColor

  #030303

  radius

  8px

  padding

  8px 12px

  border

  none

  boxShadow

  inset 0px 2px 2px -1px #0000000a, inset 0px 4px 4px -2px #00000005, 0px 1px 0px 0px #fff

  fontWeight

  400

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  w-full rounded-[8px] bg-[#fcfbf8] px-3 py-2 text-[16px] leading-[24px] text-[#030303] shadow-[inset_0px_2px_2px_-1px_#0000000a,inset_0px_4px_4px_-2px_#00000005,0px_1px_0px_0px_#fff] placeholder:text-[#9b9b9b] transition-shadow duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:outline-none focus-visible:shadow-[inset_0px_2px_2px_-1px_#0000000a,0_0_0_2px_#1f55f129,0px_0px_0px_1px_#4279ff66]

• badge-special

  backgroundColor

  #8e48ff29

  textColor

  #713ec8

  radius

  16px

  padding

  2px 8px

  border

  1px solid #a475ff66

  fontWeight

  480

  fontSize

  14px

  lineHeight

  21px

  Tailwind

  Copy

  inline-flex items-center gap-1 rounded-[16px] border border-[#a475ff66] bg-[#8e48ff29] px-2 py-0.5 text-[14px] font-medium leading-[21px] text-[#713ec8]

• link-inline

  color

  #123ec5

  textDecoration

  underline

  textDecorationColor

  #4279ff66

  textDecorationThickness

  1px

  textUnderlineOffset

  2px

  transition

  text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  text-[#123ec5] underline decoration-[#4279ff66] decoration-[1px] underline-offset-2 transition-[text-decoration-color] duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:decoration-[#123ec5] focus-visible:outline-none focus-visible:decoration-[#1f55f1]

• Primary easing: cubic-bezier(0.4, 0, 0.2, 1) — the standard-material ease-in-out, measured on 118 transitions. It anchors essentially every interactive state change.
• Supporting easings: cubic-bezier(0, 0, 0.2, 1) (decelerate, for entrances), cubic-bezier(0.215, 0.61, 0.355, 1) (the single 1.6s ambient animation), and bare `ease` for the 0.5s enter reveal.
• Five durations captured: 0.15s (dominant — 115 occurrences, all state changes), 0.2s (transform), 0.3s (shadow/background), 0.5s (section enter), 1.6s (one ambient background beat). Default to 0.15s; reserve the longer tier for reveals only.
• Framer Motion is the confirmed library (window.MotionIsMounted). Animate opacity and transform together as the signature reveal; lean on the primary cubic-bezier as a constant.
• useReducedMotion / prefers-reduced-motion mandatory — the media query is present in the capture; collapse all animation to opacity-only or disable.
• Spring animations are not in the captured profile — stay on deterministic cubic-bezier curves; springs forbidden.
• No loop animations except explicit loaders.

• Primary CTA is a filled accent-blue button with the layered semantic shadow; secondary actions use the white surface button — the contrast carries the hierarchy, not size.
• Special/AI moments are flagged with the violet (#8e48ff) translucent badge — reserve violet exclusively for generative/AI affordances so the signal stays legible.
• Tooltips reveal on hover + focus using the `--shadow-tooltip` token; dismiss instantly on blur.
• Dropdowns sit at z-index 30, sticky nav at 10, modals at 50, toasts at 9999 — respect the captured z-scale, never invent intermediate layers.
• Form validation: inline below the field on blur; the input's recessed inset shadow shifts to an accent rim on focus and a destructive rim on error.
• Modals for destructive confirmations; the page favors flow-layout reveals over drawer patterns. Never nested modals.
• Loading states: skeleton shimmer for content, inline spinner for buttons — no full-page overlays.

Desktop-first because the marketing surface is authored for wide displays (container reaches 1536px), then reflows down. The same language carries to mobile — no alternate hamburger-revealed architecture. Bounded content rails (576 / 768 px) keep prose readable at every tier, and the warm light canvas plus generous radii translate directly to small screens without a separate mobile identity.

• Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder, confirmed in the capture.
• Container max-widths step 576 → 768 → 1536 px for narrow / prose / full-section content respectively.
• Hide-on-mobile is banned — if a control exists on desktop it must reach mobile via reflow.
• Tap target minimum 44×44 on touch (hover:none + pointer:coarse), 40×40 on pointer (pointer:fine) — both media queries are present in the capture.
• Typography scales down proportionally: hero 60 → 48 → 36, with negative tracking easing toward 0 as sizes shrink (no negative tracking below 36px).

• focus-visible: a 1px accent rim plus the translucent #1f55f129 ring (replaces the default outline). Mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
• Color contrast: #030303 on #fafafa ≈ 19:1 (AAA); secondary #636363 on #fafafa ≈ 5.7:1 (AA). Never drop body text below 4.5:1 — the light canvas demands a near-black foreground.
• ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast and status updates.
• Motion respects prefers-reduced-motion (media query present in capture) — animations reduce to opacity-only or disable.
• Tap targets minimum 44×44 on touch, 40×40 on pointer.
• Screen-reader-only content uses `sr-only`; never `display:none` for meaningful context.
• Form errors announced via aria-describedby on the associated input; never color-only signaling — pair the destructive rim with text.

Framer Motion is confirmed via window.MotionIsMounted — it drives the opacity+transform reveals at 150ms on cubic-bezier(0.4, 0, 0.2, 1). Images are served through a Cloudflare image-resizing CDN (cdn-cgi/image) with srcset width descriptors and f=auto/quality=50; almost everything is loading='lazy' with only the hero pulse.webp background eager. Icons are stroke-based at 1.5-2px weight.

• Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true }}` for the once-only section reveals
• Transitions use `ease: [0.4, 0, 0.2, 1]` and `duration: 0.15` as constants; reserve 0.5 for entrance reveals
• useReducedMotion guard wraps every animation primitive — no exceptions
• Responsive images with explicit `srcset` width descriptors and `sizes`; `priority`/eager only on the LCP background, everything else lazy
• No canvas, no WebGL, no Lottie — static-first, animated-discreet; the rainbow gradient is CSS, not a rendered asset

• Keep the canvas warm and light (#fafafa / #fcfbf8) with a near-black #030303 foreground at full contrast — the light-first choice is the differentiator.
• Reach for the layered inset 'surface' shadow tokens before any soft drop shadow; scale depth by appending faint outer layers, not by blurring.
• Hold semantic color to four roles (accent #1f55f1 / special #8e48ff / destructive #e12429 / positive #338500), each with its ~16% translucent tint for fills.
• Ration the rainbow signature gradient to a thin accent stroke — under ~3% of surface area.
• Use the 480 mid-weight for medium emphasis and small labels — it's the typographic signature between 400 and 600.
• Default interactive transitions to 0.15s on cubic-bezier(0.4, 0, 0.2, 1); pass every page through useReducedMotion before shipping.
• Use `tabular-nums` on aligned numerics and Roboto Mono Variable for inline code and kbd.

• Never render the rainbow gradient as a fill or hero background — it's a rationed stroke; a full-bleed version turns the page into a generic AI-startup template.
• Never substitute a 500 weight for the 480 mid-step — the 400/480/600 ladder is what separates this from default variable-font usage.
• Never soften the foreground to match the gentle canvas — #030303 on #fafafa is deliberate; lowering contrast erases the engineering credibility.
• Never replace the inset surface rim-light shadows with a single soft blur — the crisp 1px lit rim on a light canvas is the elevation signature.
• Never introduce a second display font — one editorial variable family (plus mono for code) is the boundary; expressiveness lives in the weight ladder.
• Never invent durations outside {0.15, 0.2, 0.3, 0.5, 1.6}s or easings beyond {cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0.215, 0.61, 0.355, 1), ease}.
• Never use violet (#8e48ff) for non-AI affordances — it's reserved for the special/generative moment and loses meaning if spent elsewhere.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 2px, scale 2/4/6/8/10/12/16/20/24/32/40/48.
• Container max-widths 576 / 768 / 1536 px — do not exceed 1536.
• Single editorial display family + mono fallback: Camera Plain Variable + Roboto Mono Variable.
• Weight ladder strictly 400 / 480 / 600.
• Motion: five captured durations (0.15 / 0.2 / 0.3 / 0.5 / 1.6 s) and four easings (cubic-bezier(0.4, 0, 0.2, 1) primary). No springs.
• Radius scale: 8 / 12 / 16 / 24 / 28 px.
• Semantic color exactly four roles + their translucent tints; rainbow gradient is signature-only.

• Canvas check: page background is a warm light value (#fafafa / #fcfbf8), foreground is near-black #030303 — not a dark-first inversion.
• Container width: no section exceeds 1536px wide; prose stays within 576/768 rails.
• Spacing grep: no values outside the 2/4/6/8/10/12/16/20/24/32/40/48 ladder.
• Font weight grep: only 400, 480, 600 appear — no 500, no 700.
• Shadow audit: every elevation uses a layered inset 'surface' rim-light shadow first (1px white inner edge + translucent slate ring); no soft drop-shadow-only cards.
• Transition grep: timing-function values draw from {cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0.215, 0.61, 0.355, 1), ease}; the primary curve carries most transitions.
• Transition duration grep: values draw from {0.15s, 0.2s, 0.3s, 0.5s, 1.6s}; default state changes sit at 0.15s.
• Gradient audit: the rainbow signature gradient covers under ~3% of surface area and appears as a stroke, never a fill.
• Semantic color audit: only accent #1f55f1, special #8e48ff, destructive #e12429, positive #338500 (and their tints) appear — no decorative color.
• Contrast audit: body text on the light canvas ≥ 4.5:1 (WCAG AA); primary foreground ≥ 7:1 (AAA).
• Image audit: loading='lazy' on every non-LCP image; eager/priority only on the hero background.