bluedither 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bluedither.config.json +14 -0
- package/cli/bin.js +60 -0
- package/cli/commands/extract.js +103 -0
- package/cli/commands/install.js +126 -0
- package/cli/commands/publish.js +85 -0
- package/cli/commands/tune.js +63 -0
- package/dist/bluedither-shader.js +4867 -0
- package/dist/bluedither-tuner.js +401 -0
- package/lib/render.js +108 -0
- package/package.json +40 -0
- package/skill.md +122 -0
- package/theme/generators/react.md +88 -0
- package/theme/generators/svelte.md +103 -0
- package/theme/generators/vanilla.md +54 -0
- package/theme/generators/vue.md +104 -0
- package/theme/rules.md +71 -0
- package/theme/shaders/bluedither-shader.js +92 -0
- package/theme/shaders/paper-shaders-bundle.js +6159 -0
- package/theme/structure.json +167 -0
- package/theme/template/index.html +235 -0
- package/theme/tokens.defaults.json +81 -0
- package/theme/tokens.json +81 -0
- package/theme/tokens.schema.json +166 -0
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json-schema.org/draft-07/schema#",
|
|
3
|
+
"description": "BlueDither component tree contract. Exact representation of template/index.html DOM structure.",
|
|
4
|
+
"root": {
|
|
5
|
+
"id": "bd-root",
|
|
6
|
+
"type": "container",
|
|
7
|
+
"class": "bd-root",
|
|
8
|
+
"tokenBindings": {
|
|
9
|
+
"backgroundColor": "colors.background"
|
|
10
|
+
},
|
|
11
|
+
"children": [
|
|
12
|
+
{
|
|
13
|
+
"id": "bd-hero",
|
|
14
|
+
"type": "section",
|
|
15
|
+
"class": "bd-hero",
|
|
16
|
+
"description": "Full-viewport hero section, positioned absolute over root",
|
|
17
|
+
"children": [
|
|
18
|
+
{
|
|
19
|
+
"id": "bd-hero-inner",
|
|
20
|
+
"type": "container",
|
|
21
|
+
"class": "bd-hero-inner",
|
|
22
|
+
"children": [
|
|
23
|
+
{
|
|
24
|
+
"id": "bd-shader-parent",
|
|
25
|
+
"type": "shader",
|
|
26
|
+
"class": "bd-shader-layer",
|
|
27
|
+
"description": "WebGL dithering shader canvas, full-bleed behind content",
|
|
28
|
+
"tokenBindings": {
|
|
29
|
+
"rotation": "shader.rotation",
|
|
30
|
+
"colorFront": "colors.shaderFront",
|
|
31
|
+
"colorBack": "colors.shaderBack",
|
|
32
|
+
"shape": "shader.shape",
|
|
33
|
+
"type": "shader.type",
|
|
34
|
+
"size": "shader.size",
|
|
35
|
+
"scale": "shader.scale",
|
|
36
|
+
"speed": "shader.speed"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"id": "bd-hero-content",
|
|
41
|
+
"type": "container",
|
|
42
|
+
"class": "bd-hero-content",
|
|
43
|
+
"tokenBindings": {
|
|
44
|
+
"paddingTop": "spacing.heroPaddingTop",
|
|
45
|
+
"paddingBottom": "spacing.heroPaddingBottom",
|
|
46
|
+
"paddingInline": "spacing.heroPaddingX"
|
|
47
|
+
},
|
|
48
|
+
"children": [
|
|
49
|
+
{
|
|
50
|
+
"id": "bd-headline",
|
|
51
|
+
"type": "text",
|
|
52
|
+
"class": "bd-headline",
|
|
53
|
+
"contentSlot": "content.headline",
|
|
54
|
+
"tokenBindings": {
|
|
55
|
+
"fontFamily": "typography.primaryFont",
|
|
56
|
+
"fontWeight": "typography.primaryFontWeight",
|
|
57
|
+
"fontSize": "typography.headline.referencePx",
|
|
58
|
+
"lineHeight": "typography.headline.lineHeightPx",
|
|
59
|
+
"color": "colors.text"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"id": "bd-subheadline",
|
|
64
|
+
"type": "text",
|
|
65
|
+
"class": "bd-subheadline",
|
|
66
|
+
"contentSlot": "content.subHeadline",
|
|
67
|
+
"tokenBindings": {
|
|
68
|
+
"fontFamily": "typography.secondaryFont",
|
|
69
|
+
"fontWeight": "typography.secondaryFontWeight",
|
|
70
|
+
"fontSize": "typography.subHeadline.referencePx",
|
|
71
|
+
"lineHeight": "typography.subHeadline.lineHeightPx",
|
|
72
|
+
"textTransform": "typography.subHeadline.textTransform",
|
|
73
|
+
"color": "colors.text"
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"id": "bd-header",
|
|
84
|
+
"type": "header",
|
|
85
|
+
"class": "bd-header",
|
|
86
|
+
"tokenBindings": {
|
|
87
|
+
"backgroundColor": "colors.primary",
|
|
88
|
+
"paddingInline": "spacing.headerPaddingX",
|
|
89
|
+
"paddingBlock": "spacing.headerPaddingY"
|
|
90
|
+
},
|
|
91
|
+
"children": [
|
|
92
|
+
{
|
|
93
|
+
"id": "bd-header-inner",
|
|
94
|
+
"type": "container",
|
|
95
|
+
"class": "bd-header-inner",
|
|
96
|
+
"children": [
|
|
97
|
+
{
|
|
98
|
+
"id": "bd-logo",
|
|
99
|
+
"type": "text",
|
|
100
|
+
"class": "bd-logo",
|
|
101
|
+
"contentSlot": "content.companyName",
|
|
102
|
+
"tokenBindings": {
|
|
103
|
+
"fontFamily": "typography.primaryFont",
|
|
104
|
+
"fontWeight": "typography.primaryFontWeight",
|
|
105
|
+
"fontSize": "typography.logo.referencePx",
|
|
106
|
+
"lineHeight": "typography.logo.lineHeightPx",
|
|
107
|
+
"color": "colors.text"
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"id": "bd-nav",
|
|
112
|
+
"type": "nav",
|
|
113
|
+
"class": "bd-nav",
|
|
114
|
+
"tokenBindings": {
|
|
115
|
+
"gap": "spacing.navGap",
|
|
116
|
+
"opacity": "opacity.navLinks"
|
|
117
|
+
},
|
|
118
|
+
"children": [
|
|
119
|
+
{
|
|
120
|
+
"id": "bd-nav-item",
|
|
121
|
+
"type": "link",
|
|
122
|
+
"class": "bd-nav-item",
|
|
123
|
+
"repeat": "content.navItems",
|
|
124
|
+
"contentSlot": "content.navItems[]",
|
|
125
|
+
"tokenBindings": {
|
|
126
|
+
"fontFamily": "typography.primaryFont",
|
|
127
|
+
"fontWeight": "typography.primaryFontWeight",
|
|
128
|
+
"fontSize": "typography.navItem.referencePx",
|
|
129
|
+
"lineHeight": "typography.navItem.lineHeightPx",
|
|
130
|
+
"color": "colors.text"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"id": "bd-cta",
|
|
137
|
+
"type": "button",
|
|
138
|
+
"class": "bd-cta",
|
|
139
|
+
"tokenBindings": {
|
|
140
|
+
"backgroundColor": "colors.ctaBackground",
|
|
141
|
+
"borderRadius": "spacing.ctaBorderRadius",
|
|
142
|
+
"paddingInline": "spacing.ctaPaddingX",
|
|
143
|
+
"paddingBlock": "spacing.ctaPaddingY"
|
|
144
|
+
},
|
|
145
|
+
"children": [
|
|
146
|
+
{
|
|
147
|
+
"id": "bd-cta-text",
|
|
148
|
+
"type": "text",
|
|
149
|
+
"class": "bd-cta-text",
|
|
150
|
+
"contentSlot": "content.ctaText",
|
|
151
|
+
"tokenBindings": {
|
|
152
|
+
"fontFamily": "typography.primaryFont",
|
|
153
|
+
"fontWeight": "typography.primaryFontWeight",
|
|
154
|
+
"fontSize": "typography.ctaButton.referencePx",
|
|
155
|
+
"lineHeight": "typography.ctaButton.lineHeightPx",
|
|
156
|
+
"color": "colors.ctaText"
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>BlueDither Theme</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link id="bd-font-primary-link" href="https://fonts.googleapis.com/css2?family={{typography.primaryFont.urlEncoded}}:wght@400;700&display=swap" rel="stylesheet">
|
|
10
|
+
<link id="bd-font-secondary-link" href="https://fonts.googleapis.com/css2?family={{typography.secondaryFont.urlEncoded}}:wght@400;700&display=swap" rel="stylesheet">
|
|
11
|
+
<style>
|
|
12
|
+
:root {
|
|
13
|
+
/* Colors */
|
|
14
|
+
--bd-color-background: {{colors.background}};
|
|
15
|
+
--bd-color-primary: {{colors.primary}};
|
|
16
|
+
--bd-color-text: {{colors.text}};
|
|
17
|
+
--bd-color-cta-bg: {{colors.ctaBackground}};
|
|
18
|
+
--bd-color-cta-text: {{colors.ctaText}};
|
|
19
|
+
|
|
20
|
+
/* Typography */
|
|
21
|
+
--bd-font-primary: "{{typography.primaryFont}}", system-ui, sans-serif;
|
|
22
|
+
--bd-font-primary-weight: {{typography.primaryFontWeight}};
|
|
23
|
+
--bd-font-secondary: "{{typography.secondaryFont}}", system-ui, sans-serif;
|
|
24
|
+
--bd-font-secondary-weight: {{typography.secondaryFontWeight}};
|
|
25
|
+
|
|
26
|
+
--bd-headline-size: {{clamp.headline.fontSize}};
|
|
27
|
+
--bd-headline-lh: {{clamp.headline.lineHeight}};
|
|
28
|
+
--bd-subheadline-size: {{clamp.subHeadline.fontSize}};
|
|
29
|
+
--bd-subheadline-lh: {{clamp.subHeadline.lineHeight}};
|
|
30
|
+
--bd-subheadline-transform: {{typography.subHeadline.textTransform}};
|
|
31
|
+
--bd-logo-size: {{clamp.logo.fontSize}};
|
|
32
|
+
--bd-logo-lh: {{clamp.logo.lineHeight}};
|
|
33
|
+
--bd-nav-size: {{clamp.navItem.fontSize}};
|
|
34
|
+
--bd-nav-lh: {{clamp.navItem.lineHeight}};
|
|
35
|
+
--bd-cta-size: {{clamp.ctaButton.fontSize}};
|
|
36
|
+
--bd-cta-lh: {{clamp.ctaButton.lineHeight}};
|
|
37
|
+
|
|
38
|
+
/* Spacing */
|
|
39
|
+
--bd-header-px: {{clamp.spacing.headerPaddingX}};
|
|
40
|
+
--bd-header-py: {{clamp.spacing.headerPaddingY}};
|
|
41
|
+
--bd-hero-pt: {{clamp.spacing.heroPaddingTop}};
|
|
42
|
+
--bd-hero-pb: {{clamp.spacing.heroPaddingBottom}};
|
|
43
|
+
--bd-hero-px: {{clamp.spacing.heroPaddingX}};
|
|
44
|
+
--bd-nav-gap: {{clamp.spacing.navGap}};
|
|
45
|
+
--bd-cta-px: {{clamp.spacing.ctaPaddingX}};
|
|
46
|
+
--bd-cta-py: {{clamp.spacing.ctaPaddingY}};
|
|
47
|
+
--bd-cta-radius: {{clamp.spacing.ctaBorderRadius}};
|
|
48
|
+
|
|
49
|
+
/* Opacity */
|
|
50
|
+
--bd-nav-opacity: {{opacity.navLinks}};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
54
|
+
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
|
|
55
|
+
|
|
56
|
+
.bd-root {
|
|
57
|
+
position: relative;
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
width: 100%;
|
|
61
|
+
min-height: 100vh;
|
|
62
|
+
background-color: var(--bd-color-background);
|
|
63
|
+
overflow: clip;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.bd-header {
|
|
67
|
+
position: relative;
|
|
68
|
+
z-index: 10;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
width: 100%;
|
|
74
|
+
padding-inline: var(--bd-header-px);
|
|
75
|
+
padding-block: var(--bd-header-py);
|
|
76
|
+
background-color: var(--bd-color-primary);
|
|
77
|
+
overflow: clip;
|
|
78
|
+
flex-shrink: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.bd-header-inner {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: space-between;
|
|
85
|
+
width: 100%;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.bd-logo {
|
|
89
|
+
font-family: var(--bd-font-primary);
|
|
90
|
+
font-weight: var(--bd-font-primary-weight);
|
|
91
|
+
font-size: var(--bd-logo-size);
|
|
92
|
+
line-height: var(--bd-logo-lh);
|
|
93
|
+
color: var(--bd-color-text);
|
|
94
|
+
white-space: pre;
|
|
95
|
+
flex-shrink: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.bd-nav {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: start;
|
|
101
|
+
gap: var(--bd-nav-gap);
|
|
102
|
+
opacity: var(--bd-nav-opacity);
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.bd-nav-item {
|
|
107
|
+
font-family: var(--bd-font-primary);
|
|
108
|
+
font-weight: var(--bd-font-primary-weight);
|
|
109
|
+
font-size: var(--bd-nav-size);
|
|
110
|
+
line-height: var(--bd-nav-lh);
|
|
111
|
+
color: var(--bd-color-text);
|
|
112
|
+
white-space: pre;
|
|
113
|
+
text-decoration: none;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.bd-cta {
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: start;
|
|
120
|
+
background-color: var(--bd-color-cta-bg);
|
|
121
|
+
border-radius: var(--bd-cta-radius);
|
|
122
|
+
padding-inline: var(--bd-cta-px);
|
|
123
|
+
padding-block: var(--bd-cta-py);
|
|
124
|
+
flex-shrink: 0;
|
|
125
|
+
cursor: pointer;
|
|
126
|
+
border: none;
|
|
127
|
+
text-decoration: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.bd-cta-text {
|
|
131
|
+
font-family: var(--bd-font-primary);
|
|
132
|
+
font-weight: var(--bd-font-primary-weight);
|
|
133
|
+
font-size: var(--bd-cta-size);
|
|
134
|
+
line-height: var(--bd-cta-lh);
|
|
135
|
+
color: var(--bd-color-cta-text);
|
|
136
|
+
white-space: pre;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.bd-hero {
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: 0;
|
|
142
|
+
left: 0;
|
|
143
|
+
width: 100%;
|
|
144
|
+
height: 100%;
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: end;
|
|
149
|
+
overflow: clip;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.bd-hero-inner {
|
|
153
|
+
position: relative;
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: end;
|
|
158
|
+
width: 100%;
|
|
159
|
+
height: 100%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.bd-shader-layer {
|
|
163
|
+
position: absolute;
|
|
164
|
+
top: 0;
|
|
165
|
+
left: 0;
|
|
166
|
+
width: 100%;
|
|
167
|
+
height: 100%;
|
|
168
|
+
rotate: {{shader.rotation}}deg;
|
|
169
|
+
transform-origin: 50% 50%;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.bd-hero-content {
|
|
173
|
+
position: relative;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: column;
|
|
176
|
+
align-items: start;
|
|
177
|
+
justify-content: end;
|
|
178
|
+
width: 100%;
|
|
179
|
+
height: 100%;
|
|
180
|
+
padding-top: var(--bd-hero-pt);
|
|
181
|
+
padding-bottom: var(--bd-hero-pb);
|
|
182
|
+
padding-left: var(--bd-hero-px);
|
|
183
|
+
padding-right: var(--bd-hero-px);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.bd-headline {
|
|
187
|
+
font-family: var(--bd-font-primary);
|
|
188
|
+
font-weight: var(--bd-font-primary-weight);
|
|
189
|
+
font-size: var(--bd-headline-size);
|
|
190
|
+
line-height: var(--bd-headline-lh);
|
|
191
|
+
color: var(--bd-color-text);
|
|
192
|
+
white-space: pre;
|
|
193
|
+
width: fit-content;
|
|
194
|
+
flex-shrink: 0;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.bd-subheadline {
|
|
198
|
+
font-family: var(--bd-font-secondary);
|
|
199
|
+
font-weight: var(--bd-font-secondary-weight);
|
|
200
|
+
font-size: var(--bd-subheadline-size);
|
|
201
|
+
line-height: var(--bd-subheadline-lh);
|
|
202
|
+
text-transform: var(--bd-subheadline-transform);
|
|
203
|
+
color: var(--bd-color-text);
|
|
204
|
+
width: fit-content;
|
|
205
|
+
flex-shrink: 0;
|
|
206
|
+
}
|
|
207
|
+
</style>
|
|
208
|
+
</head>
|
|
209
|
+
<body>
|
|
210
|
+
<div class="bd-root">
|
|
211
|
+
<div class="bd-hero">
|
|
212
|
+
<div class="bd-hero-inner">
|
|
213
|
+
<div class="bd-shader-layer" id="bd-shader-parent"></div>
|
|
214
|
+
<div class="bd-hero-content">
|
|
215
|
+
<div class="bd-headline">{{content.headline}}</div>
|
|
216
|
+
<div class="bd-subheadline">{{content.subHeadline}}</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
<header class="bd-header">
|
|
221
|
+
<div class="bd-header-inner">
|
|
222
|
+
<div class="bd-logo">{{content.companyName}}</div>
|
|
223
|
+
<nav class="bd-nav">
|
|
224
|
+
{{#each content.navItems}}
|
|
225
|
+
<a class="bd-nav-item" href="#">{{this}}</a>
|
|
226
|
+
{{/each}}
|
|
227
|
+
</nav>
|
|
228
|
+
<a class="bd-cta" href="#">
|
|
229
|
+
<span class="bd-cta-text">{{content.ctaText}}</span>
|
|
230
|
+
</a>
|
|
231
|
+
</div>
|
|
232
|
+
</header>
|
|
233
|
+
</div>
|
|
234
|
+
</body>
|
|
235
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "./tokens.schema.json",
|
|
3
|
+
"meta": {
|
|
4
|
+
"name": "BlueDither",
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"description": "A bold, dithered-shader hero theme with striking typography"
|
|
7
|
+
},
|
|
8
|
+
"layout": {
|
|
9
|
+
"designWidth": 1364
|
|
10
|
+
},
|
|
11
|
+
"colors": {
|
|
12
|
+
"background": "#040037",
|
|
13
|
+
"primary": "#3300FF",
|
|
14
|
+
"text": "#FFFFFF",
|
|
15
|
+
"ctaBackground": "#FFFFFF",
|
|
16
|
+
"ctaText": "#14161C",
|
|
17
|
+
"shaderFront": "#3300FF",
|
|
18
|
+
"shaderBack": "#00000000"
|
|
19
|
+
},
|
|
20
|
+
"typography": {
|
|
21
|
+
"primaryFont": "Bebas Neue Pro",
|
|
22
|
+
"primaryFontWeight": 700,
|
|
23
|
+
"secondaryFont": "Consolas",
|
|
24
|
+
"secondaryFontWeight": 400,
|
|
25
|
+
"headline": {
|
|
26
|
+
"referencePx": 137,
|
|
27
|
+
"lineHeightPx": 113
|
|
28
|
+
},
|
|
29
|
+
"subHeadline": {
|
|
30
|
+
"referencePx": 19,
|
|
31
|
+
"lineHeightPx": 63,
|
|
32
|
+
"textTransform": "uppercase"
|
|
33
|
+
},
|
|
34
|
+
"logo": {
|
|
35
|
+
"referencePx": 27,
|
|
36
|
+
"lineHeightPx": 34
|
|
37
|
+
},
|
|
38
|
+
"navItem": {
|
|
39
|
+
"referencePx": 22,
|
|
40
|
+
"lineHeightPx": 28
|
|
41
|
+
},
|
|
42
|
+
"ctaButton": {
|
|
43
|
+
"referencePx": 22,
|
|
44
|
+
"lineHeightPx": 28
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"spacing": {
|
|
48
|
+
"headerPaddingX": 23,
|
|
49
|
+
"headerPaddingY": 17,
|
|
50
|
+
"heroPaddingTop": 46,
|
|
51
|
+
"heroPaddingBottom": 22,
|
|
52
|
+
"heroPaddingX": 39,
|
|
53
|
+
"navGap": 41,
|
|
54
|
+
"ctaPaddingX": 18,
|
|
55
|
+
"ctaPaddingY": 8,
|
|
56
|
+
"ctaBorderRadius": 4
|
|
57
|
+
},
|
|
58
|
+
"shader": {
|
|
59
|
+
"speed": 0.41,
|
|
60
|
+
"shape": "warp",
|
|
61
|
+
"type": "2x2",
|
|
62
|
+
"size": 4.2,
|
|
63
|
+
"scale": 1,
|
|
64
|
+
"rotation": 180
|
|
65
|
+
},
|
|
66
|
+
"opacity": {
|
|
67
|
+
"navLinks": 0.87
|
|
68
|
+
},
|
|
69
|
+
"content": {
|
|
70
|
+
"companyName": "COMPANYLOGO",
|
|
71
|
+
"navItems": [
|
|
72
|
+
"HOME",
|
|
73
|
+
"FEATURES",
|
|
74
|
+
"FAQ",
|
|
75
|
+
"CONTACT"
|
|
76
|
+
],
|
|
77
|
+
"ctaText": "SIGN UP",
|
|
78
|
+
"headline": "AN ABSOLUTELY\nFANTASTIC HEADLINE.",
|
|
79
|
+
"subHeadline": "Here's a fantastic sub-headline that is sure to impressive your friends."
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "./tokens.schema.json",
|
|
3
|
+
"meta": {
|
|
4
|
+
"name": "BlueDither",
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"description": "A bold, dithered-shader hero theme with striking typography"
|
|
7
|
+
},
|
|
8
|
+
"layout": {
|
|
9
|
+
"designWidth": 1364
|
|
10
|
+
},
|
|
11
|
+
"colors": {
|
|
12
|
+
"background": "#040037",
|
|
13
|
+
"primary": "#ff006f",
|
|
14
|
+
"text": "#FFFFFF",
|
|
15
|
+
"ctaBackground": "#FFFFFF",
|
|
16
|
+
"ctaText": "#14161C",
|
|
17
|
+
"shaderFront": "#ffdd00",
|
|
18
|
+
"shaderBack": "#00000000"
|
|
19
|
+
},
|
|
20
|
+
"typography": {
|
|
21
|
+
"primaryFont": "Bebas Neue Pro",
|
|
22
|
+
"primaryFontWeight": 700,
|
|
23
|
+
"secondaryFont": "Consolas",
|
|
24
|
+
"secondaryFontWeight": 400,
|
|
25
|
+
"headline": {
|
|
26
|
+
"referencePx": 137,
|
|
27
|
+
"lineHeightPx": 113
|
|
28
|
+
},
|
|
29
|
+
"subHeadline": {
|
|
30
|
+
"referencePx": 19,
|
|
31
|
+
"lineHeightPx": 63,
|
|
32
|
+
"textTransform": "uppercase"
|
|
33
|
+
},
|
|
34
|
+
"logo": {
|
|
35
|
+
"referencePx": 27,
|
|
36
|
+
"lineHeightPx": 34
|
|
37
|
+
},
|
|
38
|
+
"navItem": {
|
|
39
|
+
"referencePx": 22,
|
|
40
|
+
"lineHeightPx": 28
|
|
41
|
+
},
|
|
42
|
+
"ctaButton": {
|
|
43
|
+
"referencePx": 22,
|
|
44
|
+
"lineHeightPx": 28
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"spacing": {
|
|
48
|
+
"headerPaddingX": 23,
|
|
49
|
+
"headerPaddingY": 17,
|
|
50
|
+
"heroPaddingTop": 46,
|
|
51
|
+
"heroPaddingBottom": 22,
|
|
52
|
+
"heroPaddingX": 39,
|
|
53
|
+
"navGap": 41,
|
|
54
|
+
"ctaPaddingX": 18,
|
|
55
|
+
"ctaPaddingY": 8,
|
|
56
|
+
"ctaBorderRadius": 4
|
|
57
|
+
},
|
|
58
|
+
"shader": {
|
|
59
|
+
"speed": 0.41,
|
|
60
|
+
"shape": "warp",
|
|
61
|
+
"type": "2x2",
|
|
62
|
+
"size": 4.2,
|
|
63
|
+
"scale": 1,
|
|
64
|
+
"rotation": 180
|
|
65
|
+
},
|
|
66
|
+
"opacity": {
|
|
67
|
+
"navLinks": 0.87
|
|
68
|
+
},
|
|
69
|
+
"content": {
|
|
70
|
+
"companyName": "COMPANYLOGO",
|
|
71
|
+
"navItems": [
|
|
72
|
+
"HOME",
|
|
73
|
+
"FEATURES",
|
|
74
|
+
"FAQ",
|
|
75
|
+
"CONTACT"
|
|
76
|
+
],
|
|
77
|
+
"ctaText": "SIGN UP",
|
|
78
|
+
"headline": "AN ABSOLUTELY\nFANTASTIC HEADLINE.",
|
|
79
|
+
"subHeadline": "Here's a fantastic sub-headline that is sure to impressive your friends."
|
|
80
|
+
}
|
|
81
|
+
}
|