Native OS styles exposed in the Browser via CSS

native-styles.css

/* SYSTEM FONTS */

.body { font: -apple-system-body; }
.headline { font: -apple-system-headline; }
.subheadline { font: -apple-system-subheadline; }
.caption1 { font: -apple-system-caption1; }
.caption2 { font: -apple-system-caption2; }
.footnote { font: -apple-system-footnote; }
.short-body { font: -apple-system-short-body; }
.short-headline { font: -apple-system-short-headline; }
.short-subheadline { font: -apple-system-short-subheadline; }
.short-caption1 { font: -apple-system-short-caption1; }
.short-footnote { font: -apple-system-short-footnote; }
.tall-body { font: -apple-system-tall-body; }


/* SYSTEM COLORS https://blog.jim-nielsen.com/2021/css-system-colors/ */

.colors {
	color: AccentColor; /* Background of accented user interface controls */
	color: AccentColorText; /* Text of accented user interface controls */
	color: ActiveText; /* Text of active links */
	color: ButtonBorder; /* Base border color of controls */
	color: ButtonFace; /* Background color of controls */
	color: ButtonText; /* Text color of controls */
	color: Canvas; /* Background of application content or documents */
	color: CanvasText; /* Text color in application content or documents */
	color: Field; /* Background of input fields */
	color: FieldText; /* Text in input fields */
	color: GrayText; /* Text color for disabled items (e.g. a disabled control) */
	color: Highlight; /* Background of selected items */
	color: HighlightText; /* Text color of selected items */
	color: LinkText; /* Text of non-active, non-visited links */
	color: Mark; /* Background of text that has been specially marked (such as by the HTML mark element) */
	color: MarkText; /* Text that has been specially marked (such as by the HTML mark element) */
	color: VisitedText; /* Text of visited links */
}