Braiins | Bitcoin mining ecosystem

Design Specification — Braiins | Bitcoin mining ecosystem

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#8B7CFF). All type is set in Braiins Sans, sans-serif. Detected font weights: 400, 600, 700. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://cdn.prod.website-files.com/5e5ee6f9b325a6509259421f/62dac66ffd9292b27c8c39aa_Logo.svg · https://cdn.prod.website-files.com/5e5ee6f9b325a6509259421f/6671560fc9bbed349a56a257_braiinsOS-logo.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#000, #0000 21%)
• linear-gradient(to top, #000, #0000 20%), url("https://cdn.prod.website-files.com/5e5ee6f9b325a6509259421f/656da8e30f6eba5989d9d65e_hardware_hp_bg.jpg")
• linear-gradient(0deg, #000, #0000 20%), url("https://cdn.prod.website-files.com/5e5ee6f9b325a6509259421f/6698c86b25579c344050edb2_BraiinsOS-bg.png")
• linear-gradient(#0000 80%, #000)
• linear-gradient(#000, #0000 33%), url("https://cdn.prod.website-files.com/5e5ee6f9b325a6509259421f/5fba869e460b1504cda09051_Braiins-Story-Plasma-Design-export-merged-bg.jpg")
• linear-gradient(#57575700, #000 90%)
• linear-gradient(#000, #fff0 20%)
• linear-gradient(#000, #0000 76%)
• linear-gradient(#0000, #000)
• linear-gradient(90deg, #000, #0000 76%)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Braiins Sans — stack: Braiins Sans, sans-serif

Font stacks (most used first)

• Braiins Sans, sans-serif
• Braiins Sans
• swiper-icons
• monospace
• webflow-icons
• webflow-icons !important
• Arial, sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 1px 1px 12px #0000001a
• 0 13px 50px 3px #0000002b
• 0 2px 9px #00000040

Layout

Container max-width: 991px

Breakpoints

• 479px
• 767px
• 895px
• 991px
• 992px
• 1240px
• 1340px
• 1920px

Animation & Motion

Transitions

• all 0.4s cubic-bezier(0.625, 0.05, 0, 1)
• color .35s cubic-bezier(.215, .61, .355, 1), background-color .35s
• opacity .25s
• background-color .25s
• color .2s
• transform .35s cubic-bezier(.215, .61, .355, 1)
• opacity .2s
• color .45s cubic-bezier(.215, .61, .355, 1)
• background-color .2s
• opacity .3s
• opacity .45s
• .3s opacity

Easing curves

• cubic-bezier(0.625, 0.05, 0, 1)
• cubic-bezier(.215, .61, .355, 1)
• var(--swiper-wrapper-transition-timing-function,initial)

Keyframes

@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0deg)}100%{transform:rotate(360deg)} }

CTA labels found on page

• Deny
• Accept
• Contact Sales
• BITCOIN tools
• MINING BLOG
• Read the Blog
• Join the Pool
• OPTIMIZE MINERS

Effects

• backdrop-filter: blur(2rem)

Source Design Tokens (CSS custom properties)

:root {
  --list-bg-color: #393939;
  --list-text-color: #A8A8A8;
  --list-text-color-hover: inherit;
  --current-field-text-color: inherit;
  --select-field-arrow-color: #F4F4F4;
  --border-color-active: #F0F2FD;
  --border-color-hover: #F0F2FD;
  --list-item-bg-color: #525252;
  --list-padding-top-bottom: 0.8rem;
  --list-max-height: 30rem;
  --list-item-padding-left: 1.6rem;
  --list-item-padding-right: 1.6rem;
  --list-item-min-height: 4rem;
  --list-item-line-height: 4rem;
  --color--headings: var(--gray_100);
  --white: white;
  --black: black;
  --violet_50: #8b7cff;
  --green_10: #ddfbe9;
  --violet_60: #6b50ff;
  --gray_100: #161616;
  --gray_90: #262626;
  --gray_50: #8d8d8d;
  --grey20: #e0e0e0;
  --transparent: #fff0;
  --violet_70: #5432cd;
  --gray_40: #a8a8a8;
  --gray_20: #e0e0e0;
  --gray_80: #393939;
  --gray_10: #f4f4f4;
  --teal_30: #56d8e0;
  --gray_30: #c6c6c6;
  --gray_70: #525252;
  --gray_60: #6f6f6f;
  --dark-slate-grey-2: #393939;
  --green_40: #34c06a;
  --dark--headings: var(--gray_10);
  --violet_30: #c5c0ff;
  --violet_80: #39238f;
  --violet_20: #dfdcff;
  --green_80: #124223;
  --blue_90: #071d67;
  --color--background: var(--white);
  --color--elements_background: var(--gray_10);
  --color--text: var(--text-helper);
  --color--search_active-text: var(--gray_100);
  --color--search-line: var(--grey20);
  --dark--search-line: var(--gray_80);
  --white--white-15: #ffffff26;
  --color--moon-icon-offset: 0rem;
  --color--sun-icon-offset: -8rem;
  --color--article_paragraph: var(--gray_90);
  --color--tag_bg: var(--gray_20);
  --text-helper: #6f6f6f;
  --color--table_icon: var(--gray_40);
  --dark--table_icon: var(--gray_70);
  --violet_90: #281661;
  --red: #e45260;
  --color--search_active: var(--gray_10);
  --color--search_bg: var(--gray_20);
}

Do's and Don'ts

Do

• Do reserve the accent #8B7CFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #333333;
  --color-accent: #8B7CFF;
  --color-background: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #DDDDDD;
  --color-border: #393939;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F4F4;
  --color-surface-container: #EEEEEE;
  --color-surface-container-high: #E2E2E2;
  --color-surface-container-highest: #E0E0E0;
  --font-sans: Braiins Sans, sans-serif;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28.8px;
  --font-size-title-lg: 22.4px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12.2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --radius-pill: 100%;
  --shadow-sm: 0 2px 9px #00000040;
  --shadow-md: 0 13px 50px 3px #0000002b;
  --shadow-lg: 1px 1px 12px #0000001a;
  --space-xs: 3.2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-label: .05em;
  --container-max: 991px;
}