add new designs
This commit is contained in:
necatiozmen
259
design-md/cal/DESIGN.md
Normal file
259
design-md/cal/DESIGN.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# Design System: Cal.com
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.
|
||||
|
||||
Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.
|
||||
|
||||
The elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (`0px 0px 0px 1px`), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Purely grayscale brand palette — no brand colors, boldness through monochrome
|
||||
- Cal Sans custom geometric display font with extremely tight default letter-spacing
|
||||
- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
|
||||
- Cal Sans for headings, Inter for body — clean typographic division
|
||||
- Wide border-radius scale from 2px to 9999px (pill) — versatile rounding
|
||||
- White canvas with near-black (#242424) text — maximum contrast, zero decoration
|
||||
- Product screenshots as primary visual content — the scheduling UI sells itself
|
||||
- Built on Framer platform
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Charcoal** (`#242424`): Primary heading and button text — Cal.com's signature near-black, warmer than pure black
|
||||
- **Midnight** (`#111111`): Deepest text/overlay color — used at 50% opacity for subtle overlays
|
||||
- **White** (`#ffffff`): Primary background and surface — the dominant canvas
|
||||
|
||||
### Secondary & Accent
|
||||
- **Link Blue** (`#0099ff`): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
|
||||
- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction
|
||||
- **Default Link** (`#0000ee`): Browser-default link color on some elements — unmodified, signaling openness
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): Primary page background and card surfaces
|
||||
- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation — barely visible tint
|
||||
- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels
|
||||
|
||||
### Neutrals & Text
|
||||
- **Charcoal** (`#242424`): Headlines, buttons, primary UI text
|
||||
- **Midnight** (`#111111`): Deep black for high-contrast links and nav text
|
||||
- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content
|
||||
- **Pure Black** (`#000000`): Certain link text elements
|
||||
- **Border Gray** (approx `rgba(34, 42, 53, 0.08–0.10)`): Shadow-based borders using ring shadows instead of CSS borders
|
||||
|
||||
### Semantic & Accent
|
||||
- Cal.com is deliberately colorless for brand elements — "a grayscale brand to emphasise on boldness and professionalism"
|
||||
- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome
|
||||
- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral
|
||||
|
||||
### Gradient System
|
||||
- No gradients on the marketing site — the design is fully flat and monochrome
|
||||
- Depth is achieved entirely through shadows, not color transitions
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display**: `Cal Sans` — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)
|
||||
- **Body**: `Inter` — "rock-solid" standard body font. Fallback: `Inter Placeholder`
|
||||
- **UI Light**: `Cal Sans UI Variable Light` — light-weight variant (300) for softer UI text with -0.2px letter-spacing
|
||||
- **UI Medium**: `Cal Sans UI Medium` — medium-weight variant (500) for emphasized captions
|
||||
- **Mono**: `Roboto Mono` — for code blocks and technical content
|
||||
- **Tertiary**: `Matter Regular` / `Matter SemiBold` / `Matter Medium` — additional body fonts for specific contexts
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |
|
||||
| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |
|
||||
| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |
|
||||
| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |
|
||||
| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |
|
||||
| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |
|
||||
| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |
|
||||
| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |
|
||||
| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |
|
||||
| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |
|
||||
| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |
|
||||
| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |
|
||||
| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |
|
||||
| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |
|
||||
| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |
|
||||
|
||||
### Principles
|
||||
- **Cal Sans at large, Inter at small**: Cal Sans is exclusively for headings and display — never for body text. The system enforces this division strictly
|
||||
- **Tight by default, space when small**: Cal Sans letters are "intentionally spaced to be extremely close" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming
|
||||
- **Weight 300 body variant**: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines
|
||||
- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight
|
||||
- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
|
||||
- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
|
||||
- **Pill**: 9999px radius for rounded pill-shaped actions and badges
|
||||
- **Compact**: 4px padding, small text — utility actions within product UI
|
||||
- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` — a subtle inner-top highlight creating a 3D pressed effect
|
||||
|
||||
### Cards & Containers
|
||||
- **Shadow Card**: White background, multi-layered shadow — `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border
|
||||
- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation
|
||||
- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections
|
||||
- **Hover**: Likely subtle shadow deepening or scale transform
|
||||
|
||||
### Inputs & Forms
|
||||
- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border
|
||||
- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)
|
||||
- **Text input**: 8px radius, standard border treatment
|
||||
- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms
|
||||
|
||||
### Navigation
|
||||
- **Top nav**: White/transparent background, Cal Sans links at near-black
|
||||
- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis
|
||||
- **CTA button**: Dark Primary in the nav — high contrast call-to-action
|
||||
- **Mobile**: Collapses to hamburger with simplified navigation
|
||||
- **Sticky**: Fixed on scroll
|
||||
|
||||
### Image Treatment
|
||||
- **Product screenshots**: Large scheduling UI screenshots — the product is the primary visual
|
||||
- **Trust logos**: Grayscale company logos in a horizontal trust bar
|
||||
- **Aspect ratios**: Wide landscape for product UI screenshots
|
||||
- **No decorative imagery**: No illustrations, photos, or abstract graphics — pure product + typography
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
|
||||
- **Section padding**: 80px–96px vertical between major sections (generous)
|
||||
- **Card padding**: 12px–24px internal
|
||||
- **Component gaps**: 4px–8px between related elements
|
||||
- **Notable jump**: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier
|
||||
|
||||
### Grid & Container
|
||||
- **Max width**: ~1200px content container, centered
|
||||
- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids
|
||||
- **Feature showcase**: Product screenshots flanked by description text
|
||||
- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Lavish section spacing**: 80px–96px between sections creates a breathable, premium feel
|
||||
- **Product-first content**: Screenshots dominate the visual space — minimal surrounding decoration
|
||||
- **Centered headlines**: Cal Sans headings centered with generous margins above and below
|
||||
|
||||
### Border Radius Scale
|
||||
- **2px**: Subtle rounding on inline elements
|
||||
- **4px**: Small UI components
|
||||
- **6px–7px**: Buttons, small cards, images
|
||||
- **8px**: Standard interactive elements — buttons, inputs, images
|
||||
- **12px**: Medium containers — links, larger cards, images
|
||||
- **16px**: Large section containers
|
||||
- **29px**: Special rounded elements
|
||||
- **100px**: Large rounding — nearly circular on small elements
|
||||
- **1000px**: Very large rounding
|
||||
- **9999px**: Full pill shape — badges, links
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Flat) | No shadow | Page canvas, basic text containers |
|
||||
| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed/recessed elements, input wells |
|
||||
| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | Cards, containers — the workhorse shadow |
|
||||
| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | Alt card elevation without ring border |
|
||||
| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` or `rgb(255,255,255) 0px 2px 0px inset` | Button inner highlight — 3D pressed effect |
|
||||
| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |
|
||||
|
||||
### Shadow Philosophy
|
||||
Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:
|
||||
- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout
|
||||
- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth
|
||||
- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding
|
||||
- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel
|
||||
- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together
|
||||
|
||||
### Decorative Depth
|
||||
- No gradients or glow effects
|
||||
- All depth comes from the sophisticated shadow compositing system
|
||||
- The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing
|
||||
- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it
|
||||
- Maintain the grayscale palette — boldness comes from contrast, not color
|
||||
- Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow
|
||||
- Keep backgrounds pure white — the monochrome philosophy requires a clean canvas
|
||||
- Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality
|
||||
- Let product screenshots be the visual content — no illustrations, no decorative graphics
|
||||
- Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel
|
||||
|
||||
### Don't
|
||||
- Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading
|
||||
- Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only
|
||||
- Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach
|
||||
- Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px
|
||||
- Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges
|
||||
- Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only
|
||||
- Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character
|
||||
- Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |
|
||||
| Tablet Small | 640px–768px | 2-column begins for some elements |
|
||||
| Tablet | 768px–810px | Layout adjustments, fuller grid |
|
||||
| Tablet Large | 810px–1024px | Multi-column feature grids |
|
||||
| Desktop | 1024px–1199px | Full layout, expanded navigation |
|
||||
| Large Desktop | >1199px | Max-width container, centered content |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: 8px radius with comfortable padding (10px+ vertical)
|
||||
- Nav links: Dark text with adequate spacing
|
||||
- Mobile CTAs: Full-width dark buttons for easy thumb access
|
||||
- Pill badges: 9999px radius creates large, tappable targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full horizontal nav → hamburger on mobile
|
||||
- **Hero**: 64px Cal Sans display → ~36px on mobile
|
||||
- **Feature grids**: Multi-column → 2-column → single stacked column
|
||||
- **Product screenshots**: Scale within containers, maintaining aspect ratios
|
||||
- **Section spacing**: Reduces from 80px–96px to ~48px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Product screenshots scale responsively
|
||||
- Trust logos reflow to multi-row grid on mobile
|
||||
- No art direction changes — same compositions at all sizes
|
||||
- Images use 7px–12px border-radius for consistent rounded corners
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary Text: Charcoal (`#242424`)
|
||||
- Deep Text: Midnight (`#111111`)
|
||||
- Secondary Text: Mid Gray (`#898989`)
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Link: Link Blue (`#0099ff`)
|
||||
- CTA Button: Charcoal (`#242424`) bg, white text
|
||||
- Shadow Border: `rgba(34, 42, 53, 0.08)` ring
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)"
|
||||
- "Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius"
|
||||
- "Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning"
|
||||
- "Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background"
|
||||
- "Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them
|
||||
2. Check that the palette is purely grayscale — if you see brand colors, remove them
|
||||
3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders
|
||||
4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space
|
||||
5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes
|
||||
23
design-md/cal/README.md
Normal file
23
design-md/cal/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Cal Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) extracted from the public [cal](https://cal.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cal/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
449
design-md/cal/preview-dark.html
Normal file
449
design-md/cal/preview-dark.html
Normal file
@@ -0,0 +1,449 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cal.com — Dark Mode</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--charcoal: #242424;
|
||||
--midnight: #111111;
|
||||
--mid-gray: #898989;
|
||||
--white: #ffffff;
|
||||
--link-blue: #0099ff;
|
||||
--focus-blue: #3b82f6;
|
||||
--font-display: 'Cal Sans', system-ui, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'Roboto Mono', ui-monospace, monospace;
|
||||
|
||||
--dk-bg: #0a0a0a;
|
||||
--dk-surface: #141414;
|
||||
--dk-surface-elevated: #1c1c1c;
|
||||
--dk-border: #2a2a2a;
|
||||
--dk-border-light: #333333;
|
||||
--dk-text: #e8e8e8;
|
||||
--dk-text-secondary: #898989;
|
||||
--dk-text-muted: #555555;
|
||||
--dk-shadow-ring: rgba(255,255,255,0.06);
|
||||
--dk-shadow-soft: rgba(0,0,0,0.3);
|
||||
--dk-shadow-contact: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--dk-bg);
|
||||
color: var(--dk-text);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 200;
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 5px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 40px;
|
||||
background: rgba(10,10,10,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 600; color: var(--dk-text); text-decoration: none; }
|
||||
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 500; color: var(--dk-text-secondary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--dk-text); }
|
||||
.nav-cta {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
.hero { padding: 96px 40px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--dk-text);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--dk-text-secondary);
|
||||
max-width: 480px;
|
||||
margin: 0 auto 36px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-light {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-light:hover { opacity: 0.85; }
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--dk-text);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.btn-outline:hover { box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 1px; }
|
||||
|
||||
.section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--dk-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--dk-text-secondary);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.color-category { margin-bottom: 36px; }
|
||||
.color-category h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--dk-text);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border-radius: 12px; overflow: hidden; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; background: var(--dk-surface); }
|
||||
.swatch-name { font-size: 13px; font-weight: 600; color: var(--dk-text); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
|
||||
|
||||
.type-sample { padding: 20px 0; border-bottom: 1px solid var(--dk-border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--dk-text); margin-bottom: 6px; }
|
||||
.type-sample .type-label { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
|
||||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||
.btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
.btn-dk-surface {
|
||||
background: var(--dk-surface-elevated);
|
||||
color: var(--dk-text);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-pill-light {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 10px 24px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.card { border-radius: 12px; padding: 28px; }
|
||||
.card-dk { background: var(--dk-surface); box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.card-dk-elevated { background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.card-dk-inset { background: var(--dk-bg); box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||||
.card-hover { transition: transform 0.15s; }
|
||||
.card-hover:hover { transform: translateY(-2px); }
|
||||
.card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dk-text); margin-bottom: 8px; letter-spacing: 0.2px; }
|
||||
.card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--dk-text-secondary); letter-spacing: -0.2px; }
|
||||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-top: 14px; }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--dk-surface);
|
||||
color: var(--dk-text);
|
||||
outline: none;
|
||||
box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
|
||||
.form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
.form-error-text { font-size: 11px; color: #ef4444; }
|
||||
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
|
||||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.spacing-box { background: var(--dk-text); border-radius: 4px; height: 40px; opacity: 0.5; }
|
||||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--font-mono); }
|
||||
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.radius-label { font-size: 12px; font-weight: 600; color: var(--dk-text); font-family: var(--font-mono); }
|
||||
.radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; max-width: 80px; }
|
||||
|
||||
.elevation-section { background: var(--dk-surface); border-radius: 16px; padding: 48px; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--dk-surface-elevated); border-radius: 12px; padding: 24px; min-height: 120px; }
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--dk-text); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; }
|
||||
.elev-inset { box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
|
||||
.elev-ring-soft { box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-soft { box-shadow: var(--dk-shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-highlight { box-shadow: rgba(255,255,255,0.08) 0px 2px 0px 0px inset; background: var(--white); color: var(--charcoal); }
|
||||
.elev-highlight h4 { color: var(--charcoal); }
|
||||
.elev-highlight p { color: var(--mid-gray); }
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 48px 40px;
|
||||
font-size: 13px;
|
||||
color: var(--dk-text-muted);
|
||||
border-top: 1px solid var(--dk-border);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 12px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 64px 16px 48px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 48px 16px; }
|
||||
.section-title { font-size: 32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
.dark-badge { top: 10px; right: 10px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Cal.com</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-light">Explore Tokens</button>
|
||||
<button class="btn-outline">View DESIGN.md</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">A grayscale brand on dark surfaces.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#ffffff;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:rgba(255,255,255,0.06);"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring (Dark)</div><div class="swatch-hex">rgba(255,255,255,0.06)</div><div class="swatch-role">Dark mode ring shadows</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Accent (Minimal)</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">Cal Sans for display, Inter for body.</p>
|
||||
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-label">Cal Sans 64px / 600 / 1.10</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div><div class="type-label">Cal Sans 48px / 600 / 1.10</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-label">Cal Sans 24px / 600 / 1.30</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;">Sub-heading</div><div class="type-label">Cal Sans 20px / 600 / 1.20 / +0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;">Body Light — Elegant intro text for descriptions</div><div class="type-label">Inter 18px / 300 / 1.30 / -0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;">Body Standard — Reading text with comfortable line-height for long passages.</div><div class="type-label">Inter 16px / 300 / 1.50 / -0.2px</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div><div class="type-label">Inter 16px / 600 / 1.00</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption</div><div class="type-label">Inter 14px / 500 / 1.14</div></div>
|
||||
<div class="type-sample"><div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div><div class="type-label">Roboto Mono 14px / 600 / 1.00</div></div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">Inverted for dark surfaces.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item"><button class="btn-light">Light Primary</button><span class="btn-label">#fff / #242424 / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-dk-surface">Surface</button><span class="btn-label">#1c1c1c / ring shadow / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-outline">Outline</button><span class="btn-label">transparent / ring / 8px</span></div>
|
||||
<div class="button-item"><button class="btn-pill-light">Pill</button><span class="btn-label">#fff / 9999px</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Dark surface cards with shadow elevation.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-dk card-hover"><h4>Shadow Card</h4><p class="card-desc">Dark surface with ring + contact + diffused shadow compositing. Hover to lift.</p><p class="card-label">ring + contact + soft shadows</p></div>
|
||||
<div class="card card-dk-elevated"><h4>Elevated Card</h4><p class="card-desc">Lighter dark surface with ring shadow border for secondary content.</p><p class="card-label">ring shadow only</p></div>
|
||||
<div class="card card-dk-inset"><h4>Inset Card</h4><p class="card-desc">Deepest background with inset shadow for recessed content wells.</p><p class="card-label">inset shadow</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Dark surface inputs with ring shadows and blue focus.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Default Input</label><input type="text" placeholder="Enter your name"><span class="form-hint">ring shadow border / 8px</span></div>
|
||||
<div class="form-group"><label>Focus State</label><input type="text" placeholder="Focused" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(255,255,255,0.06) 0px 0px 0px 1px;"><span class="form-hint">blue focus ring</span></div>
|
||||
<div class="form-group"><label>Error State</label><input type="text" class="error" value="bad"><span class="form-error-text">Invalid input</span></div>
|
||||
<div class="form-group"><label>Textarea</label><textarea placeholder="Message..."></textarea><span class="form-hint">Same styling</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base with section-level jump to 80px–96px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">2px to pill 9999px.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Shadow compositing on dark surfaces.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Default canvas.</p></div>
|
||||
<div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Recessed/pressed appearance.</p></div>
|
||||
<div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring + contact + diffused. Workhorse.</p></div>
|
||||
<div class="elevation-card elev-soft"><h4>Level 3 — Soft</h4><p>Ambient shadow only.</p></div>
|
||||
<div class="elevation-card elev-highlight"><h4>Level 4 — Highlight</h4><p>White surface with inset bevel.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>Generated from DESIGN.md — Cal.com Design System Catalog (Dark Mode)</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
575
design-md/cal/preview.html
Normal file
575
design-md/cal/preview.html
Normal file
@@ -0,0 +1,575 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by Cal.com</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--charcoal: #242424;
|
||||
--midnight: #111111;
|
||||
--mid-gray: #898989;
|
||||
--white: #ffffff;
|
||||
--link-blue: #0099ff;
|
||||
--focus-blue: #3b82f6;
|
||||
--shadow-ring: rgba(34, 42, 53, 0.08);
|
||||
--shadow-soft: rgba(34, 42, 53, 0.05);
|
||||
--shadow-contact: rgba(19, 19, 22, 0.7);
|
||||
--font-display: 'Cal Sans', system-ui, sans-serif;
|
||||
--font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'Roboto Mono', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 40px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--midnight);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--charcoal);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--midnight); }
|
||||
.nav-cta {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.7; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 96px 40px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
letter-spacing: 0px;
|
||||
color: var(--charcoal);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--mid-gray);
|
||||
max-width: 480px;
|
||||
margin: 0 auto 36px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-dark {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset;
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.7; }
|
||||
.btn-white {
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.btn-white:hover { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 6px 12px 0px; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
padding: 80px 40px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 1.10;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.50;
|
||||
color: var(--mid-gray);
|
||||
margin-bottom: 48px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.color-category { margin-bottom: 36px; }
|
||||
.color-category h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; background: var(--white); }
|
||||
.swatch-name { font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--mid-gray); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(34,42,53,0.08);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--charcoal); margin-bottom: 6px; }
|
||||
.type-sample .type-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--mid-gray);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||
.btn-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
.btn-pill {
|
||||
background: var(--charcoal);
|
||||
color: var(--white);
|
||||
padding: 10px 24px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.card { border-radius: 12px; padding: 28px; background: var(--white); }
|
||||
.card-shadow {
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.card-shadow-alt {
|
||||
box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px;
|
||||
}
|
||||
.card-inset {
|
||||
box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset;
|
||||
background: #fafafa;
|
||||
}
|
||||
.card-hover { transition: transform 0.15s, box-shadow 0.15s; }
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-contact) 0px 2px 8px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 8px 16px 0px;
|
||||
}
|
||||
.card h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--mid-gray); letter-spacing: -0.2px; }
|
||||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-top: 14px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 14px; font-weight: 600; color: var(--charcoal); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
outline: none;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--mid-gray); }
|
||||
.form-group input:focus, .form-group textarea:focus {
|
||||
box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-soft) 0px 4px 8px 0px;
|
||||
}
|
||||
.form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
.form-error-text { font-size: 11px; color: #dc2626; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
|
||||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.spacing-box { background: var(--charcoal); border-radius: 4px; height: 40px; }
|
||||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--mid-gray); font-family: var(--font-mono); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px;
|
||||
}
|
||||
.radius-label { font-size: 12px; font-weight: 600; color: var(--charcoal); font-family: var(--font-mono); }
|
||||
.radius-context { font-size: 10px; color: var(--mid-gray); text-align: center; max-width: 80px; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-section { background: #f5f5f5; border-radius: 16px; padding: 48px; }
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 12px; padding: 24px; min-height: 120px; }
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--mid-gray); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; }
|
||||
.elev-inset { box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset; }
|
||||
.elev-ring-soft { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-soft { box-shadow: var(--shadow-soft) 0px 4px 8px 0px; }
|
||||
.elev-highlight { box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset; background: var(--charcoal); color: var(--white); }
|
||||
.elev-highlight h4 { color: var(--white); }
|
||||
.elev-highlight p { color: rgba(255,255,255,0.6); }
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 48px 40px;
|
||||
font-size: 13px;
|
||||
color: var(--mid-gray);
|
||||
border-top: 1px solid rgba(34,42,53,0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 12px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 64px 16px 48px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 48px 16px; }
|
||||
.section-title { font-size: 32px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System Inspired by Cal.com</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-dark">Explore Tokens</button>
|
||||
<button class="btn-white">View DESIGN.md</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">A grayscale brand — boldness through monochrome, not color.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#ffffff; border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text, descriptions</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast link text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:rgba(34,42,53,0.08);border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring</div><div class="swatch-hex">rgba(34,42,53,0.08)</div><div class="swatch-role">Ring-shadow borders</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Accent (Minimal)</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">Cal Sans for display, Inter for body — a clean typographic division.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div>
|
||||
<div class="type-label">Display Hero — Cal Sans 64px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div>
|
||||
<div class="type-label">Section Heading — Cal Sans 48px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div>
|
||||
<div class="type-label">Feature Heading — Cal Sans 24px / 600 / 1.30</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;">Sub-heading</div>
|
||||
<div class="type-label">Sub-heading — Cal Sans 20px / 600 / 1.20 / +0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.10;">Card Title</div>
|
||||
<div class="type-label">Card Title — Cal Sans 16px / 600 / 1.10</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;">Body Light — Elegant light-weight intro text for descriptions and subtitles</div>
|
||||
<div class="type-label">Body Light — Inter 18px / 300 / 1.30 / -0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;">Body Standard — Standard reading text for longer content passages with comfortable line-height.</div>
|
||||
<div class="type-label">Body Standard — Inter 16px / 300 / 1.50 / -0.2px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div>
|
||||
<div class="type-label">UI Label — Inter 16px / 600 / 1.00</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption Inter</div>
|
||||
<div class="type-label">Caption — Inter 14px / 500 / 1.14</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1.00;">Micro text</div>
|
||||
<div class="type-label">Micro — Inter 12px / 500 / 1.00</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div>
|
||||
<div class="type-label">Code — Roboto Mono 14px / 600 / 1.00</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">Dark CTAs with inset highlights, shadow-bordered white buttons, and pill shapes.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item">
|
||||
<button class="btn-dark">Dark Primary</button>
|
||||
<span class="btn-label">#242424 / white / 8px / inset highlight</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-white">White Shadow</button>
|
||||
<span class="btn-label">#fff / ring shadow / 8px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-pill">Pill Button</button>
|
||||
<span class="btn-label">#242424 / 9999px radius</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Multi-layered shadow elevation with ring borders instead of CSS borders.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-shadow card-hover">
|
||||
<h4>Shadow Card</h4>
|
||||
<p class="card-desc">Ring shadow + contact shadow + diffused shadow. The workhorse card pattern. Hover to see lift.</p>
|
||||
<p class="card-label">ring + contact + soft / 12px radius</p>
|
||||
</div>
|
||||
<div class="card card-shadow-alt">
|
||||
<h4>Alt Shadow Card</h4>
|
||||
<p class="card-desc">Contact shadow + soft shadow without the ring border. Lighter elevation.</p>
|
||||
<p class="card-label">contact + soft only / 12px radius</p>
|
||||
</div>
|
||||
<div class="card card-inset">
|
||||
<h4>Inset Card</h4>
|
||||
<p class="card-desc">Inset shadow creates a recessed, pressed-in appearance for input wells and secondary containers.</p>
|
||||
<p class="card-label">inset 0px 1px 1.9px rgba(0,0,0,0.16)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Shadow-bordered inputs with blue focus rings.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Default Input</label>
|
||||
<input type="text" placeholder="Enter your name">
|
||||
<span class="form-hint">shadow-ring border / 8px radius</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Focus State</label>
|
||||
<input type="text" placeholder="Focused" style="box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.05) 0px 4px 8px 0px;">
|
||||
<span class="form-hint">focus: blue ring + shadows</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Error State</label>
|
||||
<input type="text" class="error" value="bad input">
|
||||
<span class="form-error-text">Invalid input</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea placeholder="Type a message..."></textarea>
|
||||
<span class="form-hint">Same shadow styling</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base with a jump from 28px to 80px for section-level tiers.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:3px;"></div><span class="spacing-label">3</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">Wide scale from sharp 2px to full pill 9999px.</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small UI</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons, inputs</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards, links</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Multi-layered shadow compositing: ring borders + diffused shadows + inset highlights.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Page canvas and basic containers.</p></div>
|
||||
<div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Inset shadow. Pressed/recessed elements, input wells.</p></div>
|
||||
<div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring border + contact shadow + diffused shadow. The workhorse elevation.</p></div>
|
||||
<div class="elevation-card elev-soft"><h4>Level 3 — Soft Only</h4><p>Subtle ambient shadow without ring border. Gentle floating.</p></div>
|
||||
<div class="elevation-card elev-highlight"><h4>Level 4 — Inset Highlight</h4><p>White inset on dark bg. Button 3D bevel effect.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>Generated from DESIGN.md — Cal.com Design System Catalog</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user