[Design systems](/design-systems/) / OM1, Inc. # OM1, Inc. design system om1.com Read from OM1, Inc.'s public website by Clinical Terminal. Not reviewed by OM1, Inc.. Copy it and paste it into Claude as inspiration. Corrections or removal: ![OM1, Inc. homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923807.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-white - Ink \#002237 - Accent on the ground \#062EB7 - Primary \#062EB7 - On primary \#FAFAFA \--primary-foreground - Secondary accent \#4169E1 - Dark \#002237 \--color-dark - Site background \#FFFFFF \--color-white ## Color ramps Chart 1 \#F05100 2 \#009588 3 \#104E64 4 \#FCBB00 5 \#F99C00 ## Other named colors - \--color-light #F7F5F1 - \--color-primary-blue #082EB9 - \--color-secondary-blue #66BEF4 - \--color-bright-blue #57DCF9 - \--color-light-blue #AFDBF5 - \--color-dark #002237 - \--color-white #FFFFFF - \--color-orange #FF8952 - \--color-light-orange #FFB989 - \--color-purple #7533C0 - \--color-light-purple #EEB7FF - \--color-green #81A01E - \--color-yellow #F2CF5C - \--color-inactive-gray #6E6E6E - \--background #FFFFFF - \--foreground #0A0A0A - \--card #FFFFFF - \--card-foreground #0A0A0A - \--popover #FFFFFF - \--popover-foreground #0A0A0A - \--primary #171717 - \--primary-foreground #FAFAFA - \--secondary #F5F5F5 - \--secondary-foreground #171717 - \--muted #F5F5F5 - \--muted-foreground #737373 - \--accent #F5F5F5 - \--accent-foreground #171717 - \--destructive #E40014 - \--border #E5E5E5 - \--input #E5E5E5 - \--ring #A1A1A1 - \--sidebar #FAFAFA - \--sidebar-foreground #0A0A0A - \--sidebar-primary #171717 - \--sidebar-primary-foreground #FAFAFA - \--sidebar-accent #F5F5F5 - \--sidebar-accent-foreground #171717 - \--sidebar-border #E5E5E5 - \--sidebar-ring #A1A1A1 - \--orejime-color-background #FFFFFF - \--orejime-color-text #1A1A1A - \--orejime-color-primary #0070F3 - \--orejime-color-primary-hover #0051A2 - \--orejime-color-secondary #F3F4F6 - \--orejime-color-secondary-hover #E5E7EB - \--orejime-color-link #0070F3 - \--color-gray-1 #EAE8E5 ## Type Headings Playfair Display OM1, Inc. at a glance Body Archivo · closest free match for sans-serif Clear, readable paragraphs for clinicians, buyers and patients alike. - 4rem · 64pxOM1, Inc. - 3rem · 48pxOM1, Inc. - 2.5rem · 40pxOM1, Inc. - 2.25rem · 36pxOM1, Inc. - 2rem · 32pxOM1, Inc. - 1.875rem · 30pxOM1, Inc. - 1.625rem · 26pxOM1, Inc. - 1.5rem · 24pxOM1, Inc. ## Shape & depth Cards and panels: 0px corners · buttons and chips: 0px. ### Corner radii - 6px used in 2 rules - 1px used in 1 rule - 4px used in 1 rule - 8px used in 1 rule - 10px used in 1 rule - 10rem used in 1 rule - 32px used in 1 rule - 40rem used in 1 rule - 48px used in 1 rule - 64px used in 1 rule ## Voice Tone: professional. Energy: low. Written for enterprises. ## 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%2F100923807.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "OM1, Inc." domain: "om1.com" colors: primary: "#062EB7" onPrimary: "#FAFAFA" dark: "#002237" accent: "#4169E1" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#002237" accent: "#062EB7" fonts: heading: "Playfair Display" body: "Archivo" radius: card: "0px" button: "0px" --- # Design System — OM1, Inc. > Read from OM1, Inc.'s public website (om1.com) by Clinical Terminal. Not reviewed by OM1, Inc.. > Use it as inspiration: borrow the ideas, not OM1, Inc.'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from OM1, Inc.'s site background #FFFFFF. Pages and panels sit on it. - Main text: #002237 (16.36:1 on the ground). - Secondary text is #002237 at 88% / 76% / 60%; hairlines and plate borders #002237 at 16%. ## Color - **Accent on the ground: #062EB7** (10.08:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #062EB7** for filled shapes (buttons, chips, bars), with #FAFAFA text on it (9.66:1). - Secondary accent #4169E1: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Playfair Display**. Body: **Archivo**. Both on Google Fonts. - OM1, Inc.'s site uses Playfair Display / sans-serif; these are the closest free look-alikes. ## Shape - Cards and panels: 0px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Chart** (`--chart-N`): 1 `#F05100` · 2 `#009588` · 3 `#104E64` · 4 `#FCBB00` · 5 `#F99C00` ### Other named colors - `--color-light`: `#F7F5F1` - `--color-primary-blue`: `#082EB9` - `--color-secondary-blue`: `#66BEF4` - `--color-bright-blue`: `#57DCF9` - `--color-light-blue`: `#AFDBF5` - `--color-dark`: `#002237` - `--color-white`: `#FFFFFF` - `--color-orange`: `#FF8952` - `--color-light-orange`: `#FFB989` - `--color-purple`: `#7533C0` - `--color-light-purple`: `#EEB7FF` - `--color-green`: `#81A01E` - `--color-yellow`: `#F2CF5C` - `--color-inactive-gray`: `#6E6E6E` - `--background`: `#FFFFFF` - `--foreground`: `#0A0A0A` - `--card`: `#FFFFFF` - `--card-foreground`: `#0A0A0A` - `--popover`: `#FFFFFF` - `--popover-foreground`: `#0A0A0A` - `--primary`: `#171717` - `--primary-foreground`: `#FAFAFA` - `--secondary`: `#F5F5F5` - `--secondary-foreground`: `#171717` - `--muted`: `#F5F5F5` - `--muted-foreground`: `#737373` - `--accent`: `#F5F5F5` - `--accent-foreground`: `#171717` - `--destructive`: `#E40014` - `--border`: `#E5E5E5` - `--input`: `#E5E5E5` - `--ring`: `#A1A1A1` - `--sidebar`: `#FAFAFA` - `--sidebar-foreground`: `#0A0A0A` - `--sidebar-primary`: `#171717` - `--sidebar-primary-foreground`: `#FAFAFA` - `--sidebar-accent`: `#F5F5F5` - `--sidebar-accent-foreground`: `#171717` - `--sidebar-border`: `#E5E5E5` - `--sidebar-ring`: `#A1A1A1` - `--orejime-color-background`: `#FFFFFF` - `--orejime-color-text`: `#1A1A1A` - `--orejime-color-primary`: `#0070F3` - `--orejime-color-primary-hover`: `#0051A2` - `--orejime-color-secondary`: `#F3F4F6` - `--orejime-color-secondary-hover`: `#E5E7EB` - `--orejime-color-link`: `#0070F3` - `--color-gray-1`: `#EAE8E5` - `--color-gray-2`: `#D8D5D0` ### Typefaces - Playfair Display (`--font-playfair`) — on Google Fonts - Inter (`--font-inter`) — on Google Fonts - Playfair Display Fallback - Inter Fallback ### Type scale (most-used sizes) `4rem` · `3rem` · `2.5rem` · `2.25rem` · `2rem` · `1.875rem` · `1.625rem` · `1.5rem` · `1.375rem` · `1.0625rem` · `1rem` · `.8125rem` ### Letter-spacing `-.01em` (15) · `.04em` (1) · `.05em` (1) · `.06em` (1) ### Corner radii (most-used) `6px` · `1px` · `4px` · `8px` · `10px` · `10rem` · `32px` · `40rem` · `48px` · `64px` ```