Remixes of vita-travel.webflow.io
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Vita-travel
description: |
Vita Travels embraces a sophisticated, adventure-focused aesthetic rooted in
expansive landscapes and purposeful journeys. The design system prioritizes
clean, minimal surfaces that recede behind full-bleed photography and
immersive hero imagery. The mood is aspirational yet grounded—earthy and
natural tones complement a striking teal-to-navy gradient that anchors the
interface without dominating it. Typography is bold and generous, giving
prominence to mission-driven copy. The system celebrates whitespace and
breathing room, allowing content—especially travel imagery—to command
attention. Interactions are subtle; the visual feedback relies on understated
state changes rather than dramatic effects. This is a brand designed to
inspire wanderlust while maintaining clarity and accessibility.
source:
url: "https://vita-travel.webflow.io/"
pagesAnalyzed: 6
extractedAt: 2026-10-29
tokensMeasured: true
colors:
primary: "#FFFFFF"
accent: "#0D2E37"
canvas: "#091B20"
on-primary: "#0000EE"
ink: "#FFFFFF"
hairline: "#000000"
accent-1: "#FA8805"
typography:
display-xxl:
fontFamily: Inter
fontSize: 190px
fontWeight: 600
lineHeight: 1
letterSpacing: -10px
display-xl:
fontFamily: Inter
fontSize: 60px
fontWeight: 600
lineHeight: 1.1
letterSpacing: -3.6px
display-lg:
fontFamily: Inter
fontSize: 45px
fontWeight: 600
lineHeight: 1
letterSpacing: -3px
heading:
fontFamily: Inter
fontSize: 28px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -2px
body-xl:
fontFamily: Inter
fontSize: 24px
fontWeight: 600
lineHeight: 1.3
letterSpacing: -2px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.5px
body-lg-tight:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-lg-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.3
letterSpacing: -0.5px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.6px
body-md-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 1.25
letterSpacing: -0.5px
label:
fontFamily: Inter
fontSize: 22px
fontWeight: 500
lineHeight: 1
letterSpacing: -1px
caption-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.5px
caption-xs:
fontFamily: Inter
fontSize: 10px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
rounded:
none: 0px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#111213"
textMuted: "#737474"
border: "#D8D8D8"
accent: "#0D2E37"
accentFg: "#FFFFFF"
focusRing: "#0D2E37"
elevation: shadow
dark:
bg: "#091B20"
surface: "#091A1F"
surfaceRaised: "#1D2C31"
text: "#FFFFFF"
textMuted: "#A9AFB1"
border: "#000000"
accent: "#21738A"
accentFg: "#FFFFFF"
focusRing: "#0D2E37"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.body-lg-tight}"
textColor: "{colors.on-primary}"
height: 52.5938px
padding: "20px 32px 20px 32px"
rounded: 80px
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-lg-tight}"
textColor: "{colors.on-primary}"
height: 52.5938px
padding: "14px 24px 14px 24px"
rounded: 80px
backgroundColor: "{colors.accent}"
link:
textColor: "{colors.on-primary}"
padding: "0px 40px 0px 40px"
fontSize: 0px
fontFamily: Inter
fontWeight: 400
lineHeight: 20px
link-2:
typography: "{typography.display-lg}"
textColor: "{colors.ink}"
badge-text:
typography: "{typography.body-lg-tight}"
textColor: "{colors.ink}"
height: 24px
padding: "0px 0px 0px 32px"
badge-text-lg:
typography: "{typography.body-lg-tight}"
textColor: "{colors.ink}"
height: 41.5938px
padding: "0px 0px 0px 32px"
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 9
sectionPaddingX: 0
- width: 1024
containerWidth: 1920
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 11
sectionPaddingX: 0
- width: 1280
containerWidth: 1920
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1920
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 12
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Vita Travels embraces a sophisticated, adventure-focused aesthetic rooted in expansive landscapes and purposeful journeys. The design system prioritizes clean, minimal surfaces that recede behind full-bleed photography and immersive hero imagery. The mood is aspirational yet grounded—earthy and natural tones complement a striking teal-to-navy gradient that anchors the interface without dominating it. Typography is bold and generous, giving prominence to mission-driven copy. The system celebrates whitespace and breathing room, allowing content—especially travel imagery—to command attention. Interactions are subtle; the visual feedback relies on understated state changes rather than dramatic effects. This is a brand designed to inspire wanderlust while maintaining clarity and accessibility.
Key Characteristics
{colors.primary} — #FFFFFF): The dominant visual and functional accent; used for primary CTA buttons, active states, headings, and primary text throughout. White serves as the primary ink for text and the fill for call-to-action buttons on dark backgrounds.{colors.accent} — #0D2E37): Deep navy that establishes the brand's grounded, sophisticated identity. Used for button fills, container backgrounds, and secondary surfaces.{colors.accent-1} — #FA8805): A warm, energetic orange with no assigned structural role. Deployed sparingly for visual interest and to punctuate sections with personality; treat as decorative only.{colors.on-primary} — #0000EE): Pure blue used for link text and interactive elements on primary (white) surfaces. Provides strong contrast and signifies clickability.{colors.canvas} — #091B20): The default page background. A very deep, near-black navy that frames all content and establishes the dark-mode aesthetic.{colors.hairline} — #000000): Pure black used for 1px dividers, borders, and subtle visual separators.Primary: Inter (https://fonts.googleapis.com/)
Fallback stack: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Inter | 190px | 600 | 1.0 | -10px | Hero / banner text; extreme scale |
| Display XL | Inter | 60px | 600 | 1.1 | -3.6px | Main section headings |
| Display LG | Inter | 45px | 600 | 1.0 | -3px | Sub-headings |
| Body XL | Inter | 24px | 600 | 1.3 | -2px | Large section copy |
| Heading | Inter | 28px | 600 | 1.2 | -2px | Section headers |
| Body LG | Inter | 16px | 400 | 1.3 | -0.5px | Primary body text |
| Body LG Strong | Inter | 16px | 500 | 1.3 | -0.5px | Emphasis in body |
| Body LG Tight | Inter | 16px | 400 | 1.25 | 0px | List items / links |
| Body MD | Inter | 14px | 400 | 1.3 | -0.6px | Secondary body text; labels |
| Body MD Strong | Inter | 14px | 600 | 1.25 | -0.5px | Emphasis in small text |
| Label | Inter | 22px | 500 | 1.0 | -1px | Form labels and input placeholders |
| Caption SM | Inter | 12px | 400 | 1.25 | -0.5px | Fine print; metadata |
| Caption XS | Inter | 10px | 600 | 1.1 | 0px | Micro labels; badges |
-10px to -3px on Display scales) creates visual density and impact on hero and section headings.{colors.primary} — #FFFFFF) on dark backgrounds; hierarchy is expressed through size and weight alone.Primary Button (White)
{colors.primary} (#FFFFFF){colors.on-primary} (#0000EE){spacing.lg} (20px) top/bottom, {spacing.md} (32px) left/right{typography.body-lg} (16px, weight 400){rounded.full} (9999px){colors.accent} (#0D2E37)Secondary Button (Navy Fill)
{colors.accent} (#0D2E37){colors.on-primary} (#0000EE){spacing.md} (14px) top/bottom, {spacing.md} (24px) left/right{typography.body-lg} (16px, weight 400){rounded.full} (9999px)0px 0px 0px 2px whiteTertiary / Ghost Button
{colors.primary} (#FFFFFF){spacing.lg} (20px) top/bottom, {spacing.md} (32px) left/right{typography.body-lg} (16px, weight 400){rounded.full} (9999px)Default Link
{colors.on-primary} (#0000EE){typography.body-lg-tight} (16px, weight 400, line-height 1.25, letter-spacing 0px)Display Link (Large)
{colors.primary} (#FFFFFF){typography.display-lg} (45px, weight 600)Top Navigation Bar
{colors.canvas}{colors.primary} (#FFFFFF), {typography.body-lg} (16px, weight 400){colors.accent-1} (#FA8805) (orange accent){colors.hairline} (#000000), 1pxText Badge (Small)
{colors.primary} (#FFFFFF){typography.body-lg} (16px, weight 400){spacing.xl} (32px) left/rightText Badge Large
{colors.primary} (#FFFFFF){typography.body-lg} (16px, weight 400){spacing.xl} (32px) left/rightBase unit: {spacing.xs} (8px)
Scale (as measured):
{spacing.xxs} = 4px (micro spacing; between inline elements){spacing.xs} = 8px (tight spacing; between related items){spacing.sm} = 12px (small spacing; form field gaps){spacing.md} = 16px (default; card padding, button internal spacing){spacing.lg} = 20px (button vertical padding; section headings){spacing.xl} = 24px (card margins; section spacing){spacing.xxl} = 32px (large component padding){spacing.xxxl} = 40px (between major layout blocks){spacing.section} = 48px (section-to-section vertical spacing){spacing.band} = 64px (full-width band spacing; hero sections)Usage Context:
{spacing.lg} horizontal, {spacing.md} vertical{spacing.md} to {spacing.xl}{spacing.section} above, {spacing.xl} below{spacing.band} for vertical breathing roomThe system prioritizes generous whitespace around text and between sections. Full-bleed photography dominates hero areas, with minimal UI intrusion. Below-the-fold content uses symmetric spacing; sections are separated by {spacing.section} (48px) or {spacing.band} (64px) vertical gaps. This creates rhythm and allows the eye to rest on imagery before encountering dense copy.
{rounded.none} = 0px (images, hard-edged card borders){rounded.full} = 9999px (buttons, pills, soft interactive targets)Component Application:
{rounded.none} (sharp corners){rounded.full} (fully rounded pills){rounded.none})Elevation Strategy: Color-blocking — depth comes from surface color changes and transparency, not shadows. The system uses minimal to no drop shadows; contrast is achieved through color separation.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow; opaque surface | Default card backgrounds, button fills |
| Base Lifted | No shadow; semi-transparent overlay at opacity 0.20 or 0.15 | Hover states, secondary containers |
| Modal / Overlay | Z-index 1000; full-screen or dialog container | Cookie banners, modal dialogs |
| Sticky / Persistent | Z-index 10; top navigation bar | Header; above scrolling content |
| Standard | Z-index 2–4 | Default content layers |
Box Shadows: None detected in the extracted CSS. The system relies on color separation and opacity shifts rather than shadow depth.
Usage:
{colors.primary} — #FFFFFF) for all primary headings, body text, and link text on dark backgrounds for maximum contrast and legibility.{rounded.full} — 9999px) consistently across all interactive elements for a cohesive, modern appearance.{colors.accent} — #0D2E37) for secondary button fills and container backgrounds; do not use for text.-10px to -3px) to create visual impact and establish hierarchy.{spacing.xs} (8px); never mix arbitrary pixel values with the system scale.{typography.body-lg} and smaller) for readability over photographic backgrounds.{colors.canvas} — #091B20) as the universal page background to frame and contain content.2px white box-shadow outline on interactive elements; do not rely on browser default outlines.{colors.accent-1} — #FA8805) sparingly for decorative callouts or active navigation states only.{colors.primary} — #FFFFFF) on the canvas background; the contrast ratio will fail accessibility standards.{rounded.none} — 0px) for a structured, editorial feel.{colors.on-primary} — #0000EE) for non-interactive elements or text that should not be clickable.{spacing.band} (64px) for standard section spacing; use it only for major visual breaks (hero to content).{colors.accent} — #0D2E37) as a text color; it will lack sufficient contrast on both light and dark backgrounds.| Viewport | Device | Content Max | Grid Cols | Key Changes |
|---|---|---|---|---|
| 375px | Mobile (small) | 1920px | 1 | Single-column layout; full-width text |
| 768px | Tablet | 1920px | 1–2 | Multi-column grid begins; typography scaling |
| 1024px | Tablet (large) | 1920px | 2 | Two-column card grids stabilize |
| 1280px | Desktop (small) | 1920px | 2 | Comfortable spacing around two-column layouts |
| 1440px+ | Desktop (large) | 1920px | 2–3 | Three-column galleries possible; full-width band content |
Key Observations:
{spacing.section} (48px) maintains consistent rhythm.{spacing.md} padding){spacing.md} (16px) minimum horizontal, {spacing.lg} (20px) vertical0px at 375px to {spacing.xl} (24px) at 1440px, ensuring mobile margin safety.Use these mappings when building components or layouts:
{colors.primary} — #FFFFFF){colors.canvas} — #091B20){colors.accent} — #0D2E37){colors.on-primary} — #0000EE){colors.hairline} — #000000){colors.accent-1} — #FA8805)Always use white ({colors.primary}) for all text on dark backgrounds. This is non-negotiable for contrast and accessibility. Do not deviate to other colors for text.
Apply pill-shaped buttons ({rounded.full} — 9999px) to all interactive elements. Never use sharp corners or other radius values for buttons.
Use the full spacing scale ({spacing.xs} through {spacing.band}) for consistent rhythm. Do not introduce arbitrary pixel values; snap all spacing to the 8px grid.
Reserve navy ({colors.accent} — #0D2E37) for button fills and container backgrounds only. Never use it for text; use white instead.
Display type requires tight negative letter-spacing: -10px (Display XXL), -3.6px (Display XL), -3px (Display LG). Body type uses -0.6px or tighter. Never flatten tracking to 0px on display sizes.
Layer depth through color and opacity, not shadows. Shadows are absent from this system; use opacity shifts (0.20–0.85) and color changes to indicate elevation.
Mobile-first approach: Start with single-column layouts (375px) and expand to multi-column (2+) above 768px. Navigation remains consistent across all breakpoints.
Focus states must include a visible indicator: Apply box-shadow: 0px 0px 0px 2px {colors.primary} (white outline) to focused elements. Remove browser default outlines.
Images stay sharp: Use {rounded.none} (0px border-radius) for all image components. Only buttons and interactive pills use {rounded.full}.
The orange accent ({colors.accent-1}) is decorative only. Use it sparingly for active nav states or small callouts; it is not a primary functional color.
{colors.accent-1} (#FA8805) appears in the palette but is not assigned to a specific component or function. It is treated as decorative; its exact usage contexts were not fully traced.