Remixes of linkboard.framer.website
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
Linkboard embodies a bold, minimalist aesthetic rooted in monospace typography and high-contrast color blocking. The design system celebrates creative individuals by providing a sleek, tech-forward canvas that feels both personal and professional. Dark backgrounds anchor the interface, while bright accent colors and clean geometric forms create visual interest without clutter. The system balances technical precision (evident in JetBrains Mono as the primary typeface) with artistic flexibility, allowing personal brands to shine through custom imagery and thoughtful color accents. The overall mood is contemporary, confident, and distinctly designer-forward—a digital equivalent of a well-curated portfolio or personal brand statement.
Key Characteristics
#0000EE): Primary accent and interactive focus; dominant color for highlighting key actions and brand emphasis throughout the system#1C1C1C): Primary dark background for cards, containers, and primary text surfaces#2352DE): Secondary accent for supplementary interactions and varied emphasis states#0099FF): Tertiary accent for layered visual communication and secondary calls-to-action#6A3463): Supporting accent for brand personality and optional color theming#1EA873): Complementary accent for success states or alternative brand expressions#326B8A): Subdued accent for tertiary navigation or muted interactive states#000000): Text, borders, and high-contrast interactive elements#FFFFFF): Text on dark backgrounds and primary surface fillsrgba(0, 0, 0, 0.2)): Hover and interactive state overlays on light backgroundsrgba(0, 0, 238, 0.4)): Pill-shaped button background for secondary calls-to-action#1B1B1B): Alternative dark text and subtle borders#F5F5F2): Secondary light surface for minimal contrast scenarios#F3F2E9): Tertiary light surface with warm undertone#9C9C9C): Disabled text and subdued supporting information#DEDEDE): Subtle divider and border lines#C3D4DB): Soft text and secondary information overlay#000000): Primary text on light backgrounds; primary borders#1C1C1C): Main card and container background#DEDEDE): Light dividing lines and subtle card bordersPrimary: JetBrains Mono (monospace)
Fallback: 'Courier New', monospace
Secondary: sans-serif
Fallback: Arial, Helvetica, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | JetBrains Mono | 88px | 500 | 77.44px | Normal | Large hero heading; brand statement |
| Heading / H4 | JetBrains Mono | 32px | 500 | 35px | Normal | Section title and primary card header |
| Heading / H2 | JetBrains Mono | 24px | 500 | 23.28px | Normal | Sub-section heading; secondary title |
| Heading / H3 | JetBrains Mono | 18px | 600 | 40px | Normal | Tertiary heading; card subtitle |
| Heading / H5 | JetBrains Mono | 18px | 500 | 18px | Normal | Label and emphasis text |
| Heading / H5 (Small) | JetBrains Mono | 12px | 300 | 12px | Normal | Micro label and meta information |
| Body / Large | JetBrains Mono | 20px | 600 | 24px | Normal | Emphasized body text; strong content |
| Body / Regular | JetBrains Mono | 20px | 500 | 24px | Normal | Primary body copy and paragraph text |
| Input / Text | JetBrains Mono | 16px | 400 | 19.2px | Normal | Form input and text entry fields |
| Button / Label | sans-serif | 12px | 400 | Normal | Normal | Button text and action labels |
| Caption / Meta | JetBrains Mono | 9px | 400 | 7.92px | Normal | Tiny metadata and micro-captions |
12px400#000000#1C1C1C0px540px60px0px outset #00000060px#0A0A0A, increase scale 1.02×0.5, cursor not-allowed12px400#000000rgba(0, 0, 0, 0.2)0px40px40px0px none #00000040pxrgba(0, 0, 0, 0.35)rgba(0, 0, 0, 0.5)12px400#0000EErgba(255, 255, 255, 0.4)10px 15px115px32px0px none #0000EE60pxrgba(255, 255, 255, 0.6), shift color to #2352DErgba(255, 255, 255, 0.25)20px50024px#FFFFFFrgba(0, 0, 0, 0))0px0px none0px#0099FF, underline appears#0000EE20px60024px#FFFFFF0px0px none0px#0099FF, scale 1.05×#0000EE9px4007.92px#1C1C1C0px0px none0px#6A346316px40019.2px#1C1C1Crgba(0, 0, 0, 0))16px 16px 16px 0px540px51.2px0px none #1C1C1C0pxrgba(28, 28, 28, 0.5)2px solid #0000EE, background becomes rgba(0, 0, 238, 0.02)#9C9C9C, opacity 0.516px40019.2px#1C1C1C16px 16px 16px 0px540px140px0px none #1C1C1C0pxrgba(28, 28, 28, 0.5)2px solid #0000EE#9C9C9C, opacity 0.5#1C1C1C20px to 80px (context dependent)1px solid #DEDEDE0px (sharp edges) or 6px (soft variant)0px 4px 16px rgba(0, 0, 0, 0.15)6px#141414, shadow increases to 0px 8px 24px rgba(0, 0, 0, 0.25)#F5F5F2 or #FFFFFF28px to 64px1px solid #DEDEDE0px0px 2px 8px rgba(0, 0, 0, 0.08) (elevated)#000000200ms ease-out#000000 or #1C1C1C16px 32pxauto1px solid rgba(255, 255, 255, 0.1)32px between items14px500#FFFFFF8px 16px4pxrgba(255, 255, 255, 0.1), color stays #FFFFFF#0000EE, background becomes rgba(0, 0, 238, 0.15)rgba(255, 255, 255, 0.1)40px40px1px solid rgba(255, 255, 255, 0.2)8px#FFFFFF8pxrgba(0, 0, 238, 0.2), icon color becomes #0000EE, scale 1.1×rgba(0, 0, 238, 0.4), scale 0.95×The system uses an 8px base unit scaled into composite spacing values:
4px (tight internal spacing, gaps between stacked text)8px (small internal padding, compact component gaps)16px (standard internal padding, typical component margins)20px (comfortable padding on cards and containers)28px to 32px (section separation within cards)52px to 64px (major section spacing, between logical content blocks)80px (hero spacing, top-level container padding)Context Usage:
10px 15px (small-medium blend)20px (regular) or 32px (large sections)16px32px to 64px80px top/bottom540px (primary content container for inputs, buttons, forms)32px left/right margins32px minimum on left/right; expand to 64px on larger screensWhitespace is used as an active design element to create visual hierarchy and reduce cognitive load. The system employs generous breathing room around key content, particularly large typography and imagery. Cards and containers use internal padding of 20px minimum to ensure content doesn't feel cramped. Section-level gaps employ 52px to 80px of vertical spacing to create clear visual separation between content blocks. Whitespace reinforces the minimalist aesthetic and allows users to focus on essential information.
0px (primary geometric forms, form inputs, cards, typography-focused elements)4px (subtle rounding on nav items, secondary buttons)6px (image corners, tertiary UI elements)40px (small circular buttons, icon-only controls)60px (full-width rounded buttons, large pill-shaped CTAs)1px (card borders, subtle divider lines, secondary interactive elements)2px (form input focus state, primary dividers)3px (alternative primary button borders if used in outline variant)| Level | Treatment | Use |
|---|---|---|
| Base (Surface) | No shadow; flat | Inputs, form fields, text areas |
| Raised (1) | 0px 2px 8px rgba(0, 0, 0, 0.08) | Subtle container elevation, secondary cards |
| Elevated (2) | 0px 4px 16px rgba(0, 0, 0, 0.15) | Primary cards, hovered containers |
| High (3) | 0px 8px 24px rgba(0, 0, 0, 0.25) | Modal overlays, expanded menus, focused cards |
| Modal (4) | 0px 12px 40px rgba(0, 0, 0, 0.35) | Full-screen modal, dialog boxes |
Shadow Philosophy: Shadows are used sparingly to maintain the minimalist aesthetic while providing subtle depth cues for interactive elements. The system relies on opacity shifts and color changes alongside shadows to indicate state changes. Shadows increase in blur and spread as elevation increases, creating a clear visual hierarchy. On dark backgrounds, shadows are relatively subtle (rgba(0, 0, 0, 0.15) base) to avoid excessive contrast; on light backgrounds, shadows can be slightly more pronounced. Shadows always use pure black with opacity variations rather than tinted shadows.
0.5 (50%) — indicates unavailable or inactive state0.25 (25%) — very light interactive overlay, hover state on dark backgrounds0.30 (30%) — button background, secondary interactive state0.4 (40%) — pill button background, secondary container fill0.58 (58%) — active hover states, strong emphasis0.71 (71%) — high-contrast overlays, secondary dark layers0.79 (79%) — strong interactive overlays, modal backdrops0.89 (89%) — almost-full opacity, subtle transparency for depthz-index: 1 (default content, body text, images)z-index: 2 (hovered cards, secondary UI elements)z-index: 100 (sticky navigation, persistent headers)z-index: 1000 (modal dialogs, full-screen overlays, backdrops)z-index: 1200 (notifications, alerts, temporary messages)0px (sharp) for form inputs and primary cards, reserving 6px and 40px for secondary interactive elements20px minimum) to prevent visual crowding#0000EE bright blue as the primary interactive accent color for all primary CTAs and focus states#1C1C1C dark, #F5F5F2 light) to create visual rhythm and guide eye flowpadding-left: 0px or minimal left padding to create sharp, aligned appearance40px × 40px, large buttons 540px × 60px (adjust width as needed on mobile)16px horizontally; maintain readability and touch target size#000000, #FFFFFF, #1C1C1C, #0000EE, or #9C9C9C for primary content without design approval40px × 40px without explicit UX justification; maintain minimum touch target sizesrgba() format)#0000EE, #2352DE, and #0099FF hierarchy| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column; max content width 540px centered with 16px margins; buttons full-width; font sizes reduce by 10–15%; section padding reduces to 20px |
| Tablet | 768px–1023px | Single/dual column option; max content width 720px; buttons remain full-width on forms; section padding 32px; side-by-side layout for non-critical content |
| Desktop | 1024px+ | Flexible multi-column layouts; max content width 1200px; floating sidebar navigation option; section padding 64px; button widths can reduce to auto/fit-content |
44px × 44px (recommendation; 40px × 40px acceptable with adequate spacing)40px × 40px; large buttons 60px height minimum; width expands based on content/container8px around text links to create adequate tap area40px × 40px minimum with 8px internal padding8px gap between interactive elements to prevent accidental mis-taps40px × 40px button); menu expands vertically with 12px gaps between items540px to 100% - 32px (accounting for margins); height remains 51.2px or 140px for textarea16px margins; internal padding remains consistent (20px)max-width: 100%; aspect ratios maintained540px × 60px) become full-width minus margins on mobile; small buttons (40px × 40px) maintain size unless grouped (then flex wrap with 8px gap)88px to 48px on mobile; body text reduces from 20px to 16px for improved readability64px to 32px on mobile to compress layout while maintaining hierarchy#0000EE)#1C1C1C)#000000)#FFFFFF)#2352DE)#0099FF)#F5F5F2)#9C9C9C)#DEDEDE)Font Family Rule: Use JetBrains Mono for all headings, body text, and labels except buttons (which use sans-serif, 12px, weight 400). Maintain consistent line-height ratios (88px H1 uses 77.44px LH; 20px body uses 24px LH).
Button Styling Rule: Primary buttons are #1C1C1C background, 12px sans-serif, 60px height, 60px border-radius (pill-shaped), full-width or 540px max. Secondary pill buttons use rgba(255, 255, 255, 0.4) background with #0000EE text, 32px height, 60px border-radius, 10px 15px padding.
Color Accent Rule: Bright Blue (#0000EE) is the primary interactive accent used for focus states, primary links, and hover indicators. Secondary accents (#2352DE, #0099FF) are applied sparingly for alternative states or branded theming. All accent colors on light backgrounds require 0.4 opacity or semi-transparent treatment for visual balance.
Form Input Rule: Inputs use JetBrains Mono, 16px, #1C1C1C text, transparent background, 16px left/right padding (leading edge padding removed), and 51.2px height for text inputs or 140px for textareas. On focus, apply 2px solid #0000EE bottom border only (no full border). No rounded corners (0px border-radius).
Spacing Consistency Rule: Apply 20px padding to card containers, 32px between sections, 16px form field padding, and 8px gaps between adjacent UI components. Scale spacing proportionally on mobile: reduce 32px sections to 20px, maintain 16px on inputs, reduce 80px hero padding to 40px.
Component Opacity Rule: Use opacity shifts for state communication: disabled 0.5, subtle overlay 0.25, medium interactive overlay 0.3, button background 0.4, strong hover 0.58. Never use pure color overlays without opacity; always apply rgba() format with calculated opacity values.
Dark Background Pattern: Establish #1C1C1C or #000000 as dominant background; layer light surfaces (#F5F5F2, #FFFFFF) strategically for contrast. Use 1px solid #DEDEDE borders only on light surfaces; use 1px solid rgba(255, 255, 255, 0.1) on dark backgrounds.
Hover & Active State Rule: Hover states increase shadow elevation (0px 2px 8px → 0px 4px 16px) and shift color to secondary accent or increase opacity +0.15. Active states reduce scale by 0.98× and darken background by 2–3 shade steps. Disabled states reduce opacity to 0.5 and set cursor to not-allowed.
Border Radius Hierarchy Rule: Use 0px for forms, cards, and primary containers (sharp geometric aesthetic). Apply 4px to nav items and tertiary buttons; 6px to image corners; 40px to small icon buttons; 60px to large pill-shaped CTAs. Never mix radii on related components; maintain consistency within component families.
Responsive Collapse Rule: Mobile-first approach: form inputs become 100% - 32px (accounting for margins); buttons stack vertically with 12px gaps; typography reduces by 30–40% (e.g., H1 88px → 48px); section padding reduces by 50% (e.g., 64px → 32px). At 768px+ breakpoint, expand to two-column layouts; at 1024px+, enable flexible multi-column with max-width 1200px.