Design System Inspired by fromanother
1. Visual Theme & Atmosphere
The fromanother design system embodies a sophisticated, forward-thinking aesthetic rooted in artistic exploration and minimalist elegance. Deep indigo and midnight blue backgrounds create an immersive, contemplative environment that evokes curiosity and creative possibility. Glowing cyan accents pierce through the darkness, symbolizing innovation and artistic vision emerging from introspection. The system prioritizes whitespace and deliberate typography, allowing content to breathe while maintaining a high-end, gallery-like quality. This is a design language for visionary creators—intimate yet ambitious, refined yet bold—that celebrates artistic collaboration and cross-disciplinary thinking.
Key Characteristics
- Deep, dark backgrounds establishing premium aesthetic and focus
- Luminescent cyan glows creating visual depth and dynamic energy
- Minimal, refined color palette emphasizing restraint and sophistication
- Generous whitespace and breathing room throughout layouts
- Typography-first hierarchy with substantial scale variations
- Subtle interaction states without overtness
- Gallery-inspired presentation with clear focal points
- Artistic, contemporary sensibility across all elements
2. Color Palette & Roles
Primary
- Cream (
#FFFDE2): Primary text, interactive elements, and dominant accent color used throughout UI; creates warm contrast against deep backgrounds
- Deep Navy (
#051236): Primary background color establishing the core dark aesthetic and immersive foundation
Accent Colors
- Electric Cyan (
#1740A9): Secondary accent for highlights, glows, and premium interactive moments; represents artistic energy and innovation
- Sky Blue (
#D2E4F4): Tertiary accent for subtle highlighting and delicate emphasis; maintains sophistication in secondary contexts
Neutral Scale
- Black (
#000000): Deepest neutrals and absolute contrast anchors
- Near Black (
#0A0A0A): Subtle variation for layered depth
- Charcoal (
#111111): Deep neutral for selective accents and refinement
Surface & Borders
- All surfaces inherit from the Deep Navy (
#051236) base with opacity variations for depth
- Text surfaces use Cream (
#FFFDE2) at 100% opacity for maximum clarity
- Interactive elements layer Cream with opacity shifts between
97% and 99% for refined hover states
3. Typography Rules
Font Family
Primary Display Font: twkFont (serif/contemporary display face)
- Fallback stack:
twkFont, 'Times New Roman', serif
Secondary Body Font: herbikFont (geometric sans-serif)
- Fallback stack:
herbikFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Display XL | twkFont | 82.5px | 600 | 74.25px | 0px | Hero headline, maximum impact |
| Display L | twkFont | 66px | 700 | 66px | 0px | Major section headings |
| Display M | twkFont | 66px | 600 | 66px | 0px | List item headings, featured content |
| Label Tiny | twkFont | 7.5px | 400 | 11.25px | 0px | Micro labels, navigation hints |
| Body | herbikFont | 12px | 500 | 10.8px | 0px | Standard body content |
| Label XS | herbikFont | 12px | 700 | 10.8px | 0px | Emphasis labels, strong callouts |
| Label XXS | herbikFont | 9px | 700 | 8.1px | 0px | Secondary labels, footnotes |
| Link Standard | twkFont | 10.5px | 550 | normal | 0px | Standard hyperlinks |
Principles
- Typography scale uses dramatic size jumps to create visual hierarchy and direct attention
- Display fonts command presence; body fonts prioritize legibility and refinement
- Line heights are intentionally tight (90–110% of font size) for modern sophistication
- Letter spacing remains uniform across the system for consistency; no tracking variations
- Font weight is primary tool for emphasis; size is secondary
- Micro type (7.5px–9px) reserved for metadata, navigation, and supplementary content only
- All text renders at Cream (
#FFFDE2) against dark backgrounds for maximum contrast
4. Component Stylings
Buttons
Primary Button
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#FFFDE2
- Font: twkFont, 82.5px, 600
- Line Height: 74.25px
- Padding:
0px
- Border:
0px none
- Border Radius:
0px
- Box Shadow: none
- Hover State: Text opacity
0.97
- Active State: Text opacity
0.95
Secondary Button
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#FFFDE2
- Font: twkFont, 7.5px, 400
- Line Height: 11.25px
- Padding:
0px
- Border:
0px none
- Border Radius:
0px
- Box Shadow: none
- Hover State: Text opacity
0.97
Tertiary Button (Small)
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#FFFDE2
- Font: herbikFont, 9px, 500
- Line Height: normal
- Padding:
0px
- Border:
0px none
- Border Radius:
0px
- Box Shadow: none
- Hover State: Text opacity
0.98
Cards & Containers
Standard Card
- Background:
rgba(0, 0, 0, 0) (transparent, inherits parent)
- Width: 378px
- Height: 412.5px
- Text Color:
#FFFDE2
- Font: twkFont, 7.5px, 400
- Line Height: 11.25px
- Padding:
0px
- Border:
0px none
- Border Radius:
0px
- Box Shadow: none
- Interior Spacing: Apply margin/padding from spacing scale as needed
Links
Link – Standard
- Text Color:
#FFFDE2
- Font: twkFont, 7.5px, 400
- Line Height: 11.25px
- Text Decoration: none (or underline on hover if context requires)
- Background: transparent
- Border: none
- Hover State: Text opacity
0.97
- Active State: Text opacity
0.95
Link – Emphasis
- Text Color:
#FFFDE2
- Font: twkFont, 10.5px, 550
- Line Height: normal
- Hover State: Text opacity
0.97
- Cursor: pointer
Navigation
Navigation Item
- Text Color:
#FFFDE2
- Font: twkFont, 7.5px, 400
- Line Height: 11.25px
- Background: transparent
- Border: none
- Padding:
0px
- Hover State: Text opacity
0.98
- Active State: Text opacity
1.0 with potential underline or highlight
5. Layout Principles
Spacing System
Base Unit: 4px
Scale:
- 4px (xs): Micro-spacing, internal component gaps
- 8px (s): Small padding, compact groupings
- 12px (m): Standard internal padding, tight sections
- 16px (md): Regular margins, moderate spacing
- 20px (lg): Substantial gaps, breathing room between sections
- 24px (xl): Large section separations
- 32px (xxl): Major layout divisions
- 36px (xxxl): Generous padding for featured content
- 60px (huge): Substantial padding for hero and premium sections
- 156px (mega): Maximum padding for dramatic spacing in hero areas
Usage Context:
- 4px–8px: Component internal spacing, borders, dividers
- 12px–16px: Between related grouped elements
- 20px–24px: Between content sections
- 32px–36px: Between major layout regions
- 60px+: Hero sections, dramatic vertical breathing room
Grid & Container
- Max Width: Full viewport (responsive)
- Columns: Flexible grid with 378px card modules (visible in card width)
- Section Patterns: Hero sections dominate viewport height with centered content; content sections use generous margins and padding for breathing room
- Container Strategy: Content-first, with dark background extending full width; internal content constrained by strategic padding rather than fixed container
Whitespace Philosophy
Whitespace is treated as an active design element establishing sophistication and focus. Layouts prioritize vertical rhythm through generous top/bottom spacing (60px–156px) over cramped horizontal density. Navigation and footer elements remain minimal and unobtrusive. Central content areas leverage dramatic whitespace to isolate focal points and create gallery-like presentation. No element competes for attention; hierarchy flows naturally through scale, color, and intentional empty space.
Border Radius Scale
0px (none): All components use sharp, geometric corners reflecting contemporary minimalism- No rounded corners in the system; maintains architectural precision and modern aesthetic
Border Widths
- Thin:
1px (used in button borders when needed; not visually prominent in primary system)
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Base (1) | No shadow, flat | Standard content, backgrounds |
| Layer (2) | No shadow, opacity shift | Secondary content, inactive states |
| Dropdown (10–40) | Reserved for future overlay states | Menus, modals, overlays |
| Top (80) | Reserved for topmost z-index | Floating elements, alerts |
Shadow Philosophy: The fromanother system eschews traditional drop shadows in favor of opacity-based depth and layering. Visual hierarchy emerges from scale, color intensity, and spatial position rather than simulated 3D shadows. This maintains the flat, sophisticated aesthetic while preserving visual clarity through careful opacity management.
Opacity Levels
- 8% (
0.08): Subtle background tinting, very faint overlays
- 30% (
0.30): Moderate transparency for secondary elements
- 97% (
0.97): Hover state for interactive elements (minimal change, barely perceptible)
- 98% (
0.98): Slight transparency for interactive groupings
- 99% (
0.99): Minimal fade for refined hover states
- 100% (
1.00): Full opacity for primary content and text
Z-index / Layering
- Base Layers:
1, 2 (standard content flow)
- Dropdown/Overlay Layer:
10, 18, 20, 30, 40 (progressive stacking for menus and overlays)
- Modal/Top Layer:
80 (floating elements, toasts, modals)
7. Do's and Don'ts
Do
- Use Cream (
#FFFDE2) as primary text color; it provides optimal contrast and warmth against dark backgrounds
- Leverage generous spacing (20px, 32px, 60px) to establish breathing room and gallery-like quality
- Keep borders sharp (
0px radius) to maintain architectural precision and modern aesthetic
- Use typography scale (7.5px through 82.5px) to establish clear visual hierarchy without relying on color alone
- Employ opacity shifts (
0.97–0.99) for subtle hover and interaction states
- Center or align content thoughtfully; avoid random placement
- Maintain transparent backgrounds (
rgba(0, 0, 0, 0)) on components to allow layering and flexibility
- Stack elements vertically with dramatic spacing for sophisticated vertical rhythm
- Use Electric Cyan (
#1740A9) sparingly for premium moments and accent highlights only
Don't
- Never use dark text on dark backgrounds; always ensure Cream (
#FFFDE2) or light opacity text
- Don't add drop shadows or blur effects; the system relies on opacity and positioning for depth
- Avoid rounded corners (
border-radius should remain 0px)
- Don't crowd content; respect the whitespace and breathing philosophy
- Never use more than two typefaces at once; stick to twkFont and herbikFont only
- Don't apply heavy opacity (below
0.30) to body text; maintain readability
- Avoid strong color transitions; prefer opacity-based state changes
- Don't use Sky Blue (
#D2E4F4) as primary interactive color; reserve it for subtle tertiary accents
- Never compress the spacing scale; maintain gaps between elements intentionally
8. Responsive Behavior
Breakpoints
| Breakpoint | Width | Key Changes |
|---|
| Mobile | 320px–640px | Single column layout, card width 100% with margins, heading sizes reduce by 10–15%, padding reduces to 16px–24px, navigation simplifies to hamburger/stacked |
| Tablet | 641px–1024px | Two-column grid, cards stack responsively, heading sizes maintain 80–90% of desktop, padding 24px–36px, navigation adapts to touch targets |
| Desktop | 1025px+ | Multi-column layouts, full card sizing (378px), maximum heading scales, full spacing scale (156px maximum), navigation fully expanded |
Touch Targets
- Minimum touch target:
44px × 44px for all interactive elements (buttons, links, navigation items)
- Padding around interactive regions ensures safe click/tap zones
- Navigation items maintain at least
12px vertical padding when stacked
- Link underlines add visual affordance on hover (optional enhancement for clarity)
Collapsing Strategy
- Hero sections: Hero image and text stack vertically on mobile; on desktop, text overlays or sits beside the hero image
- Card grids: 4-column on desktop → 2-column on tablet → 1-column on mobile
- Navigation: Horizontal menu on desktop → collapsible/hamburger menu on tablet → stacked links on mobile
- Typography: Heading sizes scale down 10–15% per breakpoint tier; body text remains stable at
12px minimum
- Spacing: Decrease all spacing values by 25–33% on mobile (e.g.,
60px → 40px, 32px → 20px)
- Padding: Large padding values (60px, 156px) reduce to 24px–36px on mobile while maintaining visual hierarchy
9. Agent Prompt Guide
Quick Color Reference
- Primary CTA/Text: Cream (
#FFFDE2)
- Background: Deep Navy (
#051236)
- Accent/Glow: Electric Cyan (
#1740A9)
- Secondary Accent: Sky Blue (
#D2E4F4)
- Neutral Darks: Black (
#000000), Near Black (#0A0A0A), Charcoal (#111111)
Iteration Guide
- All text defaults to Cream (
#FFFDE2) on dark backgrounds; adjust opacity only for state changes (hover: 0.97, active: 0.95)
- Typography hierarchy is primary. Use font sizes (7.5px, 12px, 82.5px) and weights (400, 550, 700) to establish focus, never rely on color alone
- Spacing is intentional. Apply margins/padding from scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 60px, 156px); no arbitrary values
- Components are flat and transparent. All buttons, cards, links use
background: rgba(0, 0, 0, 0) and border-radius: 0px; borders are minimal or 0px
- Hero sections deserve 60px–156px vertical padding to establish breathing room and gallery quality; smaller sections use 20px–36px
- Opacity states replace color transitions. Hover/active states shift text opacity (
0.97–0.99), never switch to alternate colors
- Electric Cyan (
#1740A9) is accent-only; use sparingly for premium moments (glow effects, highlights)
- Navigation is minimal. Use 7.5px twkFont for nav items; maintain touch targets of
44px minimum height on all devices
- Responsive: compress spacing by 25–33% on mobile; heading sizes reduce 10–15% per breakpoint; maintain single-column layouts below 640px
- Fonts are twkFont (display/headlines) and herbikFont (body/labels). No third fonts; fallback stacks provided for each
