draft catalog

SNW Visual Catalog

Vitrine local para curadoria de botoes, cards, backgrounds, bordas, motion e shape dividers antes de uso em clientes.

Botoes

testing

Layered Wave 938

Preset convertido do codigo recebido. Ele esta em teste e ainda precisa de curadoria desktop/mobile/WordPress.

shape_wave_layered_938_testing

Button Presets

approved_base

Pill WhatsApp Primary

button_pill_whatsapp_primary

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "26px",
  "border_width": "0",
  "icon_allowed": true,
  "icon_position": "left_or_none",
  "motion_preset_id": "button_lift_subtle"
}
testing

Solid Primary Rounded

button_solid_primary_rounded

{
  "radius": "14px",
  "min_height": "50px",
  "padding_inline": "24px",
  "motion_preset_id": "button_lift_subtle"
}
testing

Solid Dark Premium

button_solid_dark_premium

{
  "radius": "999px",
  "min_height": "54px",
  "padding_inline": "30px",
  "motion_preset_id": "button_lift_subtle"
}
testing

Outline Sweep

button_outline_sweep

{
  "radius": "10px",
  "min_height": "48px",
  "padding_inline": "22px",
  "border_width": "1px",
  "background_size": "220%",
  "motion_preset_id": "button_sweep_220"
}
testing

Outline Minimal

button_outline_minimal

{
  "radius": "999px",
  "min_height": "48px",
  "padding_inline": "22px",
  "border_width": "1px",
  "motion_preset_id": "button_color_shift_180"
}
testing

Ghost Text

button_ghost_text

{
  "radius": "10px",
  "min_height": "44px",
  "padding_inline": "16px",
  "border_width": "0",
  "motion_preset_id": "button_color_shift_180"
}
testing

Soft Fill

button_soft_fill

{
  "radius": "999px",
  "min_height": "48px",
  "padding_inline": "22px",
  "motion_preset_id": "button_lift_subtle"
}
testing

Shine Pass

button_shine_pass

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "28px",
  "pseudo_element": "after",
  "shine_angle": "35deg",
  "shine_opacity": 0.22,
  "motion_preset_id": "button_shine_550"
}
testing

Border Draw

button_border_draw

{
  "radius": "12px",
  "min_height": "48px",
  "padding_inline": "22px",
  "border_width": "1px",
  "draw_duration_ms": 240,
  "motion_preset_id": "button_border_draw_240"
}
testing

Glass Soft

button_glass_soft

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "26px",
  "border_width": "1px",
  "backdrop_filter": "blur(14px)",
  "motion_preset_id": "button_lift_subtle"
}
testing

Frosted Dark

button_frosted_dark

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "26px",
  "border_width": "1px",
  "backdrop_filter": "blur(16px)",
  "motion_preset_id": "button_lift_subtle"
}
testing

Soft Shadow

button_soft_shadow

{
  "radius": "14px",
  "min_height": "50px",
  "padding_inline": "24px",
  "shadow_token": "shadow_button_soft",
  "pressed_translate_y": "1px",
  "motion_preset_id": "button_lift_subtle"
}
testing

Icon Slide

button_icon_slide

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "24px",
  "icon_required": true,
  "icon_translate_x": "4px",
  "motion_preset_id": "button_icon_slide_180"
}
testing

Icon Square

button_icon_square

{
  "radius": "12px",
  "width": "44px",
  "height": "44px",
  "icon_required": true,
  "aria_label_required": true,
  "motion_preset_id": "button_press_depth_180"
}
testing

Floating WhatsApp

button_floating_whatsapp

{
  "radius": "999px",
  "min_height": "56px",
  "padding_inline": "20px",
  "safe_area": true,
  "z_index_max": 40,
  "motion_preset_id": "button_float_attention_subtle"
}
testing

Gradient Soft

button_gradient_soft

{
  "radius": "999px",
  "min_height": "54px",
  "padding_inline": "28px",
  "gradient_angle": "135deg",
  "motion_preset_id": "button_lift_subtle"
}
testing

Duotone Split

button_duotone_split

{
  "radius": "14px",
  "min_height": "52px",
  "padding_inline": "24px",
  "split_ratio": "50%",
  "motion_preset_id": "button_sweep_220"
}
testing

Underlined Link

button_underlined_link

{
  "radius": "0",
  "min_height": "44px",
  "padding_inline": "0",
  "underline_motion": true,
  "motion_preset_id": "button_underline_slide_180"
}
testing

Loading Spinner

button_loading_spinner

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "26px",
  "spinner_size": "18px",
  "disabled_while_loading": true,
  "motion_preset_id": "spinner_linear"
}
testing

Success Confirm

button_success_confirm

{
  "radius": "999px",
  "min_height": "52px",
  "padding_inline": "26px",
  "success_icon_required": true,
  "motion_preset_id": "button_state_fade_200"
}
testing

Danger Outline

button_danger_outline

{
  "radius": "12px",
  "min_height": "48px",
  "padding_inline": "22px",
  "border_width": "1px",
  "motion_preset_id": "button_color_shift_180"
}
inspirational_only

Neumorphic Soft

button_neumorphic_soft

{
  "radius": "18px",
  "min_height": "52px",
  "padding_inline": "24px",
  "requires_light_surface": true,
  "shadow_pair": "outer_light_dark",
  "motion_preset_id": "button_press_depth_180"
}
inspirational_only

Liquid Fill

button_liquid_fill

{
  "radius": "999px",
  "min_height": "54px",
  "padding_inline": "28px",
  "requires_pseudo_layers": true,
  "max_duration_ms": 300,
  "motion_preset_id": "button_fill_260"
}
inspirational_only

Magnetic Subtle

button_magnetic_subtle

{
  "radius": "999px",
  "min_height": "54px",
  "padding_inline": "30px",
  "requires_js": false,
  "motion_preset_id": "button_magnetic_css_subtle"
}
testing

Neobrutalist Shadow

button_neobrutalist_shadow

{
  "radius": "6px",
  "min_height": "54px",
  "padding_inline": "26px",
  "border_width": "2px",
  "shadow_offset": "6px 6px 0",
  "motion_preset_id": "button_brutal_press_120"
}
testing

Neobrutalist Inverted

button_neobrutalist_inverted

{
  "radius": "0",
  "min_height": "54px",
  "padding_inline": "26px",
  "border_width": "2px",
  "shadow_offset": "5px 5px 0",
  "motion_preset_id": "button_brutal_press_120"
}
testing

3D Layered

button_3d_layered

{
  "radius": "14px",
  "min_height": "54px",
  "padding_inline": "28px",
  "bottom_layer": "6px",
  "pressed_translate_y": "4px",
  "motion_preset_id": "button_press_depth_160"
}
testing

Cut Corner

button_cut_corner

{
  "radius": "0",
  "min_height": "52px",
  "padding_inline": "26px",
  "clip_path": "polygon",
  "corner_cut": "12px",
  "motion_preset_id": "button_lift_subtle"
}
testing

Clay Puffy

button_clay_puffy

{
  "radius": "22px",
  "min_height": "56px",
  "padding_inline": "28px",
  "inner_shadow": true,
  "outer_shadow": "soft",
  "motion_preset_id": "button_lift_subtle"
}
inspirational_only

Cyber Scan

button_cyber_scan

{
  "radius": "2px",
  "min_height": "52px",
  "padding_inline": "26px",
  "scan_line": true,
  "corner_marks": true,
  "motion_preset_id": "button_scan_300"
}
testing

Paper Fold

button_paper_fold

{
  "radius": "8px",
  "min_height": "52px",
  "padding_inline": "24px",
  "fold_corner": true,
  "motion_preset_id": "button_lift_subtle"
}
testing

Capsule Split Icon

button_capsule_split_icon

{
  "radius": "999px",
  "min_height": "54px",
  "padding_inline": "24px",
  "icon_chamber": true,
  "motion_preset_id": "button_icon_slide_180"
}
testing

Terminal Prompt

button_terminal_prompt

{
  "radius": "8px",
  "min_height": "50px",
  "padding_inline": "22px",
  "prefix": ">",
  "monospace": true,
  "motion_preset_id": "button_caret_blink_subtle"
}
testing

Sticker Offset

button_sticker_offset

{
  "radius": "18px",
  "min_height": "54px",
  "padding_inline": "26px",
  "outline_offset_layer": true,
  "rotation": "-1deg",
  "motion_preset_id": "button_sticker_pop_180"
}
testing

Minimal Arrow Line

button_minimal_arrow_line

{
  "radius": "0",
  "min_height": "44px",
  "padding_inline": "0",
  "line_reveal": true,
  "icon_required": true,
  "motion_preset_id": "button_icon_slide_180"
}

Component Presets JSON

testing

Soft Clinical Card

card_soft_clinical

{
  "radius": "16px",
  "padding": "24px",
  "border": "1px",
  "shadow": "soft",
  "icon_slot": true
}
testing

Bento Feature Card

card_bento_feature

{
  "radius": "18px",
  "padding": "28px",
  "grid_span": [
    "1x1",
    "2x1",
    "1x2"
  ],
  "image_slot": true
}
testing

Glass Overlay Card

card_glass_overlay

{
  "radius": "18px",
  "padding": "24px",
  "backdrop_filter": "blur(16px)",
  "requires_contrast_check": true
}
testing

Trust Badge Soft

badge_trust_soft

{
  "radius": "999px",
  "min_height": "32px",
  "icon_allowed": true
}
testing

Clean Outline Input

input_clean_outline

{
  "radius": "12px",
  "min_height": "48px",
  "label_required": true,
  "helper_text_allowed": true
}
testing

Soft Fill Input

input_soft_fill

{
  "radius": "14px",
  "min_height": "50px",
  "label_required": true
}
testing

FAQ Clean Accordion

accordion_faq_clean

{
  "radius": "12px",
  "min_header_height": "52px",
  "icon_required": true,
  "keyboard_required": true
}
testing

Segmented Soft Tabs

tabs_segmented_soft

{
  "radius": "999px",
  "min_target": "44px",
  "keyboard_required": true
}
testing

Translucent Sticky Navbar

navbar_translucent_sticky

{
  "height": "72px",
  "sticky": true,
  "backdrop_filter": "blur(16px)",
  "mobile_menu_required": true
}
testing

Trust Band Compact

trust_band_compact

{
  "layout": "inline_grid",
  "min_items": 3,
  "max_items": 5,
  "icon_required": true
}
testing

Editorial Rounded Image Frame

image_frame_editorial_rounded

{
  "radius": "24px",
  "aspect_ratio": "4 / 3",
  "overlay_allowed": true,
  "caption_allowed": false
}
testing

Split Bleed Image Frame

image_frame_split_bleed

{
  "radius": "0",
  "aspect_ratio": "16 / 10",
  "bleed": true,
  "mobile_crop_rule": "center_subject"
}
testing

Simple Pricing Card

pricing_card_simple

{
  "radius": "18px",
  "featured_variant": true,
  "cta_slot_required": true
}
testing

Timeline Process Cards

timeline_process_cards

{
  "step_number_required": true,
  "connector_allowed": true,
  "mobile_stack": true
}
testing

Hero Photo Wash

hero_photo_wash

{
  "overlay_opacity": [
    0.18,
    0.32,
    0.48
  ],
  "text_on_image_allowed": true,
  "contrast_required": true
}
testing

Hero Editorial Split

hero_editorial_split

{
  "image_side": [
    "left",
    "right"
  ],
  "content_width": "balanced",
  "divider_allowed": true
}

Background Presets

testing

Clinic Soft Texture

background_clinic_soft_texture

{
  "image_asset_role": "background_texture",
  "overlay_token": "background",
  "overlay_opacity": 0.78,
  "background_size": "cover",
  "background_position": "center",
  "blend_mode": "normal"
}

Card Presets

testing

Healthcare Soft Glass Card

card_healthcare_soft_glass

{
  "radius": "var(--snw-radius)",
  "border": "1px solid var(--snw-border)",
  "background": "rgba(255,255,255,.74)",
  "shadow": "soft_low",
  "icon_container": "rounded_square"
}

Motion Presets

testing

Button Lift Subtle

button_lift_subtle

{}
testing

Divider Drift Subtle

divider_drift_subtle

{}