***Updated:
"Developers" removed from top Inner page nav
"Help Docs" Heading in left nav removed
Section below Top Nav that holds the Selector Tabs between User Guides, Developer Docs and API Reference (OH) and Guides and API Reference (SO)
This section has a height of 50px
The tab contains All caps, 14px font label with 22px line height, 14px padding left and right, 14px padding top and bottom.
Background of active/selected item #006bb1 and bottom stroke of 2px on the inside in colour #f6f6f6
Hover background #17181C
Icon colour #F1F3F5
Left and top nav bg colour: #242630
Article body colour: #17181C
Footer colour: #17181C
Brightness dropdown in topnav as per image - icon colour #F1F3F5
Added "Copy Markdown" and "Open" CTA's below article title.
24px gap between title and CTA's
24px gap between CTA's and content
8px gap between CTA's
1px stroke in #f6f6f6 on CTA's
Article page Top nav:
Platform switcher to the left of the logo that switches between OH and SO environment 30x 30px containing 4 6px by 6px blocks with a 1px border radius, 1px stroke, 4px apart and 7px from border of container.
This switcher has a 8px gap between the logo
OH Logo is 40px height
SO Logo is 30px height
"Help" next to logo falls away for this inner nav
Search field has 50px padding on either side between the logo and the start of the Nav on the right side (Support CTA)
Search field height is 40px
Hint text is 16px, 24px line height
Search icon is 20px by 20px with 20px padding on either side
Body of the article structure contains 3 columns.
-
Left column is 330px width
-
Middle column is 552px min-width on Desktop (as per Starlight)
-
Right column is 250px width minimum
-
Left column 40px padding top and bottom, 24px padding left and 10px right
-
Middle column 40px padding top and bottom, 24px padding left and right
-
Right column 40px padding top and bottom, 16px padding left and 24px right
Left column contains Heading and Vertical nav items. Gap between heading and items 16px.
Heading 14px font 22px line height all caps
Nav items container 38px height
Container has corner radius of 4px on left top and left bottom corners
Padding top and bottom of this container 8px, left 12px, right 6px
Background fill if this container is selected #F3F4F6
Nav items 14px font, 22px line height
2px gap between nav items' containers
18px indent on the left, for each level
Middle column has 40px padding at the top and bottom
Breadcrumbs are 14px, 22px lineheight
24px gap between Article title and breadcrumbs
Article title 30px font, 40px line height - Open Sans Light
24px gap between Article title and content.
Third/Right column is 250px width with 16px padding left and 24px padding right
Contains a title in semibold 14px, 22px lineheight and a 16px gap before page content list
Page content list is 14px font with 22px lineheight for each item and items 10px gap between
Link colour #69B3FF
***Updated:
"Developers" removed from top Inner page nav
"Help Docs" Heading in left nav removed
Section below Top Nav that holds the Selector Tabs between User Guides, Developer Docs and API Reference (OH) and Guides and API Reference (SO)
This section has a height of 50px
The tab contains All caps, 14px font label with 22px line height, 14px padding left and right, 14px padding top and bottom.
Background of active/selected item #006bb1 and bottom stroke of 2px on the inside in colour #f6f6f6
Hover background #17181C
Icon colour #F1F3F5
Left and top nav bg colour: #242630
Article body colour: #17181C
Footer colour: #17181C
Brightness dropdown in topnav as per image - icon colour #F1F3F5
Added "Copy Markdown" and "Open" CTA's below article title.
24px gap between title and CTA's
24px gap between CTA's and content
8px gap between CTA's
1px stroke in #f6f6f6 on CTA's
Article page Top nav:
Platform switcher to the left of the logo that switches between OH and SO environment 30x 30px containing 4 6px by 6px blocks with a 1px border radius, 1px stroke, 4px apart and 7px from border of container.
This switcher has a 8px gap between the logo
OH Logo is 40px height
SO Logo is 30px height
"Help" next to logo falls away for this inner nav
Search field has 50px padding on either side between the logo and the start of the Nav on the right side (Support CTA)
Search field height is 40px
Hint text is 16px, 24px line height
Search icon is 20px by 20px with 20px padding on either side
Body of the article structure contains 3 columns.
Left column is 330px width
Middle column is 552px min-width on Desktop (as per Starlight)
Right column is 250px width minimum
Left column 40px padding top and bottom, 24px padding left and 10px right
Middle column 40px padding top and bottom, 24px padding left and right
Right column 40px padding top and bottom, 16px padding left and 24px right
Left column contains Heading and Vertical nav items. Gap between heading and items 16px.
Heading 14px font 22px line height all caps
Nav items container 38px height
Container has corner radius of 4px on left top and left bottom corners
Padding top and bottom of this container 8px, left 12px, right 6px
Background fill if this container is selected #F3F4F6
Nav items 14px font, 22px line height
2px gap between nav items' containers
18px indent on the left, for each level
Middle column has 40px padding at the top and bottom
Breadcrumbs are 14px, 22px lineheight
24px gap between Article title and breadcrumbs
Article title 30px font, 40px line height - Open Sans Light
24px gap between Article title and content.
Third/Right column is 250px width with 16px padding left and 24px padding right
Contains a title in semibold 14px, 22px lineheight and a 16px gap before page content list
Page content list is 14px font with 22px lineheight for each item and items 10px gap between
Link colour #69B3FF