Switch between the rendered Visual preview and the Raw DESIGN.md.
Lordicon embodies a modern, playful, and approachable design philosophy centered around making animated icons accessible and delightful. The visual language is clean and minimalist, with a bright, energetic teal accent that conveys innovation and forward-thinking. The design prioritizes clarity and usability while maintaining a contemporary aesthetic with generous whitespace, soft rounded corners, and subtle depth. The overall mood is friendly and professional—perfect for creative professionals and developers who value both functionality and visual polish. Icons and decorative elements are hand-crafted with careful attention to detail, creating a sense of quality and craftsmanship that resonates throughout the interface.
Key Characteristics
#08C18A): Main call-to-action buttons, interactive states, accent highlights, and primary brand moments#121330): Primary text, headings, and dominant interface elements#0FA564): Secondary accent, hover states, and alternative interactive elements#097F52): Deepened teal for active states and tertiary accents#1C91E7): Complementary accent for special highlights#CEF3E8): Light teal background tint for emphasis areas#08C18A): Buttons, links in focus state, interactive component backgrounds#0FA564): Button hover and active states#FFFFFF): Primary background, card surfaces, and high-contrast text backgrounds#FAFAFB): Subtle background tint for secondary surfaces#E7E7EA): Borders, dividers, and tertiary backgrounds#EEE8FB): Alternative light background for content areas#E6F9F3): Subtle background emphasis for teal-related sections#E7E7EA): Card borders, input outlines, and dividing lines#717181): Secondary text, disabled states, and placeholder text#FFC738): Warning alerts and cautionary states#F44336): Standard error states and destructive actions#DF3226): Secondary error indication#C02319): Tertiary error state for emphasisPrimary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif Secondary: Inter (used exclusively throughout)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Inter | 44px | 600 | 61.6px | 0px | Large hero/banner text |
| Heading 2 | Inter | 32px | 600 | 44.8px | 0px | Section headlines |
| Heading 3 | Inter | 24px | 600 | 33.6px | 0px | Subsection titles |
| Heading 5 | Inter | 16px | 600 | 28px | 0px | Card titles, sidebar headers |
| Body | Inter | 16px | 500 | 28px | 0px | Paragraph text, descriptions |
| Body Small | Inter | 14px | 400 | 20px | 0px | Secondary descriptions, captions |
| Button | Inter | 14px | 400 | 24.5px | 0px | Button labels and CTAs |
| Input | Inter | 14px | 400 | 65px | 0px | Form input text |
| Label | Inter | 16px | 500 | 28px | 0px | Form labels and field names |
#08C18A#FFFFFF14px4005px 10px34.5px (flexible height: auto for inline buttons)8px0px nonenone24.5px#0FA564, text #FFFFFF#097F52, text #FFFFFF#E7E7EA, text #717181, cursor not-allowedrgba(0, 0, 0, 0) (transparent)#FFFFFF14px4005px 10px34.5px8px1px solid #FFFFFFnone24.5pxrgba(255, 255, 255, 0.1), text #FFFFFFrgba(255, 255, 255, 0.2), text #FFFFFFrgba(0, 0, 0, 0) (transparent)#08C18A14px4005px 10pxautoauto8px0px nonenone24.5px#0FA564, background rgba(8, 193, 138, 0.05)#097F52, background rgba(8, 193, 138, 0.1)#FFFFFF#12133014px4005px 10pxautoauto8px0px nonenone24.5px#FAFAFB, text #121330#E7E7EA, text #121330#FFFFFF1px solid #E7E7EA12px (default), 16px (featured cards)rgba(0, 0, 0, 0.05) 0px 3px 6px 0px (subtle elevation)20px to 32px (interior spacing based on card type)rgba(0, 0, 0, 0.08) 0px 6px 12px 0pxrgba(0, 0, 0, 0) (transparent, inherits surface)#12133014px4001px 2px65px (tall search input variant)100% (full container width)0px (clean, flat appearance)0px none (no visible border; relies on underline or background)65px#717181 (neutral gray)0px 1px 0px 0px #08C18A (teal underline), text #1213300px 1px 0px 0px #F44336, text #121330rgba(0, 0, 0, 0) (transparent)#12133016px6000px (relies on parent container spacing)72px (header height)1200px (max-width container)0px0px nonenone28px#08C18A, underline 2px solid #08C18A#0FA564rgba(0, 0, 0, 0) (transparent)#12133016px5000pxauto (inline)auto0px0px nonenone28px#08C18A, text-decoration underline#0FA5642px solid #08C18A, outline-offset 2px#CEF3E8 (light mint tint)#08C18A14px5004px 12pxauto16px (fully rounded pill)0px nonenone20px#E6F9F3, text #0FA564#FFE7E5, text #F44336#FFF5E0, text #FFC738Base Unit: 4px
Spacing Scale:
4px — Micro gaps, icon spacing within elements8px — Tight spacing, inner button padding12px — Small gaps between related elements16px — Standard gap between components20px — Card internal padding, medium spacing32px — Large padding, section spacing40px — Generous spacing between content blocks60px — Margin between major sections72px — Header/navigation height spacing80px — Large section separation120px — Page-level margin, hero section spacingUsage Context:
1200px (primary navigation and content container)32px on desktop (sides), 20px on tablet, 16px on mobile80px to 120px vertical margin between major sectionsLordicon's design emphasizes generous whitespace to reduce cognitive load and create a premium feel. Each section is given ample breathing room, with spacing scaling proportionally across breakpoints. Cards and containers are never cramped; padding is consistently applied to maintain visual rhythm. Whitespace guides the eye toward focal points (CTAs, key messaging) and creates visual hierarchy through negative space rather than visual noise.
| Level | Treatment | Use |
|---|---|---|
| None | No shadow | Flat backgrounds, text elements, inline components |
| Subtle | rgba(0, 0, 0, 0.05) 0px 3px 6px 0px | Default cards, dropdowns, quiet elevation |
| Medium | rgba(0, 0, 0, 0.08) 0px 6px 12px 0px | Card hover states, modals, lifted containers |
| Strong | rgba(0, 0, 0, 0.12) 0px 12px 24px 0px | Floating action buttons, elevated overlays |
| Heavy | rgba(0, 0, 0, 0.15) 0px 20px 40px 0px | Full-page modals, toast notifications |
Shadow Philosophy: Lordicon uses shadows sparingly and with restraint, preferring subtle depth cues over dramatic drop shadows. Shadows are warm and soft, achieved through opacity rather than hard black, and serve to separate layers without dominating the visual hierarchy. Most interface elements remain flat; elevation is reserved for truly interactive or floating components. This approach maintains the modern, minimalist aesthetic while providing necessary spatial cues for usability.
44px height on mobile for comfortable interaction16px spacing for clarity and accessibility2px solid #08C18A outlines for keyboard navigation14px for body text; maintain readability20px minimum internal padding4px except in very rare, specific contexts12px between unrelated components; preserve visual separation| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, 16px padding, touch targets 48px+ |
| Tablet | 480px–767px | Two-column layout, 20px padding, reduced spacing |
| Desktop | 768px–1200px | Full layout, 32px padding, standard spacing |
| Large Desktop | 1200px+ | Max-width container 1200px, centered |
44px × 44px for interactive elements on mobile48px × 48px or larger for buttons and links on touch screens8px between touch targets to prevent accidental activation34.5px for web-only interfaces< 768px), revealing links in a slide-out drawer80px becomes 40px), 75% on tablet44px display text on all sizes; reduce heading sizes by 4px–8px on mobile32px (desktop) → 20px (tablet) → 16px (mobile)100%#08C18A)#0FA564)#FFFFFF)#121330)#121330)#717181)#E7E7EA)#F44336)#FFC738)#FFFFFF)rgba(0, 0, 0, 0.05) 0px 3px 6px 0px#08C18A) outline#E7E7EA) background, Neutral Gray (#717181) textrgba(0, 0, 0, 0.05) 0px 3px 6px 0px; hover state increases shadow to rgba(0, 0, 0, 0.08) 0px 6px 12px 0px.0px 1px 0px 0px #08C18A).< 480px) uses 16px padding, tablet (480px–768px) uses 20px padding, desktop (768px+) uses 32px padding; all touch targets minimum 44px, preferably 48px.