Remixes of www.syscom.mx
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: Syscom
description: |
SYSCOM's design system establishes a sophisticated, enterprise-focused digital
environment built for technical professionals and B2B integrators. The visual
identity embraces a dark-first strategy with controlled contrast, combining
deep neutral canvases with precision primary accents to create clarity without
visual fatigue. The typography is purposeful and measured—every size and
weight is deliberate, supporting rapid scanning and hierarchy recognition.
Surface layering relies on subtle color shifts rather than shadows,
reinforcing a modern, tech-forward aesthetic. The design communicates
reliability, expertise, and approachability simultaneously, ideal for a
38-year-old technology wholesale platform serving 75,000+ certified products
across security, networking, and industrial sectors.
source:
url: "https://www.syscom.mx/"
pagesAnalyzed: 6
extractedAt: 2026-11-01
tokensMeasured: true
colors:
primary: "#3958BF"
link: "#98B6F5"
canvas: "#141519"
surface: "#1A1C21"
on-primary: "#C7CAD0"
ink: "#FFFFFF"
body: "#F6F7F9"
muted: "#EEF0F3"
faint: "#C7CAD0"
hairline: "#2F3238"
warning: "#FDB022"
info: "#F04438"
accent-1: "#171E30"
accent-2: "#24262C"
accent-3: "#38445E"
accent-4: "#64718D"
accent-5: "#DCE7FF"
accent-6: "#949EB5"
neutral-1: "#9B9FA8"
typography:
heading-lg:
fontFamily: Sora
fontSize: 28px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.56px
heading-md:
fontFamily: Figtree
fontSize: 20px
fontWeight: 600
lineHeight: 1.25
letterSpacing: -0.4px
heading-md-loose:
fontFamily: Figtree
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
letterSpacing: -0.4px
heading-sm:
fontFamily: Figtree
fontSize: 15px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -0.3px
heading-sm-strong:
fontFamily: Figtree
fontSize: 15px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.3px
textTransform: uppercase
heading-xs:
fontFamily: Figtree
fontSize: 14px
fontWeight: 600
lineHeight: 1.38
letterSpacing: -0.28px
body-md:
fontFamily: Figtree
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Figtree
fontSize: 15px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.15px
body-xs:
fontFamily: Figtree
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0.14px
body-xs-strong:
fontFamily: Figtree
fontSize: 14px
fontWeight: 600
lineHeight: 1.38
letterSpacing: 0.14px
body-xs-tight:
fontFamily: Figtree
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
body-xs-2:
fontFamily: Figtree
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 0.14px
nav:
fontFamily: Figtree
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0.16px
button-xl:
fontFamily: Sora
fontSize: 28px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
button-lg:
fontFamily: Figtree
fontSize: 15px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0.15px
button-lg-strong:
fontFamily: Figtree
fontSize: 15px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-md:
fontFamily: Figtree
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button-sm:
fontFamily: Figtree
fontSize: 13px
fontWeight: 500
lineHeight: 1.54
letterSpacing: 0px
label:
fontFamily: Figtree
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
caption-sm:
fontFamily: Figtree
fontSize: 12px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0.12px
caption-sm-tight:
fontFamily: Figtree
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
caption-sm-strong:
fontFamily: Figtree
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0.12px
caption-sm-2:
fontFamily: Figtree
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0px
caption-sm-3:
fontFamily: Figtree
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0.12px
caption-xs:
fontFamily: Figtree
fontSize: 10px
fontWeight: 500
lineHeight: 1
letterSpacing: 0.1px
rounded:
none: 0px
xs: 6px
sm: 7px
md: 8px
lg: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(10, 13, 18, 0.05) 0px 1px 2px 0px"
md: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
lg: "rgba(10, 13, 18, 0.06) 0px 4px 12px 0px"
xl: "rgb(47, 50, 56) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F9FAFD"
surface: "#EFF0F3"
surfaceRaised: "#E8E9EB"
text: "#13151A"
textMuted: "#6A6B6F"
border: "#D6D7DA"
accent: "#3958BF"
accentFg: "#FFFFFF"
focusRing: "#3958BF"
elevation: shadow
dark:
bg: "#141519"
surface: "#1A1C21"
surfaceRaised: "#2C2E33"
text: "#FFFFFF"
textMuted: "#F6F7F9"
border: "#2F3238"
accent: "#4563C7"
accentFg: "#FFFFFF"
focusRing: "#3958BF"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(oklab(0 0 0 / 0.35) 0%, rgba(0, 0, 0, 0) 100%)"
- context: hero
kind: linear
value: "linear-gradient(90deg, rgba(8, 13, 28, 0.9) 0%, rgba(8, 13, 28, 0.66) 34%, rgba(8, 13, 28, 0.2) 62%, rgba(8, 13, 28, 0) 82%)"
- context: section
kind: linear
value: "linear-gradient(in oklab, rgba(0, 0, 0, 0) 0%, rgb(20, 21, 25) 100%)"
components:
button-filled:
typography: "{typography.button-md}"
textColor: "rgb(44, 70, 163)"
border: "1px solid rgb(74, 110, 217)"
height: 30px
padding: "4px 10px 4px 10px"
rounded: "{rounded.xs}"
backgroundColor: "rgb(237, 243, 255)"
button-primary:
typography: "{typography.nav}"
textColor: "{colors.ink}"
height: 32px
padding: "8px 16px 8px 16px"
rounded: "8px 0px"
backgroundColor: "{colors.primary}"
button-filled-lg:
typography: "{typography.body-xs-tight}"
textColor: "rgb(44, 70, 163)"
height: 36px
padding: "8px 12px 8px 12px"
rounded: "{rounded.md}"
backgroundColor: "rgb(240, 242, 248)"
button-outline:
typography: "{typography.button-sm}"
textColor: "{colors.accent-3}"
border: "1px solid rgb(200, 207, 222)"
height: 28px
padding: "3px 10px 3px 10px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.ink}"
button-outline-lg:
typography: "{typography.body-xs-tight}"
textColor: "rgb(44, 70, 163)"
border: "1px solid rgb(74, 110, 217)"
height: 34px
padding: "6px 12px 6px 12px"
rounded: "{rounded.md}"
button-text:
typography: "{typography.heading-lg}"
textColor: "{colors.accent-1}"
height: 35px
card-featured:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
padding: "10px 8px 10px 8px"
rounded: "16px 16px 0px 0px"
backgroundColor: "rgb(245, 248, 255)"
card:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
border: "1px solid rgb(226, 230, 240)"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(10, 13, 18, 0.06) 0px 4px 12px 0px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.ink}"
card-featured-sm:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
padding: "10px 8px 10px 8px"
backgroundColor: "rgb(245, 248, 255)"
card-sm:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
padding: "10px 14px 10px 14px"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 54px
navigation-2:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1)"
height: 54px
footer:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
padding: "24px 16px 48px 16px"
backgroundColor: "rgb(248, 249, 253)"
footer-2:
typography: "{typography.body-md}"
textColor: "{colors.body}"
padding: "24px 16px 48px 16px"
backgroundColor: "{colors.surface}"
link:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
link-lg:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
rounded: "{rounded.md}"
backgroundColor: "rgb(245, 248, 255)"
states:
other-hover:
target: other
state: hover
borderColor: "rgba(0, 0, 0, 0)"
other-active:
target: other
state: active
opacity: 0.9
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 2
navLinksVisible: 6
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 992
gridColumns: 3
navLinksVisible: 6
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1248
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1408
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 62
gradientsFound: 3
rolesUnassigned: 7
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: true
SYSCOM's design system establishes a sophisticated, enterprise-focused digital environment built for technical professionals and B2B integrators. The visual identity embraces a dark-first strategy with controlled contrast, combining deep neutral canvases with precision primary accents to create clarity without visual fatigue. The typography is purposeful and measured—every size and weight is deliberate, supporting rapid scanning and hierarchy recognition. Surface layering relies on subtle color shifts rather than shadows, reinforcing a modern, tech-forward aesthetic. The design communicates reliability, expertise, and approachability simultaneously, ideal for a 38-year-old technology wholesale platform serving 75,000+ certified products across security, networking, and industrial sectors.
Key Characteristics
{colors.canvas} — #141519){colors.primary} — #3958BF), used sparingly for CTAs and key interactions{colors.warning} — #FDB022) and Info ({colors.info} — #F04438) semantic colors for status messaging{colors.primary} — #3958BF): Primary CTA fill, active navigation states, brand accent in hero sections, and interactive focus indicators. Used on buttons, links, and call-to-action elements throughout the platform.{colors.link} — #98B6F5): Secondary inline link color with reduced visual weight compared to primary, used in body text and secondary navigation contexts.{colors.accent-1} — #171E30): Decorative tone used in hero gradients and thematic backgrounds; no semantic role assigned.{colors.accent-2} — #24262C): Decorative tone for subtle surface variations and accent layering; no semantic role assigned.{colors.accent-3} — #38445E): Decorative mid-tone used in gradient overlays and thematic sectioning; no semantic role assigned.{colors.accent-4} — #64718D): Decorative neutral accent for visual texture; no semantic role assigned.{colors.accent-5} — #DCE7FF): Light decorative tone used in featured card backgrounds and subtle backgrounds; no semantic role assigned.{colors.accent-6} — #949EB5): Decorative neutral for secondary layering and subtle depth; no semantic role assigned.{colors.primary} — #3958BF): Button fill, active states, and emphasis elements.{colors.surface} — #1A1C21): Transparent or outlined button backgrounds on light surfaces.{colors.canvas} — #141519): Default page background, creating a dark, restful environment for extended product browsing.{colors.surface} — #1A1C21): Card and panel backgrounds, providing subtle depth separation from canvas.{colors.ink} — #FFFFFF): Primary text on dark backgrounds (headings, critical content).{colors.body} — #F6F7F9): Body copy and secondary text, maintaining readable contrast on dark surfaces.{colors.muted} — #EEF0F3): Captions, tertiary text, and secondary UI labels.{colors.on-primary} — #C7CAD0): Faint text for placeholders, disabled states, and tertiary labels on brand-colored surfaces.{colors.neutral-1} — #9B9FA8): Secondary neutral used in subtle UI elements and borders.{colors.hairline} — #2F3238): 1px borders, dividers, and stroke lines defining component boundaries without visual emphasis.{colors.warning} — #FDB022): Warning states, caution messaging, and attention-grabbing alerts requiring user action.{colors.info} — #F04438): Error states, critical alerts, and informational messaging requiring immediate attention.Primary: Figtree
Fallback stack: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Figtree is a geometric, humanist sans-serif that balances technical precision with warmth, ideal for B2B interfaces requiring clarity and approachability.
Secondary: Sora
Fallback stack: Sora, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Sora is a clean, modern display face used exclusively for large headings and hero text, providing visual hierarchy and distinctive brand presence.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Sora | 28px | 400 | 1.25 | –0.56px | Hero headings, page titles; measured on H2. |
| Heading MD | Figtree | 20px | 600 | 1.25 | –0.4px | Section headings, product category titles. |
| Heading SM Strong | Figtree | 15px | 600 | 1.5 | –0.3px | Uppercase subsection headings, card titles. Text-transform: uppercase. |
| Heading SM | Figtree | 15px | 500 | 1.25 | –0.3px | Secondary headings, product names. |
| Heading XS | Figtree | 14px | 600 | 1.38 | –0.28px | Tertiary headings, label headings. |
| Body MD | Figtree | 16px | 400 | 1.5 | 0px or 0.16px | Body copy, extended product descriptions, list items. |
| Body SM | Figtree | 15px | 500 | 1.5 | 0.15px | Secondary body text, form labels. |
| Body XS | Figtree | 14px | 400 | 1.43 | 0.14px | Tertiary text, metadata. |
| Body XS Strong | Figtree | 14px | 600 | 1.38 | 0.14px | Bold metadata, emphasis within body. |
| Body XS Tight | Figtree | 14px | 600 | 1.43 | 0px | Compact strong text. |
| Body XS 2 | Figtree | 14px | 700 | 1.43 | 0.14px | Bold body text, strong emphasis. |
| Button LG Strong | Figtree | 15px | 600 | 1.5 | 0px | Large button labels, high-emphasis CTAs. |
| Button LG | Figtree | 15px | 500 | 1.43 | 0.15px | Large button text. |
| Button MD | Figtree | 14px | 500 | 1.43 | 0px or 0.14px | Standard button labels. |
| Button SM | Figtree | 13px | 500 | 1.54 | 0px or 0.13px | Small button labels, compact actions. |
| Button XL | Sora | 28px | 400 | 1.25 | 0px | Hero button text, large CTAs. |
| Caption SM Strong | Figtree | 12px | 500 | 1.33 | 0px, 0.12px, or 0.16px | Bold captions, strong metadata. |
| Caption SM 2 | Figtree | 12px | 600 | 1.33 | 0px | Extra-bold captions. |
| Caption SM 3 | Figtree | 12px | 700 | 1.33 | 0.12px | Maximum-weight captions. |
| Caption SM | Figtree | 12px | 400 | 1.38 or 1.33 | 0.12px | Standard captions, tertiary labels. |
| Caption XS | Figtree | 10px | 500 | 1 | 0.1px | Minimal captions, micro-labels. |
| Nav | Figtree | 12px | 600 | 1.33 | 0.12px, 0.16px, or 2.16px | Navigation link labels; 2.16px variant is uppercase. |
| Label | Figtree | 14px | 400 | 1.43 | 0px | Form labels, input placeholders. |
{typography.display-xl} — 28px) use –0.56px letter-spacing, reinforcing premium visual hierarchy and tightness.#3958BF ({colors.primary})#FFFFFF ({colors.ink})8px 16px{typography.caption-sm-strong}){rounded.md} (8px, with asymmetric corners: 8px 0px)#EDF3FF#2C46A34px 10px{typography.button-md}){rounded.xs} (6px)#4A6ED9#F0F2F8#2C46A38px 12px{typography.button-md}){rounded.md} (8px)#FFFFFF#384C5E3px 10px{typography.button-sm}){rounded.xs} (6px)#C8CFDErgba(0, 0, 0, 0))#2C46A36px 12px{typography.button-md}){rounded.md} (8px)#4A6ED9rgba(0, 0, 0, 0))#171E30{typography.button-xl}){rounded.none} (0px)#F5F8FF#171E3010px 8px{typography.body-md}){rounded.lg} (16px) on top corners; 0px on bottom#FFFFFF#171E30{typography.body-md}){rounded.lg} (16px)#E2E6F0rgba(10, 13, 18, 0.06) 0px 4px 12px 0px (layered-micro elevation)#F5F8FF#171E3010px 8px{typography.body-md}){rounded.none} (0px)rgba(0, 0, 0, 0))#171E3010px 14px{typography.body-md}){rounded.none} (0px)#FFFFFF#171E30{typography.body-md}){rounded.xs} (6px){colors.hairline} (#2F3238) or context-dependent{colors.on-primary} (#C7CAD0)rgba(0, 0, 0, 0))#FFFFFF ({colors.ink}){typography.body-md}){rounded.none} (0px)rgba(0, 0, 0, 0))oklab(0.999994 0.0000455678 0.0000200868 / 0.1) (near-invisible divider){typography.nav})#1A1C21 ({colors.surface})#F6F7F9 ({colors.body})24px 16px 48px 16px{typography.body-md}){rounded.none} (0px)#F8F9FD#171E3024px 16px 48px 16px{typography.body-md}){rounded.none} (0px)rgba(0, 0, 0, 0))#171E30{typography.body-md}){rounded.none} (0px)#F5F8FF#171E30{typography.body-md}){rounded.md} (8px)Base Unit: {spacing.xxs} = 4px
Scale:
{spacing.xxs} = 4px{spacing.xs} = 8px{spacing.sm} = 12px{spacing.md} = 16px{spacing.lg} = 20px{spacing.xl} = 24px{spacing.xxl} = 28px{spacing.xxxl} = 32px{spacing.section} = 40px{spacing.band} = 64pxUsage Context:
Max Width: 1248px (at 1280px viewport); 1408px (at 1440px viewport)
Column Strategy: 6 columns at desktop (1280px+); 3 columns at tablet (768px); 2 columns on mobile (375px)
Content Column Width by Viewport:
Section Patterns: Full-width hero sections with dark gradient overlays; centered content sections with standard padding; sidebar + main content layout on product pages (sidebar collapses to accordion on mobile).
Whitespace is fundamental to scanability and professionalism. The system prioritizes breathing room around product cards, clear separation between sections, and predictable margins rather than dense packing. Header and footer use generous {spacing.xl} padding. Card-to-card gutters follow the 8px–12px range, creating rhythm without overwhelming compression. Empty states and no-results messaging are centered with ample vertical space, signaling clarity rather than emptiness.
{rounded.none} (0px) — Applied to cards, containers, and certain text buttons where geometric precision is desired. Featured small cards use 0px.{rounded.xs} — Input fields, outline buttons, and small interactive elements requiring slight softening without roundedness.{rounded.sm} — Image corners, providing subtle definition without jarring angularity.{rounded.md} — Primary buttons, outline buttons, featured card tops, link containers. The system's default interaction radius.{rounded.lg} — Default card corners (product cards, featured containers), creating visual softness and approachability.{rounded.full} — Unused; system does not employ pill-shaped buttons or badges.| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid color or transparent | Buttons (primary filled), text buttons, outlined buttons, featured cards, navigation. |
| Micro | rgba(10, 13, 18, 0.05) 0px 1px 2px 0px | Subtle lift for interactive elements or small containers requiring minimal emphasis. |
| Small | rgba(10, 13, 18, 0.05) 0px 1px 2px 0px | Small hover states or micro-elevated surfaces. |
| Card | rgba(10, 13, 18, 0.06) 0px 4px 12px 0px | Default product card shadow, creating readable separation from canvas. |
| Inset (Custom) | rgb(47, 50, 56) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Inset border for form states or nested surfaces. |
Shadow Philosophy:
The elevation system is layered-micro, using near-transparent multi-layer shadows to create barely-there depth. This approach complements the dark-first canvas: rather than strong shadows creating contrast, subtle shadows provide surface definition without visual noise. Elevation is primarily conveyed through color blocking—surface backgrounds shift slightly (#1A1C21 vs #141519) to signal layering. Shadows appear only where necessary to distinguish interactive or featured elements (cards, dropdowns) from the base layer. The default product card uses the card-level shadow (rgba(10, 13, 18, 0.06) 0px 4px 12px 0px) to float slightly above the canvas while remaining visually restful.
{colors.primary} (#3958BF) sparingly. Reserve it for primary CTAs, active navigation states, and brand accents. Overuse dilutes visual hierarchy.#1A1C21 to #141519) to signal layering before reaching for shadows.{spacing.md}, {spacing.lg}, or {spacing.xl} first.{colors.warning} (#FDB022) for warnings; {colors.info} (#F04438) for errors.{colors.body} (#F6F7F9) on {colors.canvas} (#141519) must meet WCAG AA contrast (≥4.5:1 for normal text).{rounded.lg} (16px). Sharp (0px) or standard (8px) radii are preferred; avoid soft blurs or excessive rounding.{colors.ink} on primary fills, not secondary blues.{colors.warning} and {colors.info} are defined; do not create success or secondary status colors without extraction evidence.{colors.muted} for interactive elements. It is for captions and secondary text; links and buttons require stronger contrast.{colors.surface} and {colors.body}, the light uses #F8F9FD and #171E30.| Viewport | Min Width | Max Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Largest Heading | Body Text | Section Padding X |
|---|---|---|---|---|---|---|---|---|---|
| Mobile | 320px | 767px | 343px (375px ref) | 2 | 6 | Yes | 28px | 16px | 0px |
| Tablet | 768px | 1023px | 736px | 3 | 0 | Yes | 28px | 16px | 0px |
| Desktop | 1024px | 1279px | 992px | 3 | 6 | Yes | 28px | 16px | 0px |
| Large Desktop | 1280px | 1439px | 1248px | 6 | 6 | Yes | 28px | 16px | 0px |
| Extra Large | 1440px | ∞ | 1408px | 6 | 6 | Yes | 28px | 16px | 0px |
Breakpoint Strategy:
Minimum interactive touch target size: 44px × 44px (iOS standard)
{spacing.md} or {spacing.lg} margins.{spacing.md} padding.{colors.primary} — #3958BF){colors.canvas} — #141519){colors.surface} — #1A1C21){colors.ink} — #FFFFFF){colors.body} — #F6F7F9){colors.muted} — #EEF0F3){colors.link} — #98B6F5){colors.hairline} — #2F3238){colors.warning} — #FDB022){colors.info} — #F04438){rounded.md} (8px). Exception: outline buttons use {rounded.xs} (6px). Never use 0px or 16px for buttons.{rounded.lg} (16px). Featured small cards are 0px; do not vary this.8px 16px, height 32px, weight 600, 12px size. Light/outline variants differ; refer to the component spec exactly.{typography.nav} (12px, weight 600, 0.12px or 2.16px tracking).rgba(10, 13, 18, 0.06) 0px 4px 12px 0px); most elements are flat.syscom.mx); right-to-left text, variable-width fonts, or other localization needs are not addressed.Document Version: 1.0
Source: syscom.mx (6 pages analyzed)
Extraction Date: 2025
Confidence: High for colors, typography, spacing, and card/button patterns; Medium for interaction states and edge-case components; Low for surfaces behind authentication and animation behaviour.