76 lines
4.0 KiB
Markdown
76 lines
4.0 KiB
Markdown
---
|
|
version: "neuform-staff-featured-2026-05-22"
|
|
name: "Summit — Cloud Migration Platform"
|
|
description: "Summit Cloud Pricing Section is designed for comparing plans and supporting conversion decisions. Key features include plan comparison blocks and conversion-oriented actions. It is suitable for subscription pricing pages and plan comparison experiences."
|
|
colors:
|
|
primary: "#2563EB"
|
|
secondary: "#050510"
|
|
accent: "#3B82F6"
|
|
background: "#050510"
|
|
surface: "#18181B"
|
|
text-primary: "#FFFFFF"
|
|
text-secondary: "#A1A1AA"
|
|
border: "#27272A"
|
|
typography:
|
|
display-lg:
|
|
fontFamily: "Inter"
|
|
fontSize: "64px"
|
|
fontWeight: 500
|
|
lineHeight: "1.04"
|
|
letterSpacing: "0"
|
|
body-md:
|
|
fontFamily: "Inter"
|
|
fontSize: "16px"
|
|
fontWeight: 400
|
|
lineHeight: "1.6"
|
|
label-md:
|
|
fontFamily: "JetBrains Mono"
|
|
fontSize: "12px"
|
|
fontWeight: 600
|
|
lineHeight: "1.2"
|
|
spacing:
|
|
base: "8px"
|
|
gap: "16px"
|
|
card-padding: "24px"
|
|
section-padding: "80px"
|
|
rounded:
|
|
card: "23px"
|
|
control: "18px"
|
|
pill: "9999px"
|
|
components:
|
|
card:
|
|
background: "Use the surface token with subtle borders and HTML-matched shadow depth"
|
|
radius: "Match the declared card radius token"
|
|
button:
|
|
background: "Use primary or accent colors for the main action"
|
|
radius: "Use the control or pill radius based on the source HTML"
|
|
---
|
|
# Summit — Cloud Migration Platform
|
|
Source: Neuform staff featured templates. Author: Vanh DesignCode (@vanh). Views: 161; favorites: 11; remixes: 3.
|
|
Tags: pricing, section, animated, cta, charts, billing.
|
|
## Overview
|
|
Summit Cloud Pricing Section is designed for comparing plans and supporting conversion decisions. Key features include plan comparison blocks and conversion-oriented actions. It is suitable for subscription pricing pages and plan comparison experiences.
|
|
|
|
Summit Platform Solutions Pricing Docs Start Migration Now in General Availability Migrate to the cloud with confidence Automated discovery, dependency mapping, and zero-downtime migration for enterprise workloads. Move…
|
|
## Composition
|
|
Use the attached HTML reference as the source of truth. Preserve the visible hierarchy, first-screen composition, section rhythm, density, and interaction tone before adapting copy or content.
|
|
Key visible headings include: Migrate to the cloud with confidence; Discover untethered scalability. The platform built to dynamically map, migrate, and optimize your entire infrastructure without lifting a finger.; Architectural Clarity; Dynamic Scaling.
|
|
## Colors
|
|
Anchor the palette in primary #2563EB, secondary #050510, accent #3B82F6, background #050510, surface #18181B, text-primary #FFFFFF. Keep background, surface, text, and border roles distinct so generated layouts retain the same contrast pattern as the source.
|
|
## Typography
|
|
Use Inter for display moments and Inter for body copy unless the HTML clearly demands a compatible fallback. Labels and technical metadata should use JetBrains Mono or an equivalent mono face.
|
|
## Layout
|
|
Keep spacing deliberate and stable. Favor the same grid direction, max-width behavior, card density, and responsive stacking seen in the HTML. Do not replace distinctive source structures with generic SaaS sections.
|
|
## Components
|
|
Dashboard, chart, and data panels should preserve their compact operational hierarchy, nested surfaces, and metric emphasis.
|
|
## Motion
|
|
Preserve existing motion cues such as masked reveals, staggered entrance, hover lift, scroll-triggered transitions, and ambient movement. Keep easing smooth and restrained.
|
|
## WebGL & Effects
|
|
|
|
If the source includes canvas, WebGL, Three.js, gradients, particles, or atmospheric effects, rebuild them as supporting layers behind the content. Keep effects performant, responsive, and secondary to the interface.
|
|
|
|
## Guardrails
|
|
- Do not flatten the source into a generic card grid.
|
|
- Do not swap the color mode unless the source clearly supports it.
|
|
- Preserve the first viewport signal, focal object, and visual density.
|
|
- Keep buttons, cards, and badges aligned to the same radius and border language. |