Switch between the rendered Visual preview and the Raw DESIGN.md.
Termly's design system embodies a modern, developer-centric aesthetic built for the terminal and mobile AI coding assistant ecosystem. The visual language is deliberately minimal and high-contrast, prioritizing clarity and functionality over decoration. A deep, almost-black background (#0A0A0A) paired with a vibrant neon green accent (#4ADE80) creates a striking, technical atmosphere reminiscent of classic terminal interfaces. The design communicates speed, precision, and accessibility — essential qualities for a CLI tool that bridges desktop AI assistants to mobile workflows. Typography is bold and geometric, with the Syne family dominating headlines to convey confidence and modernity, while code-focused monospace fonts ground the interface in developer authenticity.
Key Characteristics:
#4ADE80): Primary CTA buttons, highlights, and active states; dominant action color for mobile and web interfaces.#15803D): Hover and pressed states for green buttons; deeper success emphasis.#93C5FD): Secondary accent for information, links, and complementary highlights.#28C840): Success state indicators and positive feedback.#16A34A): Alternative success color for longer-form status messaging.#FFBD2E): Warning and cautionary state indicators.#FF5F57): Error states and destructive actions.#0A0A0A): Primary dark background color.#080808): Deeper background variant for layered depth.#000000): Darkest background or text overlay.#1A1A1A): Alternative deep background.#111827): Subtle background or disabled state backgrounds.#374151): Secondary text, disabled states, or muted UI.#4B5563): Tertiary text or low-emphasis content.#D1D5DB): Dividers, borders on light backgrounds.#EDEDED): High-contrast borders on dark backgrounds.#E5E7EB): Light background surfaces, subtle contrast.#FFFFFF): Text on dark backgrounds, primary text color, light surfaces.#0000): Transparent overlay or no-fill states.Primary (Headlines):
Font stack: Syne, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Used for all display and heading hierarchy; provides bold, geometric personality.
Secondary (Body & UI):
Font stack: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Used for body copy, buttons, links, and general UI text; clean and legible.
Code & Technical:
Font stack: "JetBrains Mono", "ui-monospace", Menlo, Monaco, "Courier New", monospace
Used for code blocks, CLI commands, and technical snippets.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 (h1) | Syne | 32px | 700 | 48px | Normal | Large hero headlines and main page titles |
| Display 2 / Heading 1 (h1) | Syne | 16px | 800 | 16.64px | Normal | Feature section headers, maximum boldness |
| Heading 2 (h2) | Syne | 32px | 700 | 48px | Normal | Section titles and card headers |
| Heading 3 (h3) | Syne | 16px | 600 | 24px | Normal | Subsection headers, feature cards |
| Subheading (span) | Syne | 18px | 700 | 27px | Normal | Callouts and emphasize secondary headline |
| Body | Figtree | 16px | 400 | 24px | Normal | Primary body text, paragraphs, descriptions |
| Body Small | Figtree | 14px | 400 | 21px | Normal | Secondary body text, helper text, metadata |
| Button | Figtree | 14px | 600 | 21px | Normal | CTA and button labels |
| Button Small | Figtree | 13px | 400 | 19.5px | Normal | Tertiary buttons and small CTAs |
| Link | Figtree | 14px | 400 | 21px | Normal | Inline and standalone links |
| Caption | Figtree | 13px | 400 | 19.5px | Normal | Image captions, footnotes, metadata |
| Code | JetBrains Mono | 13px | 400 | 19.5px | Normal | Inline and block code snippets |
| List Item | Figtree | 16px | 400 | 24px | Normal | Bullet and ordered list items |
600–800) command visual hierarchy and developer attention without increasing size.13px for captions; primary body content always at 16px or larger.#4ADE80#0A0A0A14px600Figtree11px 18px10px50px21px#22C55E (darker green)#15803D, text #FFFFFFrgba(255, 255, 255, 0.2), text rgba(255, 255, 255, 0.4)rgba(255, 255, 255, 0.06)rgba(255, 255, 255, 0.85)14px500Figtree11px 18px10px1px solid rgba(255, 255, 255, 0.11)50px21pxrgba(255, 255, 255, 0.1), border rgba(255, 255, 255, 0.2)rgba(255, 255, 255, 0.15), text rgba(255, 255, 255, 0.95)rgba(255, 255, 255, 0.03), text rgba(255, 255, 255, 0.3)transparentrgba(255, 255, 255, 0.6)13px400Figtree7px 13px8px1px solid rgba(255, 255, 255, 0.1)35.5px19.5pxrgba(255, 255, 255, 0.08), text rgba(255, 255, 255, 0.8), border rgba(255, 255, 255, 0.15)rgba(255, 255, 255, 0.12), text rgba(255, 255, 255, 0.95)transparentrgba(255, 255, 255, 0.5)16px400Figtree0px0px36px36px24pxrgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.95)transparentrgba(255, 255, 255, 0.5)15px400Figtree0px0pxauto22.5pxrgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.95)rgba(255, 255, 255, 0.03)rgba(255, 255, 255, 0.82)16px400Figtree24px14px1px solid rgba(255, 255, 255, 0.07)213px24pxrgba(255, 255, 255, 0.05), border rgba(255, 255, 255, 0.12)rgba(0, 0, 0, 0.4)#4ADE8013px400JetBrains Mono16px 20px8px1px solid rgba(255, 255, 255, 0.1)19.5pxauto with horizontal scrollrgba(255, 255, 255, 0.06)rgba(255, 255, 255, 0.9)rgba(255, 255, 255, 0.4)14px400Figtree11px 16px8px1px solid rgba(255, 255, 255, 0.1)44pxrgba(74, 222, 128, 0.5), background rgba(255, 255, 255, 0.08)rgba(255, 255, 255, 0.02), text rgba(255, 255, 255, 0.3), border rgba(255, 255, 255, 0.05)#FF5F57, background rgba(255, 95, 87, 0.1)rgba(255, 255, 255, 0.06)rgba(255, 255, 255, 0.9)14px400Figtree12px 16px8px1px solid rgba(255, 255, 255, 0.1)120px21pxverticalrgba(74, 222, 128, 0.5), background rgba(255, 255, 255, 0.08)transparentrgba(255, 255, 255, 0.82)16px400Figtree0px 24px0px56px24pxrgba(255, 255, 255, 0.95)#4ADE80transparentrgba(255, 255, 255, 0.48)14px400Figtree0px0px21pxrgba(255, 255, 255, 0.8)#4ADE80rgba(255, 255, 255, 0.5)#4ADE80#0A0A0A2px solid #4ADE8050%40px70016pxtransparentrgba(255, 255, 255, 0.5)2px solid rgba(255, 255, 255, 0.3)50%40px2px solid rgba(74, 222, 128, 0.5)rgba(74, 222, 128, 0.3) to #4ADE80Base Unit: 4px
Scale:
4px — Micro spacing (icon padding, tight adjacency)8px — XS (gap between form elements, small button padding)12px — Small (component gaps, tight sections)16px — Base (standard component padding, section dividers)20px — Medium (content margins)24px — Card padding, standard section spacing28px — Large gap (between feature sections)32px — XL padding (hero padding, hero section gaps)40px — XXL padding (container padding)48px — Large section spacing, vertical rhythm56px — Hero spacing, major section separation64px — Maximum container padding, page edgesUsage Context:
8px–16px internal padding24px–32px padding28px–64px depending on visual weight12px–24px1440px (desktop full-bleed content)1200px for text-heavy sections; 1440px for hero/showcase sections24px on desktop, 16px on tablet, 12px on mobile264px), 2-column on tablet, 1-column on mobile240px–320px sidebar on desktopTermly prioritizes breathing room and visual clarity over density. Whitespace frames content and guides focus. Sections are separated by substantial vertical gaps (48px–64px minimum) to create visual hierarchy and rest points for the eye. Cards and containers use internal padding (24px–32px) to prevent text cramping. Interactive elements are surrounded by adequate hit-area spacing to prevent accidental clicks. Horizontal whitespace (gutters) provides rhythm and prevents overscan on wide screens.
0px — Navigation bars, full-width sections, text buttons7px — Small image overlays, compact rounded corners8px — Ghost buttons, small cards, input fields, code blocks10px — Primary and secondary action buttons14px — Feature cards, large containers, modal dialogs| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, flat background | Text buttons, transparent overlays, inactive states |
| Raised (L1) | 0px 2px 8px rgba(0, 0, 0, 0.3) | Ghost buttons, secondary buttons, tertiary cards |
| Elevated (L2) | 0px 4px 16px rgba(0, 0, 0, 0.4) | Primary buttons on hover, input focus states, interactive cards |
| Modal (L3) | 0px 20px 48px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1) | Dialogs, modals, dropdown menus, popovers |
| Floating (L4) | 0px 28px 64px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(74, 222, 128, 0.3) | Sticky headers, floating action buttons, tooltips with green glow |
Shadow Philosophy:
Termly uses minimal shadows to maintain the flat, technical aesthetic. Shadows are soft and darkly tinted to blend into the deep background. Elevation is implied through layering and transparency rather than hard drop shadows. Only interactive states and modal-level components receive shadow treatment. The optional green glow on floating elements (L4) reinforces the accent color hierarchy without overwhelming the interface.
#4ADE80) for all primary CTAs — It's the system's energy color and signals action.4.5:1).264px × 213px feature cards).1px solid rgba(255, 255, 255, 0.07)–0.12 adds definition without harshness.8px–16px gaps for micro-interactions; 28px–64px for macro sections.#93C5FD) is secondary; avoid using it on primary CTAs.0.2s–0.3s easing) over flashy effects.14px; captions are 13px but only for metadata.264px width — Maintain proportional card dimensions for rhythm and consistency.:focus styles for keyboard accessibility.16px and gaps to 12px, but never remove breathing room entirely.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile (xs) | 0px–640px | 1 column layout, full-width containers, 12px gutters, 16px padding, single card rows, navigation collapses to hamburger menu |
| Small (sm) | 641px–768px | 1–2 column layouts, 16px gutters, 20px padding, 2-column card grids begin, smaller headings reduced by 4px |
| Medium (md) | 769px–1024px | 2–3 column layouts, 20px gutters, 24px padding, 2-column feature card grids, navigation horizontal, secondary sidebar visible |
| Large (lg) | 1025px–1280px | 3–4 column layouts, 24px gutters, 32px padding, 4-column feature card grids, full navigation and sidebar layout |
| Extra Large (xl) | 1281px–1920px | Full 4-column + sidebar, 24px gutters, 40px padding, hero sections at full viewport width, max container enforced at 1440px |
| XXL (2xl) | 1921px+ | Content width capped at 1440px, centered with equal margins, 64px side padding, navigation sticky |
44px × 44px (buttons, icon buttons, interactive elements on mobile)50px × 50px or larger for primary CTAs and frequently-tapped elements36px × 36px minimum (with 8px–12px tap area padding beyond visual bounds)21px line height with 8px above and below for touch padding8px horizontal and vertical separation to prevent mis-taps32px at lg to 24px at sm). Line heights remain proportional.16px.40px (lg) to 16px (xs), maintaining proportional breathing room.24px (lg) to 12px (xs) without complete removal.100% with object-fit: contain to maintain aspect ratio; intrinsic width never exceeds 100vw.#4ADE80)rgba(255, 255, 255, 0.06) background)#0A0A0A)#080808)#FFFFFF)rgba(255, 255, 255, 0.82)rgba(255, 255, 255, 0.5)#FFFFFF) with Syne fontrgba(255, 255, 255, 0.48), active state #4ADE80rgba(255, 255, 255, 0.07)rgba(255, 255, 255, 0.12)#28C840)#FFBD2E)#FF5F57)rgba(255, 255, 255, 0.03)rgba(255, 255, 255, 0.06)Start with the dark background — Always apply #0A0A0A or #080808 as the base; this defines the visual space and makes green accents pop.
Use green (#4ADE80) exclusively for primary interactions — Every primary button, active link, and main CTA must use this color; no exceptions. Hover state darkens to #22C55E, pressed state to #15803D.
Apply Syne font to all headlines — h1, h2, h3, and display text use Syne at weights 600–800; this creates visual hierarchy without size increases.
Maintain strict spacing scale — All padding and gaps must align to the 4px base unit scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px); deviations break the rhythm.
Wrap card content in subtle containers — Feature cards, code blocks, and content sections use rgba(255, 255, 255, 0.03) background with 1px solid rgba(255, 255, 255, 0.07) border and 14px border radius; this creates layering depth.
Reserve monospace (JetBrains Mono) for code only — All technical content (commands, snippets, inline code) must use monospace at 13px, 400 weight; never use serif or other fonts for code.
Ensure minimum contrast ratios — All text on dark backgrounds must achieve 4.5:1 (WCAG AA); test with contrast checkers if text color exceeds rgba(255, 255, 255, 0.4).
Size buttons consistently — Primary and secondary buttons are always 50px tall with 11px 18px padding; ghost buttons 35.5px tall with 7px 13px padding; maintain exact dimensions.
Apply transparent layers for depth — Use rgba(0, 0, 0, 0.3) to 0.5 overlays on media, rgba(255, 255, 255, 0.03) to 0.1) for UI elements; avoid opaque blacks or whites except for text.
Implement responsive scaling at breakpoints — At md and below, reduce padding to 16px–20px, gaps to 12px–16px, and heading sizes by 4px–8px; always test on mobile to confirm readability.
Keep interactions subtle — Hover states add opacity or slight color shifts; no scale transforms or blur effects unless explicitly specified.
Test on monospace terminals and mobile screens — The design must feel cohesive in CLI environments (dark terminal, green text) and on small screens; if it looks out of place on either, refine spacing or typography.