Sixfold AI
AI-powered insurance underwriting platform — dark Webflow site with magenta/pink brand accent — Extracted from https://sixfold.ai
98 tokensOnboarded 2026-04-10
Color System
Typography
Oakes Grotesk
Display — The quick brown fox jumps
H1 — The quick brown fox jumps
H2 — The quick brown fox jumps
H3 — The quick brown fox jumps
Studiofeixensans
Bold: Design tokens bridge the gap between design tools and code.
Regular: They encode visual decisions — colors, typography, spacing — as structured data that both designers and developers can share.
monospace
const tokens = await extractFromCSS(url); const merged = mergeTokens(foundation, overrides); const css = toCSSVariables(merged);
Spacing & Shape
Spacing Scale
sm
4px
md
16px
lg
24px
xl
32px
Border Radius
sm
4px
md
8px
lg
12px
Component Gallery
Shared UI components themed with this project's design tokens via CSS custom property cascade.
Button
Badge & Tag
DefaultSuccessWarningErrorInfo
DefaultDefaultSuccessWarningError
Alert
Tokens extracted successfully from source site.
Some token values may need manual refinement.
Build failed — check console for details.
Re-analyze to update tokens from the live site.
Form Controls
Data Display
Tokens
98Colors
30Components
66LiveBuildingFailed
Token density
Score Gauge
95
Design Drift
98
Token Count
75
Coverage
Avatar & Tooltip
Hover me
Token Reference
| DTCG Path | Type | Value | CSS Variable |
|---|---|---|---|
| color.primary.base | color | #db358c | --color-primary-base |
| color.primary.light | color | #ee81ba | --color-primary-light |
| color.primary.hover | color | #b21f6b | --color-primary-hover |
| color.secondary.base | color | #4d65ff | --color-secondary-base |
| color.accent.ice | color | #c4e3e7 | --color-accent-ice |
| color.accent.pink2 | color | #f5e2ed | --color-accent-pink2 |
| color.accent.pink3 | color | #ffe5f2 | --color-accent-pink3 |
| color.accent.pink10 | color | #ffd8ee | --color-accent-pink10 |
| color.accent.pink20 | color | #f8d7e8 | --color-accent-pink20 |
| color.success | color | #22c55e | --color-success |
| color.warning | color | #f59e0b | --color-warning |
| color.error | color | #ef4444 | --color-error |
| color.background.base | color | #000000 | --color-background-base |
| color.background.surface | color | #2e3141 | --color-background-surface |
| color.background.elevated | color | #3a3d50 | --color-background-elevated |
| color.background.light | color | #f4f4f4 | --color-background-light |
| color.background.white | color | #ffffff | --color-background-white |
| color.text.primary | color | #ffffff | --color-text-primary |
| color.text.secondary | color | #b3b3b3 | --color-text-secondary |
| color.text.tertiary | color | #6a6b70 | --color-text-tertiary |
| color.text.inverse | color | #000000 | --color-text-inverse |
| color.border.default | color | #b3b3b3 | --color-border-default |
| color.border.subtle | color | #2e3141 | --color-border-subtle |
| color.border.focus | color | #4d65ff | --color-border-focus |
| color.neutral.black | color | #000000 | --color-neutral-black |
| color.neutral.darkGrey | color | #2e3141 | --color-neutral-darkGrey |
| color.neutral.grey | color | #6a6b70 | --color-neutral-grey |
| color.neutral.line | color | #b3b3b3 | --color-neutral-line |
| color.neutral.lightGrey | color | #f4f4f4 | --color-neutral-lightGrey |
| color.neutral.white | color | #ffffff | --color-neutral-white |
| gradient.primaryDiagonal | gradient | linear-gradient(135deg, #db358c 30%, #ee81ba 98%) | --gradient-primaryDiagonal |
| gradient.primaryHorizontal | gradient | linear-gradient(90deg, #db358c, #ee81ba 48%) | --gradient-primaryHorizontal |
| gradient.primaryLinear | gradient | linear-gradient(to right, #db358c, #ee81ba) | --gradient-primaryLinear |
| gradient.fadeToPink | gradient | linear-gradient(to bottom, #ffffff, rgba(219,53,140,0.17)) | --gradient-fadeToPink |
| typography.fontFamily.heading | fontFamily | Oakes Grotesk, sans-serif | --typography-fontFamily-heading |
| typography.fontFamily.body | fontFamily | Studiofeixensans, sans-serif | --typography-fontFamily-body |
| typography.fontFamily.mono | fontFamily | monospace | --typography-fontFamily-mono |
| typography.fontSize.xs | dimension | 12px | --typography-fontSize-xs |
| typography.fontSize.sm | dimension | 14px | --typography-fontSize-sm |
| typography.fontSize.base | dimension | 16px | --typography-fontSize-base |
| typography.fontSize.md | dimension | 18px | --typography-fontSize-md |
| typography.fontSize.lg | dimension | 20px | --typography-fontSize-lg |
| typography.fontSize.xl | dimension | 22px | --typography-fontSize-xl |
| typography.fontSize.2xl | dimension | 24px | --typography-fontSize-2xl |
| typography.fontSize.3xl | dimension | 32px | --typography-fontSize-3xl |
| typography.fontSize.4xl | dimension | 40px | --typography-fontSize-4xl |
| typography.fontSize.5xl | dimension | 48px | --typography-fontSize-5xl |
| typography.fontSize.display | dimension | 56px | --typography-fontSize-display |
| typography.fontWeight.light | fontWeight | 300 | --typography-fontWeight-light |
| typography.fontWeight.regular | fontWeight | 400 | --typography-fontWeight-regular |
| typography.fontWeight.medium | fontWeight | 500 | --typography-fontWeight-medium |
| typography.fontWeight.semibold | fontWeight | 600 | --typography-fontWeight-semibold |
| typography.fontWeight.bold | fontWeight | 700 | --typography-fontWeight-bold |
| typography.lineHeight.tight | dimension | 1.2 | --typography-lineHeight-tight |
| typography.lineHeight.snug | dimension | 1.3 | --typography-lineHeight-snug |
| typography.lineHeight.base | dimension | 1.4 | --typography-lineHeight-base |
| typography.lineHeight.relaxed | dimension | 1.5 | --typography-lineHeight-relaxed |
| typography.lineHeight.loose | dimension | 1.6 | --typography-lineHeight-loose |
| typography.letterSpacing.tight | dimension | -0.045em | --typography-letterSpacing-tight |
| typography.letterSpacing.snug | dimension | -0.04em | --typography-letterSpacing-snug |
| typography.letterSpacing.normal | dimension | -0.02em | --typography-letterSpacing-normal |
| typography.letterSpacing.body | dimension | -0.005em | --typography-letterSpacing-body |
| typography.letterSpacing.none | dimension | 0 | --typography-letterSpacing-none |
| spacing.0 | dimension | 0px | --spacing-0 |
| spacing.1 | dimension | 4px | --spacing-1 |
| spacing.2 | dimension | 8px | --spacing-2 |
| spacing.3 | dimension | 12px | --spacing-3 |
| spacing.4 | dimension | 16px | --spacing-4 |
| spacing.5 | dimension | 20px | --spacing-5 |
| spacing.6 | dimension | 24px | --spacing-6 |
| spacing.8 | dimension | 32px | --spacing-8 |
| spacing.10 | dimension | 40px | --spacing-10 |
| spacing.12 | dimension | 48px | --spacing-12 |
| spacing.16 | dimension | 64px | --spacing-16 |
| spacing.20 | dimension | 80px | --spacing-20 |
| spacing.24 | dimension | 96px | --spacing-24 |
| spacing.28 | dimension | 112px | --spacing-28 |
| spacing.40 | dimension | 160px | --spacing-40 |
| borderRadius.xs | dimension | 2px | --borderRadius-xs |
| borderRadius.sm | dimension | 4px | --borderRadius-sm |
| borderRadius.md | dimension | 8px | --borderRadius-md |
| borderRadius.lg | dimension | 12px | --borderRadius-lg |
| borderRadius.xl | dimension | 16px | --borderRadius-xl |
| borderRadius.2xl | dimension | 24px | --borderRadius-2xl |
| borderRadius.full | dimension | 100px | --borderRadius-full |
| shadow.minimal | shadow | 0 1px 3px rgba(0,0,0,0.1) | --shadow-minimal |
| shadow.subtle | shadow | 0 4px 8px -2px rgba(0,0,0,0.1) | --shadow-subtle |
| shadow.light | shadow | 0 4px 24px rgba(0,0,0,0.08) | --shadow-light |
| shadow.default | shadow | 0 8px 24px rgba(0,0,0,0.14) | --shadow-default |
| shadow.medium | shadow | 0 12px 16px -4px rgba(0,0,0,0.14) | --shadow-medium |
| shadow.elevated | shadow | 0 20px 24px -4px rgba(0,0,0,0.08) | --shadow-elevated |
| shadow.high | shadow | 0 24px 48px -12px rgba(0,0,0,0.29) | --shadow-high |
| shadow.huge | shadow | 0 32px 64px -12px rgba(0,0,0,0.14) | --shadow-huge |
| breakpoint.mobile | dimension | 479px | --breakpoint-mobile |
| breakpoint.mobileLandscape | dimension | 767px | --breakpoint-mobileLandscape |
| breakpoint.tablet | dimension | 991px | --breakpoint-tablet |
| breakpoint.desktop | dimension | 992px | --breakpoint-desktop |
| breakpoint.wide | dimension | 1172px | --breakpoint-wide |
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"primary": {
"base": {
"$value": "#db358c",
"$type": "color",
"$description": "Magenta/pink — primary brand (Webflow --pink)"
},
"light": {
"$value": "#ee81ba",
"$type": "color",
"$description": "Light pink — gradient endpoint (--light-pink)"
},
"hover": {
"$value": "#b21f6b",
"$type": "color",
"$description": "Darkened primary for hover states"
}
},
"secondary": {
"base": {
"$value": "#4d65ff",
"$type": "color",
"$description": "Blue — focus ring / secondary accent"
}
},
"accent": {
"ice": {
"$value": "#c4e3e7",
"$type": "color",
"$description": "Ice blue — tertiary accent (--ice)"
},
"pink2": {
"$value": "#f5e2ed",
"$type": "color",
"$description": "Soft pink tint (--pink-2)"
},
"pink3": {
"$value": "#ffe5f2",
"$type": "color",
"$description": "Light pink (--pink-3)"
},
"pink10": {
"$value": "#ffd8ee",
"$type": "color",
"$description": "Pink wash (--pink-10)"
},
"pink20": {
"$value": "#f8d7e8",
"$type": "color",
"$description": "Pink muted (--pink-20)"
}
},
"success": {
"$value": "#22c55e",
"$type": "color",
"$description": "Green success indicator"
},
"warning": {
"$value": "#f59e0b",
"$type": "color",
"$description": "Amber warning indicator"
},
"error": {
"$value": "#ef4444",
"$type": "color",
"$description": "Red error state"
},
"background": {
"base": {
"$value": "#000000",
"$type": "color",
"$description": "Black page background (--black)"
},
"surface": {
"$value": "#2e3141",
"$type": "color",
"$description": "Dark grey card/surface (--dark-grey / --green-gray)"
},
"elevated": {
"$value": "#3a3d50",
"$type": "color",
"$description": "Elevated surface above dark-grey"
},
"light": {
"$value": "#f4f4f4",
"$type": "color",
"$description": "Light grey background sections (--light-grey)"
},
"white": {
"$value": "#ffffff",
"$type": "color",
"$description": "White background sections (--white)"
}
},
"text": {
"primary": {
"$value": "#ffffff",
"$type": "color",
"$description": "White primary text on dark backgrounds"
},
"secondary": {
"$value": "#b3b3b3",
"$type": "color",
"$description": "Muted text / line color (--line)"
},
"tertiary": {
"$value": "#6a6b70",
"$type": "color",
"$description": "Grey tertiary text (--grey)"
},
"inverse": {
"$value": "#000000",
"$type": "color",
"$description": "Black text on light/white backgrounds"
}
},
"border": {
"default": {
"$value": "#b3b3b3",
"$type": "color",
"$description": "Default border / line (--line)"
},
"subtle": {
"$value": "#2e3141",
"$type": "color",
"$description": "Subtle border on dark backgrounds"
},
"focus": {
"$value": "#4d65ff",
"$type": "color",
"$description": "Blue focus ring outline"
}
},
"neutral": {
"black": {
"$value": "#000000",
"$type": "color",
"$description": "Pure black (--black)"
},
"darkGrey": {
"$value": "#2e3141",
"$type": "color",
"$description": "Dark grey (--dark-grey)"
},
"grey": {
"$value": "#6a6b70",
"$type": "color",
"$description": "Mid grey (--grey)"
},
"line": {
"$value": "#b3b3b3",
"$type": "color",
"$description": "Line / divider grey (--line)"
},
"lightGrey": {
"$value": "#f4f4f4",
"$type": "color",
"$description": "Light grey (--light-grey)"
},
"white": {
"$value": "#ffffff",
"$type": "color",
"$description": "Pure white (--white)"
}
}
},
"gradient": {
"primaryDiagonal": {
"$value": "linear-gradient(135deg, #db358c 30%, #ee81ba 98%)",
"$type": "gradient",
"$description": "Primary diagonal pink gradient"
},
"primaryHorizontal": {
"$value": "linear-gradient(90deg, #db358c, #ee81ba 48%)",
"$type": "gradient",
"$description": "Horizontal pink gradient"
},
"primaryLinear": {
"$value": "linear-gradient(to right, #db358c, #ee81ba)",
"$type": "gradient",
"$description": "Left-to-right pink gradient"
},
"fadeToPink": {
"$value": "linear-gradient(to bottom, #ffffff, rgba(219,53,140,0.17))",
"$type": "gradient",
"$description": "White fading to translucent pink"
}
},
"typography": {
"fontFamily": {
"heading": {
"$value": "Oakes Grotesk, sans-serif",
"$type": "fontFamily",
"$description": "Primary heading typeface"
},
"body": {
"$value": "Studiofeixensans, sans-serif",
"$type": "fontFamily",
"$description": "Body text typeface"
},
"mono": {
"$value": "monospace",
"$type": "fontFamily",
"$description": "Monospace fallback"
}
},
"fontSize": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Tiny text (0.75rem)"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text (0.875rem)"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Body text default (1rem)"
},
"md": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body (1.125rem)"
},
"lg": {
"$value": "20px",
"$type": "dimension",
"$description": "H6 small heading (1.25rem)"
},
"xl": {
"$value": "22px",
"$type": "dimension",
"$description": "H6 large (1.375rem)"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "H5 small (1.5rem)"
},
"3xl": {
"$value": "32px",
"$type": "dimension",
"$description": "H4 (2rem)"
},
"4xl": {
"$value": "40px",
"$type": "dimension",
"$description": "H3 (2.5rem)"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "H2 (3rem)"
},
"display": {
"$value": "56px",
"$type": "dimension",
"$description": "H1 display (3.5rem)"
}
},
"fontWeight": {
"light": {
"$value": "300",
"$type": "fontWeight"
},
"regular": {
"$value": "400",
"$type": "fontWeight"
},
"medium": {
"$value": "500",
"$type": "fontWeight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight"
},
"bold": {
"$value": "700",
"$type": "fontWeight"
}
},
"lineHeight": {
"tight": {
"$value": "1.2",
"$type": "dimension",
"$description": "Display/heading text"
},
"snug": {
"$value": "1.3",
"$type": "dimension",
"$description": "Compact headings"
},
"base": {
"$value": "1.4",
"$type": "dimension",
"$description": "Standard reading"
},
"relaxed": {
"$value": "1.5",
"$type": "dimension",
"$description": "Body text"
},
"loose": {
"$value": "1.6",
"$type": "dimension",
"$description": "Long-form reading"
}
},
"letterSpacing": {
"tight": {
"$value": "-0.045em",
"$type": "dimension",
"$description": "Display headings"
},
"snug": {
"$value": "-0.04em",
"$type": "dimension",
"$description": "Large headings"
},
"normal": {
"$value": "-0.02em",
"$type": "dimension",
"$description": "Standard headings"
},
"body": {
"$value": "-0.005em",
"$type": "dimension",
"$description": "Body text"
},
"none": {
"$value": "0",
"$type": "dimension",
"$description": "No letter spacing"
}
}
},
"spacing": {
"0": {
"$value": "0px",
"$type": "dimension"
},
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "0.25rem"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "0.5rem"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "0.75rem"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "1rem"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "1.25rem"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "1.5rem"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "2rem"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "2.5rem"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "3rem"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "4rem"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "5rem"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "6rem"
},
"28": {
"$value": "112px",
"$type": "dimension",
"$description": "7rem"
},
"40": {
"$value": "160px",
"$type": "dimension",
"$description": "10rem"
}
},
"borderRadius": {
"xs": {
"$value": "2px",
"$type": "dimension"
},
"sm": {
"$value": "4px",
"$type": "dimension"
},
"md": {
"$value": "8px",
"$type": "dimension"
},
"lg": {
"$value": "12px",
"$type": "dimension"
},
"xl": {
"$value": "16px",
"$type": "dimension"
},
"2xl": {
"$value": "24px",
"$type": "dimension"
},
"full": {
"$value": "100px",
"$type": "dimension",
"$description": "Pill shapes"
}
},
"shadow": {
"minimal": {
"$value": "0 1px 3px rgba(0,0,0,0.1)",
"$type": "shadow",
"$description": "Minimal elevation"
},
"subtle": {
"$value": "0 4px 8px -2px rgba(0,0,0,0.1)",
"$type": "shadow",
"$description": "Subtle card shadow"
},
"light": {
"$value": "0 4px 24px rgba(0,0,0,0.08)",
"$type": "shadow",
"$description": "Light card elevation"
},
"default": {
"$value": "0 8px 24px rgba(0,0,0,0.14)",
"$type": "shadow",
"$description": "Default card shadow"
},
"medium": {
"$value": "0 12px 16px -4px rgba(0,0,0,0.14)",
"$type": "shadow",
"$description": "Medium elevation"
},
"elevated": {
"$value": "0 20px 24px -4px rgba(0,0,0,0.08)",
"$type": "shadow",
"$description": "Elevated panels"
},
"high": {
"$value": "0 24px 48px -12px rgba(0,0,0,0.29)",
"$type": "shadow",
"$description": "High elevation / overlays"
},
"huge": {
"$value": "0 32px 64px -12px rgba(0,0,0,0.14)",
"$type": "shadow",
"$description": "Maximum elevation — hero cards"
}
},
"breakpoint": {
"mobile": {
"$value": "479px",
"$type": "dimension"
},
"mobileLandscape": {
"$value": "767px",
"$type": "dimension"
},
"tablet": {
"$value": "991px",
"$type": "dimension"
},
"desktop": {
"$value": "992px",
"$type": "dimension"
},
"wide": {
"$value": "1172px",
"$type": "dimension"
}
},
"$metadata": {
"source": "https://sixfold.ai",
"platform": "Webflow",
"extractedAt": "2026-04-10",
"extractionMethod": "CSS file parse + Gemini text analysis",
"cssFile": "sixfold.webflow.shared.a80a6f4b5.min.css",
"cssVariables": "--black, --dark-grey, --pink, --white, --light-grey, --grey, --light-pink, --pink-2, --pink-3, --pink-10, --pink-20, --ice, --green-gray, --line",
"headingFont": "Oakes Grotesk",
"bodyFont": "Studiofeixensans",
"fontWeights": "Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)",
"aesthetic": "Dark B2B SaaS — insurance/underwriting vertical, magenta/pink brand accent, geometric pattern backgrounds, professional financial-services feel",
"pageTitle": "Sixfold | AI for Insurance Underwriters",
"integrations": "Google Analytics (G-V29RLF0L9S), HubSpot Forms, LinkedIn",
"industry": "Insurance technology / AI underwriting"
}
}