Switch between the rendered Visual preview and the Raw DESIGN.md.
Sonovate's design system embraces a bold, tech-forward aesthetic that conveys innovation, trust, and energy. The visual identity combines deep purples and vibrant cyans with a clean, minimal structure, creating a premium yet approachable feel tailored to the financial technology and recruitment space. The system prioritizes clarity and confidence through generous whitespace, deliberate color contrasts, and progressive disclosure of information. Typography is elegant and refined, using GT Walsheim Pro throughout to maintain a cohesive, modern voice. The overall atmosphere is professional yet forward-thinking—designed to inspire confidence in the platform's intelligent financial infrastructure while remaining accessible to users across industries and experience levels.
Key Characteristics
#24003D): The core brand color used throughout navigation, backgrounds, and text; establishes premium, trustworthy foundation#7C07FC): Secondary brand purple for highlights, interactive states, and accent elements#6D00F5): Deep purple used in buttons, CTAs, and prominent UI elements#00B2FF): Energetic accent for contrast overlays and secondary visual elements#0000EE): Strong accent for links and hover states#01E1FD): Vibrant cyan for buttons, badges, and data visualization accents#7C07FC): Primary action button background; signals primary CTA intent#01E1FD): Secondary action button background; provides visual contrast for alternative actions#6D00F5): Outline and border states for ghost and secondary buttons#01E1FD): Outline states for secondary actions and outlined buttons#141116): Darkest text and component backgrounds; used for strong contrast#4C4C4C): Secondary text and subdued interface elements#3F3A4C): Tertiary text and muted UI components#4A5464): Placeholder text and disabled states#F5F5F5): Very light backgrounds and subtle surface variations#FFFFFF): Primary background, cards, and light surfaces#F2E8FF): Ultra-light purple tint for background accents#F7F6FB): Soft purple-tinted white for card backgrounds and subtle sections#CF2E2E): Error states, validation failures, and critical alerts#F9CC00): Warning states and cautionary messages#FCB900): Alternative warning indicator for secondary alertsPrimary Font: GT Walsheim Pro (font-family: 'GT Walsheim Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
Fallback Stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif
GT Walsheim Pro provides the refined, technical aesthetic central to Sonovate's identity. Fallbacks ensure consistent rendering across all platforms.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/Hero | GT Walsheim Pro | 64px | 600 | 64px | 0px | Large hero headlines; max 2–3 lines |
| H1 Headline | GT Walsheim Pro | 44px | 800 | 46px | 0px | Primary section headings; bold weight for impact |
| H2 Headline | GT Walsheim Pro | 22px | 800 | 28px | 0px | Secondary section headings and card titles |
| Body Copy | GT Walsheim Pro | 20px | 300 | 30px | 0px | Standard body text in paragraphs and descriptions |
| List Item | GT Walsheim Pro | 20px | 300 | 30px | 0px | Bulleted and numbered list items; inherits body line height |
| Link (Large) | GT Walsheim Pro | 40px | 300 | 60px | 0px | Large text links in hero and CTA sections |
| Link (Standard) | GT Walsheim Pro | 30px | 300 | 45px | 0px | Standard links within body content |
| Span/Metadata | GT Walsheim Pro | 20px | 400 | 23px | 0px | Small labels, badges, metadata text |
| Button Text | GT Walsheim Pro | 20px | 300 or 400 | 30px | 0px | Text within button components |
| Caption | GT Walsheim Pro | 16px | 300 | 24px | 0px | Small helper text, captions, and fine print |
| Code | GT Walsheim Pro | 14px | 400 | 20px | 0px | Code snippets and monospace content |
300 → 800) and size increases create clear visual priority without multiple font families64px display at 1.0x line height, body at 1.5x)300 weight maintains elegance and reduced visual weight in long-form content800 weight in headings commands attention and creates distinct hierarchy breaksbackground-color: #7C07FC;
color: #FFFFFF;
font-size: 20px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 24px;
border-radius: 40px;
border: 0px none;
box-shadow: none;
line-height: 30px;
min-height: 48px;
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
Hover State: background-color: #6D00F5; (darker purple)
Active State: background-color: #5A00D1; (even darker purple)
Disabled State: background-color: #D0D0D0; color: #808080; cursor: not-allowed;
background-color: #FFFFFF;
color: #6D00F5;
font-size: 20px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 24px;
border-radius: 40px;
border: 2px solid #6D00F5;
box-shadow: none;
line-height: 30px;
min-height: 48px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
Hover State: background-color: #F7F6FB; border-color: #6D00F5;
Active State: background-color: #F2E8FF; border-color: #5A00D1;
background-color: #FFFFFF;
color: #01E1FD;
font-size: 20px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 24px;
border-radius: 40px;
border: 2px solid #01E1FD;
box-shadow: none;
line-height: 30px;
min-height: 48px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
Hover State: background-color: #E0F8FF; border-color: #01E1FD;
Active State: background-color: #C7F0FE; border-color: #00B2FF;
background-color: transparent;
color: #24003D;
font-size: 20px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 8px 12px;
border-radius: 0px;
border: 0px none;
box-shadow: none;
line-height: 23px;
min-height: auto;
cursor: pointer;
transition: opacity 0.2s ease, color 0.2s ease;
Hover State: opacity: 0.7; color: #6D00F5;
background-color: #7C07FC;
color: #FFFFFF;
font-size: 20px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 0px;
border-radius: 100%;
border: 0px none;
box-shadow: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
Hover State: background-color: #6D00F5;
Active State: background-color: #5A00D1;
background-color: #FFFFFF;
color: #24003D;
font-size: 20px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 24px;
border-radius: 16px;
border: 0px none;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.03);
line-height: 30px;
transition: box-shadow 0.3s ease, transform 0.2s ease;
Hover State: box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06); transform: translateY(-2px);
background: linear-gradient(135deg, #7C07FC 0%, #6D00F5 100%);
color: #FFFFFF;
font-size: 20px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 32px 24px;
border-radius: 16px;
border: 0px none;
box-shadow: 0px 8px 24px rgba(124, 7, 252, 0.15);
line-height: 30px;
background-color: #F7F6FB;
padding: 48px 24px;
border-radius: 16px;
border: 0px none;
box-shadow: none;
background-color: #FFFFFF;
color: #24003D;
font-size: 20px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #E5E5E5;
box-shadow: none;
line-height: 30px;
min-height: 44px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
Focus State: border-color: #7C07FC; box-shadow: 0px 0px 0px 3px rgba(124, 7, 252, 0.1);
Error State: border-color: #CF2E2E; box-shadow: 0px 0px 0px 3px rgba(207, 46, 46, 0.1);
Placeholder: color: #4A5464; opacity: 1;
background-color: #FFFFFF;
color: #24003D;
font-size: 16px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #E5E5E5;
box-shadow: none;
line-height: 24px;
min-height: 120px;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
Focus State: border-color: #7C07FC; box-shadow: 0px 0px 0px 3px rgba(124, 7, 252, 0.1);
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid #7C07FC;
background-color: #FFFFFF;
cursor: pointer;
appearance: none;
transition: background-color 0.2s ease;
Checked State: background-color: #7C07FC; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>');
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #7C07FC;
background-color: #FFFFFF;
cursor: pointer;
appearance: none;
transition: background-color 0.2s ease;
Checked State: background-color: #7C07FC; box-shadow: inset 0 0 0 4px #FFFFFF;
background-color: #FFFFFF;
color: #24003D;
font-size: 16px;
font-weight: 300;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #E5E5E5;
box-shadow: none;
line-height: 24px;
min-height: 44px;
cursor: pointer;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%237C07FC" d="M1 1l5 5 5-5"/></svg>');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
transition: border-color 0.2s ease;
Focus State: border-color: #7C07FC; box-shadow: 0px 0px 0px 3px rgba(124, 7, 252, 0.1);
background-color: #FFFFFF;
color: #24003D;
font-size: 16px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 16px 24px;
border-radius: 0px;
border: 0px none;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
gap: 32px;
background-color: transparent;
color: #24003D;
font-size: 16px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 8px 12px;
border-radius: 0px;
border: 0px none;
box-shadow: none;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease, border-bottom 0.2s ease;
border-bottom: 2px solid transparent;
Hover State: color: #7C07FC; border-bottom-color: #7C07FC;
Active State: color: #7C07FC; border-bottom-color: #7C07FC; font-weight: 600;
background-color: #FFFFFF;
color: #24003D;
width: 32px;
height: 32px;
border-radius: 4px;
border: 1px solid #E5E5E5;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
Hover State: background-color: #F7F6FB;
background-color: #7C07FC;
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
font-family: GT Walsheim Pro, sans-serif;
padding: 6px 12px;
border-radius: 30px;
border: 0px none;
box-shadow: none;
display: inline-block;
line-height: 20px;
background-color: #FFFFFF;
color: #7C07FC;
font-size: 14px;
font-weight: 600;
font-family: GT Walsheim Pro, sans-serif;
padding: 6px 12px;
border-radius: 30px;
border: 1px solid #7C07FC;
box-shadow: none;
display: inline-block;
line-height: 20px;
background-color: #00C876;
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
font-family: GT Walsheim Pro, sans-serif;
padding: 4px 8px;
border-radius: 30px;
border: 0px none;
box-shadow: none;
display: inline-block;
line-height: 16px;
display: flex;
gap: 0px;
border-bottom: 2px solid #E5E5E5;
background-color: #FFFFFF;
background-color: transparent;
color: #4A5464;
font-size: 16px;
font-weight: 400;
font-family: GT Walsheim Pro, sans-serif;
padding: 12px 20px;
border-radius: 0px;
border: 0px none;
border-bottom: 2px solid transparent;
box-shadow: none;
cursor: pointer;
transition: color 0.2s ease, border-bottom-color 0.2s ease;
Hover State: color: #24003D;
Active State: color: #7C07FC; border-bottom-color: #7C07FC; font-weight: 600;
Base Unit: 4px
Spacing Scale:
4px (XS) — Small internal spacing within components8px (S) — Compact spacing between tight elements12px (SM) — Small padding within inputs and buttons16px (M) — Standard padding within cards and sections20px (MD) — Medium spacing between sections24px (L) — Large padding within containers32px (XL) — Extra-large gap between major sections40px (2XL) — Extra margin above/below major elements48px (3XL) — Very large gap between distinct sections52px (4XL) — Maximum margin for section separation64px (5XL) — Hero section spacingUsage Context:
4px–8px: Icon-text spacing, badge padding, fine adjustments12px–16px: Button/input padding, card internal spacing20px–24px: Section padding, component grouping32px–48px: Section separation, major content blocks52px–64px: Hero spacing, page-level separationMax Container Width: 1400px
Column Strategy: 12-column responsive grid
1200px container with 24px side margins768px container with 20px side margins100% - 40px (20px margins on each side)Section Patterns:
64px top/bottom paddingSonovate embraces generous whitespace to communicate premium positioning and reduce cognitive load. Content breathes through:
32px gap between major sections16px–24px internal padding1.5x for body, 1.0x for display)0px — No radius: navigation elements, native select dropdowns4px — Sharp corners: small UI elements, checkboxes10px — Subtle rounding: input fields, smaller cards16px — Standard rounding: cards, containers, larger UI blocks30px — Medium rounding: badges, label elements40px — Large rounding: buttons, prominent rounded controls100% — Full rounding: circular icon buttons, avatar images9999px — Pill shape: fully rounded buttons with fixed height| Level | Treatment | Use |
|---|---|---|
| None | box-shadow: none; | Flat elements, backgrounds, inputs in default state |
| Subtle (L1) | 0px 2px 8px rgba(0, 0, 0, 0.04); | Navigation, subtle container separation |
| Standard (L2) | 0px 5px 10px rgba(0, 0, 0, 0.03); | Default cards, lifted containers |
| Medium (L3) | 0px 8px 20px rgba(0, 0, 0, 0.06); | Hover card states, modals, prominent overlays |
| Prominent (L4) | 0px 12px 32px rgba(0, 0, 0, 0.08); | Modals, dropdowns, popovers |
| Feature (L5) | 0px 8px 24px rgba(124, 7, 252, 0.15); | Hero cards, featured sections with purple brand tint |
Shadow Philosophy:
Shadows are minimal and soft, preferring directional lift over harsh contrast. Brand-colored shadows (purple with 0.15 opacity) appear only on feature-highlighted elements. Standard shadows use black at reduced opacity (0.03–0.08) to maintain clean, modern aesthetics. Shadows increase on interactive hover states to signal engagement, then remove or reduce on active states to suggest "pressed" feedback.
#7C07FC / #6D00F5) for all primary actions — Creates predictable, trust-building CTA patterns#01E1FD) for body text — Insufficient contrast against light backgrounds| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile Small | 320px | Single column, full-width content, 20px side margins, button height 44px, font-size reduced by 2px where needed |
| Mobile Large | 480px | Single column, expanded width, 24px side margins, stacked form fields |
| Tablet | 768px | 2-column layout, 20px side margins, card grid 2 columns, navigation to dropdown menu |
| Tablet Large | 1024px | 3-column layout, 24px side margins, expanded header, full navigation visible |
| Desktop | 1280px | 4-column layout, 24px side margins, max container 1200px, full feature visibility |
| Desktop Large | 1400px | Full design system width, max container 1400px, expanded padding and spacing |
44px × 44px — All interactive elements on mobile must be at least this size44px on mobile, 48px on desktop8px between adjacent interactive elements40px × 40px minimum (mobile and desktop)8px horizontal, 4px vertical for text linksNavigation:
1024px+): Horizontal menu visible in header768px–1023px): Dropdown menu in header<768px): Hamburger menu with slide-out drawerCards & Grids:
1280px+): 4-column grid (or 3 for feature cards)768px–1279px): 2-column grid<768px): 1-column full-width stackTypography:
1024px+): H1 44px, H2 22px, body 20px768px–1023px): H1 36px, H2 20px, body 18px<768px): H1 28px, H2 18px, body 16pxSpacing:
48px section gap, 24px card padding32px section gap, 20px card padding24px section gap, 16px card paddingButton & Input Height:
48px48px44px (easier to tap)Form Layout:
#7C07FC)#01E1FD)#24003D)#4C4C4C)#FFFFFF)#F7F6FB)#FFFFFF)#E5E5E5)#CF2E2E)#F9CC00)#00C876)#00B2FF)#7C07FC → #6D00F5)#7C07FC for all primary buttons and CTAs — This is the core brand action color; every primary action defaults to this purple40px border-radius to all buttons — Buttons should always have prominent, curved corners; adjust to 100% only for icon buttons#FFFFFF) backgrounds with 24px padding inside cards — Cards are the standard UI container; apply consistent padding and border-radius of 16pxbox-shadow: 0px 5px 10px rgba(0, 0, 0, 0.03); to cards by default — This subtle shadow creates depth without harshness20px font size with 30px line-height — Maintains premium spacing and readability; never reduce line-height below 1.5x for body32px (tablet/desktop) or 24px (mobile) — Generous whitespace is core to the design system800 and are never light — H1/H2 headings must use 800 font-weight to command attention0px 0px 0px 3px rgba(124, 7, 252, 0.1) box-shadow — Provides clear keyboard navigation feedback44px height; desktop minimum 48px — Touch targets must be large enough for reliable interaction#7C07FC → #6D00F5)#01E1FD) is reserved for secondary CTAs and accents, never primary text — Use purple for primary and cyan for secondary to maintain hierarchy#CF2E2E, warnings use #F9CC00, success uses #00C876 — These semantic colors are non-negotiable for status communication