chore: create initial project snapshot
Capture the portfolio source, design references, and production assets with repository-specific ignore rules.
This commit is contained in:
28
resources/design-system/01-primitives.json
Normal file
28
resources/design-system/01-primitives.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"blue": {
|
||||
"950": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
|
||||
"900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
|
||||
"800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } },
|
||||
"700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
|
||||
"600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
|
||||
"500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
|
||||
"400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } },
|
||||
"300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
|
||||
"200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } },
|
||||
"100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
|
||||
"white": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
|
||||
},
|
||||
"slate": {
|
||||
"800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
|
||||
"600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
|
||||
"400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
|
||||
"300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } }
|
||||
},
|
||||
"border": {
|
||||
"light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
|
||||
"dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
|
||||
"strong-light": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } },
|
||||
"strong-dark": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
|
||||
},
|
||||
"black": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 1, "hex": "#000000" } }
|
||||
}
|
||||
32
resources/design-system/02-semantic-dark.json
Normal file
32
resources/design-system/02-semantic-dark.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"bg": {
|
||||
"page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
|
||||
"surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.027451, 0.07451, 0.184314], "alpha": 1, "hex": "#07132F" } },
|
||||
"raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.047059, 0.101961, 0.227451], "alpha": 1, "hex": "#0C1A3A" } },
|
||||
"subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.035294, 0.109804, 0.247059], "alpha": 1, "hex": "#091C3F" } }
|
||||
},
|
||||
"text": {
|
||||
"primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
|
||||
"secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.811765, 0.878431], "alpha": 1, "hex": "#C3CFE0" } },
|
||||
"muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.639216, 0.694118, 0.776471], "alpha": 1, "hex": "#A3B1C6" } },
|
||||
"on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
|
||||
},
|
||||
"border": {
|
||||
"default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.117647, 0.203922, 0.345098], "alpha": 1, "hex": "#1E3458" } },
|
||||
"strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.258824, 0.419608, 0.615686], "alpha": 1, "hex": "#426B9D" } }
|
||||
},
|
||||
"accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
|
||||
"action": {
|
||||
"link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } },
|
||||
"primary": {
|
||||
"bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.972549, 0.980392, 1], "alpha": 1, "hex": "#F8FAFF" } },
|
||||
"fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 1, "hex": "#010D27" } },
|
||||
"hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.862745, 0.909804, 0.968627], "alpha": 1, "hex": "#DCE8F7" } },
|
||||
"pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.764706, 0.835294, 0.92549], "alpha": 1, "hex": "#C3D5EC" } }
|
||||
}
|
||||
},
|
||||
"brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
|
||||
"focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.509804, 0.709804, 1], "alpha": 1, "hex": "#82B5FF" } } },
|
||||
"overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.003922, 0.05098, 0.152941], "alpha": 0.721569, "hex": "#010D27" } } },
|
||||
"shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.239216, "hex": "#000000" } } }
|
||||
}
|
||||
32
resources/design-system/02-semantic-light.json
Normal file
32
resources/design-system/02-semantic-light.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"bg": {
|
||||
"page": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
|
||||
"surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.980392, 0.980392, 0.980392], "alpha": 1, "hex": "#FAFAFA" } },
|
||||
"raised": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
|
||||
"subtle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.901961, 0.941176, 0.996078], "alpha": 1, "hex": "#E6F0FE" } }
|
||||
},
|
||||
"text": {
|
||||
"primary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.184314, 0.372549], "alpha": 1, "hex": "#0B2F5F" } },
|
||||
"secondary": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.219608, 0.321569, 0.431373], "alpha": 1, "hex": "#38526E" } },
|
||||
"muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.4, 0.439216, 0.521569], "alpha": 1, "hex": "#667085" } },
|
||||
"on-band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } }
|
||||
},
|
||||
"border": {
|
||||
"default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.85098, 0.886275, 0.937255], "alpha": 1, "hex": "#D9E2EF" } },
|
||||
"strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.662745, 0.745098, 0.854902], "alpha": 1, "hex": "#A9BEDA" } }
|
||||
},
|
||||
"accent": { "default": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
|
||||
"action": {
|
||||
"link": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.082353, 0.341176, 0.65098], "alpha": 1, "hex": "#1557A6" } },
|
||||
"primary": {
|
||||
"bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } },
|
||||
"fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 1, "hex": "#FFFFFF" } },
|
||||
"hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.043137, 0.196078, 0.407843], "alpha": 1, "hex": "#0B3268" } },
|
||||
"pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.031373, 0.156863, 0.309804], "alpha": 1, "hex": "#08284F" } }
|
||||
}
|
||||
},
|
||||
"brand": { "band": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 1, "hex": "#103F7F" } } },
|
||||
"focus": { "ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.239216, 0.541176, 0.980392], "alpha": 1, "hex": "#3D8AFA" } } },
|
||||
"overlay": { "contact": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [1, 1, 1], "alpha": 0.721569, "hex": "#FFFFFF" } } },
|
||||
"shadow": { "color": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.062745, 0.247059, 0.498039], "alpha": 0.078431, "hex": "#103F7F" } } }
|
||||
}
|
||||
51
resources/design-system/03-dimensions.json
Normal file
51
resources/design-system/03-dimensions.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"space": {
|
||||
"0": { "$type": "dimension", "$value": { "value": 0, "unit": "px" } },
|
||||
"1": { "$type": "dimension", "$value": { "value": 4, "unit": "px" } },
|
||||
"2": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
|
||||
"3": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
|
||||
"4": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
|
||||
"5": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
|
||||
"6": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
|
||||
"7": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
|
||||
"8": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
|
||||
"9": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
|
||||
"10": { "$type": "dimension", "$value": { "value": 80, "unit": "px" } },
|
||||
"11": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
|
||||
"12": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } }
|
||||
},
|
||||
"radius": {
|
||||
"sm": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } },
|
||||
"md": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
|
||||
"lg": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
|
||||
"xl": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
|
||||
"pill": { "$type": "dimension", "$value": { "value": 999, "unit": "px" } }
|
||||
},
|
||||
"stroke": {
|
||||
"default": { "$type": "dimension", "$value": { "value": 1, "unit": "px" } },
|
||||
"strong": { "$type": "dimension", "$value": { "value": 2, "unit": "px" } }
|
||||
},
|
||||
"layout": {
|
||||
"frame": { "$type": "dimension", "$value": { "value": 1440, "unit": "px" } },
|
||||
"container": { "$type": "dimension", "$value": { "value": 1320, "unit": "px" } },
|
||||
"page-gutter": { "$type": "dimension", "$value": { "value": 60, "unit": "px" } },
|
||||
"grid-gutter": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
|
||||
"grid-column": { "$type": "dimension", "$value": { "value": 88, "unit": "px" } },
|
||||
"section-gap": { "$type": "dimension", "$value": { "value": 120, "unit": "px" } },
|
||||
"section-padding": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
|
||||
"text-measure": { "$type": "dimension", "$value": { "value": 720, "unit": "px" } }
|
||||
},
|
||||
"size": {
|
||||
"icon-sm": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
|
||||
"icon-md": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
|
||||
"icon-lg": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } },
|
||||
"icon-button": { "$type": "dimension", "$value": { "value": 44, "unit": "px" } },
|
||||
"button-height": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
|
||||
"social-button": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
|
||||
"avatar": { "$type": "dimension", "$value": { "value": 200, "unit": "px" } },
|
||||
"journey-image": { "$type": "dimension", "$value": { "value": 96, "unit": "px" } },
|
||||
"project-width": { "$type": "dimension", "$value": { "value": 360, "unit": "px" } },
|
||||
"project-media-height": { "$type": "dimension", "$value": { "value": 225, "unit": "px" } },
|
||||
"tool-tile": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } }
|
||||
}
|
||||
}
|
||||
43
resources/design-system/04-typography.json
Normal file
43
resources/design-system/04-typography.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"font": {
|
||||
"family": {
|
||||
"primary": { "$type": "fontFamily", "$value": "IRANYekanX(Pro)" },
|
||||
"display": { "$type": "fontFamily", "$value": "Pacifico" }
|
||||
},
|
||||
"weight": {
|
||||
"regular": { "$type": "number", "$value": 400 },
|
||||
"medium": { "$type": "number", "$value": 500 },
|
||||
"demi-bold": { "$type": "number", "$value": 600 },
|
||||
"bold": { "$type": "number", "$value": 700 }
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"size": {
|
||||
"display-hero": { "$type": "dimension", "$value": { "value": 64, "unit": "px" } },
|
||||
"display-footer": { "$type": "dimension", "$value": { "value": 48, "unit": "px" } },
|
||||
"h1": { "$type": "dimension", "$value": { "value": 40, "unit": "px" } },
|
||||
"h2": { "$type": "dimension", "$value": { "value": 32, "unit": "px" } },
|
||||
"h3": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } },
|
||||
"body-large": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
|
||||
"body-default": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
|
||||
"body-small": { "$type": "dimension", "$value": { "value": 14, "unit": "px" } },
|
||||
"label-small": { "$type": "dimension", "$value": { "value": 12, "unit": "px" } },
|
||||
"button": { "$type": "dimension", "$value": { "value": 15, "unit": "px" } }
|
||||
},
|
||||
"line-height": {
|
||||
"display-hero": { "$type": "dimension", "$value": { "value": 72, "unit": "px" } },
|
||||
"display-footer": { "$type": "dimension", "$value": { "value": 56, "unit": "px" } },
|
||||
"h1": { "$type": "dimension", "$value": { "value": 52, "unit": "px" } },
|
||||
"h2": { "$type": "dimension", "$value": { "value": 42, "unit": "px" } },
|
||||
"h3": { "$type": "dimension", "$value": { "value": 28, "unit": "px" } },
|
||||
"body-large": { "$type": "dimension", "$value": { "value": 30, "unit": "px" } },
|
||||
"body-default": { "$type": "dimension", "$value": { "value": 26, "unit": "px" } },
|
||||
"body-small": { "$type": "dimension", "$value": { "value": 22, "unit": "px" } },
|
||||
"label-small": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } },
|
||||
"button": { "$type": "dimension", "$value": { "value": 20, "unit": "px" } }
|
||||
},
|
||||
"letter-spacing": {
|
||||
"eyebrow": { "$type": "number", "$value": 0.16 }
|
||||
}
|
||||
}
|
||||
}
|
||||
22
resources/design-system/README-FIGMA-IMPORT.md
Normal file
22
resources/design-system/README-FIGMA-IMPORT.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# Portfolio design tokens for Figma
|
||||
|
||||
These files use Figma's Design Tokens Community Group (DTCG) JSON import format.
|
||||
|
||||
## Recommended import order
|
||||
|
||||
1. In Figma, open the Variables view.
|
||||
2. Create a collection named `01 Primitives`, then import `01-primitives.json`.
|
||||
3. Create a collection named `02 Semantic`, then import both `02-semantic-light.json` and `02-semantic-dark.json` together. Figma creates one mode per imported file; rename the modes to `Light` and `Dark`.
|
||||
4. Create a collection named `03 Dimensions`, then import `03-dimensions.json`.
|
||||
5. Create a collection named `04 Typography`, then import `04-typography.json`.
|
||||
6. Create text styles manually using the imported typography variables. Figma imports the typography values, but it does not automatically create complete text styles.
|
||||
|
||||
## Important
|
||||
|
||||
The semantic color files contain resolved values so they import reliably. After importing, you may replace those values with aliases to matching variables in `01 Primitives` (for example, `text/primary` → `blue/700`). Do this only after confirming the variable names in your Figma file.
|
||||
|
||||
Do not import the Light and Dark semantic files into two separate collections. Import them together into the same collection so they become two modes.
|
||||
|
||||
## Starter-plan workaround
|
||||
|
||||
Starter does not include variable modes. Import `02-semantic-light.json` into a collection named `02 Semantic — Light`, and import `02-semantic-dark.json` into a separate collection named `02 Semantic — Dark`. Apply the Light collection to the light desktop frame and the Dark collection to the dark desktop frame. The variables still work, but you will not have a single Light/Dark mode switch.
|
||||
Reference in New Issue
Block a user