Loading theme editor...

ngraw themes

Salvato

Brand

Background

Text

Borders

Semantic

Neutral

16px
48px
32px
1.2
700
-0.02em
36px
28px
1.3
600
-0.01em
24px
20px
1.4
600
0em
16px
1.6
400
0em
14px
1.5
400
0em
12px
1.4
400
0.01em

Titolo → Titolo

24px
20px
16px

Titolo → Paragrafo

16px
12px
8px

Paragrafo → Paragrafo

16px

Paragrafo → Titolo

32px
24px

Spazio prima di H1

48px
0px

Aggiusta l'allineamento verticale del testo in buttons, badges e inputs

8px
8px

Altezza

64px
56px

Padding Verticale

12px
8px

Padding Orizzontale

24px
16px

Sfondo

Bordo Inferiore

1px

Posizione

Elementi Desktop

Elementi Mobile

Mobile

Padding Top

64px
40px

Padding Bottom

64px
40px

Border Radius Top

0px
0px

Border Radius Bottom

0px
0px

Overlap

0px
0px

Background

Padding Orizzontale

80px
16px

Padding Top

0px
0px

Padding Bottom

0px
0px
Coming soon...
Coming soon...
Coming soon...
24px
12px
2px
10
2px
8px
12px
12px
600
6px
0px
4px
px
px
px
8px
0px
0
60%

Fonts

Nessun font caricato

Output

{
  "colors": {
    "primary": "#667eea",
    "secondary": "#764ba2",
    "tertiary": "#f59e0b",
    "background": "#ffffff",
    "backgroundSecondary": "#f9fafb",
    "backgroundTertiary": "#f3f4f6",
    "text": "#111827",
    "textSecondary": "#6b7280",
    "textTertiary": "#9ca3af",
    "border": "#e5e7eb",
    "borderLight": "#f3f4f6",
    "success": "#10b981",
    "warning": "#f59e0b",
    "error": "#ef4444",
    "info": "#3b82f6",
    "neutral": "#f3f4f6",
    "neutralHover": "#e5e7eb"
  },
  "typography": {
    "primaryFont": null,
    "secondaryFont": null,
    "baseFont": "primary",
    "fontFamily": "'Inter', sans-serif",
    "baseFontSize": 16,
    "h1": {
      "fontSize": 48,
      "fontSizeMobile": 32,
      "lineHeight": 1.2,
      "fontWeight": 700,
      "letterSpacing": -0.02,
      "fontFamily": null,
      "colorVariant": "text"
    },
    "h2": {
      "fontSize": 36,
      "fontSizeMobile": 28,
      "lineHeight": 1.3,
      "fontWeight": 600,
      "letterSpacing": -0.01,
      "fontFamily": null,
      "colorVariant": "text"
    },
    "h3": {
      "fontSize": 24,
      "fontSizeMobile": 20,
      "lineHeight": 1.4,
      "fontWeight": 600,
      "letterSpacing": 0,
      "fontFamily": null,
      "colorVariant": "text"
    },
    "p": {
      "fontSize": 16,
      "lineHeight": 1.6,
      "fontWeight": 400,
      "letterSpacing": 0,
      "fontFamily": null,
      "colorVariant": "text"
    },
    "small": {
      "fontSize": 14,
      "lineHeight": 1.5,
      "fontWeight": 400,
      "letterSpacing": 0,
      "fontFamily": null,
      "colorVariant": "text"
    },
    "caption": {
      "fontSize": 12,
      "lineHeight": 1.4,
      "fontWeight": 400,
      "letterSpacing": 0.01,
      "fontFamily": null,
      "colorVariant": "text"
    }
  },
  "typographySpacing": {
    "h1H2": 24,
    "h1H3": 20,
    "h2H3": 16,
    "h1P": 16,
    "h2P": 12,
    "h3P": 8,
    "pP": 16,
    "pH2": 32,
    "pH3": 24,
    "anyH1": 48
  },
  "spacing": {
    "baseUnit": 8
  },
  "borders": {
    "radius": 8
  },
  "buttons": {
    "paddingX": 24,
    "paddingY": 12
  },
  "cards": {
    "backgroundColor": "#ffffff",
    "borderColor": "#e5e7eb",
    "borderWidth": 2,
    "shadowIntensity": 10
  },
  "forms": {
    "inputBackgroundColor": "#ffffff",
    "inputBorderColor": "#e5e7eb",
    "inputBorderWidth": 2,
    "inputBorderRadius": 8,
    "inputFocusBorderColor": "#667eea",
    "inputPaddingX": 12,
    "inputPaddingY": 12,
    "labelFontWeight": 600,
    "labelGap": 6,
    "errorColor": "#ef4444"
  },
  "lists": {
    "backgroundColor": "#f9fafb",
    "borderColor": "#e5e7eb",
    "borderWidth": 0,
    "borderLeftWidth": 4,
    "borderLeftColor": "#667eea"
  },
  "images": {
    "borderRadius": 8,
    "borderWidth": 0,
    "borderColor": "#e5e7eb",
    "shadowIntensity": 0
  },
  "components": {
    "verticalOffset": 0
  },
  "regions": {
    "paddingTopDesktop": 64,
    "paddingTopMobile": 40,
    "paddingBottomDesktop": 64,
    "paddingBottomMobile": 40,
    "overlapDesktop": 0,
    "overlapMobile": 0,
    "borderRadiusTopDesktop": 0,
    "borderRadiusTopMobile": 0,
    "borderRadiusBottomDesktop": 0,
    "borderRadiusBottomMobile": 0,
    "backgroundColor": "#ffffff",
    "backgroundColorAlt": "#f9fafb"
  },
  "container": {
    "paddingXDesktop": 80,
    "paddingXMobile": 16,
    "paddingTopDesktop": 0,
    "paddingTopMobile": 0,
    "paddingBottomDesktop": 0,
    "paddingBottomMobile": 0
  },
  "header": {
    "heightDesktop": 64,
    "heightMobile": 56,
    "paddingYDesktop": 12,
    "paddingYMobile": 8,
    "paddingXDesktop": 24,
    "paddingXMobile": 16,
    "backgroundType": "solid",
    "backgroundColor": "#ffffff",
    "blurIntensity": 10,
    "position": "sticky",
    "autoHide": false,
    "showProfile": true,
    "showLanguageSwitcher": true,
    "showLogo": true,
    "showNavigation": true,
    "showLogoMobile": true,
    "showNavigationMobile": false,
    "showLanguageSwitcherMobile": false,
    "showProfileMobile": true,
    "showOnMobile": true,
    "mobileMenuType": "hamburger",
    "borderBottomWidth": 1,
    "borderBottomColor": "#e5e7eb"
  },
  "footer": {
    "backgroundColor": "#ffffff",
    "showOnMobile": false
  }
}