design.vecreal.com / workshop / Landing CTA softer fill
Brand reference · workshop · 2026-05-12
Landing CTA · softer black for the inactive fill
The CTA's inactive fill is --bg-app-dark
— same color as the bottom of the page gradient. With the drafting grid texturing
everything around it, the button reads as a flat dark hole instead of a present-but-quiet
element. Comparing the current black against three design-system-canonical "softer black"
tokens — all already defined, no new values needed.
Options under comparison
A · --bg-app-dark #131517 — current. Same as the page bg at
its darkest point.
B · --bg-card-dark-bottom #1c1e23 — subtle lift. Card gradient
bottom token. ~5 hex units up from A. Quietest of the alternatives.
C · --bg-pill-dark #1f2126 — clear lift. Designed role: "topbar
pill, secondary surfaces." The token whose stated purpose matches a secondary-surface CTA.
D · --bg-card-dark-top #21242a — strongest lift. Card gradient
top. Approaching elevated-card territory; may read as too active for an inactive state.
Section 1 · CTA in landing-page context — same grid, same gradient, same composition
Each tile reproduces the landing-page environment: drafting grid layer, page-bg gradient, real CTA dimensions and clay border. Only the CTA fill changes. Mini-tagline and subtitle above for visual proportion.
Institutional Intelligence for general contractors.
Vertical AI for construction. Project- and corporate-level intelligence.
Request a briefInstitutional Intelligence for general contractors.
Vertical AI for construction. Project- and corporate-level intelligence.
Request a briefInstitutional Intelligence for general contractors.
Vertical AI for construction. Project- and corporate-level intelligence.
Request a briefInstitutional Intelligence for general contractors.
Vertical AI for construction. Project- and corporate-level intelligence.
Request a briefSection 2 · Raw swatch comparison — no grid, no border, just the fill
Strip the context and look at each fill as a flat color, side by side. Useful for judging the absolute step from A → B → C → D.
Decision matrix
| Option | Token | Hex | Lift from app-dark | Read |
|---|---|---|---|---|
| A · current | --bg-app-dark | #131517 | 0 (baseline) | flat dark hole against gridded background |
| B · subtle | --bg-card-dark-bottom | #1c1e23 | ~5 hex units | just-perceptible lift; risks being indistinguishable from A in low-contrast viewing |
| C · clear ★ | --bg-pill-dark | #1f2126 | ~9 hex units | present-but-quiet; explicit design-system role for secondary surfaces |
| D · strongest | --bg-card-dark-top | #21242a | ~12 hex units | card-elevation territory; may read as a hover/active state rather than rest |
Recommendation Option C — --bg-pill-dark #1f2126. Its
stated role in the design system is "topbar pill, secondary surfaces" — which is exactly
what an inactive CTA on the landing page is. The lift is clear enough to read as a
present element against the drafting grid, but quiet enough to remain inactive-state
(the clay border still does the work of marking it as the call to action).
Fallback: Option B if C still reads too elevated. Skip D — it crosses into
card-elevation territory and may compete with the actual content cards on the page.
Once you call A | B | C | D I'll update landing/index.html
(just the .cta background) and push. Hover/active/focus states stay
unchanged — those rely on the clay fill, not the inactive bg.
Vecreal · brand workshop · 2026-05-12 · landing CTA softer fill