Compose two styles
Rather than blending two styles into a middle, this assigns them roles: one carries the structure, the other appears as an accent. Where the two fight, it says so before you start.
How to divide the work
- Composition
- Follow Carbon: Base the geometry on the eight pixel mini unit. Derive columns by starting at one and halving, and keep every margin and padding a whole multiple of the unit.
- Type
- Set in Carbon's manner (Set everything in IBM Plex, using the tighter productive styles in product and the larger expressive styles for editorial. Pick sizes from the published steps rather than inventing them.), and let Swiss's lettering (Neutral sans-serif; be bold with size contrast) appear only where you want the eye to catch.
- Material
- Ground in Carbon's material (Stack gray surfaces as layers and shift the ground one value step wherever a layer changes. Spend the blue only on things that can be acted on, and keep alert colors separate.); bring in exactly one thing from Swiss (White space and objective photographs; almost no ornament).
- Colour
- Build on #0f62fe, #161616, #f4f4f4 and admit one accent from #f1efe8, #ed3b22, #121210.
Where they fight
These two are already listed as related, so the join should come easily.
Caution
- Carbon Hard coding hex values breaks the layering the moment the theme flips between light and dark, because the whole system assumes color is chosen by role instead.
- Swiss Too much tidiness turns anonymous. Keep one strong jump in scale.
Image prompt
An original image that takes its structure from Carbon (Style, 2016–) and its accent from Swiss (Style, 1950s–). Structural cues: Rectangular controls with almost no corner radius, and input fields ruled only along the bottom edge; White and #f4f4f4 surfaces stacked alternately, the ground shifting one step in value at every layer; A single blue, #0f62fe, appearing only where something can be acted on, everything else near neutral; One typeface family, IBM Plex, from display headings down to captions, with nothing else mixed in. Accent cues, used sparingly: Strict grid; Sans-serif type; Asymmetry; Objective photography. Composition: Base the geometry on the eight pixel mini unit. Derive columns by starting at one and halving, and keep every margin and padding a whole multiple of the unit.. Type and lettering: Set everything in IBM Plex, using the tighter productive styles in product and the larger expressive styles for editorial. Pick sizes from the published steps rather than inventing them.. Let one material quality come from the second style: White space and objective photographs; almost no ornament. Mood: Trust, Technology, Calm. Color: build on #0f62fe, #161616, #f4f4f4 with a single accent drawn from #f1efe8, #ed3b22, #121210. Constraints: do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. Produce an original composition in the general period languages described above.
Related entries
- Carbon 2016– / Style / Design Systems
IBM's openly published and maintained design system, the working form of the IBM Design Language. Its skeleton is the 2x Grid, where an eight pixel mini unit is halved or doubled to size everything, the IBM Plex typeface, and a color model that stacks neutral grays as layers with one core blue reserved for action.
- Swiss 1950s– / Style / Functionalism
Puts order front and center and makes the information itself the protagonist.
Share this pairing:https://indexstyle.org/compose?ids=carbon+swiss