Remixes of wickret.cuberto.com
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: Wickret
description: |
Wickret's design system embodies a modern, digital-first banking experience
that prioritizes clarity and trust. The aesthetic is clean and minimal, with a
generous use of whitespace and a cool, professional color palette anchored by
a vibrant primary blue. The typography employs tight letter-spacing and bold
weights to create visual impact and confidence. Playful, geometric accent
elements (illustrated cards, animated dots) add personality without
compromising the serious nature of financial services. The overall mood is
contemporary, approachable, and designed to demystify digital banking.
source:
url: "https://wickret.cuberto.com/"
pagesAnalyzed: 1
extractedAt: 2026-10-19
tokensMeasured: true
colors:
primary: "#2128BD"
canvas: "#FFFFFF"
surface-alt: "#EEFBFF"
ink: "#000000"
hairline: "#005FFE"
neutral-1: "#FDF0E5"
typography:
display-xxl:
fontFamily: Montserrat
fontSize: 115.2px
fontWeight: 600
lineHeight: 0.93
letterSpacing: -8.64px
display-xl:
fontFamily: Montserrat
fontSize: 70px
fontWeight: 600
lineHeight: 1.07
letterSpacing: -5.22px
display-xl-tight:
fontFamily: Montserrat
fontSize: 70px
fontWeight: 600
lineHeight: 1.06
letterSpacing: -5.22px
display-lg:
fontFamily: Montserrat
fontSize: 40px
fontWeight: 500
lineHeight: 1.3
letterSpacing: -0.67px
display-lg-strong:
fontFamily: Montserrat
fontSize: 40px
fontWeight: 600
lineHeight: 1.35
letterSpacing: -0.7px
heading-md:
fontFamily: Montserrat
fontSize: 28px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.48px
heading-md-strong:
fontFamily: Montserrat
fontSize: 28px
fontWeight: 700
lineHeight: 1.5
letterSpacing: -0.48px
body-xl:
fontFamily: Montserrat
fontSize: 24px
fontWeight: 400
lineHeight: 1.08
letterSpacing: -0.4px
body-xl-loose:
fontFamily: Montserrat
fontSize: 24px
fontWeight: 400
lineHeight: 1.54
letterSpacing: -0.4px
body-xl-strong:
fontFamily: Montserrat
fontSize: 24px
fontWeight: 600
lineHeight: 1.54
letterSpacing: -0.4px
body-lg:
fontFamily: Montserrat
fontSize: 15px
fontWeight: 600
letterSpacing: -0.22px
button-md:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 500
lineHeight: 1.13
letterSpacing: -0.21px
button-md-strong:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 600
lineHeight: 1.13
letterSpacing: -0.21px
rounded:
none: 0px
xs: 4px
sm: 18px
md: 20px
full: 9999px
spacing:
xxs: 16px
xs: 28px
sm: 32px
md: 36px
lg: 40px
xl: 52px
xxl: 60px
xxxl: 64px
section: 72px
band: 120px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#EEFBFF"
surfaceRaised: "#E4F1F5"
text: "#000000"
textMuted: "#595959"
border: "#005FFE"
accent: "#2128BD"
accentFg: "#FFFFFF"
focusRing: "#2128BD"
elevation: shadow
dark:
bg: "#0A0B14"
surface: "#191A22"
surfaceRaised: "#25262E"
text: "#F6F6FC"
textMuted: "#9C9DA4"
border: "#31323A"
accent: "#7277E6"
accentFg: "#0B0B0C"
focusRing: "#4F56E0"
elevation: "border+surface"
components:
button-outline:
typography: "{typography.button-md}"
textColor: "{colors.primary}"
border: "1px solid rgba(0, 95, 254, 0.3)"
height: 72px
padding: "0px 23px 0px 23px"
rounded: "{rounded.md}"
button-outline-sm:
textColor: "{colors.hairline}"
border: "1px solid rgba(0, 95, 254, 0.3)"
height: 60px
padding: "0px 39px 0px 39px"
fontSize: 16px
fontFamily: Montserrat
fontWeight: 600
rounded: "{rounded.sm}"
button-text:
typography: "{typography.body-lg}"
textColor: "{colors.hairline}"
height: 45px
rounded: 26px
card:
textColor: "{colors.primary}"
fontSize: 14px
fontFamily: Montserrat
fontWeight: 400
link:
typography: "{typography.body-lg}"
textColor: "{colors.primary}"
padding: "0px 30px 0px 30px"
link-lg:
textColor: "rgba(33, 40, 189, 0.75)"
fontSize: 16px
fontFamily: Montserrat
fontWeight: 500
states:
link-hover:
target: link
state: hover
textDecoration: underline
other-hover:
target: other
state: hover
backgroundColor: "{colors.primary}"
nav-focus:
target: nav
state: focus
textDecoration: none
nav-hover:
target: nav
state: hover
textDecoration: none
input-hover:
target: input
state: hover
borderColor: "rgba(33, 40, 189, 0.5)"
input-focus:
target: input
state: focus
borderColor: "rgba(33, 40, 189, 0.7)"
other-disabled:
target: other
state: disabled
opacity: 0.5
other-active:
target: other
state: active
opacity: 0.9
nav-active:
target: nav
state: active
opacity: 0.7
breakpoints:
- width: 375
containerWidth: 307
gridColumns: 1
navLinksVisible: 3
menuToggleVisible: true
headingPx: 70
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 500
gridColumns: 1
navLinksVisible: 3
menuToggleVisible: false
headingPx: 90
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 500
gridColumns: 2
navLinksVisible: 3
menuToggleVisible: false
headingPx: 110
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 1200
gridColumns: 2
navLinksVisible: 3
menuToggleVisible: false
headingPx: 102
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1200
gridColumns: 2
navLinksVisible: 3
menuToggleVisible: false
headingPx: 115
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 28
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Wickret's design system embodies a modern, digital-first banking experience that prioritizes clarity and trust. The aesthetic is clean and minimal, with a generous use of whitespace and a cool, professional color palette anchored by a vibrant primary blue. The typography employs tight letter-spacing and bold weights to create visual impact and confidence. Playful, geometric accent elements (illustrated cards, animated dots) add personality without compromising the serious nature of financial services. The overall mood is contemporary, approachable, and designed to demystify digital banking.
Key Characteristics
{colors.primary} — #2128BD) as the dominant accent{colors.surface-alt} — #EEFBFF) for visual rhythm#2128BD): Brand accent, primary CTAs, active states, links, hero text overlay, interactive highlights#FFFFFF): Default page background, card surfaces#000000): Primary body text, headings, form labels#005FFE): 1px borders, dividers, input underlines#EEFBFF): Alternating section bands, subtle container backgrounds#FDF0E5): Decorative element, no assigned semantic role-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Montserrat | 115.2px | 600 | 0.93 | -8.64px | Hero heading, maximum emphasis |
| Display XL | Montserrat | 70px | 600 | 1.07 | -5.22px | Large section headers |
| Display XL Tight | Montserrat | 70px | 600 | 1.06 | -5.22px | Compact display variant |
| Display LG | Montserrat | 40px | 500 | 1.3 | -0.67px | Medium display heading |
| Display LG Strong | Montserrat | 40px | 600 | 1.35 | -0.7px | Medium display heading, bold |
| Heading MD | Montserrat | 28px | 400 | 1.5 | -0.48px | Section subheading |
| Heading MD Strong | Montserrat | 28px | 700 | 1.5 | -0.48px | Emphasized section heading |
| Body XL | Montserrat | 24px | 400 | 1.08 | -0.4px | Large body copy, compact |
| Body XL Loose | Montserrat | 24px | 400 | 1.54 | -0.4px | Large body copy, airy |
| Body XL Strong | Montserrat | 24px | 600 | 1.54 | -0.4px | Emphasized large body |
| Body LG | Montserrat | 15px | 600 | — | -0.22px | Link text, accents |
| Button MD | Montserrat | 16px | 500 | 1.13 | -0.21px | Standard button label |
| Button MD Strong | Montserrat | 16px | 600 | 1.13 | -0.21px | Emphasized button label |
rgba(0, 0, 0, 0) (transparent)1px solid rgba(0, 95, 254, 0.3)#2128BD0px 23px72px203px{typography.button-md} (16px, weight 500){rounded.md} (20px)background-color: #2128BD, color: #FFFFFF, transform: scale(1.07)opacity: 0.9opacity: 0.5rgba(0, 0, 0, 0) (transparent)1px solid rgba(0, 95, 254, 0.3)#005FFE0px 39px60px163px{typography.button-md-strong} (16px, weight 600){rounded.sm} (18px)background-color: #2128BD, color: #FFFFFFrgba(0, 0, 0, 0) (transparent)#005FFE0px45px128px{typography.body-lg} (15px, weight 600){rounded.full} (9999px)color: rgba(33, 40, 189, 0.75), opacity: 0.85, text-decoration: none#2128BD{typography.body-lg} (15px, weight 600)text-decoration: underline, transform: scaleX(1) translateZ(0px)0px 30px19pxrgba(33, 40, 189, 0.75){typography.button-md} (16px, weight 500)color: inherit, text-decoration: none, transform: scaleX(1)0pxrgba(0, 0, 0, 0) (transparent){rounded.none} (0px, sharp corners)0px345px220px#2128BDtransform: translateY(-140%) skewY(7deg), then transform: none, then transform: skewY(-7deg); text-decoration: noneopacity: 0.7text-decoration: nonescale3d(1.2, 1.2, 1) or scale3d(2, 2, 1) depending on context1px solid rgba(0, 95, 254, 0.3)rgba(33, 40, 189, 0.5)rgba(33, 40, 189, 0.7)rgba(0, 25, 172, 0.5)The spacing scale is built on a flexible unit progression designed to create visual rhythm and breathing room:
{spacing.xxs} (16px): Small internal padding, tight gaps{spacing.xs} (28px): Compact spacing between elements{spacing.sm} (32px): Standard element padding{spacing.md} (36px): Comfortable spacing{spacing.lg} (40px): Moderate section gaps{spacing.xl} (52px): Generous spacing for emphasis{spacing.xxl} (60px): Large vertical gaps{spacing.xxxl} (64px): Extra-large section spacing{spacing.section} (72px): Major section dividers{spacing.band} (120px): Hero band heights, dramatic vertical rhythmSpacing is used to:
307px content column, 0px horizontal padding500px content column, 0px horizontal padding1200px max-width container at 1280px and above1200px for desktop layouts (1280px breakpoint and larger)0px padding on all breakpoints (full-width sections with internal content columns)Whitespace is a primary design tool. Sections are separated by generous vertical rhythm ({spacing.section} and {spacing.band}), creating clear visual hierarchy and reducing cognitive load. Horizontal padding is minimal (0px), allowing sections to span full-width while internal content columns provide constraint. This approach makes the design feel open and premium while maintaining focus.
{rounded.none} (0px): Cards, images, flat UI elements{rounded.xs} (4px): Micro-interactions, minimal rounding{rounded.sm} (18px): Secondary buttons, subtle rounding{rounded.md} (20px): Primary buttons, standard rounding{rounded.full} (9999px): Pill-shaped text buttons and circular elements1px — used on button outlines and form input bordersWickret employs a color-blocking elevation strategy rather than layered shadows. Depth is created through:
{colors.canvas} vs. {colors.surface-alt})Opacity Levels Used:
0.30 (30%): Subtle border tints, very light overlay0.49 (49%): Medium transparency for inactive states0.50 (50%): Standard transparency for visual lightening0.62 (62%): Stronger transparency for emphasis0.67 (67%): High opacity, near-opaque0.99 (99%): Near-solid for near-black text or elementsZ-index / Layering:
z-index: 1, 2 — Standard content flow, minimal layeringz-index: 98, 99 — Dropdowns and overlaysz-index: 1000 — Full-screen modals and top-level UI{colors.primary} (#2128BD) for all primary actions, links, and brand moments{spacing.section} and {spacing.band} gaps{rounded.md} (20px) to all primary interactive elements (buttons, inputs)0px on sections; use internal content columns for constraint{colors.hairline} (#005FFE) for subtle 1px borders and dividers{rounded.none})| Breakpoint | Width | Content Column | Grid Columns | Nav Links | Menu Toggle | Heading Size | Changes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 307px | 1 | 3 visible | Yes | 70px | Single column, menu toggle active |
| Tablet | 768px | 500px | 1 | 3 visible | No | 90px | Single column, wider content, menu toggle hidden |
| Desktop Small | 1024px | 500px | 2 | 3 visible | No | 110px | 2-column grid introduced |
| Desktop Large | 1280px | 1200px | 2 | 3 visible | No | 102px | Max-width container, flexible columns |
| Desktop XL | 1440px | 1200px | 2 | 3 visible | No | 115px | Max-width locked, display heading reaches maximum |
60px height (observed on secondary buttons)72px height, 203px width45px height (pill-shaped)60px on any edge for touch accessibility{spacing.section} for section gaps)#2128BD)#FFFFFF)#000000)#EEFBFF)#005FFE)#FDF0E5) — no semantic roleTypography First: All text uses Montserrat. Display sizes are bold (600–700 weight) with tight negative letter-spacing (-5.22px to -8.64px). Body text is 400 weight at 14–24px. Do not guess intermediate sizes; use the exact hierarchy table.
Spacing is Structural: Sections are separated by {spacing.band} (120px) or {spacing.section} (72px). Horizontal padding is always 0px; use internal content columns (307–1200px) to constrain width. Never add arbitrary gaps.
Color-Blocking for Depth: Alternate sections with {colors.surface-alt} (#EEFBFF) to create rhythm. Do not use shadows; opacity changes on borders and text create depth.
Button Styling is Strict: Outline buttons are transparent with 1px solid rgba(0, 95, 254, 0.3) borders, {rounded.md} radius, and blue text. On hover, fill with #2128BD, change text to white, and scale 1.07. Primary height is 72px; secondary is 60px.
Interactive Transforms are Required: All hover states include a transform: buttons scale (1.07 or 1.2), navigation skews, links scale or underline. Static hovers are anti-patterns in this system.
Breakpoint Shifts Are Defined: Headings grow from 70px at 768px to 115px at 1440px. Grid shifts from 1 column to 2 at 1024px. Max-width becomes 1200px at 1280px and is locked there. Use the breakpoint table, not assumptions.
Form Inputs Follow Pattern: Borders are 1px solid rgba(0, 95, 254, 0.3). On hover, border becomes rgba(33, 40, 189, 0.5). On focus, border is rgba(33, 40, 189, 0.7) and text is rgba(0, 25, 172, 0.5).
Cards Are Sharp: Card corners are 0px radius. Card backgrounds are transparent. No shadows. Text color is #2128BD at 14px, weight 400.
Z-index Hierarchy is Minimal: Base content is 1–2. Dropdowns are 98–99. Modals are 1000. Avoid intermediate values.
Mobile-First Approach: Start at 375px (single-column, menu toggle). Expand behavior at 768px (menu toggle removed, wider column), then 1024px (2-column grid). Media queries should hook on these exact widths, not assumptions.
{colors.neutral-1} (#FDF0E5) was measured but has no defined semantic role. It is used decoratively on the page and should not be assigned a functional meaning.