--- version: alpha name: Ronin description: "Light monochrome interface measured from ronin.pk: Inter type, tonal surfaces and pill-shaped controls." colors: background: "#F0F0F0" surface: "#F0F0F0" on-surface: "#464646" on-background: "#464646" on-surface-variant: "#8896AB" surface-container-low: "#F3F2F2" surface-container: "#FFFFFF" surface-container-high: "#D9D9D9" surface-container-highest: "#D6D6D6" overlay: "#FFFFFF99" overlay-strong: "#0D0D0D26" outline: "#0000000F" outline-variant: "#CFCFCF" primary: "#464646" on-primary: "#FFFFFF" inverse-surface: "#000000" error: "#E01D25" typography: headline-display: fontFamily: Inter fontSize: 25px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em headline-lg: fontFamily: Inter fontSize: 19px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.6 body-lg: fontFamily: Inter fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em body-sm: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.2 caption: fontFamily: Inter fontSize: 11px fontWeight: 300 lineHeight: 1.4 label-lg: fontFamily: Inter fontSize: 15.5px fontWeight: 700 lineHeight: 1.4 label-md: fontFamily: Inter fontSize: 14px fontWeight: 700 lineHeight: 1.4 label-sm: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.6 headline-lg-mobile: fontFamily: Inter fontSize: 16px fontWeight: 700 lineHeight: 1.4 headline-display-mobile: fontFamily: Inter fontSize: 21px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: xs: 9.6px sm: 11px md: 15px lg: 25px xl: 50px full: 9999px spacing: xs: 3.6px sm: 8px md: 12px lg: 18px gutter: 10px components: button-outline: backgroundColor: "{colors.overlay}" textColor: "{colors.inverse-surface}" padding: 1px 6px height: 50px button-ghost: backgroundColor: "{colors.surface-container-low}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 12px 28px height: 38px input-field: textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: 0px padding: 16px 28px card: backgroundColor: "{colors.background}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: 0px padding: 0px link: textColor: "#FFFFFFF2" --- # Ronin Design System ## Overview Ronin describes itself as: “Discover RONiN smart wearables and tech accessories, from earbuds to smartwatches, built for performance, style, and everyday use.” The interface is light, built on **Mist (#F0F0F0)** with **Graphite (#464646)** text and almost no color: actions are carried by contrast, not hue. Type is set in **Inter**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped. Measured from [ronin.pk](https://ronin.pk/) on November 5, 2026 at 1440×900 and 390×844 from 429 rendered elements. Values are computed styles from the live page, not the original source files. ## Colors The palette has 15 roles, plus gradient stops #03B1E6, #0354CD, #5A5A72, #3015A4. - **Mist (#F0F0F0):** Page background, seen 1 time. Token `background`, CSS `--color-primary-button-hover-border`. - **Graphite (#464646):** Primary text and headings, seen 57 times. Token `on-surface`, CSS `--color-primary-hover`. - **Blue (#8896AB):** Secondary text, seen 12 times. Token `on-surface-variant`. - **Mist (#F3F2F2):** Raised areas one step from the page, seen 4 times. Token `surface-container-low`. - **White (#FFFFFF):** Cards and panels, seen 8 times. Token `surface-container`, CSS `--color-white`. - **Silver (#D9D9D9):** Hover and pressed fills, seen 11 times. Token `surface-container-high`. - **Silver (#D6D6D6):** Highest raised elements, seen 7 times. Token `surface-container-highest`. - **White 60% (#FFFFFF99):** Translucent fill for cards and controls, seen 4 times. Token `overlay`. - **Charcoal 15% (#0D0D0D26):** Stronger translucent fill, seen 1 time. Token `overlay-strong`. - **Near Black 6% (#0000000F):** Borders and dividers, seen 7 times. Token `outline`. - **Silver (#CFCFCF):** Secondary dividers, seen 6 times. Token `outline-variant`. - **Graphite (#464646):** Primary actions (the main text color; the palette is monochrome), seen 57 times. Token `primary`, CSS `--color-primary-hover`. - **White (#FFFFFF):** Text and icons on primary. Token `on-primary`. - **Near Black (#000000):** High-contrast fills, seen 4 times. Token `inverse-surface`, CSS `--color-variant-hover-text`. - **Red (#E01D25):** Errors and destructive states, seen 2 times. Token `error`. ## Typography **Inter** carries the whole interface. Fallback stack: `Inter, sans-serif`. Other loaded fonts: Gloriant. - **headline-display:** Inter 25px at weight 700, line height 1.2, tracking 0.03em, uppercase (21px on mobile). Page title (h1). - **headline-lg:** Inter 19px at weight 700, line height 1.4 (16px on mobile). Section headings (h2). - **body-md:** Inter 14px at weight 400, line height 1.6. Body text. - **body-lg:** Inter 18px at weight 500, line height 1.4, tracking 0.03em. Lead paragraphs. - **body-sm:** Inter 12px at weight 400, line height 1.2. Secondary and small text. - **caption:** Inter 11px at weight 300, line height 1.4. Captions and fine print. - **label-lg:** Inter 15.5px at weight 700, line height 1.4, uppercase. Large buttons and tabs. - **label-md:** Inter 14px at weight 700, line height 1.4. Buttons, navigation and labels. - **label-sm:** Inter 12px at weight 500, line height 1.6. Small labels and badges. ## Layout Spacing does not follow a strict grid: 29% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid. - **Scale:** xs 3.6px, sm 8px, md 12px, lg 18px. - **Gaps:** 10px is the most common gap in flex and grid layouts. - **Breakpoints:** 749px, 750px, 768px, 990px, 1024px, 1025px, 1200px, 1201px, 1400px, 1550px, 1551px. ## Elevation & Depth Raised elements use soft drop shadows. The most used recipes: - `rgba(0, 0, 0, 0.07) 4.12701px 4.58556px 30.0813px 0px` Hairline rings and inset highlights also appear: `rgb(0, 0, 0) 0px 0px 0px 1px inset`. ## Shapes Interactive controls are pill-shaped. Measured radii, most used first: - **sm (11px):** 48 elements. - **full (9999px):** 44 elements. - **xs (9.6px):** 28 elements. - **md (15px):** 22 elements. - **lg (25px):** 16 elements. - **xl (50px):** 12 elements. ## Components Measured from the rendered page. Token values reference the tokens above. - **button-outline (“Previous”):** #FFFFFF99 fill, #000000 text, 13.3333px/400, 50% radius, padding 1px 6px. - **button-ghost (“View All”):** #F3F2F2 fill, #464646 text, 14px/400, 25px radius, padding 12px 28px, shadow `rgba(0, 0, 0, 0.07) 4.12701px 4.58556px 30.0813px 0px`. - **input-field (“Email address”):** transparent fill, #FFFFFF text, 14px/400, padding 16px 28px. - **card:** #F0F0F0 fill, #464646 text, 14px/400, padding 0px. - **link:** transparent fill, #FFFFFFF2 text, padding 0px. ## Do's and Don'ts - Do use #F0F0F0 for the page and lift surfaces in small steps: #F3F2F2, #FFFFFF, #D9D9D9, #D6D6D6. - Do keep text in 2 levels: #464646, #8896AB. - Do let contrast carry emphasis; primary actions use #464646 on #F0F0F0. - Do reuse the measured spacing steps (8px, 12px, 18px). - Do make buttons and chips fully rounded (9999px); most other elements use 11px corners. - Don't use #8896AB for body text; it reaches 2.63:1 on #F0F0F0. Keep it for large text or metadata. - Don't introduce new font families beyond Inter. - Don't add saturated accent colors; the measured palette is almost entirely neutral. - Don't make interface transitions slower than 0.3s. ## Motion Interface transitions are quick: 0.125s, 0.25s, 0.3s. - **Easing:** `ease-in-out`, `ease-out`, `ease`. - **Reduced motion:** the page responds to `prefers-reduced-motion`. Generated by [Sitepeel](https://sitepeel.dev/design-md/ronin.pk/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).