招牌配方
ON-indicator dot
The single permitted moment of color — a 6px Braun-green disc used beside active items (nav, selected tab, live status, focused field). Never more than one per visual group.
.rams-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 9999px;
background: #4CAF50;
/* optional subtle glow, engineered not decorative */
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.18);
vertical-align: middle;
}
.rams-nav-item[aria-current="page"]::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 10px;
border-radius: 9999px;
background: #4CAF50;
}
Perforated speaker-grille background
A quiet homage to the SK4 speaker grille: a dot-grid pattern rendered with a single radial gradient, used as a subtle texture on gray ground panels. Almost invisible — which is the intent.
.rams-grille {
background-color: #E8E5E0;
background-image: radial-gradient(
circle,
rgba(51, 51, 51, 0.14) 1px,
transparent 1.5px
);
background-size: 8px 8px;
background-position: 0 0;
}
Hairline panel on warm gray
The Braun card: pure-white panel, 1px hairline border, nearly-invisible shadow. The border does the work of separation; the shadow only hints that the panel is a physical object resting on the gray ground.
.rams-panel {
background: #FFFFFF;
border: 1px solid #ECEAE6;
border-radius: 8px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition:
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rams-panel:hover {
border-color: #D8D6D2;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}