---
generator: clinical-terminal-brand-kit
company: "Aegis (YC X25)"
domain: "aegishealth.us"
colors:
  primary: "#163E7E"
  onPrimary: "#FFFFFF"
  dark: "#142733"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#142733"
  accent: "#163E7E"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "6px"
---

# Design System — Aegis (YC X25)

> Read from Aegis (YC X25)'s public website (aegishealth.us) by Clinical Terminal. Not reviewed by Aegis (YC X25).
> Use it as inspiration: borrow the ideas, not Aegis (YC X25)'s name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Aegis (YC X25)'s site background #FFFFFF. Pages and panels sit on it.
- Main text: #142733 (15.35:1 on the ground).
- Secondary text is #142733 at 88% / 76% / 60%; hairlines and plate borders #142733 at 16%.

## Color
- **Accent on the ground: #163E7E** (10.37:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #163E7E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (10.37:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Aegis (YC X25)'s site uses ui-sans-serif / ui-sans-serif; these are the closest free look-alikes.

## Shape
- Cards and panels: 0px corners. Buttons and chips: 6px.

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Color Red** (`--color-red-N`): 50 `#FEF2F2` · 100 `#FFE2E2` · 300 `#FFA3A3` · 400 `#FF6568` · 500 `#FB2C36` · 600 `#E40014` · 700 `#BF000F` · 800 `#9F0712` · 900 `#82181A` · 950 `#460809`
- **Color Orange** (`--color-orange-N`): 50 `#FFF7ED` · 100 `#FFEDD5` · 200 `#FFD7A8` · 300 `#FFB96D` · 400 `#FF8B1A` · 500 `#FE6E00` · 600 `#F05100` · 700 `#C53C00` · 900 `#7E2A0C` · 950 `#441306`
- **Color Amber** (`--color-amber-N`): 50 `#FFFBEB` · 100 `#FEF3C6` · 200 `#FEE685` · 300 `#FFD236` · 400 `#FCBB00` · 500 `#F99C00` · 600 `#DD7400` · 700 `#B75000` · 800 `#953D00` · 900 `#7B3306` · 950 `#461901`
- **Color Green** (`--color-green-N`): 50 `#F0FDF4` · 400 `#05DF72` · 800 `#016630` · 900 `#0D542B`
- **Color Emerald** (`--color-emerald-N`): 50 `#ECFDF5` · 200 `#A4F4CF` · 300 `#5EE9B5` · 400 `#00D294` · 500 `#00BB7F` · 600 `#009767` · 700 `#007956` · 800 `#005F46` · 900 `#004E3B` · 950 `#002C22`
- **Color Teal** (`--color-teal-N`): 100 `#CBFBF1` · 400 `#00D3BD` · 500 `#00BAA7` · 600 `#009588` · 950 `#022F2E`
- **Color Blue** (`--color-blue-N`): 100 `#DBEAFE` · 300 `#90C5FF` · 400 `#54A2FF` · 500 `#3080FF` · 600 `#155DFC` · 700 `#1447E6` · 950 `#162456`
- **Color Violet** (`--color-violet-N`): 100 `#EDE9FE` · 300 `#C4B4FF` · 500 `#8D54FF` · 600 `#7F22FE` · 700 `#7008E7` · 950 `#2F0D68`
- **Color Purple** (`--color-purple-N`): 400 `#C07EFF` · 500 `#AC4BFF` · 600 `#9810FA` · 700 `#8200DA`
- **Color Pink** (`--color-pink-N`): 50 `#FDF2F8` · 100 `#FCE7F3` · 300 `#FDA5D5` · 400 `#FB64B6` · 600 `#E30076` · 700 `#C4005C` · 950 `#510424`
- **Color Gray** (`--color-gray-N`): 200 `#E5E7EB` · 500 `#6A7282` · 600 `#4A5565` · 900 `#101828`
- **Color Zinc** (`--color-zinc-N`): 50 `#FAFAFA` · 100 `#F4F4F5` · 200 `#E4E4E7` · 300 `#D4D4D8` · 400 `#9F9FA9` · 500 `#71717B` · 600 `#52525C` · 700 `#3F3F46` · 800 `#27272A` · 900 `#18181B`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--glow-flow-color`: `#3B82F6`
- `--glow-flow-color-secondary`: `#3B82F6`
- `--color-slate-400`: `#90A1B9`

### Typefaces

- geistSans (`--font-geist-sans`)
- geistMono (`--font-geist-mono`)
- geistSans Fallback
- geistMono Fallback

### Type scale (most-used sizes)

`8rem` · `3.5rem` · `3.375rem` · `2.5rem` · `1rem` · `15px` · `11.5px` · `10.5px` · `10px` · `9.5px` · `9px` · `7px`

### Letter-spacing

`-.32px` (2) · `-4.32px` (2) · `-.2px` (1) · `-.03em` (1) · `-.3px` (1) · `-.4px` (1)

### Corner radii (most-used)

`.3125rem` · `.375rem` · `.25rem` · `1px` · `2px` · `3px` · `4px` · `6px` · `7px` · `8px`

### Gradients

- `radial-gradient(#000,#0000 90%)`
- `radial-gradient(#f3f4f6 1.5px,#0000 1.5px)`
- `radial-gradient(60% 50% at 50% 36%,#4fc5f812,#0000 72%)`
- `radial-gradient(#27272a 1.5px,#0000 1.5px)`

### Breakpoints

1400px