Remixes of www.onmyads.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: Onmyads
description: |
Onmyads embodies a bold, forward-thinking aesthetic rooted in high-contrast
minimalism and vibrant accent energy. The system pairs a pristine white
primary palette against a pure black canvas, punctuated by a striking purple
gradient (#9A6EEA) that signals interactivity and brand energy. Typography is
clean, geometric, and commanding—particularly in display scales where generous
negative letter-spacing creates an intentionally tight, premium feel. The
overall mood is professional yet approachable: a fintech-adjacent SaaS
platform that prioritizes clarity and movement. Depth is introduced sparingly
through single-tier shadows and colour blocking rather than layered elevation,
keeping the interface modern and uncluttered. The hero band features a
soft-to-rich purple gradient, creating a contained, branded moment that breaks
the stark monochrome baseline.
source:
url: "https://www.onmyads.com"
pagesAnalyzed: 1
extractedAt: 2026-10-29
tokensMeasured: true
colors:
primary: "#FFFFFF"
link: "#9A6EEA"
canvas: "#000000"
on-primary: "#222222"
ink: "#FFFFFF"
neutral-1: "#333333"
typography:
display-xl:
fontFamily: Suisseintl
fontSize: 90px
fontWeight: 500
lineHeight: 1
letterSpacing: -3.6px
display-xl-uppercase:
fontFamily: Suisseintl
fontSize: 90px
fontWeight: 500
lineHeight: 1
letterSpacing: -3.6px
textTransform: uppercase
display-lg:
fontFamily: Suisseintl
fontSize: 72px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.88px
display-lg-uppercase:
fontFamily: Suisseintl
fontSize: 72px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.88px
textTransform: uppercase
display-md:
fontFamily: Suisseintl
fontSize: 60px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.4px
display-sm:
fontFamily: Suisseintl
fontSize: 45px
fontWeight: 500
lineHeight: 1
letterSpacing: -1.8px
textTransform: uppercase
heading-md:
fontFamily: Suisseintl
fontSize: 30px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.29px
heading-md-strong:
fontFamily: Suisseintl
fontSize: 30px
fontWeight: 500
lineHeight: 1
letterSpacing: -1.2px
heading-md-2:
fontFamily: Suisseintl
fontSize: 30px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.29px
heading-sm:
fontFamily: Suisseintl
fontSize: 24px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.96px
body-xl:
fontFamily: Suisseintl
fontSize: 19.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-lg:
fontFamily: Suisseintl
fontSize: 16.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-md:
fontFamily: Suisseintl
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-sm:
fontFamily: Suisseintl
fontSize: 14.4px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.29px
body-xs:
fontFamily: Suisseintl
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.35
letterSpacing: -0.29px
body-xs-uppercase:
fontFamily: Suisseintl
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.35
letterSpacing: -0.29px
textTransform: uppercase
label:
fontFamily: Suisseintl
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
rounded:
none: 0px
xs: 23.904px
full: 9999px
spacing:
xxs: 4px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 36px
xxxl: 44px
section: 56px
band: 60px
borderWidths:
thin: 2px
shadows:
sm: "rgba(0, 0, 0, 0.25) 10px 0px 25px 0px"
elevationStrategy: single-tier
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FAF9FD"
surface: "#F0EFF3"
surfaceRaised: "#E9E8EB"
text: "#18161C"
textMuted: "#6D6B71"
border: "#D7D6DA"
accent: "#814AE5"
accentFg: "#FFFFFF"
focusRing: "#9A6EEA"
elevation: shadow
dark:
bg: "#000000"
surface: "#000000"
surfaceRaised: "#141414"
text: "#FFFFFF"
textMuted: "#A6A6A6"
border: "#1F1F1F"
accent: "#9A6EEA"
accentFg: "#0B0B0C"
focusRing: "#9A6EEA"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(0deg, rgb(154, 110, 234), rgb(98, 74, 155))"
components:
button-primary:
typography: "{typography.body-sm}"
textColor: "{colors.ink}"
height: 60.0469px
padding: "9px 9px 9px 29.952px"
rounded: 999px
backgroundColor: "{colors.primary}"
button-primary-sm:
typography: "{typography.body-sm}"
textColor: "{colors.ink}"
height: 42.0312px
padding: "6.048px 21.024px 6.048px 6.048px"
rounded: 999px
backgroundColor: "rgba(255, 255, 255, 0.08)"
button-outline:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.canvas}"
height: 46px
padding: "12px 20px 12px 20px"
rounded: 100px
backgroundColor: "{colors.canvas}"
button-outline-2:
typography: "{typography.body-md}"
textColor: "{colors.canvas}"
border: "1px solid {colors.canvas}"
height: 46px
padding: "12px 20px 12px 20px"
rounded: 100px
backgroundColor: "rgba(255, 255, 255, 0)"
footer:
typography: "{typography.body-sm}"
textColor: "{colors.ink}"
padding: "150.048px 29.952px 29.952px 29.952px"
link:
typography: "{typography.body-sm}"
textColor: "{colors.ink}"
padding: "9px 9px 9px 29.952px"
rounded: 999px
backgroundColor: "{colors.canvas}"
link-sm:
typography: "{typography.body-sm}"
textColor: "{colors.ink}"
padding: "6.048px 0px 6.048px 0px"
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: 367
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 44
bodyPx: 4
sectionPaddingX: 16
- width: 768
containerWidth: 760
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 44
bodyPx: 8
sectionPaddingX: 16
- width: 1024
containerWidth: 1003
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 64
bodyPx: 10
sectionPaddingX: 21
- width: 1280
containerWidth: 1253
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 80
bodyPx: 13
sectionPaddingX: 27
- width: 1440
containerWidth: 1410
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 90
bodyPx: 14
sectionPaddingX: 30
coverage:
statesFound: 14
gradientsFound: 1
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#FFFFFF"
link: "#9A6EEA"
canvas: "#000000"
on-primary: "#222222"
neutral-1: "#333333"
typography:
display-xl:
fontSize: 90px
fontWeight: 500
lineHeight: 1
letterSpacing: -3.6px
display-xl-uppercase:
fontSize: 90px
fontWeight: 500
lineHeight: 1
letterSpacing: -3.6px
textTransform: uppercase
display-lg-uppercase:
fontSize: 72px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.88px
textTransform: uppercase
display-lg:
fontSize: 72px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.88px
display-md:
fontSize: 60px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.4px
display-sm:
fontSize: 45px
fontWeight: 500
lineHeight: 1
letterSpacing: -1.8px
textTransform: uppercase
heading-md-strong:
fontSize: 30px
fontWeight: 500
lineHeight: 1
letterSpacing: -1.2px
heading-md-2:
fontSize: 30px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.29px
heading-md:
fontSize: 30px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.29px
heading-sm:
fontSize: 24px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.96px
body-xl:
fontSize: 19.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-lg:
fontSize: 16.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-md:
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.29px
body-sm:
fontSize: 14.4px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.29px
body-xs-uppercase:
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.35
letterSpacing: -0.29px
textTransform: uppercase
body-xs:
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.35
letterSpacing: -0.29px
label:
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
spacing:
xxs: 4px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 36px
xxxl: 44px
section: 56px
band: 60px
rounded:
none: 0px
xs: 23.904px
full: 9999px
shadows:
sm: "rgba(0, 0, 0, 0.25) 10px 0px 25px 0px"
borders:
thin: 2px
opacity:
disabled: 0.85
zIndex:
base: 1
sticky: 999
modal: 1000
gradients:
hero: "linear-gradient(0deg, rgb(154, 110, 234), rgb(98, 74, 155))"
Onmyads embodies a bold, forward-thinking aesthetic rooted in high-contrast minimalism and vibrant accent energy. The system pairs a pristine white primary palette against a pure black canvas, punctuated by a striking purple gradient ({colors.link} — #9A6EEA) that signals interactivity and brand energy. Typography is clean, geometric, and commanding—particularly in display scales where generous negative letter-spacing creates an intentionally tight, premium feel. The overall mood is professional yet approachable: a fintech-adjacent SaaS platform that prioritizes clarity and movement. Depth is introduced sparingly through single-tier shadows and colour blocking rather than layered elevation, keeping the interface modern and uncluttered. The hero band features a soft-to-rich purple gradient, creating a contained, branded moment that breaks the stark monochrome baseline.
Key Characteristics
{rounded.full} — 9999px) soften the rigid colour palette{gradients.hero}) as the primary brand energy{colors.primary} — #FFFFFF): Primary ink colour across headings, body text, and high-emphasis CTAs. Used as background fill for key action buttons. The system's dominant foreground colour in a dark-dominant layout.{colors.link} — #9A6EEA): Semantic link colour for inline navigation. Appears on hover states of links and secondary text. Reinforces brand accent energy.{colors.canvas} — #000000): Default page background. The foundational neutral that establishes extreme contrast with white elements.{colors.on-primary} — #222222): Secondary neutral tone. Used as label colour on branded surfaces (e.g. inside white button fills).{colors.neutral-1} — #333333): Decorative neutral. No measured role in active components; reserved for future surface variations or subtle accent overlays.Primary: Suisseintl, sans-serif Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif
Suisseintl is a precision geometric sans-serif that conveys modernity and control—essential for a managed media-buying platform. Its clean letterforms and tight metrics support dense information hierarchy.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Suisseintl | 90px | 500 | 1 | -3.6px | Hero title; maximum impact |
| Display XL Uppercase | Suisseintl | 90px | 500 | 1 | -3.6px | Display XL with text-transform: uppercase |
| Display LG Uppercase | Suisseintl | 72px | 500 | 1 | -2.88px | Large uppercase hero content |
| Display LG | Suisseintl | 72px | 500 | 1 | -2.88px | Large hero or section title |
| Display MD | Suisseintl | 60px | 500 | 1 | -2.4px | Medium display heading |
| Display SM Uppercase | Suisseintl | 45px | 500 | 1 | -1.8px | Small uppercase display; section breaks |
| Heading MD Strong | Suisseintl | 30px | 500 | 1 | -1.2px | Strong heading emphasis |
| Heading MD 2 | Suisseintl | 30px | 500 | 1 | -0.29px | Heading variant, medium weight |
| Heading MD | Suisseintl | 30px | 400 | 1 | -0.29px | Baseline heading medium |
| Heading SM | Suisseintl | 24px | 500 | 1 | -0.96px | Small heading, bold |
| Body XL | Suisseintl | 19.5px | 400 | 1.25 | -0.29px | Large body text |
| Body LG | Suisseintl | 16.5px | 400 | 1.25 | -0.29px | Large body; intro copy |
| Body MD | Suisseintl | 16px | 400 | 1.25 | -0.29px | Default body text; primary readability |
| Body SM | Suisseintl | 14.4px | 400 | 1 | -0.29px | Compact body; button text |
| Body XS Uppercase | Suisseintl | 13.5px | 400 | 1.35 | -0.29px | Tiny uppercase labels |
| Body XS | Suisseintl | 13.5px | 400 | 1.35 | -0.29px | Tiny body copy |
| Label | Suisseintl | 13.5px | 400 | 1.25 | 0px | Form labels; no tracking |
{colors.primary} (#FFFFFF){colors.on-primary} (#222222){typography.body-sm} (14.4px){rounded.full} (9999px){colors.link} (#9A6EEA); text becomes {colors.primary} (#FFFFFF)rgba(255, 255, 255, 0.08){colors.primary} (#FFFFFF){typography.body-sm} (14.4px){rounded.full} (9999px){colors.link} (#9A6EEA){colors.canvas} (#000000){colors.primary} (#FFFFFF){rounded.full} (100px){borders.thin} (2px) solid {colors.canvas} (#000000){colors.link} (#9A6EEA); text remains {colors.primary} (#FFFFFF)rgba(255, 255, 255, 0) (transparent){colors.canvas} (#000000){rounded.full} (100px){borders.thin} (2px) solid {colors.canvas} (#000000){colors.primary} (#FFFFFF){typography.body-sm} (14.4px){colors.link} (#9A6EEA); outline none{colors.primary} (#FFFFFF){typography.body-sm} (14.4px){colors.link} (#9A6EEA){colors.canvas} (#000000){colors.primary} (#FFFFFF){typography.label} (13.5px){rounded.full} (9999px){borders.thin} (2px) solid (color not extracted; assume {colors.primary} or {colors.neutral-1})#3898EC; outline nonergba(0, 0, 0, 0) (transparent){colors.primary} (#FFFFFF){typography.body-sm} (14.4px){rounded.none} (0px)The spacing scale is built on a {spacing.xxs} (4px) base unit and spans ten defined values:
{spacing.xs} (12px): Tight spacing between related elements{spacing.sm} (16px): Standard component padding; form field gutters{spacing.md} (20px): Medium rhythm spacing{spacing.lg} (24px): Large breathing; between medium sections{spacing.xl} (28px): Extra large; between subsections{spacing.xxl} (36px): Extra-extra large; major section spacing{spacing.xxxl} (44px): Maximum interpersonal spacing{spacing.section} (56px): Full section margin; standard vertical rhythm{spacing.band} (60px): Large hero or band spacing; page-level breakpointsUsage Context: The system applies {spacing.section} and {spacing.band} to separate major content sections. Component internals use {spacing.xxs} through {spacing.md}. Page margins and container gutters scale with viewport width (see Responsive Behavior).
{spacing.sm} (16px) at mobile to {spacing.lg} (30px) at desktopWhitespace is used as an active design tool. The extreme canvas–to-primary contrast (black to white) creates visual separation without requiring borders or dividers. Vertical rhythm is maintained through {spacing.section} and {spacing.band} increments between content blocks. Hero sections, feature blocks, and footer use generous top/bottom padding to establish breathing room. Inline elements (buttons, links, labels) use minimal whitespace internally ({spacing.xxs} to {spacing.xs}) to maintain density and precision.
The system employs three radius values:
{rounded.none} (0px): Footer, image, and structural containers where sharp corners reinforce geometry{rounded.xs} (23.904px): Decorative or secondary elements; subtle rounding{rounded.full} (9999px): Pill-shaped buttons, inputs, and interactive elements. This signature pill shape softens the rigid contrast palette and communicates affordance{borders.thin} (2px): Applied to outline buttons and input borders. Creates visual weight without heaviness; pairs well with the 9999px radius for clean, modern pill shapes| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; colour blocking only | Default cards, buttons, text blocks; primary UI layer |
| Raised | rgba(0, 0, 0, 0.25) 10px 0px 25px 0px | Modal overlays; single-tier shadow for modal depth |
Shadow Philosophy: The system employs a single-tier shadow strategy. Depth is primarily communicated through colour blocking (white on black, accent overlays) rather than layered shadows. When a shadow is required—specifically for modals—it uses a soft, offset blur ({shadows.sm}) that creates a subtle lift without suggesting multiple stacking levels. This keeps the interface flat and modern while preserving visual hierarchy.
{opacity.disabled} (0.85) — Applied to hover or muted states to signal reduced interactivity without removing the element from view{zIndex.base} (1) — Standard flow content{zIndex.sticky} (999) — Fixed headers, persistent navigation{zIndex.modal} (1000) — Overlays, dialogs, and front-most content; ensures modals float above sticky layers{colors.link} (#9A6EEA) as the purple accent for all interactive hover states. It signals brand energy and provides the only warm colour break in the black–white system.{rounded.full} (9999px) to all primary buttons and inputs. The pill shape is a defining visual signature that softens the rigid contrast palette.{spacing.section} (56px) and {spacing.band} (60px) to create consistent vertical rhythm between major sections.{borders.thin} (2px) borders only to outline buttons and form inputs. Keep structural elements clean and border-free.{colors.primary}) for all primary text on black canvas. This extreme contrast is non-negotiable; it defines the system's aesthetic.{colors.link} for hover and active states of links and secondary interactive elements. It is the accent, not a primary fill.{shadows.sm}), and it is reserved for modals. Keep everything else flat.{rounded.full} (9999px). The pill shape is a signature affordance cue.| Viewport | Content Width | Grid Columns | Largest Heading | Body Size | Section Padding X |
|---|---|---|---|---|---|
| 375px | 367px | 2 | 44px | 4px | 16px |
| 768px | 760px | 2 | 44px | 8px | 16px |
| 1024px | 1003px | 4 | 64px | 10px | 21px |
| 1280px | 1253px | 4 | 80px | 13px | 27px |
| 1440px | 1410px | 4 | 90px | 14px | 30px |
Breakpoint Strategy: The system employs five measured breakpoints. Mobile (375–768px) uses 2 columns and smaller heading sizes. Tablet and desktop (1024px and above) expand to 4 columns and increase heading scale. Section padding grows from {spacing.sm} (16px) at mobile to {spacing.lg} (30px) at desktop, maintaining proportional breathing room.
While no explicit touch-target data was extracted, interactive elements (buttons, inputs, links) should maintain a minimum tappable height of 44–48px across all breakpoints. The measured primary button height of 60px and outline button height of 46px exceed this threshold and serve as the reference baseline.
{colors.primary} — #FFFFFF){colors.link} — #9A6EEA){colors.canvas} — #000000){colors.on-primary} — #222222){colors.neutral-1} — #333333)All buttons are pill-shaped ({rounded.full} — 9999px). Primary buttons are white (#FFFFFF) text on white fill with black text overlay; outline buttons are transparent with {borders.thin} (2px) black border. Hover state applies {colors.link} (#9A6EEA) to background or border.
Display typography uses aggressive negative letter-spacing (e.g. -3.6px on 90px headlines). This is intentional and non-negotiable; it reinforces the brand's precision and premium feel. Do not flatten tracking values.
The colour palette is exactly 5 colours: white, purple, black, dark grey, and charcoal. There is no error/success/warning ramp, no light/dark mode variants, and no additional accent colours. All UI is derived from these five tokens.
Inputs are pill-shaped with {borders.thin} (2px) borders. Default border colour is black or neutral; focus state applies #3898EC (specific blue from extracted focus styles). All inputs use {typography.label} (13.5px, weight 400, no letter-spacing).
Spacing rhythm is based on a 4px unit scale (xxs=4, xs=12, sm=16, md=20, lg=24, xl=28, xxl=36, xxxl=44, section=56, band=60). Section-level gaps use {spacing.section} or {spacing.band}; component internals use xxs–md.
Depth is achieved through colour blocking, not shadows. The only shadow ({shadows.sm} — rgba(0, 0, 0, 0.25) 10px 0px 25px 0px) appears on modals. Keep all other surfaces flat. Z-index layers are base (1), sticky (999), and modal (1000).
Responsive scaling: Headings drop from 90px at 1440px to 44px at 375px. Grid shifts from 4 columns (1024px+) to 2 columns (mobile). Section padding scales from 16px to 30px. Body text grows in small increments across the spectrum.
All text is white (#FFFFFF) on the black canvas except labels on white fills (use {colors.on-primary} — #222222). Links are white by default; on hover, they become purple ({colors.link} — #9A6EEA).
Font is Suisseintl throughout. Weight 500 (medium) is used only for headings and emphasis; weight 400 (regular) is the default for all body and interactive text. No other weights are employed.
The footer uses transparent background and white text. It is structurally part of the canvas but visually distinct through generous top padding ({spacing.section} — 56px or {spacing.band} — 60px minimum).
No semantic colour ramp extracted. The site does not declare error, success, warning, or info states in its publicly available markup. If these states exist behind authentication or in internal tools, they are not represented in this document. Do not invent a semantic status ramp.
One colour ({colors.neutral-1} — #333333) has no measured role. It was extracted but never observed in active use on measured components. It is recorded here as decorative / reserved and should not be deployed without additional design guidance.
One page analysed. The extraction covered only the public homepage. Authenticated surfaces (user dashboard, admin panels, settings) were not visited. If those pages employ additional colours, typography scales, or component patterns, they are absent from this document.
No interaction states beyond those in extracted stylesheets. Focus, hover, and active states are limited to what appeared in the stylesheet data (e.g. link hover → purple, button hover → purple background, input focus → blue border). If disabled, loading, or error states exist on other pages, they are not documented here.
Border colour on input fields not explicitly extracted. Focus state applies #3898EC; default border colour is assumed to be {colors.canvas} (#000000) or {colors.neutral-1} (#333333), but this was not measured directly. Implement with caution and validate against live component behaviour.
No light / dark mode variants. The extraction captured a single theme (black canvas, white text). No derived or alternate colour schemes were present in the measured styles. The system is monochromatic by design, not by limitation.
No explicit opacity scale for interactive states. The 0.85 opacity level was observed in a hover context; other opacity values (0.5, 0.75, etc.) may exist in unmeasured components or states. Use 0.85 as the reference; extrapolate conservatively if additional opacity levels are needed.
Menu / navigation interaction not detailed. No visible nav links were counted at any breakpoint, suggesting either a fixed, persistent nav or a hidden mobile menu. The collapse point and toggle interaction were not captured; implementation should follow conventional patterns for responsive navigation.
Hero gradient fully captured; decorative elements partially obscured. The linear gradient ({gradients.hero} — linear-gradient(0deg, rgb(154, 110, 234), rgb(98, 74, 155))) and its container styling are known, but any animated or pseudo-element overlays within the hero band were not fully decomposed. Use the gradient as-is; any layered decorative shapes should be inferred from visual inspection.