[Design systems](/design-systems/) / Machinify # Machinify design system machinify.com Read from Machinify's public website by Clinical Terminal. Not reviewed by Machinify. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Machinify homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100065.jpg?alt=media) ## Palette - Ground \#F9F9F9 \--color-offwhite - Ink \#171717 - Accent on the ground \#008352 - Primary \#4ECF99 \--color-green-200 - On primary \#171717 \--color-grey-900 - Dark \#171717 \--color-grey-900 - Site background \#F9F9F9 \--color-offwhite ## Color ramps Color Green 50 \#EDFEF5 100 \#AEFCD5 200 \#4ECF99 300 \#44B686 400 \#399C73 500 \#2C7E5B 600 \#206246 700 \#154531 800 \#0B2F20 900 \#041B11 Color Seafoam 50 \#F6FAF2 100 \#E5F6D3 200 \#CFE9BC 300 \#BFD0AD 400 \#94A286 500 \#7F8A73 600 \#6A735F 700 \#404539 800 \#2A2E26 900 \#141712 Color Teal 50 \#F5FBFD 100 \#D4F1F7 200 \#88D1DE 300 \#6FACB7 400 \#5F949D 500 \#4B777E 600 \#395C62 700 \#274146 800 \#1F3539 900 \#0C191B Color Blue 50 \#F9FAFC 100 \#E6ECF1 200 \#BFD1DD 300 \#8DA6B6 400 \#798E9C 500 \#61727D 600 \#4B5961 700 \#343E45 800 \#222A2F 900 \#12171B Color Grey 50 \#F8F8F8 100 \#EEEEEE 200 \#C5C5C5 300 \#A2A2A2 400 \#8B8B8B 500 \#707070 600 \#575757 700 \#3D3D3D 800 \#292929 900 \#171717 ## Other named colors - \--color-green #4ECF99 - \--color-seafoam #CFE9BC - \--color-teal #1F3539 - \--color-blue #BFD1DD - \--color-grey #575757 - \--color-black #171717 - \--color-white #FFFFFF - \--color-offwhite #F9F9F9 - \--color-divider #1E1E1E ## Type Headings Archivo · closest free match for GeneralGrotesque Machinify at a glance Body Archivo · closest free match for GeneralGrotesque Clear, readable paragraphs for clinicians, buyers and patients alike. - 6.25rem · 100pxMachinify - 1.25rem · 20pxMachinify - 1.125rem · 18pxMachinify - 1rem · 16pxMachinify - .875rem · 14pxMachinify - .75rem · 12pxMachinify ## Shape & depth Cards and panels: 0px corners · buttons and chips: 4px. ### Corner radii - 50% used in 2 rules - 1.5rem used in 1 rule - 2px used in 1 rule - 1px used in 1 rule ### Shadows - none !important used in 1 rule ### Gradients - linear-gradient(currentcolor 0 0) used in 4 rules ## Voice Tone: professional. Energy: low. Written for businesses. ## DESIGN.md The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100065.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Machinify" domain: "machinify.com" colors: primary: "#4ECF99" onPrimary: "#171717" dark: "#171717" background: "#F9F9F9" ground: mode: light hex: "#F9F9F9" ink: "#171717" accent: "#008352" fonts: heading: "Archivo" body: "Archivo" radius: card: "0px" button: "4px" --- # Design System — Machinify > Read from Machinify's public website (machinify.com) by Clinical Terminal. Not reviewed by Machinify. > Use it as inspiration: borrow the ideas, not Machinify's name, logo or identity. ## Ground - **Light ground** (#F9F9F9), from Machinify's site background #F9F9F9. Pages and panels sit on it. - Main text: #171717 (17.03:1 on the ground). - Secondary text is #171717 at 88% / 76% / 60%; hairlines and plate borders #171717 at 16%. ## Color - **Accent on the ground: #008352** (4.57:1), adjusted from Machinify's primary #4ECF99 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #4ECF99** for filled shapes (buttons, chips, bars), with #171717 text on it (9.14:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Machinify's site uses GeneralGrotesque / GeneralGrotesque; these are the closest free look-alikes. ## Shape - Cards and panels: 0px corners. Buttons and chips: 4px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Color Green** (`--color-green-N`): 50 `#EDFEF5` · 100 `#AEFCD5` · 200 `#4ECF99` · 300 `#44B686` · 400 `#399C73` · 500 `#2C7E5B` · 600 `#206246` · 700 `#154531` · 800 `#0B2F20` · 900 `#041B11` - **Color Seafoam** (`--color-seafoam-N`): 50 `#F6FAF2` · 100 `#E5F6D3` · 200 `#CFE9BC` · 300 `#BFD0AD` · 400 `#94A286` · 500 `#7F8A73` · 600 `#6A735F` · 700 `#404539` · 800 `#2A2E26` · 900 `#141712` - **Color Teal** (`--color-teal-N`): 50 `#F5FBFD` · 100 `#D4F1F7` · 200 `#88D1DE` · 300 `#6FACB7` · 400 `#5F949D` · 500 `#4B777E` · 600 `#395C62` · 700 `#274146` · 800 `#1F3539` · 900 `#0C191B` - **Color Blue** (`--color-blue-N`): 50 `#F9FAFC` · 100 `#E6ECF1` · 200 `#BFD1DD` · 300 `#8DA6B6` · 400 `#798E9C` · 500 `#61727D` · 600 `#4B5961` · 700 `#343E45` · 800 `#222A2F` · 900 `#12171B` - **Color Grey** (`--color-grey-N`): 50 `#F8F8F8` · 100 `#EEEEEE` · 200 `#C5C5C5` · 300 `#A2A2A2` · 400 `#8B8B8B` · 500 `#707070` · 600 `#575757` · 700 `#3D3D3D` · 800 `#292929` · 900 `#171717` ### Other named colors - `--color-green`: `#4ECF99` - `--color-seafoam`: `#CFE9BC` - `--color-teal`: `#1F3539` - `--color-blue`: `#BFD1DD` - `--color-grey`: `#575757` - `--color-black`: `#171717` - `--color-white`: `#FFFFFF` - `--color-offwhite`: `#F9F9F9` - `--color-divider`: `#1E1E1E` ### Typefaces - GeneralGrotesque (`--ff-sans`) - PxGrotesk (`--ff-sans-secondary`) - FabricSerif (`--ff-serif`) ### Type scale (most-used sizes) `6.25rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.75rem` ### Letter-spacing `-0.06em` (1) ### Corner radii (most-used) `50%` · `1.5rem` · `2px` · `1px` ### Shadows - `none !important` ### Gradients - `linear-gradient(currentcolor 0 0)` ```