A minimal, classless CSS framework that conveys structure through typography and spacing alone.
fogtype.tngl.io/css/
Generalize :focus/:disabled styles across elements and dedupe margin-block rules
Kohei Watanabe
(Jul 14, 2026, 12:10 AM +0900)
075aa721
00056737
+61
-72
+56
-67
index.css
+56
-67
index.css
···
49
49
h1,
50
50
h2,
51
51
h3,
52
+
p,
53
+
hr,
54
+
pre,
55
+
blockquote,
56
+
ul,
57
+
ol,
58
+
dl,
59
+
figure,
60
+
table,
61
+
fieldset {
62
+
margin-block: var(--space-block-default);
63
+
}
64
+
h1,
65
+
h2,
66
+
h3,
52
67
h4,
53
68
h5,
54
69
h6 {
55
70
font-weight: normal;
56
71
}
72
+
h1,
73
+
h2 {
74
+
line-height: var(--leading-small);
75
+
}
57
76
h1 {
58
-
margin-block: var(--space-block-default);
59
77
font-size: var(--text-huge);
60
-
line-height: var(--leading-small);
61
78
}
62
79
h2 {
63
-
margin-block: var(--space-block-default);
64
80
font-size: var(--text-large);
65
-
line-height: var(--leading-small);
66
81
}
67
82
h3 {
68
-
margin-block: var(--space-block-default) var(--space-block-tiny);
83
+
margin-block-end: var(--space-block-tiny);
69
84
font-size: var(--text-default);
70
-
}
71
-
p {
72
-
margin-block: var(--space-block-default);
73
85
}
74
86
hr {
75
-
margin-block: var(--space-block-default);
76
87
border: none;
77
88
border-block-start: 1px solid var(--color-border);
78
89
}
79
90
pre {
80
91
padding-block: var(--space-block-small);
81
92
padding-inline: var(--space-inline-default);
82
-
margin-block: var(--space-block-default);
83
93
overflow-x: auto;
84
94
overflow-inline: auto;
85
95
background: var(--color-surface);
86
96
}
87
-
pre code {
88
-
padding: 0;
89
-
}
90
97
blockquote {
91
98
padding-inline-start: var(--space-inline-default);
92
-
margin-block: var(--space-block-default);
93
99
margin-inline: 0;
94
100
color: var(--color-text-secondary);
95
101
border-inline-start: 2px solid var(--color-border);
···
97
103
ul,
98
104
ol {
99
105
padding-inline-start: var(--space-inline-large);
100
-
margin-block: var(--space-block-default);
101
106
}
102
-
li {
103
-
margin-block: var(--space-block-tiny);
104
-
}
107
+
li,
105
108
li > ul,
106
109
li > ol {
107
110
margin-block: var(--space-block-tiny);
108
111
}
109
-
dl {
110
-
margin-block: var(--space-block-default);
111
-
}
112
112
dt {
113
113
font-weight: bold;
114
114
}
···
116
116
margin-inline-start: var(--space-inline-large);
117
117
}
118
118
figure {
119
-
margin-block: var(--space-block-default);
120
119
margin-inline: 0;
121
120
}
122
121
figcaption {
···
128
127
color: var(--color-primary);
129
128
text-decoration-color: color-mix(in oklch, currentcolor, white);
130
129
text-underline-offset: 0.15em;
131
-
}
132
-
a:hover {
133
-
color: var(--color-primary-dark);
130
+
131
+
&:hover {
132
+
color: var(--color-primary-dark);
133
+
}
134
134
}
135
135
em {
136
136
font-style: normal;
···
156
156
}
157
157
table {
158
158
inline-size: 100%;
159
-
margin-block: var(--space-block-default);
160
159
border-collapse: collapse;
161
160
}
162
161
th,
···
166
165
vertical-align: top;
167
166
text-align: start;
168
167
background: var(--color-surface);
169
-
border-bottom: 1px solid var(--color-border);
168
+
border-block-end: 1px solid var(--color-border);
170
169
}
171
170
thead th {
172
-
border-bottom: 2px solid var(--color-border);
171
+
border-block-end: 2px solid var(--color-border);
173
172
}
174
173
caption {
175
174
margin-block-end: var(--space-block-tiny);
···
200
199
resize: vertical;
201
200
resize: block;
202
201
}
203
-
input:focus,
204
-
textarea:focus,
205
-
select:focus {
202
+
:disabled {
203
+
color: var(--color-text-disabled);
204
+
cursor: not-allowed;
205
+
background: var(--color-background);
206
+
}
207
+
:focus {
206
208
outline: 2px solid var(--color-primary);
207
-
outline-offset: -2px;
208
209
border-color: var(--color-primary);
209
210
}
210
-
input::placeholder,
211
-
textarea::placeholder {
212
-
color: var(--color-text-disabled);
213
-
}
214
-
input:disabled,
215
-
textarea:disabled,
216
-
select:disabled {
211
+
::placeholder {
217
212
color: var(--color-text-disabled);
218
-
background: var(--color-background);
219
213
}
220
214
input[type="checkbox"],
221
-
input[type="radio"] {
215
+
input[type="radio"],
216
+
input[type="range"] {
222
217
inline-size: auto;
223
218
min-block-size: 0;
224
219
accent-color: var(--color-primary);
225
220
}
226
221
button,
227
-
[type="button"],
228
-
[type="submit"] {
222
+
input[type="button"],
223
+
input[type="submit"],
224
+
input[type="reset"] {
229
225
min-block-size: var(--space-block-default);
230
226
padding-block: var(--space-block-small);
231
227
padding-inline: var(--space-inline-default);
232
228
font: inherit;
233
229
font-weight: bold;
230
+
color: var(--color-primary);
234
231
cursor: pointer;
232
+
background: transparent;
233
+
border: 1px solid var(--color-border);
235
234
border-radius: var(--radius);
235
+
236
+
&:not(:disabled):hover {
237
+
background: var(--color-surface);
238
+
}
239
+
&:focus-visible {
240
+
outline: 2px solid var(--color-primary-dark);
241
+
outline-offset: 2px;
242
+
}
236
243
}
237
-
[type="submit"] {
244
+
button[type="submit"],
245
+
input[type="submit"] {
238
246
color: white;
239
247
background: var(--color-primary);
240
248
border: none;
241
-
}
242
-
[type="submit"]:not(:disabled):hover {
243
-
background: var(--color-primary-dark);
244
-
}
245
-
button,
246
-
[type="button"] {
247
-
color: var(--color-primary);
248
-
background: transparent;
249
-
border: 1px solid var(--color-border);
250
-
}
251
-
button:not(:disabled):hover,
252
-
[type="button"]:not(:disabled):hover {
253
-
background: var(--color-surface);
254
-
}
255
-
button:focus-visible {
256
-
outline: 2px solid var(--color-primary-dark);
257
-
outline-offset: 2px;
258
-
}
259
-
button:disabled {
260
-
color: var(--color-background);
261
-
cursor: not-allowed;
262
-
background: var(--color-text-disabled);
249
+
250
+
&:not(:disabled):hover {
251
+
background: var(--color-primary-dark);
252
+
}
263
253
}
264
254
fieldset {
265
255
padding-block: var(--space-block-small);
266
256
padding-inline: var(--space-inline-default);
267
-
margin-block: var(--space-block-default);
268
257
border: 1px solid var(--color-border);
269
258
border-radius: var(--radius);
270
259
}
+2
-2
preview.html
+2
-2
preview.html
···
272
272
The height meets the minimum touch-target size.
273
273
</p>
274
274
<p class="btn-row">
275
-
<button type="submit">Primary</button>
276
-
<button type="reset">Secondary</button>
275
+
<button type="submit">Submit</button>
276
+
<button type="reset">Reset</button>
277
277
<button type="button" disabled>Disabled</button>
278
278
</p>
279
279
+3
-3
preview.ja.html
+3
-3
preview.ja.html
···
269
269
高さはタッチターゲットの最小サイズ基準に適合。
270
270
</p>
271
271
<p class="btn-row">
272
-
<button type="submit">Primary</button>
273
-
<button type="reset">Secondary</button>
272
+
<button type="submit">送信</button>
273
+
<button type="reset">リセット</button>
274
274
<button type="button" disabled>Disabled</button>
275
275
</p>
276
276
···
309
309
</fieldset>
310
310
311
311
<p class="btn-row">
312
-
<button type="submit">送信する</button>
312
+
<button type="submit">送信</button>
313
313
<button type="reset">リセット</button>
314
314
</p>
315
315
</form>