Covlant Style Guide
Color Palette
Brand Greens
Primary Green
#108b53
Main brand color, links, focus states
Accent Green
#1be78b
Highlights, interactive elements, decorative
Green 500
#16b96f
Mid-range accent
Green 600
#0d804c
Input focus borders
Dark Green
#0b5c38
Depth / hover states
Darker Green
#05331e
Deep backgrounds
Green 700
#084d2e
Dark accent variant
Green 100
#76f1b9
Light tint
Green 300
#49eca2
Hover states, light accent
Green 200
#6eb394
Muted accent
Green 400
#3d9970
Secondary accent
Error / Red
Error
#d93149
Error states, destructive actions
Error Light
#e15a6d
Lighter error variant
Error Lighter
#e88392
Error backgrounds, muted error
Neutrals
Black
#000000
Primary text, borders
Gray 900
#333333
Strong card borders, headings
Gray 700
#666666
Secondary text
Gray 500
#999999
Card borders, placeholder text
Gray 300
#cccccc
Light borders, dividers
Gray 100
#f5f5f5
Subtle backgrounds
White
#ffffff
Page background, cards
Backdrop
#000000b3
Modal overlay (70% opacity)
Typography
Font Families
Instrument Sans — Primary
Aa Bb Cc Dd Ee Ff Gg
400 Regular500 Medium600 Semibold700 Bold
Inter — Secondary / Body
Aa Bb Cc Dd Ee Ff Gg
400 Regular500 Medium600 Semibold700 Bold900 Black
Roboto Mono — Code
Aa Bb Cc 01 23 {}
400 Regular700 Bold
Belleza — Display
Aa Bb Cc Dd Ee Ff Gg
400 Regular
Type Scale
H1
Test smarter. Catch failures fast.
Instrument Sans | 60px / 72px | 700 | Responsive: 54px tablet, 48px mobile
H2
Intelligent testing platform
Instrument Sans | 52px / 64px | 700 | Responsive: 42px tablet
H3
Feature section heading
Instrument Sans | 32px / 38px | 600
H4
Card heading or subheading
Instrument Sans | 22px / 28px | 600
Body Large
Body text used for hero descriptions and prominent paragraphs.
Inter | 22px / 32px | 400 | Responsive: 18px tablet, 17px mobile
Body Default
Standard body text for general content, card descriptions, and supporting copy.
Inter | 17px / 26px | 400
Small / Caption
Used for captions, labels, and supporting metadata.
Inter | 14px / 24px | 400
Code
const result = await covlant.test({ smart: true });
Roboto Mono | 16px / 24px | 400 | Responsive: 12px tablet, 14px mobile
Spacing Scale
Gap / Margin / Padding Values
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
40px
48px
56px
60px
80px
100px
Components
Buttons
| Property | Value |
|---|---|
| Height | 42px |
| Padding | 12px 20px |
| Font | Instrument Sans, 16px, weight 500 |
| Border | 1px solid |
| Icon gap | 8px |
| Shadow (hover) | 4px 4px 10px #62626240 |
Input Fields
| Property | Value |
|---|---|
| Background | #ffffff |
| Border | 1px solid #000000 |
| Focus border | #0d804c with transition |
| Padding | 12px |
| Font | Instrument Sans, 17px, weight 400 |
| Placeholder color | #999999 |
Cards
Default Card
Standard card with light border for general content.
Bordered Card
Card with stronger border emphasis for highlighted content.
Shadow Card
Card with drop shadow for elevated content.
| Property | Value |
|---|---|
| Background | #ffffff |
| Border (default) | 1px solid #999999 |
| Border (strong) | 1px solid #333333 |
| Padding | 26px - 48px |
| Shadow | 10px 10px 12px #62626240 |
| Border radius | 0 (sharp edges) |
Modal / Dialog
| Property | Value |
|---|---|
| Width | 560px (fixed) |
| Backdrop | #000000b3 (semi-transparent) |
| Border | 1px solid |
| Z-index | 5 |
Visual Effects
| Effect | Details |
|---|---|
| Blur circles | 294-402px diameter, 30-40% opacity, 142px blur, #1be78b |
| Gradient fade | linear-gradient(transparent 0%, #ffffff 100%) |
| Dot grid | 4px & 9px squares, alternating #1be78b / #108b53 |
| Shadow (sm) | 4px 4px 10px #62626240 |
| Shadow (lg) | 10px 10px 12px #62626240 |
Layout & Breakpoints
Responsive Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Desktop | 1440px+ | Full layout, 1200px container |
| Tablet | 1000-1439px | Reduced fonts, adjusted spacing |
| Mobile | <= 999px | Single column, smallest type |
Layout Tokens
| Property | Value |
|---|---|
| Max container | 1200px |
| Layout system | Flexbox (column/row) |
| Nav z-index | 3 |
| Modal z-index | 5 |
| Nav position | sticky |
| Icon size | 47px x 47px |
Responsive Typography Reference
| Element | Desktop (1440px+) | Tablet (1000-1439px) | Mobile (<= 999px) |
|---|---|---|---|
| H1 | 60px / 72px | 54px / 64px | 48px / 60px |
| H2 | 52px / 64px | 42px / 52px | 42px / 52px |
| Body (lg) | 22px / 32px | 18px / 28px | 17px / 26px |
| Body | 17px / 26px | 17px / 26px | 17px / 26px |
| Small | 14px / 24px | 14px / 24px | 14px / 24px |
| Code | 16px / 24px | 12px / 20px | 14px / 22px |
CSS Custom Properties (from source)
Framer-generated design token variable names from the site CSS.
--token-d5d35793-...#108b53 (Primary)
--token-0fbe74a2-...#1be78b (Accent)
--token-1a139c5d-...#000000 (Black)
--token-6f8f2140-...#ffffff (White)