css

Interface design system and DOM implements.

• Universal Design (variants included) based on digital government jp design system, 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	Released	2026-09-28	1st release
0.1.4	Released	2026-10-05	simplify scroll style
0.1.5	Released	2026-10-22	light-dark() scheme, size variants
0.1.6	Current	2026-10-26	data-inline-align, init.js

---

Browser support

Rendering requires Baseline 2024 features: @layer, :has(), light-dark(), color-mix(), popover and :user-invalid.

Browser	Minimum
Chrome, Edge	123
Firefox	125
Safari	17.5

field-sizing, text-wrap: pretty and :open are progressive enhancements and fall back without layout breakage.

---

Dependency layers

import.css declares the @layer order and imports every file below in that order. Link it alone, or link the files individually and declare the @layer order yourself.

• reset.css(@layer css.reset): 1st common layer to unset all.
• base.css(@layer css.base): 2nd common layer defining defaults of all custom 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

Color custom properties are defined in base.css. Color custom styles are defined in data_style.css. Override the --color-* properties on any scope to restyle.

Category	Name	Meaning
channel	--rgb-accent-red	Default channel for --color-error.
	--rgb-accent-yellow	Default color for --color-highlight-paper.
	--rgb-accent-green	Default background for --color-success.
	--rgb-accent-purple	Default channel for --color-emphasis-* and --color-visited.
global parameter	--color-ink	Default text color in the scheme.
	--color-paper	Default background color in the scheme.
	--color-ink-mix	Default mixed to contrast with paper.
	--color-paper-mix	Default mixed color to contrast with ink.
	--color-error	Default color for :user-invalid.
	--color-highlight-ink	Default for ::selection to contrast with paper.
	--color-highlight-paper	Default for ::selection to contrast with ink.
	--color-success	Default color for success/true states to contrast with paper.
	--color-visited	Default a:visited color to contrast with paper.
	--color-emphasis-ink	Emphasis color to contrast with paper.
	--color-emphasis-ink-mix	Emphasis mixed to contrast with paper.
	--color-emphasis-paper	Emphasis color contrast with ink.
scoped parameter	color	Text color in the scope.
	background-color	Fill color in the scope.
	border-color	Border color in the scope.
	outline-color	Focus color in the scope.

Scoped colors:

┌ (backdrop) ────────┐
│  ┏ border ━━━━━━━┓ │
│  ┃  fill         ┃ │
│  ┃ ┌(highlight)┐ ┃ │
│  ┃ │  -text-   │ ┃ │
│  ┃ └───────────┘ ┃ │
│  ┃               ┃ │
│  ┗━━━━━━━━━━━━━━━┛ │
└────────────────────┘

• :focus outline's requirements is equal to border and it is not nessesary to differ with border.
• :hover does not have any color difference in basic styles.
• Empty cells mean as above.

Style	text	highlight	fill	border	backdrop
-	color-ink	-	color-paper(-mix)	color-ink	color-paper
	color-ink	-	color-emphasis-paper	-
::selection	color-paper	color-highlight-ink	color-paper(-mix)
data-surround="transparent"	color-ink	-	transparent	-
data-surround="input"	color-ink	-	color-paper	color-ink-mix
input::selection	color-paper	color-highlight-ink
input:disabled	color-ink-mix	-
input:disabled::selection	color-paper	color-highlight-ink
input:user-invalid	color-ink	-		color-error
input:user-invalid::selection	color-paper	color-highlight-ink
data-surround="fill"	color-paper	-	color-emphasis-ink	transparent
fill::selection	color-ink	color-highlight-paper	color-emphasis-ink
fill:disabled	color-paper	-	color-ink-mix
fill:disabled::selection	color-ink	color-highlight-paper	color-ink-mix
fill:active	color-paper	-	color-emphasis-ink-mix
fill:active::selection	color-ink	color-highlight-paper	color-emphasis-ink-mix
data-surround="outline"	color-emphasis-ink	-	color-paper	color-emphasis-ink
outline::selection	color-emphasis-paper	color-highlight-ink
outline:disabled	color-ink-mix	-		color-ink-mix
outline:disabled::selection	color-paper	color-highlight-ink
outline:active	color-emphasis-ink	-	color-paper-mix	color-emphasis-ink-mix
outline:active::selection	color-emphasis-paper	color-highlight-ink
data-style="underline"	color-{emphasis}-ink	-	color-paper	-
underline::selection	color-paper	color-highlight-ink
underline:disabled	color-ink-mix	-
underline:disabled::selection	color-paper	color-highlight-ink
underline:active	color-emphasis-ink-mix	-
underline:active::selection	color-paper	color-highlight-ink

Contrast requirements

Requirements come from layer adjacency (text↔highlight↔fill, fill↔border↔backdrop) in the style table above.

Layers alternate polarity outward from the backdrop — -paper → -ink → -paper → … — so each layer contrasts with the one enclosing it. All 27 rows of the style table satisfy this.

Each row below holds per light or dark scheme. Emphasis colors are the injection point for a brand or per-scope users' color. The library default is the CUD accent purple. color-success is a non-text fill: it carries no text and borders only color-paper or color-ink, never other non-text colors.

Property	7:1 text (AAA 1.4.6)	4.5:1 text (AA 1.4.3)	3:1 non-text (AA 1.4.11)
color-ink	color(-emphasis)-paper	color(-emphasis)-paper(-mix)	—
color-ink-mix	—	color-paper	color-paper, color-paper-mix
color-paper	—	color-ink-mix	emphasis-paper, color-error, color-success
color-paper-mix	emphasis-ink-mix	—	color-ink-mix
color-emphasis-ink	paper	—	—
color-emphasis-ink-mix	paper	—	—
color-emphasis-paper	—	—	paper
color-highlight-ink	—	color-paper	color-paper, color-paper-mix
color-highlight-paper	—	color-ink	color-emphasis-ink, color-emphasis-ink-mix
color-error	—	—	paper
color-success	—	—	paper
color-visited	paper	—	—

Size

• Default width is left unset (auto / content-driven) everywhere.
• Default margin width is 0.
• Padding-block is derived from --{size}-box-height and --{size}-line-height and only when border is not none, --{size}-border-width.

Scoped parameter	Meaning
--{xs/sm/md/lg/xl/2xl}-border-radius	Border radius for the scope.
--{xs/sm/md/lg/xl/2xl}-border-width	Border width for the scope.
--{xs/sm/md/lg/xl/2xl}-box-height	Block height (border top to bottom) when with 1 line content.
--{xs/sm/md/lg/xl/2xl}-font-size	Font size for the scope.
--{xs/sm/md/lg/xl/2xl}-letter-spacing	Letter spacing for the scope.
--{xs/sm/md/lg/xl/2xl}-line-height	Line height for the scope.

data-size	heading	box-height	font-size	letter-spacing	line-height
xs	-	1.75rem	0.85rem	0.02rem	1.5rem
sm	-
md(default)	h4~h6	3rem	1rem	0	1.5rem
lg	h3	3.5rem	1.15rem	0	1.725rem
xl	h2	4rem	1.5rem	0	2.25rem
2xl	h1	4.75rem	2rem	0	3rem

Other custom attributes

data-axis

Direction in which a component lays its parts out. Both block and inline are accepted on every component below; omitting the attribute is the same as writing the default.

Selector	Default	Applied by
hgroup	block	heading.css
fieldset	block	radio.css
label	inline	toggle.css

data-group

Joins adjacent controls into one row: whitespace between children is removed, shared corners are squared off, and inner borders are drawn in --color-ink-mix.

Selector	Value	Applied by
*	inline	data_group.css
fieldset (with label > input[type="radio"])	inline	radio.css, data_style.css, data_size.css

search, form[role="search"] and label:has(input[type="password"]) without data-group are joined the same way.

data-step

Layout for the pair of controls a spinbutton or a sortable table header carries. Applied to the span wrapping the pair, not the label/th itself.

Selector	Value	Applied by
span	block	step.css

Tag unique attributes

Selector	Attribute	Description
table	data-border	sectioned (default) / grid / booktabs; rule style (table.css)
table	data-stripe, data-selectable	boolean; zebra striping, row selection (table.css)