Skills › BMAD Method › bmad-ux › design-example-editorial.md
design-example-editorial.md
158 lines · skills/bmad-ux/assets/design-example-editorial.md at bd70c64
1---
2name: Linen & Logic
3colors:
4 surface: '#fbf9f4'
5 surface-dim: '#dbdad5'
6 surface-bright: '#fbf9f4'
7 surface-container-lowest: '#ffffff'
8 surface-container-low: '#f5f3ee'
9 surface-container: '#f0eee9'
10 surface-container-high: '#eae8e3'
11 surface-container-highest: '#e4e2dd'
12 on-surface: '#1b1c19'
13 on-surface-variant: '#4e453d'
14 inverse-surface: '#30312e'
15 inverse-on-surface: '#f2f1ec'
16 outline: '#80756b'
17 outline-variant: '#d1c4b9'
18 surface-tint: '#715a3f'
19 primary: '#59452b'
20 on-primary: '#ffffff'
21 primary-container: '#735c41'
22 on-primary-container: '#f5d6b4'
23 inverse-primary: '#e0c1a1'
24 secondary: '#a43b2c'
25 on-secondary: '#ffffff'
26 secondary-container: '#fd7d69'
27 on-secondary-container: '#71160b'
28 tertiary: '#374a5f'
29 on-tertiary: '#ffffff'
30 tertiary-container: '#4f6278'
31 on-tertiary-container: '#caddf8'
32 error: '#ba1a1a'
33 on-error: '#ffffff'
34 error-container: '#ffdad6'
35 on-error-container: '#93000a'
36 primary-fixed: '#fdddbb'
37 primary-fixed-dim: '#e0c1a1'
38 on-primary-fixed: '#281804'
39 on-primary-fixed-variant: '#58432a'
40 secondary-fixed: '#ffdad4'
41 secondary-fixed-dim: '#ffb4a7'
42 on-secondary-fixed: '#400200'
43 on-secondary-fixed-variant: '#842417'
44 tertiary-fixed: '#d0e4ff'
45 tertiary-fixed-dim: '#b4c8e2'
46 on-tertiary-fixed: '#071d30'
47 on-tertiary-fixed-variant: '#35485d'
48 background: '#fbf9f4'
49 on-background: '#1b1c19'
50 surface-variant: '#e4e2dd'
51typography:
52 display-lg:
53 fontFamily: Libre Caslon Text
54 fontSize: 48px
55 fontWeight: '400'
56 lineHeight: '1.1'
57 letterSpacing: -0.02em
58 display-lg-mobile:
59 fontFamily: Libre Caslon Text
60 fontSize: 36px
61 fontWeight: '400'
62 lineHeight: '1.1'
63 headline-md:
64 fontFamily: Libre Caslon Text
65 fontSize: 32px
66 fontWeight: '400'
67 lineHeight: '1.2'
68 headline-sm:
69 fontFamily: Libre Caslon Text
70 fontSize: 24px
71 fontWeight: '400'
72 lineHeight: '1.3'
73 body-lg:
74 fontFamily: DM Sans
75 fontSize: 18px
76 fontWeight: '400'
77 lineHeight: '1.6'
78 letterSpacing: 0.01em
79 body-md:
80 fontFamily: DM Sans
81 fontSize: 16px
82 fontWeight: '400'
83 lineHeight: '1.6'
84 label-caps:
85 fontFamily: DM Sans
86 fontSize: 12px
87 fontWeight: '500'
88 lineHeight: '1.4'
89 letterSpacing: 0.1em
90 caption:
91 fontFamily: DM Sans
92 fontSize: 13px
93 fontWeight: '400'
94 lineHeight: '1.4'
95rounded:
96 sm: 0.125rem
97 DEFAULT: 0.25rem
98 md: 0.375rem
99 lg: 0.5rem
100 xl: 0.75rem
101 full: 9999px
102spacing:
103 unit: 8px
104 gutter: 24px
105 margin-mobile: 20px
106 margin-desktop: 64px
107 editorial-gap: 80px
108---
110## Brand & Style
112The design system is rooted in the philosophy of "Slow Design"—an intentional departure from the frantic pace of fast fashion. It evokes a tactile, "linen-weight" sensation through high-end editorial layouts and a restrained aesthetic. The target audience values provenance over presence, seeking a reflective and sophisticated discovery experience that feels as much like a boutique magazine as a digital marketplace.
114The style is **Editorial Minimalism** with **Tactile** accents. It prioritizes breathable white space, asymmetrical layouts that mimic printed lookbooks, and a soft, sun-faded palette. Every interaction is designed to be deliberate and "anti-hype," eschewing aggressive animations for subtle transitions and quiet confidence.
Brand & Style
The design system is rooted in the philosophy of "Slow Design"—an intentional departure from the frantic pace of fast fashion. It evokes a tactile, "linen-weight" sensation through high-end editorial layouts and a restrained aesthetic. The target audience values provenance over presence, seeking a reflective and sophisticated discovery experience that feels as much like a boutique magazine as a digital marketplace.
The style is Editorial Minimalism with Tactile accents. It prioritizes breathable white space, asymmetrical layouts that mimic printed lookbooks, and a soft, sun-faded palette. Every interaction is designed to be deliberate and "anti-hype," eschewing aggressive animations for subtle transitions and quiet confidence.
Raw lines 110 to 115116## Colors
118The palette is inspired by natural fibers and weathered landscapes.
119- **Warm White (#F9F7F2)** serves as the primary canvas, providing a soft, non-clinical background that reduces eye strain.
120- **Bone (#E3DED1)** and **Dust (#C2B9A7)** are used for structural depth, subtle dividers, and secondary surfaces.
121- **Tobacco (#735C41)** is the primary ink color, used for high-contrast typography and essential UI elements.
122- **Sun-faded Red (#B84A39)** and **Wool Blanket Blue (#4A5D73)** are used sparingly as "organic accents"—highlighting editorial picks or signifying subtle state changes without disrupting the tranquil atmosphere.
Colors
The palette is inspired by natural fibers and weathered landscapes.
- Warm White (#F9F7F2) serves as the primary canvas, providing a soft, non-clinical background that reduces eye strain.
- Bone (#E3DED1) and Dust (#C2B9A7) are used for structural depth, subtle dividers, and secondary surfaces.
- Tobacco (#735C41) is the primary ink color, used for high-contrast typography and essential UI elements.
- Sun-faded Red (#B84A39) and Wool Blanket Blue (#4A5D73) are used sparingly as "organic accents"—highlighting editorial picks or signifying subtle state changes without disrupting the tranquil atmosphere.
124## Typography
126Typography is the primary vehicle for the brand’s sophisticated voice.
127- **Libre Caslon Text** is the voice of the curator. Its classic proportions and elegant serifs provide the editorial weight required for discovery and storytelling.
128- **DM Sans** provides a quiet, functional counterpoint. It is used for body copy and navigational elements, ensuring clarity without competing with the headlines.
130Large display titles should often use "optical sizing" logic—tighter leading and slightly negative letter spacing to create a cohesive visual block. Labels are always tracked out (0.1em) to maintain a sense of airy premiumness.
Typography
Typography is the primary vehicle for the brand’s sophisticated voice.
- Libre Caslon Text is the voice of the curator. Its classic proportions and elegant serifs provide the editorial weight required for discovery and storytelling.
- DM Sans provides a quiet, functional counterpoint. It is used for body copy and navigational elements, ensuring clarity without competing with the headlines.
Large display titles should often use "optical sizing" logic—tighter leading and slightly negative letter spacing to create a cohesive visual block. Labels are always tracked out (0.1em) to maintain a sense of airy premiumness.
Raw lines 124 to 131132## Layout & Spacing
134This design system employs a **Fluid Editorial Grid**. While it follows a 12-column structure on desktop, it encourages "asymmetrical breathing room"—intentionally leaving columns empty to direct focus toward high-quality imagery.
136Spacing is generous. The `editorial-gap` (80px+) should be used between major content sections to allow the user to pause and reflect. Mobile layouts should maintain a minimum of 20px side margins to ensure the content feels framed like a page, rather than bleeding to the edges of the device. Elements should lean toward vertical stacks to mimic the scroll of a digital journal.
Layout & Spacing
This design system employs a Fluid Editorial Grid. While it follows a 12-column structure on desktop, it encourages "asymmetrical breathing room"—intentionally leaving columns empty to direct focus toward high-quality imagery.
Spacing is generous. The editorial-gap (80px+) should be used between major content sections to allow the user to pause and reflect. Mobile layouts should maintain a minimum of 20px side margins to ensure the content feels framed like a page, rather than bleeding to the edges of the device. Elements should lean toward vertical stacks to mimic the scroll of a digital journal.
138## Elevation & Depth
140Depth is communicated through **Tonal Layering** and **Ambient Shadows** rather than sharp borders.
141- **Surfaces:** Use the "Bone" color to define containers against the "Warm White" base.
142- **Shadows:** Shadows are highly diffused and tinted with the "Tobacco" hue (`rgba(115, 92, 65, 0.08)`). They should feel like a soft glow of light hitting fabric, with large blur radii (20px+) and very low opacity.
143- **Borders:** When borders are necessary, they are 1px thick and rendered in "Dust," creating a "ghost" outline that barely separates elements from the background.
Elevation & Depth
Depth is communicated through Tonal Layering and Ambient Shadows rather than sharp borders.
- Surfaces: Use the "Bone" color to define containers against the "Warm White" base.
- Shadows: Shadows are highly diffused and tinted with the "Tobacco" hue (
rgba(115, 92, 65, 0.08)). They should feel like a soft glow of light hitting fabric, with large blur radii (20px+) and very low opacity. - Borders: When borders are necessary, they are 1px thick and rendered in "Dust," creating a "ghost" outline that barely separates elements from the background.
145## Shapes
147The shape language is **Soft (0.25rem)**. While a sharp edge feels too aggressive and a pill-shape feels too digital/tech-heavy, a subtle rounding of corners mimics the natural softening of woven textiles over time.
149Larger containers (Cards, Modals) may use `rounded-lg` (0.5rem) to emphasize their tactile, object-like quality. Imagery should always follow these corner radii to maintain a cohesive, "framed" appearance.
Shapes
The shape language is Soft (0.25rem). While a sharp edge feels too aggressive and a pill-shape feels too digital/tech-heavy, a subtle rounding of corners mimics the natural softening of woven textiles over time.
Larger containers (Cards, Modals) may use rounded-lg (0.5rem) to emphasize their tactile, object-like quality. Imagery should always follow these corner radii to maintain a cohesive, "framed" appearance.
151## Components
153- **Buttons:** Primary buttons use a solid "Tobacco" fill with "Warm White" text. Secondary buttons are "Bone" with "Tobacco" text or simply "Tobacco" text with a 1px "Dust" border. Padding is generous horizontally to create an elegant, elongated silhouette.
154- **Cards:** Editorial cards feature large imagery, a "headline-sm" title, and a "caption" subline. Shadows are only applied on hover to simulate a gentle lift.
155- **Inputs:** Minimalist underlines in "Dust" that transition to "Tobacco" on focus. Label text remains in "label-caps" above the field.
156- **Chips/Tags:** Used for material types (e.g., "100% Linen"). These are rendered in "Bone" backgrounds with "Tobacco" text, using the "Soft" corner radius.
157- **Icons:** Must be "Hand-drawn" or "Fine-line" style. Lines should have slight imperfections and vary in weight to reinforce the tactile, artisanal nature of the fashion being discovered.
158- **Navigation:** A simple, centered bottom bar or a top-weighted "Ghost" header that disappears on scroll to maximize the editorial viewport.
Components
- Buttons: Primary buttons use a solid "Tobacco" fill with "Warm White" text. Secondary buttons are "Bone" with "Tobacco" text or simply "Tobacco" text with a 1px "Dust" border. Padding is generous horizontally to create an elegant, elongated silhouette.
- Cards: Editorial cards feature large imagery, a "headline-sm" title, and a "caption" subline. Shadows are only applied on hover to simulate a gentle lift.
- Inputs: Minimalist underlines in "Dust" that transition to "Tobacco" on focus. Label text remains in "label-caps" above the field.
- Chips/Tags: Used for material types (e.g., "100% Linen"). These are rendered in "Bone" backgrounds with "Tobacco" text, using the "Soft" corner radius.
- Icons: Must be "Hand-drawn" or "Fine-line" style. Lines should have slight imperfections and vary in weight to reinforce the tactile, artisanal nature of the fashion being discovered.
- Navigation: A simple, centered bottom bar or a top-weighted "Ghost" header that disappears on scroll to maximize the editorial viewport.