css

Interface design system and DOM implements.

• Universal Design (variants included) based on digital government jp design system, CUDO: Color Universal Design Recommended Color Set ver.3, GOV.UK Design System, WCAG 2.2, ARIA APG, IEC60447:1993(Man-machine-interface Principle).
• Requires to html only semantic and also structural tags and minimum anonymous elements.
• Render correctly without JS.
• All CSS properties are described in order of dependencies, and then, alphabetical.

Version

Version	Status	Date	Description
0.1.0	Scheduled	2026-09-30	1st release

---

Dependency layers

• reset.css(@layer css.reset): 1st common layer per the-new-css-reset.
• base.css(@layer css.base): 2nd common layer defining defaults of all custom global/scoped parameters.
• data_style.css(@layer css.data_style): 3rd common layer defining data-style attribute.
• data_size.css(@layer css.data_size): 4th common layer defining data-size attribute.
• data_sign.css(@layer css.data_sign): 5th common layer defining data-sign and data-facet attributes.
• data_group.css(@layer css.data_group): 6th common layer defining data-group attribute.

---

Color

Defined in base.css (@layer css.base). Override the --color-* variables on any scope to restyle.

Category	Name	Meaning
channel	--rgb-accent-red	--color-error default.
	--rgb-accent-yellow	--color-higlight default.
	--rgb-accent-green	--color-success default.
	--rgb-accent-purple	a:visited default.
pallete	--color-black	The closest to pure black in the scheme.
	--color-white	The closest to pure white in the scheme.
global parameter	--color-ink	Default text color in the scheme.
	--color-paper	Default background color in the scheme.
	--color-mute	Default mute color to contrast with paper.
	--color-error	:user-invalid default.
	--color-highlight	::selection background default.
	--color-success	boolean true default.
	--color-emphasis	Emphasis text color.
	--color-emphasis-fill	Emphasis background color.
	--color-emphasis-fill-active
	--color-paper-active
scoped parameter	--color-text
	--color-fill	background-color in the scope.
	--color-border	border-color in the scope.
	--color-focus	outline-color in the scope.

Size

Every component below reuses these same column names — a component either consumes a value as-is or overrides it locally.

/* base.css */
@layer css.base {
    :root {
        /* ... */
        --md-border-radius:  0.5rem;
        --md-border-width:   0.125rem;
        --md-box-height:     3rem;
        --md-font-size:      1rem;
        --md-letter-spacing: 0;
        --md-line-height:    1.5rem;
        /* ... */
    }
}

/* each component's own layer, e.g. @layer css.button */
@layer css.button {
    :is(button, input, select, textarea):not([data-size]),
    [data-size="md"] {
        border-radius:  var(--md-border-radius);
        border-width:   var(--md-border-width);
        font-size:      var(--md-font-size);
        letter-spacing: var(--md-letter-spacing);
        line-height:    var(--md-line-height);
        padding-block: calc(((var(--md-box-height) - var(--md-line-height)) / 2) - var(--md-border-width));
    }
}

data-size	box-height	Typography
xs	1.75rem	small
sm	2.5rem	small
md(default)	3rem	medium
lg	3.5rem	large
xl	4rem	heading 2
2xl	4.75rem	heading 1

Typography	font-size	letter-spacing	line-height
small	0.85rem	0.02rem	1.5rem
medium	1rem	0	1.5rem
large	1.15rem	0	1.725rem
heading 2	1.5rem	0	2.25rem
heading 1	2rem	0	3rem

• data-size fallback: omitting data-size defaults to md everywhere. Only heading (h1–h6, or via a wrapping hgroup) defaults by element: h1→2xl, h2→xl, h3→lg, h4/h5/h6→md.
• padding-block, wherever a component consumes a box-height, is derived as calc((var(--{size}-box-height) - var(--{size}-line-height)) / 2) — this centers the line box inside the scale's box-height regardless of component. How box-height itself is applied differs by component's native sizing behavior:
  • button: min-height (grows with content)
  • input(text, number), select, toggle: height (fixed)
  • checkbox, radio: label is box-height, input is line-height.
  • textarea: height: auto; resize: vertical(grows with content). box-height is only ever read to derive padding-block
  • disclosure(summary): height: auto(grows with content). Same rule as textarea.
  • heading: padding-block: 0
• padding-inline, component has of its own (an icon, a stepper button, a dropdown arrow) is a component-local decision, so hardcoded in rem, not unified across components.
• width is left unset (auto / content-driven) everywhere. Nothing hardcodes a fixed width or 100%; give an element a width via the surrounding markup (a wrapping style/class) when one is needed.

data-style

Appearance of a box or of text. Applied by button.css and part.css.

Selector	Value	Description
button, a, details > summary	fill	filled with --color-emphasis-fill, transparent border (default for button)
	outline	transparent background, --color-emphasis border and text
	underline	no box, underlined --color-emphasis text (default for a bare a:any-link and a bare summary)
any element	rule-indent	indented block with an accent rule down the inline start edge

data-type

Kind, rather than appearance. Values are component-local.

Selector	Value	Description
section	error-summary	error summary block (error.css)
p	error	per-field error message (error.css)
label (toggle)	knob-only	non-interactive toggle showing state only (toggle.css)

data-axis

Direction in which a component lays its parts out. Each value below is opt-in; omitting the attribute keeps the component's own default arrangement.

Selector	Value	Applied by
hgroup	inline	heading.css
details	inline	button.css
label (toggle, slider, step)	block	toggle.css, slider.css, step.css

Component-local attributes

Selector	Attribute	Description
table	data-border, data-stripe, data-hover, data-selectable	boolean; rules, zebra striping, row hover, row selection (table.css)
label > input[type="range"]	data-text-min, data-text-max	labels for the limits of the range (slider.css)
button (step)	data-action	increment / decrement (step.css)

Preference

Preference
prefers-color-scheme: dark