first commit
This commit is contained in:
necatiozmen
367
design-md/linear.app/DESIGN.md
Normal file
367
design-md/linear.app/DESIGN.md
Normal file
@@ -0,0 +1,367 @@
|
||||
# Design System: Linear
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.
|
||||
|
||||
The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.
|
||||
|
||||
The color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces
|
||||
- Inter Variable with `"cv01", "ss03"` globally — geometric alternates for a cleaner aesthetic
|
||||
- Signature weight 510 (between regular and medium) for most UI text
|
||||
- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) — the only chromatic color in the system
|
||||
- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`
|
||||
- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Multi-layered shadows with inset variants for depth on dark surfaces
|
||||
- Radix UI primitives as the component foundation (6 detected primitives)
|
||||
- Success green (`#27a644`, `#10b981`) used only for status indicators
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Background Surfaces
|
||||
- **Marketing Black** (`#010102` / `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
|
||||
- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.
|
||||
- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.
|
||||
- **Secondary Surface** (`#28282c`): The lightest dark surface — used for hover states and slightly elevated components.
|
||||
|
||||
### Text & Content
|
||||
- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
|
||||
- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.
|
||||
- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.
|
||||
- **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.
|
||||
|
||||
### Brand & Accent
|
||||
- **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
|
||||
- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.
|
||||
- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.
|
||||
- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.
|
||||
|
||||
### Status Colors
|
||||
- **Green** (`#27a644`): Primary success/active status. Used for "in progress" indicators.
|
||||
- **Emerald** (`#10b981`): Secondary success — pill badges, completion states.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Primary** (`#23252a`): Solid dark border for prominent separations.
|
||||
- **Border Secondary** (`#34343a`): Slightly lighter solid border.
|
||||
- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.
|
||||
- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.
|
||||
- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.
|
||||
- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.
|
||||
- **Line Tertiary** (`#18191a`): Slightly more visible divider line.
|
||||
|
||||
### Light Mode Neutrals (for light theme contexts)
|
||||
- **Light Background** (`#f7f8f8`): Page background in light mode.
|
||||
- **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.
|
||||
- **Light Border** (`#d0d6e0`): Visible border in light contexts.
|
||||
- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.
|
||||
- **Pure White** (`#ffffff`): Card surfaces, highlights.
|
||||
|
||||
### Overlay
|
||||
- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop — extremely dark for focus isolation.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
|
||||
- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`
|
||||
- **OpenType Features**: `"cv01", "ss03"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |
|
||||
| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |
|
||||
| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |
|
||||
| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |
|
||||
| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |
|
||||
| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |
|
||||
| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |
|
||||
| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |
|
||||
| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |
|
||||
| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |
|
||||
| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |
|
||||
| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |
|
||||
| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |
|
||||
| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |
|
||||
| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |
|
||||
| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |
|
||||
| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |
|
||||
| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |
|
||||
| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |
|
||||
| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |
|
||||
| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |
|
||||
| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |
|
||||
| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |
|
||||
| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |
|
||||
| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |
|
||||
|
||||
### Principles
|
||||
- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.
|
||||
- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
|
||||
- **OpenType as identity**: `"cv01", "ss03"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.
|
||||
- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Ghost Button (Default)**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#e2e4e7` (near-white)
|
||||
- Padding: comfortable
|
||||
- Radius: 6px
|
||||
- Border: `1px solid rgb(36, 40, 44)`
|
||||
- Outline: none
|
||||
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Use: Standard actions, secondary CTAs
|
||||
|
||||
**Subtle Button**
|
||||
- Background: `rgba(255,255,255,0.04)`
|
||||
- Text: `#d0d6e0` (silver-gray)
|
||||
- Padding: 0px 6px
|
||||
- Radius: 6px
|
||||
- Use: Toolbar actions, contextual buttons
|
||||
|
||||
**Primary Brand Button (Inferred)**
|
||||
- Background: `#5e6ad2` (brand indigo)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Hover: `#828fff` shift
|
||||
- Use: Primary CTAs ("Start building", "Sign up")
|
||||
|
||||
**Icon Button (Circle)**
|
||||
- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8` or `#ffffff`
|
||||
- Radius: 50%
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Use: Close, menu toggle, icon-only actions
|
||||
|
||||
**Pill Button**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Use: Filter chips, tags, status indicators
|
||||
|
||||
**Small Toolbar Button**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#62666d` (muted)
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`
|
||||
- Font: 12px weight 510
|
||||
- Use: Toolbar actions, quick-access controls
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid — always translucent)
|
||||
- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)
|
||||
- Radius: 8px (standard), 12px (featured), 22px (large panels)
|
||||
- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks
|
||||
- Hover: subtle background opacity increase
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Text Area**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#d0d6e0`
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Padding: 12px 14px
|
||||
- Radius: 6px
|
||||
|
||||
**Search Input**
|
||||
- Background: transparent
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 1px 32px (icon-aware)
|
||||
|
||||
**Button-style Input**
|
||||
- Text: `#8a8f98`
|
||||
- Padding: 1px 6px
|
||||
- Radius: 5px
|
||||
- Focus shadow: multi-layer stack
|
||||
|
||||
### Badges & Pills
|
||||
|
||||
**Success Pill**
|
||||
- Background: `#10b981`
|
||||
- Text: `#f7f8f8`
|
||||
- Radius: 50% (circular)
|
||||
- Font: 10px weight 510
|
||||
- Use: Status dots, completion indicators
|
||||
|
||||
**Neutral Pill**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Font: 12px weight 510
|
||||
- Use: Tags, filter chips, category labels
|
||||
|
||||
**Subtle Badge**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 0px 8px 0px 2px
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Font: 10px weight 510
|
||||
- Use: Inline labels, version tags
|
||||
|
||||
### Navigation
|
||||
- Dark sticky header on near-black background
|
||||
- Linear logomark left-aligned (SVG icon)
|
||||
- Links: Inter Variable 13–14px weight 510, `#d0d6e0` text
|
||||
- Active/hover: text lightens to `#f7f8f8`
|
||||
- CTA: Brand indigo button or ghost button
|
||||
- Mobile: hamburger collapse
|
||||
- Search: command palette trigger (`/` or `Cmd+K`)
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)
|
||||
- Top-rounded images: `12px 12px 0px 0px` radius
|
||||
- Dashboard/issue previews dominate feature sections
|
||||
- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
|
||||
- The 7px and 11px values suggest micro-adjustments for optical alignment
|
||||
- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous vertical padding
|
||||
- Feature sections: 2–3 column grids for feature cards
|
||||
- Full-width dark sections with internal max-width constraints
|
||||
- Changelog: single-column timeline layout
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.
|
||||
- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.
|
||||
- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (2px): Inline badges, toolbar buttons, subtle tags
|
||||
- Standard (4px): Small containers, list items
|
||||
- Comfortable (6px): Buttons, inputs, functional elements
|
||||
- Card (8px): Cards, dropdowns, popovers
|
||||
- Panel (12px): Panels, featured cards, section containers
|
||||
- Large (22px): Large panel elements
|
||||
- Full Pill (9999px): Chips, filter pills, status tags
|
||||
- Circle (50%): Icon buttons, avatars, status dots
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |
|
||||
| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |
|
||||
| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |
|
||||
| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |
|
||||
| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |
|
||||
| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |
|
||||
| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |
|
||||
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |
|
||||
|
||||
**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique "sunken" effect for recessed panels, adding dimensional depth that traditional dark themes lack.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Inter Variable with `"cv01", "ss03"` on ALL text — these features are fundamental to Linear's typeface identity
|
||||
- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight
|
||||
- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces
|
||||
- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders
|
||||
- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only
|
||||
- Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh
|
||||
- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg
|
||||
|
||||
### Don't
|
||||
- Don't use pure white (`#ffffff`) as primary text — `#f7f8f8` prevents eye strain
|
||||
- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)
|
||||
- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only
|
||||
- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative
|
||||
- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white
|
||||
- Don't skip the OpenType features (`"cv01", "ss03"`) — without them, it's generic Inter, not Linear's Inter
|
||||
- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse
|
||||
- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only
|
||||
- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <600px | Single column, compact padding |
|
||||
| Mobile | 600–640px | Standard mobile layout |
|
||||
| Tablet | 640–768px | Two-column grids begin |
|
||||
| Desktop Small | 768–1024px | Full card grids, expanded padding |
|
||||
| Desktop | 1024–1280px | Standard desktop, full navigation |
|
||||
| Large Desktop | >1280px | Full layout, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding with 6px radius minimum
|
||||
- Navigation links at 13–14px with adequate spacing
|
||||
- Pill tags have 10px horizontal padding for touch accessibility
|
||||
- Icon buttons at 50% radius ensure circular, easy-to-tap targets
|
||||
- Search trigger is prominently placed with generous hit area
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally
|
||||
- Navigation: horizontal links + CTAs → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Product screenshots: maintain aspect ratio, may reduce padding
|
||||
- Changelog: timeline maintains single-column through all sizes
|
||||
- Footer: multi-column → stacked single column
|
||||
- Section spacing: 80px+ → 48px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard screenshots maintain border treatment at all sizes
|
||||
- Hero visuals simplify on mobile (fewer floating UI elements)
|
||||
- Product screenshots use responsive sizing with consistent radius
|
||||
- Dark background ensures screenshots blend naturally at any viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Brand Indigo (`#5e6ad2`)
|
||||
- Page Background: Marketing Black (`#08090a`)
|
||||
- Panel Background: Panel Dark (`#0f1011`)
|
||||
- Surface: Level 3 (`#191a1b`)
|
||||
- Heading text: Primary White (`#f7f8f8`)
|
||||
- Body text: Silver Gray (`#d0d6e0`)
|
||||
- Muted text: Tertiary Gray (`#8a8f98`)
|
||||
- Subtle text: Quaternary Gray (`#62666d`)
|
||||
- Accent: Violet (`#7170ff`)
|
||||
- Accent Hover: Light Violet (`#828fff`)
|
||||
- Border (default): `rgba(255,255,255,0.08)`
|
||||
- Border (subtle): `rgba(255,255,255,0.05)`
|
||||
- Focus ring: Multi-layer shadow stack
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius)."
|
||||
- "Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px."
|
||||
- "Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510."
|
||||
- "Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`."
|
||||
- "Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always set font-feature-settings `"cv01", "ss03"` on all Inter text — this is non-negotiable for Linear's look
|
||||
2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px
|
||||
3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)
|
||||
4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark
|
||||
5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color — everything else is grayscale
|
||||
6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds
|
||||
7. Berkeley Mono for any code or technical content, Inter Variable for everything else
|
||||
25
design-md/linear.app/README.md
Normal file
25
design-md/linear.app/README.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# Linear.app — Design System
|
||||
|
||||
> Design.md extracted from the public [linear.app](https://linear.app.dev/) 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) |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Linear.app 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
|
||||
|
||||
385
design-md/linear.app/preview-dark.html
Normal file
385
design-md/linear.app/preview-dark.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Linear (Dark)</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #08090a;
|
||||
--bg-surface: #0f1011;
|
||||
--bg-elevated: #191a1b;
|
||||
--bg-hover: #28282c;
|
||||
--text-primary: #f7f8f8;
|
||||
--text-secondary: #d0d6e0;
|
||||
--text-tertiary: #8a8f98;
|
||||
--text-quaternary: #62666d;
|
||||
--brand: #5e6ad2;
|
||||
--accent: #7170ff;
|
||||
--accent-hover: #828fff;
|
||||
--success: #27a644;
|
||||
--emerald: #10b981;
|
||||
--border-primary: #23252a;
|
||||
--border-secondary: #34343a;
|
||||
--border-subtle: rgba(255,255,255,0.05);
|
||||
--border-standard: rgba(255,255,255,0.08);
|
||||
--shadow-ring: rgba(0,0,0,0.2) 0px 0px 0px 1px;
|
||||
--shadow-subtle: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;
|
||||
--shadow-card: rgba(0,0,0,0.2) 0px 0px 0px 1px, rgba(0,0,0,0.3) 0px 2px 4px 0px;
|
||||
--shadow-elevated: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.2) 0px 0px 0px 1px;
|
||||
--shadow-dialog: rgba(0,0,0,0) 0px 8px 2px 0px, rgba(0,0,0,0.01) 0px 5px 2px 0px, rgba(0,0,0,0.04) 0px 3px 2px 0px, rgba(0,0,0,0.07) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 0px 1px 0px;
|
||||
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--text-primary); color: var(--bg-page);
|
||||
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(8,9,10,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--accent); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 510; line-height: 1.00;
|
||||
letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-brand:hover { background: var(--accent); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 24px; border: 1px solid var(--border-standard); transition: border-color 0.2s, background 0.2s; }
|
||||
.card:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }
|
||||
.card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: -0.182px; }
|
||||
.form-input {
|
||||
width: 100%; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
border: 1px solid var(--border-standard); padding: 10px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }
|
||||
.form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }
|
||||
.form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.25); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: rgba(255,255,255,0.02); color: var(--text-secondary);
|
||||
border: 1px solid var(--border-standard); padding: 12px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-quaternary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--bg-elevated); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.8px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Linear</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-brand" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Background Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#08090a"></div><div class="color-swatch-info"><div class="color-swatch-name">Marketing Black</div><div class="color-swatch-hex">#08090a</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f1011"></div><div class="color-swatch-info"><div class="color-swatch-name">Panel Dark</div><div class="color-swatch-hex">#0f1011</div><div class="color-swatch-role">Sidebar, panels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191a1b"></div><div class="color-swatch-info"><div class="color-swatch-name">Level 3</div><div class="color-swatch-hex">#191a1b</div><div class="color-swatch-role">Elevated surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282c"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#28282c</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Content</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8"></div><div class="color-swatch-info"><div class="color-swatch-name">Primary Text</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Headings, primary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary Text</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8a8f98"></div><div class="color-swatch-info"><div class="color-swatch-name">Tertiary Text</div><div class="color-swatch-hex">#8a8f98</div><div class="color-swatch-role">Placeholders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62666d"></div><div class="color-swatch-info"><div class="color-swatch-name">Quaternary Text</div><div class="color-swatch-hex">#62666d</div><div class="color-swatch-role">Disabled, timestamps</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5e6ad2"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Indigo</div><div class="color-swatch-hex">#5e6ad2</div><div class="color-swatch-role">CTA backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7170ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Violet</div><div class="color-swatch-hex">#7170ff</div><div class="color-swatch-role">Links, active states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#828fff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#828fff</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7a7fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Security Lavender</div><div class="color-swatch-hex">#7a7fad</div><div class="color-swatch-role">Security UI</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#27a644"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#27a644</div><div class="color-swatch-role">Success, active</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#10b981"></div><div class="color-swatch-info"><div class="color-swatch-name">Emerald</div><div class="color-swatch-hex">#10b981</div><div class="color-swatch-role">Badges, completion</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Dividers</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#23252a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Primary</div><div class="color-swatch-hex">#23252a</div><div class="color-swatch-role">Strong borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#34343a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Secondary</div><div class="color-swatch-hex">#34343a</div><div class="color-swatch-role">Medium borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3e3e44"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Tertiary</div><div class="color-swatch-hex">#3e3e44</div><div class="color-swatch-role">Lighter borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#141516"></div><div class="color-swatch-info"><div class="color-swatch-name">Line Tint</div><div class="color-swatch-hex">#141516</div><div class="color-swatch-role">Subtle dividers</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Semi-transparent Borders</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Subtle Border</div><div class="color-swatch-hex">rgba(255,255,255,0.05)</div><div class="color-swatch-role">Default borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">Standard Border</div><div class="color-swatch-hex">rgba(255,255,255,0.08)</div><div class="color-swatch-role">Cards, inputs</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;">Display Headline</div><div class="type-meta">Display — 48px / 510 / 1.00 / -1.056px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;">Heading One</div><div class="type-meta">Heading 1 — 32px / 400 / 1.13 / -0.704px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;">Heading Two</div><div class="type-meta">Heading 2 — 24px / 400 / 1.33 / -0.288px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;">Heading Three</div><div class="type-meta">Heading 3 — 20px / 590 / 1.33 / -0.24px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.</div><div class="type-meta">Body Large — 18px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:510; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 510 / 1.50 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);">Small — Secondary body content and descriptions</div><div class="type-meta">Small — 15px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;">Caption — Sub-labels and category headers</div><div class="type-meta">Caption — 14px / 510 / 1.50 / -0.182px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px; color:var(--text-secondary);">Meta — Timestamps and metadata</div><div class="type-meta">Meta — 13px / 510 / 1.50 / -0.13px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:510; line-height:1.40;">Label — Small button text and tags</div><div class="type-meta">Label — 12px / 510 / 1.40 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);">const issue = await linear.createIssue({title});</div><div class="type-meta">Mono Body — 14px / 400 / 1.50 / Berkeley Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase; color:var(--text-quaternary);">ISSUE STATUS</div><div class="type-meta">Mono Label — 12px / 400 / uppercase / Berkeley Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-brand" href="#">Start Building</a><div class="button-label">Primary Brand</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(94,106,210,0.15); color:var(--accent); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">In Progress</span><div class="button-label">Status Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(16,185,129,0.15); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">Done</span><div class="button-label">Success Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(255,255,255,0.05); color:var(--text-primary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid rgba(255,255,255,0.05);">v2.4</span><div class="button-label">Subtle Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);">Filter</span><div class="button-label">Pill Chip</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(94,106,210,0.15); color:var(--accent);">Issues</div>
|
||||
<h3>Issue Tracking</h3>
|
||||
<p>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.</p>
|
||||
</div>
|
||||
<div class="card" style="border-color: var(--border-secondary); background: rgba(255,255,255,0.04);">
|
||||
<div class="card-badge" style="background:rgba(16,185,129,0.15); color:var(--emerald);">Cycles</div>
|
||||
<h3>Sprint Cycles</h3>
|
||||
<p>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(113,112,255,0.15); color:var(--accent);">Roadmaps</div>
|
||||
<h3>Product Roadmaps</h3>
|
||||
<p>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Issue Title</label><input class="form-input" type="text" placeholder="Enter issue title..."><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Assignee</label><input class="form-input form-input--focus" type="text" value="@alice"><div class="form-state-label">Focus (accent ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Priority</label><input class="form-input form-input--error" type="text" value="invalid priority"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe the issue..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">35</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:22px"></div><div class="radius-label">22px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Circles</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Micro-elevation</div></div>
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-standard);"><div class="elevation-label">Level 2: Surface</div><div class="elevation-desc">Border-defined depth</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-elevated);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Floating elements</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--accent);"><div class="elevation-label">Focus</div><div class="elevation-desc">Accent ring</div></div>
|
||||
<div class="elevation-card" style="box-shadow: inset rgba(0,0,0,0.2) 0px 0px 12px 0px;"><div class="elevation-label">Inset</div><div class="elevation-desc">Sunken panel</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://linear.app/">linear.app</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
375
design-md/linear.app/preview.html
Normal file
375
design-md/linear.app/preview.html
Normal file
@@ -0,0 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Linear (Light)</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #f7f8f8;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-panel: #f3f4f5;
|
||||
--text-primary: #1a1a1e;
|
||||
--text-secondary: #3c3c43;
|
||||
--text-tertiary: #62666d;
|
||||
--text-quaternary: #8a8f98;
|
||||
--brand: #5e6ad2;
|
||||
--accent: #7170ff;
|
||||
--accent-hover: #828fff;
|
||||
--success: #27a644;
|
||||
--emerald: #10b981;
|
||||
--border-primary: #d0d6e0;
|
||||
--border-subtle: #e6e6e6;
|
||||
--border-light: rgba(0,0,0,0.08);
|
||||
--shadow-ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;
|
||||
--shadow-subtle: rgba(0,0,0,0.04) 0px 2px 4px 0px;
|
||||
--shadow-card: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px 0px;
|
||||
--shadow-elevated: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 4px 12px 0px;
|
||||
--font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px; font-weight: 400; line-height: 1.50;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(247,248,248,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--accent); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 510; line-height: 1.00;
|
||||
letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-brand {
|
||||
display: inline-block; background: var(--brand); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 6px; border: none;
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-brand:hover { background: var(--accent); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: var(--bg-surface); color: var(--text-primary);
|
||||
padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);
|
||||
font-family: var(--font-sans); font-size: 14px; font-weight: 510;
|
||||
text-decoration: none; cursor: pointer; transition: border-color 0.15s;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--text-quaternary); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-ring); background: var(--bg-surface); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }
|
||||
.color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card { background: var(--bg-surface); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }
|
||||
.card:hover { box-shadow: var(--shadow-elevated); }
|
||||
.card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }
|
||||
.card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }
|
||||
.card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.182px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--bg-surface); color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary); padding: 10px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }
|
||||
.form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }
|
||||
.form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.2); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--bg-surface); color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary); padding: 12px 14px; border-radius: 6px;
|
||||
font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;
|
||||
font-feature-settings: "cv01" 1, "ss03" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }
|
||||
.radius-context { font-size: 10px; color: var(--text-quaternary); }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--bg-surface); border-radius: 8px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }
|
||||
.footer a { color: var(--accent); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 36px; letter-spacing: -0.8px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<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>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start Building</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Linear</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-brand" href="#">Start Building</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Background Surfaces</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#08090a"></div><div class="color-swatch-info"><div class="color-swatch-name">Marketing Black</div><div class="color-swatch-hex">#08090a</div><div class="color-swatch-role">Hero backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0f1011"></div><div class="color-swatch-info"><div class="color-swatch-name">Panel Dark</div><div class="color-swatch-hex">#0f1011</div><div class="color-swatch-role">Sidebar, panels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#191a1b"></div><div class="color-swatch-info"><div class="color-swatch-name">Level 3</div><div class="color-swatch-hex">#191a1b</div><div class="color-swatch-role">Elevated surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#28282c"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#28282c</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Text & Content</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8"></div><div class="color-swatch-info"><div class="color-swatch-name">Primary Text</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Headings, primary</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary Text</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#8a8f98"></div><div class="color-swatch-info"><div class="color-swatch-name">Tertiary Text</div><div class="color-swatch-hex">#8a8f98</div><div class="color-swatch-role">Placeholders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#62666d"></div><div class="color-swatch-info"><div class="color-swatch-name">Quaternary Text</div><div class="color-swatch-hex">#62666d</div><div class="color-swatch-role">Disabled, timestamps</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#5e6ad2"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Indigo</div><div class="color-swatch-hex">#5e6ad2</div><div class="color-swatch-role">CTA backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7170ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Violet</div><div class="color-swatch-hex">#7170ff</div><div class="color-swatch-role">Links, active states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#828fff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#828fff</div><div class="color-swatch-role">Hover states</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#7a7fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Security Lavender</div><div class="color-swatch-hex">#7a7fad</div><div class="color-swatch-role">Security UI</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#27a644"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#27a644</div><div class="color-swatch-role">Success, active</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#10b981"></div><div class="color-swatch-info"><div class="color-swatch-name">Emerald</div><div class="color-swatch-hex">#10b981</div><div class="color-swatch-role">Badges, completion</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Dividers</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#23252a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Primary</div><div class="color-swatch-hex">#23252a</div><div class="color-swatch-role">Strong borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#34343a"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Secondary</div><div class="color-swatch-hex">#34343a</div><div class="color-swatch-role">Medium borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#3e3e44"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Tertiary</div><div class="color-swatch-hex">#3e3e44</div><div class="color-swatch-role">Lighter borders</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Border</div><div class="color-swatch-hex">#e6e6e6</div><div class="color-swatch-role">Light mode borders</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Light Mode Neutrals</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f7f8f8; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Bg</div><div class="color-swatch-hex">#f7f8f8</div><div class="color-swatch-role">Light page background</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f3f4f5; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Surface</div><div class="color-swatch-hex">#f3f4f5</div><div class="color-swatch-role">Surface tint</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e6e6e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Pure White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Card surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d0d6e0"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Border</div><div class="color-swatch-hex">#d0d6e0</div><div class="color-swatch-role">Light mode dividers</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;">Display Headline</div><div class="type-meta">Display — 48px / 510 / 1.00 / -1.056px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;">Heading One</div><div class="type-meta">Heading 1 — 32px / 400 / 1.13 / -0.704px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;">Heading Two</div><div class="type-meta">Heading 2 — 24px / 400 / 1.33 / -0.288px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;">Heading Three</div><div class="type-meta">Heading 3 — 20px / 590 / 1.33 / -0.24px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.</div><div class="type-meta">Body Large — 18px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:510; line-height:1.50;">Body Medium — Navigation and emphasized text</div><div class="type-meta">Body Medium — 16px / 510 / 1.50 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;">Small — Secondary body content and descriptions</div><div class="type-meta">Small — 15px / 400 / 1.60 / -0.165px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;">Caption — Sub-labels and category headers</div><div class="type-meta">Caption — 14px / 510 / 1.50 / -0.182px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px;">Meta — Timestamps and metadata</div><div class="type-meta">Meta — 13px / 510 / 1.50 / -0.13px / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:510; line-height:1.40;">Label — Small button text and tags</div><div class="type-meta">Label — 12px / 510 / 1.40 / Inter Variable</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50;">const issue = await linear.createIssue({title});</div><div class="type-meta">Mono Body — 14px / 400 / 1.50 / Berkeley Mono</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase;">ISSUE STATUS</div><div class="type-meta">Mono Label — 12px / 400 / uppercase / Berkeley Mono</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-brand" href="#">Start Building</a><div class="button-label">Primary Brand</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(94,106,210,0.1); color:var(--brand); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">In Progress</span><div class="button-label">Status Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:rgba(16,185,129,0.1); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;">Done</span><div class="button-label">Success Pill</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:var(--bg-panel); color:var(--text-tertiary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid var(--border-subtle);">v2.4</span><div class="button-label">Subtle Badge</div></div>
|
||||
<div class="button-item"><span style="display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);">Filter</span><div class="button-label">Pill Chip</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(94,106,210,0.1); color:var(--brand);">Issues</div>
|
||||
<h3>Issue Tracking</h3>
|
||||
<p>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-elevated);">
|
||||
<div class="card-badge" style="background:rgba(16,185,129,0.1); color:var(--emerald);">Cycles</div>
|
||||
<h3>Sprint Cycles</h3>
|
||||
<p>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(113,112,255,0.1); color:var(--accent);">Roadmaps</div>
|
||||
<h3>Product Roadmaps</h3>
|
||||
<p>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">Issue Title</label><input class="form-input" type="text" placeholder="Enter issue title..."><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Assignee</label><input class="form-input form-input--focus" type="text" value="@alice"><div class="form-state-label">Focus (accent ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Priority</label><input class="form-input form-input--error" type="text" value="invalid priority"><div class="form-state-label">Error (red ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe the issue..."></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">35</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div><div class="radius-context">Badges</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Small</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Buttons</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div><div class="radius-context">Panels</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:22px"></div><div class="radius-label">22px</div><div class="radius-context">Large</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:9999px"></div><div class="radius-label">9999px</div><div class="radius-context">Pills</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:50%"></div><div class="radius-label">50%</div><div class="radius-context">Circles</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border-subtle);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Micro-elevation</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-card);"><div class="elevation-label">Level 2: Card</div><div class="elevation-desc">Ring + subtle lift</div></div>
|
||||
<div class="elevation-card" style="box-shadow: var(--shadow-elevated);"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Ring + deeper shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--accent);"><div class="elevation-label">Focus</div><div class="elevation-desc">Accent ring</div></div>
|
||||
<div class="elevation-card" style="box-shadow: inset rgba(0,0,0,0.1) 0px 0px 12px 0px;"><div class="elevation-label">Inset</div><div class="elevation-desc">Sunken panel</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://linear.app/">linear.app</a> DESIGN.md — awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user