pangkywara/UAS_SIG_WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
UAS_SIG_WebGIS/frontend/design/token.json
T

374 lines
10 KiB
JSON
Raw Permalink Blame History

{
"color": {
"vermilion-pulse": {
"$value": "#ff3b1f",
"$type": "color",
"$description": "Vermilion Pulse — Bold primary accent for CTAs, active states, product highlights, badges, and high-emphasis interactive moments. Adds heat and confidence without fighting the Cobalt Glow hero treatment."
},
"cobalt-glow": {
"$value": "#5683d2",
"$type": "color",
"$description": "Cobalt Glow — Hero gradient midpoint, decorative accents, link hover washes. Provides the atmospheric blue that carries the dawn-sky hero treatment"
},
"obsidian": {
"$value": "#0c0a08",
"$type": "color",
"$description": "Obsidian — Primary text color, dark canvas surfaces, navigation bar, footer. The near-black that grounds the system with 19.8:1 contrast against white"
},
"paper": {
"$value": "#ffffff",
"$type": "color",
"$description": "Paper — Page background in light sections, text on dark surfaces, input fills. The clean canvas that lets product imagery and the vermilion accent command attention"
},
"limestone": {
"$value": "#f4f2f0",
"$type": "color",
"$description": "Limestone — Card surfaces, elevated panels, warm neutral fills. Replaces drop shadows as the separation mechanism in light-mode layouts"
},
"charcoal": {
"$value": "#1a1919",
"$type": "color",
"$description": "Charcoal — Elevated dark surfaces, filled dark buttons, card overlays. One step lifted from Obsidian for subtle depth without true black"
},
"slate": {
"$value": "#4d505d",
"$type": "color",
"$description": "Slate — Borders, dividers, muted structural elements. Carries a cool undertone that keeps it from competing with the warm Limestone surfaces"
},
"fog": {
"$value": "#999ba3",
"$type": "color",
"$description": "Fog — Secondary text, helper copy, muted labels, icon strokes. The 50% gray that handles all de-emphasized content"
},
"bone": {
"$value": "#d2cecb",
"$type": "color",
"$description": "Bone — Hairline borders on light surfaces, subtle dividers, card outlines. Warmer than Slate, used where Slate would feel cold against Limestone"
}
},
"font": {
"lausanne": {
"$value": "Lausanne",
"$type": "fontFamily",
"$description": "Primary typeface for all UI, headings, body, nav, buttons, and display. Lausanne is a custom commissioned sans-serif with optical sizing across 11 steps — its compressed line-height at 64px (0.74-1.05) gives hero headlines an editorial slab feel without switching to a serif. Weight 400 carries everything; 500 is reserved for nav and emphasis."
},
"arial": {
"$value": "Arial",
"$type": "fontFamily",
"$description": "Arial — detected in extracted data but not described by AI"
}
},
"typography": {
"xs": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "10px",
"fontWeight": 400,
"lineHeight": 1.6
},
"$type": "typography",
"$description": "Typography step xs at 10px"
},
"sm": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "13px",
"fontWeight": 400,
"lineHeight": 1.46
},
"$type": "typography",
"$description": "Typography step sm at 13px"
},
"sm-2": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": 1
},
"$type": "typography",
"$description": "Typography step sm-2 at 14px"
},
"sm-3": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "14px",
"fontWeight": 400,
"lineHeight": 0.74
},
"$type": "typography",
"$description": "Typography step sm-3 at 14px"
},
"sm-4": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "14px",
"fontWeight": 400,
"lineHeight": 1.43
},
"$type": "typography",
"$description": "Typography step sm-4 at 14px"
},
"sm-5": {
"$value": {
"fontFamily": "Arial",
"fontSize": "14px",
"fontWeight": 400,
"lineHeight": 1.2
},
"$type": "typography",
"$description": "Typography step sm-5 at 14px"
},
"base": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.5
},
"$type": "typography",
"$description": "Typography step base at 16px"
},
"base-2": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.38
},
"$type": "typography",
"$description": "Typography step base-2 at 16px"
},
"base-3": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 0.68
},
"$type": "typography",
"$description": "Typography step base-3 at 16px"
},
"base-4": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.2
},
"$type": "typography",
"$description": "Typography step base-4 at 16px"
},
"lg": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "18px",
"fontWeight": 400,
"lineHeight": 1.33
},
"$type": "typography",
"$description": "Typography step lg at 18px"
},
"xl": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "20px",
"fontWeight": 400,
"lineHeight": 1.3
},
"$type": "typography",
"$description": "Typography step xl at 20px"
},
"2xl": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "24px",
"fontWeight": 400,
"lineHeight": 1.17
},
"$type": "typography",
"$description": "Typography step 2xl at 24px"
},
"2xl-2": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "28px",
"fontWeight": 400,
"lineHeight": 1.14
},
"$type": "typography",
"$description": "Typography step 2xl-2 at 28px"
},
"4xl": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "40px",
"fontWeight": 400,
"lineHeight": 1.05
},
"$type": "typography",
"$description": "Typography step 4xl at 40px"
},
"5xl": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "48px",
"fontWeight": 400,
"lineHeight": 1.04
},
"$type": "typography",
"$description": "Typography step 5xl at 48px"
},
"5xl-2": {
"$value": {
"fontFamily": "lausanne",
"fontSize": "64px",
"fontWeight": 400,
"lineHeight": 1
},
"$type": "typography",
"$description": "Typography step 5xl-2 at 64px"
}
},
"spacing": {
"4": {
"$value": "4px",
"$type": "dimension",
"$description": "Spacing 4px"
},
"8": {
"$value": "8px",
"$type": "dimension",
"$description": "Spacing 8px"
},
"12": {
"$value": "12px",
"$type": "dimension",
"$description": "Spacing 12px"
},
"16": {
"$value": "16px",
"$type": "dimension",
"$description": "Spacing 16px"
},
"20": {
"$value": "20px",
"$type": "dimension",
"$description": "Spacing 20px"
},
"24": {
"$value": "24px",
"$type": "dimension",
"$description": "Spacing 24px"
},
"28": {
"$value": "28px",
"$type": "dimension",
"$description": "Spacing 28px"
},
"32": {
"$value": "32px",
"$type": "dimension",
"$description": "Spacing 32px"
},
"40": {
"$value": "40px",
"$type": "dimension",
"$description": "Spacing 40px"
},
"48": {
"$value": "48px",
"$type": "dimension",
"$description": "Spacing 48px"
},
"52": {
"$value": "52px",
"$type": "dimension",
"$description": "Spacing 52px"
},
"64": {
"$value": "64px",
"$type": "dimension",
"$description": "Spacing 64px"
},
"76": {
"$value": "76px",
"$type": "dimension",
"$description": "Spacing 76px"
},
"128": {
"$value": "128px",
"$type": "dimension",
"$description": "Spacing 128px"
},
"160": {
"$value": "160px",
"$type": "dimension",
"$description": "Spacing 160px"
},
"176": {
"$value": "176px",
"$type": "dimension",
"$description": "Spacing 176px"
},
"unit": {
"$value": "4px",
"$type": "dimension",
"$description": "Base spacing unit"
}
},
"radius": {
"md": {
"$value": "4px",
"$type": "dimension",
"$description": "Border radius md"
},
"lg": {
"$value": "7.8px",
"$type": "dimension",
"$description": "Border radius lg"
},
"xl": {
"$value": "12px",
"$type": "dimension",
"$description": "Border radius xl"
}
},
"shadow": {
"subtle": {
"$value": "rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset",
"$type": "shadow",
"$description": "Shadow elevation subtle"
}
},
"surface": {
"paper-canvas": {
"$value": "#ffffff",
"$type": "color",
"$description": "Surface level 0: Base page background for all light-mode sections"
},
"limestone-card": {
"$value": "#f4f2f0",
"$type": "color",
"$description": "Surface level 1: Product feature cards, elevated content panels"
},
"charcoal-overlay": {
"$value": "#1a1919",
"$type": "color",
"$description": "Surface level 2: Dark elevated surfaces, filled dark buttons, image overlays"
},
"obsidian-ground": {
"$value": "#0c0a08",
"$type": "color",
"$description": "Surface level 3: Deepest surface for navigation, footer, and hero dark zones"
}
},
"$extensions": {
"com.refero.extraction": {
"url": "https://ramp.com",
"siteName": "Ramp",
"extractedAt": "2026-06-03T15:17:17.732Z",
"variant": "extended"
}
}
}
Reference in New Issue View Git Blame Copy Permalink