Initial commit: FA 2.0 Design System foundation
Token pipeline (Style Dictionary v4, DTCG format): - Primitive tokens: colour palettes (brand, sage, neutral, feedback), typography (3 font families, 21-variant type scale), spacing (4px grid), border radius, shadows, opacity - Semantic tokens: text, surface, border, interactive, feedback colours; typography roles; layout spacing - Component tokens: Button (4 sizes), Input (2 sizes) - Generated outputs: CSS custom properties, JS ES6 module, flat JSON Atoms (3 components): - Button: contained/soft/outlined/text × primary/secondary, 4 sizes, loading state, underline for text variant - Typography: 21 variants across display/heading/body/label/caption/overline, maxLines truncation - Input: external label, helper text, error/success validation, start/end icons, required indicator, 2 sizes, multiline support Infrastructure: - MUI v5 theme with full token mapping - Storybook 8 with autodocs - Claude Code agents and skills for token/component workflows - Design system documentation and cross-session memory Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
377
src/theme/generated/tokens.js
Normal file
377
src/theme/generated/tokens.js
Normal file
@@ -0,0 +1,377 @@
|
||||
/**
|
||||
* Do not edit directly, this file was auto-generated.
|
||||
*/
|
||||
|
||||
export const ButtonHeightXs = "28px"; // Extra-small — compact text buttons, inline actions
|
||||
export const ButtonHeightSm = "32px"; // Small — secondary actions, toolbar buttons
|
||||
export const ButtonHeightMd = "40px"; // Medium — default size, form submissions
|
||||
export const ButtonHeightLg = "48px"; // Large — primary CTAs, mobile touch targets (meets 44px minimum)
|
||||
export const ButtonPaddingXXs = "8px"; // 8px — compact horizontal padding
|
||||
export const ButtonPaddingXSm = "12px"; // 12px — small horizontal padding
|
||||
export const ButtonPaddingXMd = "16px"; // 16px — default horizontal padding
|
||||
export const ButtonPaddingXLg = "24px"; // 24px — generous CTA horizontal padding
|
||||
export const ButtonPaddingYXs = "4px"; // 4px — compact vertical padding
|
||||
export const ButtonPaddingYSm = "4px"; // 4px — small vertical padding
|
||||
export const ButtonPaddingYMd = "8px"; // 8px — default vertical padding
|
||||
export const ButtonPaddingYLg = "12px"; // 12px — generous CTA vertical padding
|
||||
export const ButtonFontSizeXs = "0.75rem"; // 12px — extra-small button text
|
||||
export const ButtonFontSizeSm = "0.875rem"; // 14px — small button text
|
||||
export const ButtonFontSizeMd = "0.875rem"; // 14px — default button text
|
||||
export const ButtonFontSizeLg = "1rem"; // 16px — large button text
|
||||
export const ButtonIconSizeXs = "14px"; // 14px icons in extra-small buttons
|
||||
export const ButtonIconSizeSm = "16px"; // 16px icons in small buttons
|
||||
export const ButtonIconSizeMd = "18px"; // 18px icons in medium buttons
|
||||
export const ButtonIconSizeLg = "20px"; // 20px icons in large buttons
|
||||
export const ButtonIconGapXs = "4px"; // 4px icon-text gap
|
||||
export const ButtonIconGapSm = "4px"; // 4px icon-text gap
|
||||
export const ButtonIconGapMd = "8px"; // 8px icon-text gap
|
||||
export const ButtonIconGapLg = "8px"; // 8px icon-text gap
|
||||
export const ButtonBorderRadiusDefault = "8px"; // 8px — standard button rounding
|
||||
export const InputHeightSm = "40px"; // Small — compact forms, admin layouts, matches Button medium height
|
||||
export const InputHeightMd = "48px"; // Medium (default) — standard forms, matches Button large for alignment
|
||||
export const InputPaddingXDefault = "12px"; // 12px — inner horizontal padding matching Figma design
|
||||
export const InputPaddingYSm = "8px"; // 8px — compact vertical padding for small size
|
||||
export const InputPaddingYMd = "12px"; // 12px — standard vertical padding for medium size
|
||||
export const InputFontSizeDefault = "1rem"; // 16px — prevents iOS auto-zoom on focus, matches Figma
|
||||
export const InputBorderRadiusDefault = "4px"; // 4px — subtle rounding, consistent with Figma design
|
||||
export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability
|
||||
export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon
|
||||
export const ColorBrand50 = "#fef9f5"; // Lightest warm tint — warm section backgrounds
|
||||
export const ColorBrand100 = "#f7ecdf"; // Light warm — hover backgrounds, subtle fills
|
||||
export const ColorBrand200 = "#ebdac8"; // Warm light — secondary backgrounds, divider tones
|
||||
export const ColorBrand300 = "#d8c3b5"; // Warm beige — from brand swatch. Surface warmth, card tints
|
||||
export const ColorBrand400 = "#d0a070"; // Mid gold — from brand swatch. Secondary interactive, step indicators
|
||||
export const ColorBrand500 = "#ba834e"; // Base brand gold — from brand swatch. Primary CTA colour, main interactive. 3.7:1 contrast on white
|
||||
export const ColorBrand600 = "#b0610f"; // Rich copper — from brand swatch. Hover/emphasis on brand elements. 4.8:1 contrast on white
|
||||
export const ColorBrand700 = "#8b4e0d"; // Deep copper — active states, strong brand text on light backgrounds. 6.7:1 contrast on white
|
||||
export const ColorBrand800 = "#6b3c13"; // Dark brown — bold brand accents, high-contrast brand text
|
||||
export const ColorBrand900 = "#51301b"; // Chocolate — from brand swatch. Deep emphasis, dark brand surfaces
|
||||
export const ColorBrand950 = "#251913"; // Espresso — from brand swatch. Darkest brand tone, near-black warm
|
||||
export const ColorSage50 = "#f2f5f6"; // Lightest sage — subtle cool backgrounds
|
||||
export const ColorSage100 = "#e3eaeb"; // Light sage — hover states on cool surfaces
|
||||
export const ColorSage200 = "#d7e1e2"; // From brand swatch — light cool surface, soft borders
|
||||
export const ColorSage300 = "#c8d4d6"; // Mid-light sage — dividers, secondary borders
|
||||
export const ColorSage400 = "#b9c7c9"; // From brand swatch — mid sage, secondary text on dark backgrounds
|
||||
export const ColorSage500 = "#8ea2a7"; // Base sage — secondary content, muted icons
|
||||
export const ColorSage600 = "#687d84"; // Dark sage — secondary text, subtle icons
|
||||
export const ColorSage700 = "#4c5b6b"; // From brand swatch — strong secondary, dark accents. 6.1:1 contrast on white
|
||||
export const ColorSage800 = "#4c5459"; // From brand swatch — near-dark grey, supplementary text. 6.7:1 contrast on white
|
||||
export const ColorSage900 = "#343c40"; // Very dark sage — high-contrast secondary elements
|
||||
export const ColorSage950 = "#1e2528"; // Near-black cool — darkest secondary tone
|
||||
export const ColorNeutral50 = "#fafafa"; // Lightest neutral — default page background alternative
|
||||
export const ColorNeutral100 = "#f5f5f5"; // Light neutral — subtle background differentiation
|
||||
export const ColorNeutral200 = "#e8e8e8"; // Light grey — standard borders, dividers
|
||||
export const ColorNeutral300 = "#d4d4d4"; // Mid-light grey — disabled borders, subtle separators
|
||||
export const ColorNeutral400 = "#a3a3a3"; // Mid grey — placeholder text, disabled content
|
||||
export const ColorNeutral500 = "#737373"; // Base grey — secondary body text, icons
|
||||
export const ColorNeutral600 = "#525252"; // Dark grey — body text, labels. 7.1:1 contrast on white
|
||||
export const ColorNeutral700 = "#404040"; // Strong grey — headings, emphasis text. 9.7:1 contrast on white
|
||||
export const ColorNeutral800 = "#2c2e35"; // From brand swatch — charcoal with cool tint. Primary text colour. 13.2:1 contrast on white
|
||||
export const ColorNeutral900 = "#1a1a1c"; // Near-black — maximum contrast text
|
||||
export const ColorNeutral950 = "#0a0a0b"; // Deepest neutral — use sparingly
|
||||
export const ColorRed50 = "#fef2f2"; // Error tint — error message backgrounds
|
||||
export const ColorRed100 = "#fde8e8"; // Light error — hover on error surfaces
|
||||
export const ColorRed200 = "#f9bfbf"; // Light red — error borders, subtle indicators
|
||||
export const ColorRed300 = "#f09898"; // Mid-light red — error icon backgrounds
|
||||
export const ColorRed400 = "#e56b6b"; // Mid red — error indicators, badges
|
||||
export const ColorRed500 = "#d64545"; // Base red — form validation errors, alert accents
|
||||
export const ColorRed600 = "#bc2f2f"; // Strong red — error text on light backgrounds. 5.7:1 contrast on white
|
||||
export const ColorRed700 = "#9b2424"; // Dark red — error headings, strong alerts
|
||||
export const ColorRed800 = "#7a1d1d"; // Deep red — high-contrast error emphasis
|
||||
export const ColorRed900 = "#5c1616"; // Very dark red — use sparingly
|
||||
export const ColorRed950 = "#3d0e0e"; // Darkest red
|
||||
export const ColorAmber50 = "#fff9eb"; // Warning tint — warning message backgrounds
|
||||
export const ColorAmber100 = "#fff0cc"; // Light amber — hover on warning surfaces
|
||||
export const ColorAmber200 = "#ffe099"; // Light amber — warning borders
|
||||
export const ColorAmber300 = "#ffcc66"; // Mid-light amber — warning icon backgrounds
|
||||
export const ColorAmber400 = "#ffb833"; // Mid amber — warning badges, price alerts
|
||||
export const ColorAmber500 = "#f5a000"; // Base amber — warning accents
|
||||
export const ColorAmber600 = "#cc8500"; // Strong amber — warning text. 3.6:1 contrast on white (large text AA)
|
||||
export const ColorAmber700 = "#a36b00"; // Dark amber — warning headings. 5.1:1 contrast on white
|
||||
export const ColorAmber800 = "#7a5000"; // Deep amber — high-contrast warning emphasis
|
||||
export const ColorAmber900 = "#523600"; // Very dark amber — use sparingly
|
||||
export const ColorAmber950 = "#331f00"; // Darkest amber
|
||||
export const ColorGreen50 = "#f0f7f0"; // Success tint — success message backgrounds
|
||||
export const ColorGreen100 = "#d8ecd8"; // Light green — hover on success surfaces
|
||||
export const ColorGreen200 = "#b8d8b8"; // Light green — success borders
|
||||
export const ColorGreen300 = "#8dc08d"; // Mid-light green — success icon backgrounds
|
||||
export const ColorGreen400 = "#66a866"; // Mid green — success badges, completion indicators
|
||||
export const ColorGreen500 = "#4a8f4a"; // Base green — success accents, completed steps
|
||||
export const ColorGreen600 = "#3b7a3b"; // Strong green — success text on light backgrounds. 4.8:1 contrast on white
|
||||
export const ColorGreen700 = "#2e6b2e"; // Dark green — success headings
|
||||
export const ColorGreen800 = "#235523"; // Deep green — high-contrast success emphasis
|
||||
export const ColorGreen900 = "#1a3f1a"; // Very dark green — use sparingly
|
||||
export const ColorGreen950 = "#0f2a0f"; // Darkest green
|
||||
export const ColorBlue50 = "#eff6ff"; // Info tint — info message backgrounds
|
||||
export const ColorBlue100 = "#dbeafe"; // Light blue — hover on info surfaces
|
||||
export const ColorBlue200 = "#bfdbfe"; // Light blue — info borders
|
||||
export const ColorBlue300 = "#93c5fd"; // Mid-light blue — info icon backgrounds
|
||||
export const ColorBlue400 = "#60a5fa"; // Mid blue — info badges
|
||||
export const ColorBlue500 = "#3b82f6"; // Base blue — info accents, supplementary links
|
||||
export const ColorBlue600 = "#2563eb"; // Strong blue — info text on light backgrounds. 4.6:1 contrast on white
|
||||
export const ColorBlue700 = "#1d4ed8"; // Dark blue — info headings
|
||||
export const ColorBlue800 = "#1e40af"; // Deep blue — high-contrast info emphasis
|
||||
export const ColorBlue900 = "#1e3a8a"; // Very dark blue — use sparingly
|
||||
export const ColorBlue950 = "#172554"; // Darkest blue
|
||||
export const ColorWhite = "#ffffff"; // Pure white — card backgrounds, inverse text, primary surface
|
||||
export const ColorBlack = "#000000"; // Pure black — from brand swatch. Use sparingly; prefer neutral.800-900 for text
|
||||
export const ColorTextPrimary = "#2c2e35"; // Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading
|
||||
export const ColorTextSecondary = "#525252"; // Secondary text — helper text, descriptions, metadata, less prominent content
|
||||
export const ColorTextTertiary = "#737373"; // Tertiary text — placeholders, timestamps, attribution, meta information
|
||||
export const ColorTextDisabled = "#a3a3a3"; // Disabled text — clearly diminished but still readable for accessibility
|
||||
export const ColorTextInverse = "#ffffff"; // Inverse text — white text on dark or coloured backgrounds (buttons, banners)
|
||||
export const ColorTextBrand = "#b0610f"; // Brand-coloured text — links, inline brand emphasis. Copper tone meets AA on white (4.8:1)
|
||||
export const ColorTextError = "#bc2f2f"; // Error text — form validation messages, error descriptions
|
||||
export const ColorTextSuccess = "#3b7a3b"; // Success text — confirmation messages, positive feedback
|
||||
export const ColorTextWarning = "#a36b00"; // Warning text — cautionary messages. Uses amber.700 for WCAG AA compliance on white (5.1:1)
|
||||
export const ColorSurfaceDefault = "#ffffff"; // Default surface — main page background, card faces
|
||||
export const ColorSurfaceSubtle = "#fafafa"; // Subtle surface — slight differentiation from default, alternate row backgrounds
|
||||
export const ColorSurfaceRaised = "#ffffff"; // Raised surface — cards, elevated containers (distinguished by shadow rather than colour)
|
||||
export const ColorSurfaceWarm = "#fef9f5"; // Warm surface — brand-tinted sections, promotional areas, upsell cards like 'Protect your plan'
|
||||
export const ColorSurfaceCool = "#f2f5f6"; // Cool surface — calming sections, information panels, FAQ backgrounds
|
||||
export const ColorSurfaceOverlay = "#00000080"; // Overlay surface — modal/dialog backdrop at 50% black
|
||||
export const ColorBorderDefault = "#e8e8e8"; // Default border — cards, containers, resting input borders
|
||||
export const ColorBorderStrong = "#a3a3a3"; // Strong border — emphasis borders, active input borders
|
||||
export const ColorBorderSubtle = "#f5f5f5"; // Subtle border — section dividers, soft separators
|
||||
export const ColorBorderBrand = "#ba834e"; // Brand border — focused inputs, selected cards, brand-accented containers
|
||||
export const ColorBorderError = "#d64545"; // Error border — form fields with validation errors
|
||||
export const ColorBorderSuccess = "#4a8f4a"; // Success border — validated fields, confirmed selections
|
||||
export const ColorInteractiveDefault = "#b0610f"; // Default interactive — primary button fill, link colour, checkbox accent. Uses brand.600 (copper) for WCAG AA compliance (4.6:1 on white)
|
||||
export const ColorInteractiveHover = "#8b4e0d"; // Hover state — deepened copper on hover for clear visual feedback
|
||||
export const ColorInteractiveActive = "#6b3c13"; // Active/pressed state — dark brown during click/tap
|
||||
export const ColorInteractiveDisabled = "#d4d4d4"; // Disabled interactive — muted grey, no pointer events
|
||||
export const ColorInteractiveFocus = "#b0610f"; // Focus ring colour — keyboard navigation indicator, 2px outline with 2px offset
|
||||
export const ColorInteractiveSecondary = "#4c5b6b"; // Secondary interactive — grey/sage buttons, less prominent actions
|
||||
export const ColorInteractiveSecondaryHover = "#4c5459"; // Secondary interactive hover — darkened sage on hover
|
||||
export const ColorFeedbackSuccess = "#3b7a3b"; // Success — confirmations, completed arrangement steps, booking confirmed
|
||||
export const ColorFeedbackSuccessSubtle = "#f0f7f0"; // Success background — success message container fill, completion banners
|
||||
export const ColorFeedbackWarning = "#cc8500"; // Warning — price change alerts, important notices, bond/insurance prompts
|
||||
export const ColorFeedbackWarningSubtle = "#fff9eb"; // Warning background — warning message container fill, notice banners
|
||||
export const ColorFeedbackError = "#bc2f2f"; // Error — form validation failures, system errors, payment issues
|
||||
export const ColorFeedbackErrorSubtle = "#fef2f2"; // Error background — error message container fill, alert banners
|
||||
export const ColorFeedbackInfo = "#2563eb"; // Info — helpful tips, supplementary information, guidance callouts
|
||||
export const ColorFeedbackInfoSubtle = "#eff6ff"; // Info background — info message container fill, tip banners
|
||||
export const ShadowSm = "0 1px 2px rgba(0,0,0,0.05)"; // Subtle lift — resting buttons, input focus subtle elevation
|
||||
export const ShadowMd = "0 4px 6px rgba(0,0,0,0.07)"; // Medium elevation — cards at rest, dropdowns, popovers
|
||||
export const ShadowLg = "0 10px 15px rgba(0,0,0,0.1)"; // High elevation — modals, popovers, card hover states
|
||||
export const ShadowXl = "0 20px 25px rgba(0,0,0,0.1)"; // Maximum elevation — elevated panels, dialog boxes
|
||||
export const OpacityDisabled = 0.4; // Disabled state — 40% opacity. Clearly diminished but still distinguishable
|
||||
export const OpacityHover = 0.08; // Hover overlay — subtle 8% tint applied over backgrounds on hover
|
||||
export const OpacityOverlay = 0.5; // Modal/dialog backdrop — 50% black overlay behind modals
|
||||
export const Spacing1 = "4px"; // Tight — inline spacing, minimal gaps between related elements
|
||||
export const Spacing2 = "8px"; // Small — related element gaps, compact padding, icon margins
|
||||
export const Spacing3 = "12px"; // Component internal padding (small), chip padding
|
||||
export const Spacing4 = "16px"; // Default component padding, form field gap, card grid gutter (mobile)
|
||||
export const Spacing5 = "20px"; // Medium component spacing
|
||||
export const Spacing6 = "24px"; // Card padding, section gap (small), card grid gutter (desktop)
|
||||
export const Spacing8 = "32px"; // Section gap (medium), form section separation
|
||||
export const Spacing10 = "40px"; // Section gap (large)
|
||||
export const Spacing12 = "48px"; // Page section separation, vertical rhythm break
|
||||
export const Spacing16 = "64px"; // Hero/banner vertical spacing
|
||||
export const Spacing20 = "80px"; // Major page sections, large vertical spacing
|
||||
export const Spacing05 = "2px"; // Hairline — icon-to-text tight spacing, fine adjustments
|
||||
export const SpacingComponentXs = "4px"; // 4px — tight gaps: icon margins, chip internal padding
|
||||
export const SpacingComponentSm = "8px"; // 8px — small padding: badge padding, inline element gaps
|
||||
export const SpacingComponentMd = "16px"; // 16px — default padding: button padding, input padding, form field gap
|
||||
export const SpacingComponentLg = "24px"; // 24px — large padding: card padding (desktop), modal padding
|
||||
export const SpacingLayoutGutter = "16px"; // 16px — grid gutter on mobile, card grid gap
|
||||
export const SpacingLayoutGutterDesktop = "24px"; // 24px — grid gutter on desktop
|
||||
export const SpacingLayoutSection = "48px"; // 48px — vertical gap between page sections
|
||||
export const SpacingLayoutPage = "64px"; // 64px — major page section separation, hero spacing
|
||||
export const SpacingLayoutPagePadding = "16px"; // 16px — horizontal page padding on mobile
|
||||
export const SpacingLayoutPagePaddingDesktop = "32px"; // 32px — horizontal page padding on desktop
|
||||
export const BorderRadiusNone = "0px"; // Square corners — tables, dividers, sharp elements
|
||||
export const BorderRadiusSm = "4px"; // Small radius — inputs, small interactive elements, chips
|
||||
export const BorderRadiusMd = "8px"; // Medium radius — cards, buttons, dropdowns (default)
|
||||
export const BorderRadiusLg = "12px"; // Large radius — modals, large cards
|
||||
export const BorderRadiusXl = "16px"; // Extra large — feature cards, hero elements
|
||||
export const BorderRadiusFull = "9999px"; // Full/pill — avatars, pill buttons, circular elements
|
||||
export const FontFamilyBody =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif"; // Primary font — Montserrat. Used for headings (h1-h6), body text, labels, and all UI elements
|
||||
export const FontFamilyDisplay =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif"; // Display font — Noto Serif SC. Elegant serif for hero/display text only. Adds warmth and gravitas at large sizes
|
||||
export const FontFamilyMono =
|
||||
"'JetBrains Mono', 'Fira Code', Consolas, monospace"; // Monospace font — for reference numbers (FA-2026-00847), tabular pricing data, and code
|
||||
export const FontSize2xs = "0.6875rem"; // 11px — smallest UI text: compact captions, compact overlines
|
||||
export const FontSizeXs = "0.75rem"; // 12px — small text: captions, labels, overlines, body/xs
|
||||
export const FontSizeSm = "0.875rem"; // 14px — body small, labels, helper text
|
||||
export const FontSizeBase = "1rem"; // 16px — default body text, heading/6, label/lg
|
||||
export const FontSizeMd = "1.125rem"; // 18px — body large, heading/5
|
||||
export const FontSizeLg = "1.25rem"; // 20px — heading/4
|
||||
export const FontSizeXl = "1.5rem"; // 24px — heading/3
|
||||
export const FontSize2xl = "1.875rem"; // 30px — heading/2
|
||||
export const FontSize3xl = "2.25rem"; // 36px — heading/1
|
||||
export const FontSize4xl = "3rem"; // 48px — reserved (legacy)
|
||||
export const FontSizeDisplay1 = "4rem"; // 64px — display/1
|
||||
export const FontSizeDisplay2 = "3.25rem"; // 52px — display/2
|
||||
export const FontSizeDisplay3 = "2.5rem"; // 40px — display/3
|
||||
export const FontSizeDisplaySm = "2rem"; // 32px — display/sm, smallest display text
|
||||
export const FontSizeDisplayHero = "5rem"; // 80px — display/hero, largest display text
|
||||
export const FontSizeMobileDisplayHero = "2rem"; // 32px — mobile display/hero (from 80px desktop)
|
||||
export const FontSizeMobileDisplay1 = "1.75rem"; // 28px — mobile display/1 (from 64px desktop)
|
||||
export const FontSizeMobileDisplay2 = "1.5rem"; // 24px — mobile display/2 (from 52px desktop)
|
||||
export const FontSizeMobileDisplay3 = "1.375rem"; // 22px — mobile display/3 (from 40px desktop)
|
||||
export const FontSizeMobileDisplaySm = "1.25rem"; // 20px — mobile display/sm (from 32px desktop)
|
||||
export const FontSizeMobileH1 = "1.625rem"; // 26px — mobile heading/1 (from 36px desktop)
|
||||
export const FontSizeMobileH2 = "1.375rem"; // 22px — mobile heading/2 (from 30px desktop)
|
||||
export const FontSizeMobileH3 = "1.25rem"; // 20px — mobile heading/3 (from 24px desktop)
|
||||
export const FontSizeMobileH4 = "1.125rem"; // 18px — mobile heading/4 (from 20px desktop)
|
||||
export const FontSizeMobileH5 = "1rem"; // 16px — mobile heading/5 (from 18px desktop)
|
||||
export const FontSizeMobileH6 = "0.875rem"; // 14px — mobile heading/6 (from 16px desktop)
|
||||
export const FontWeightRegular = 400; // Regular weight — captions, display text (serif carries inherent weight)
|
||||
export const FontWeightMedium = 500; // Medium weight — body text, labels. Slightly bolder than regular for improved readability
|
||||
export const FontWeightSemibold = 600; // Semibold — overlines, button text, navigation
|
||||
export const FontWeightBold = 700; // Bold — all headings (h1-h6)
|
||||
export const LineHeightTight = 1.25; // Tight leading — large headings, display text
|
||||
export const LineHeightSnug = 1.375; // Snug leading — sub-headings, labels, small text
|
||||
export const LineHeightNormal = 1.5; // Normal leading — default body text, optimal readability
|
||||
export const LineHeightRelaxed = 1.75; // Relaxed leading — large body text, long-form content
|
||||
export const LetterSpacingTighter = "-0.02em"; // Tighter tracking — large display text
|
||||
export const LetterSpacingTight = "-0.01em"; // Tight tracking — headings
|
||||
export const LetterSpacingNormal = "0em"; // Normal tracking — body text, most content
|
||||
export const LetterSpacingWide = "0.02em"; // Wide tracking — captions, small text
|
||||
export const LetterSpacingWider = "0.05em"; // Wider tracking — labels, UI text
|
||||
export const LetterSpacingWidest = "0.08em"; // Widest tracking — overlines, uppercase text
|
||||
export const TypographyDisplayHeroFontFamily =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif";
|
||||
export const TypographyDisplayHeroFontSize = "5rem"; // 80px desktop
|
||||
export const TypographyDisplayHeroFontSizeMobile = "2rem"; // 32px mobile
|
||||
export const TypographyDisplayHeroFontWeight = 400; // 400 — serif carries inherent weight at large sizes
|
||||
export const TypographyDisplayHeroLineHeight = 1.05;
|
||||
export const TypographyDisplayHeroLetterSpacing = "-1.5px";
|
||||
export const TypographyDisplay1FontFamily =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif";
|
||||
export const TypographyDisplay1FontSize = "4rem"; // 64px desktop
|
||||
export const TypographyDisplay1FontSizeMobile = "1.75rem"; // 28px mobile
|
||||
export const TypographyDisplay1FontWeight = 400;
|
||||
export const TypographyDisplay1LineHeight = 1.078;
|
||||
export const TypographyDisplay1LetterSpacing = "-1px";
|
||||
export const TypographyDisplay2FontFamily =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif";
|
||||
export const TypographyDisplay2FontSize = "3.25rem"; // 52px desktop
|
||||
export const TypographyDisplay2FontSizeMobile = "1.5rem"; // 24px mobile
|
||||
export const TypographyDisplay2FontWeight = 400;
|
||||
export const TypographyDisplay2LineHeight = 1.096;
|
||||
export const TypographyDisplay2LetterSpacing = "-0.5px";
|
||||
export const TypographyDisplay3FontFamily =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif";
|
||||
export const TypographyDisplay3FontSize = "2.5rem"; // 40px desktop
|
||||
export const TypographyDisplay3FontSizeMobile = "1.375rem"; // 22px mobile
|
||||
export const TypographyDisplay3FontWeight = 400;
|
||||
export const TypographyDisplay3LineHeight = 1.15;
|
||||
export const TypographyDisplay3LetterSpacing = "-0.25px";
|
||||
export const TypographyDisplaySmFontFamily =
|
||||
"'Noto Serif SC', Georgia, 'Times New Roman', serif";
|
||||
export const TypographyDisplaySmFontSize = "2rem"; // 32px desktop
|
||||
export const TypographyDisplaySmFontSizeMobile = "1.25rem"; // 20px mobile
|
||||
export const TypographyDisplaySmFontWeight = 400;
|
||||
export const TypographyDisplaySmLineHeight = 1.1875;
|
||||
export const TypographyDisplaySmLetterSpacing = "0px";
|
||||
export const TypographyH1FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH1FontSize = "2.25rem"; // 36px desktop
|
||||
export const TypographyH1FontSizeMobile = "1.625rem"; // 26px mobile
|
||||
export const TypographyH1FontWeight = 700;
|
||||
export const TypographyH1LineHeight = 1.194;
|
||||
export const TypographyH1LetterSpacing = "-0.5px";
|
||||
export const TypographyH2FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH2FontSize = "1.875rem"; // 30px desktop
|
||||
export const TypographyH2FontSizeMobile = "1.375rem"; // 22px mobile
|
||||
export const TypographyH2FontWeight = 700;
|
||||
export const TypographyH2LineHeight = 1.267;
|
||||
export const TypographyH2LetterSpacing = "-0.25px";
|
||||
export const TypographyH3FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH3FontSize = "1.5rem"; // 24px desktop
|
||||
export const TypographyH3FontSizeMobile = "1.25rem"; // 20px mobile
|
||||
export const TypographyH3FontWeight = 700;
|
||||
export const TypographyH3LineHeight = 1.292;
|
||||
export const TypographyH3LetterSpacing = "0px";
|
||||
export const TypographyH4FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH4FontSize = "1.25rem"; // 20px desktop
|
||||
export const TypographyH4FontSizeMobile = "1.125rem"; // 18px mobile
|
||||
export const TypographyH4FontWeight = 700;
|
||||
export const TypographyH4LineHeight = 1.35;
|
||||
export const TypographyH4LetterSpacing = "0px";
|
||||
export const TypographyH5FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH5FontSize = "1.125rem"; // 18px desktop
|
||||
export const TypographyH5FontSizeMobile = "1rem"; // 16px mobile
|
||||
export const TypographyH5FontWeight = 700;
|
||||
export const TypographyH5LineHeight = 1.389;
|
||||
export const TypographyH5LetterSpacing = "0px";
|
||||
export const TypographyH6FontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyH6FontSize = "1rem"; // 16px desktop
|
||||
export const TypographyH6FontSizeMobile = "0.875rem"; // 14px mobile
|
||||
export const TypographyH6FontWeight = 700;
|
||||
export const TypographyH6LineHeight = 1.375;
|
||||
export const TypographyH6LetterSpacing = "0px";
|
||||
export const TypographyBodyLgFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyBodyLgFontSize = "1.125rem"; // 18px
|
||||
export const TypographyBodyLgFontWeight = 500;
|
||||
export const TypographyBodyLgLineHeight = 1.611;
|
||||
export const TypographyBodyLgLetterSpacing = "0px";
|
||||
export const TypographyBodyFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyBodyFontSize = "1rem"; // 16px
|
||||
export const TypographyBodyFontWeight = 500;
|
||||
export const TypographyBodyLineHeight = 1.625;
|
||||
export const TypographyBodyLetterSpacing = "0px";
|
||||
export const TypographyBodySmFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyBodySmFontSize = "0.875rem"; // 14px
|
||||
export const TypographyBodySmFontWeight = 500;
|
||||
export const TypographyBodySmLineHeight = 1.571;
|
||||
export const TypographyBodySmLetterSpacing = "0px";
|
||||
export const TypographyBodyXsFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyBodyXsFontSize = "0.75rem"; // 12px
|
||||
export const TypographyBodyXsFontWeight = 500;
|
||||
export const TypographyBodyXsLineHeight = 1.5;
|
||||
export const TypographyBodyXsLetterSpacing = "0.1px";
|
||||
export const TypographyLabelLgFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyLabelLgFontSize = "1rem"; // 16px
|
||||
export const TypographyLabelLgFontWeight = 500;
|
||||
export const TypographyLabelLgLineHeight = 1.3125;
|
||||
export const TypographyLabelLgLetterSpacing = "0.1px";
|
||||
export const TypographyLabelFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyLabelFontSize = "0.875rem"; // 14px
|
||||
export const TypographyLabelFontWeight = 500;
|
||||
export const TypographyLabelLineHeight = 1.286;
|
||||
export const TypographyLabelLetterSpacing = "0.15px";
|
||||
export const TypographyLabelSmFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyLabelSmFontSize = "0.75rem"; // 12px
|
||||
export const TypographyLabelSmFontWeight = 500;
|
||||
export const TypographyLabelSmLineHeight = 1.333;
|
||||
export const TypographyLabelSmLetterSpacing = "0.2px";
|
||||
export const TypographyCaptionFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyCaptionFontSize = "0.75rem"; // 12px
|
||||
export const TypographyCaptionFontWeight = 400;
|
||||
export const TypographyCaptionLineHeight = 1.417;
|
||||
export const TypographyCaptionLetterSpacing = "0.2px";
|
||||
export const TypographyCaptionSmFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyCaptionSmFontSize = "0.6875rem"; // 11px — accessibility floor
|
||||
export const TypographyCaptionSmFontWeight = 400;
|
||||
export const TypographyCaptionSmLineHeight = 1.364;
|
||||
export const TypographyCaptionSmLetterSpacing = "0.2px";
|
||||
export const TypographyOverlineFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyOverlineFontSize = "0.75rem"; // 12px
|
||||
export const TypographyOverlineFontWeight = 600;
|
||||
export const TypographyOverlineLineHeight = 1.333;
|
||||
export const TypographyOverlineLetterSpacing = "1.5px";
|
||||
export const TypographyOverlineSmFontFamily =
|
||||
"'Montserrat', 'Helvetica Neue', Arial, sans-serif";
|
||||
export const TypographyOverlineSmFontSize = "0.6875rem"; // 11px — accessibility floor
|
||||
export const TypographyOverlineSmFontWeight = 600;
|
||||
export const TypographyOverlineSmLineHeight = 1.273;
|
||||
export const TypographyOverlineSmLetterSpacing = "1.5px";
|
||||
Reference in New Issue
Block a user