ICON STYLE GUIDE - Splunk Wiki · PDF fileICON STYLE GUIDE VERSiON 1.1 May 2013. 2 Content ......

ICO N S T Y LE GU I D EV E R S i O N 1 . 1

M ay 2 0 1 3

2

C o n t e n t

I n t r o d u c t I o n

I c o n c o L L E c t I o n

I c o n L A B E L I n G

c o L o r S

A r r o W S A n d t E X t B o X E S

S P E c I A L c A S E S

d I A G r A M E X A M P L E S

3

I NTrO D U C TIO N

4

I n t r o d u C t I o nThis document serves to list the full collection of documentation icons as well as

provide basic guidelines for appropriately using the icons to best effect.

ICO N CO LLEC TIO N

6

directory Inputs,Mac

documentsdocumentdirectory Inputs,Linux

directory Input,Windows

directory Input,Solaris

directory Inputs directory Inputs,Solaris

directory Inputs,Windows

directories directory Input,Mac

directory Input,Linux

desktopdatabase datastores

database datastore

deployment ‘Server

directory directory Input

File Input File Input,Windows

File Input,Solaris

Field(for small sizes)

event (for small sizes)

event Field File Input,Linux

File Input,Mac

File Inputs,Windows

Forwarder, Mac

Forwarder, Linux

File Inputs,Solaris

File Inputs,Linux

File Inputs File Inputs,Mac

Firewall Forwarder

Configuration File

datastoresdatastoreBucketAlertAdd-on App data Model data Model object

7

Heavy Forwarder Heavy Forwarder,Linux

Heavy Forwarder,Mac

Heavy Forwarder,Solaris

Heavy Forwarder,Windows

Heavy Forwarders Heavy Forwarders,Linux

Heavy Forwarders,Mac

Heavy Forwarders,Solaris

Forwarder,Solaris

Forwarder,Windows

Forwarder With Load Balancer

Forwarder Withrouter

Forwarders Forwarders,Linux

Forwarders,Mac

Forwarders,Solaris

Forwarders,Windows

Heavy Forwarders,Windows

Heavy Forwarder With router

Index Indexes Indexer Indexer, Linux

Indexer, Mac

Indexer, Solaris

Indexer, Windows

Indexer With router

Indexers Indexers,Linux

Indexers,Mac

Indexers,Solaris

Indexers,Windows

Indexing Queue Knowledge object Laptop

License License Server Load Balancer Log File Lookup Master Cluster node

network Input network Input,Linux

network Input,Mac

8

Systems,Solaris

Systems,Windows

Systems Systems,Linux

Systems,Mac

System,Installed App

tag

Summaries SystemSettings Splunk Instance Summary System,Linux

System,Mac

System,Solaris

System,Windows

People Personnetwork Input,Solaris

network Input,Windows

Parsing Queue Pipeline Pool Queue report

Saved Search Scriptreports router (Physical)

router Scripted Input Search Search Head Search Head,Linux

Search Head With Load Balancer

Search HeadsSearch Head,Mac

Search Head,Solaris

Search Head,WIndows

Search Heads,Linux

Search Heads,Mac

Search Heads,Solaris

Search Heads,Windows

9

Container, one-up

Container, two-up

Container,three-up

ICO N L AB ELI N G

11

Indexer Indexer

L A B e L t y P e FA C e G u I d e L I n e S

The preferred font for all labels is Gotham narrow Bold set at 15pt/18pt (the type

sizes change as the icon scales up and down) with neutral tracking. When Gotham

Narrow Bold is not available, the labels should use Arial narrow Bold set at

16pt/19pt with 0.03 tracking. A good rule is to roughly size Arial labels set in Arial

Narrow Bold 7% larger than Gotham Narrow Bold.

Gotham Narrow Bold14pt/ 18ptNo tracking

Aria l Narrow Bold15pt/ 19pt0.03em Tracking

G otH A M n A r roW

ABCdeFGHIJKLMnoPQrStuVWXyZ abcdefghijklmnopqrstuvwxyz1234567890

A r IA L n A r roW

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890

12

Indexer

Indexer Indexer Indexer IndeXer

L A B e L t y P o G r A P H I C G u I d e L I n e S

The labels should never be set in a font or weight not specified in the styleguide or a

different weight. Labels should not be set in all uppercase of lowercase letters.

13


Forwarder, Mac


Indexer

L A B e L P L A C e M e n t G u I d e L I n e S

The optimal placement for a label is directly below an icon. However, if an icon’s label

must be placed elsewhere, the label can be placed above or to the side of an icon.

When an icon is placed to the side of an icon, the text should be vertically centered

with the icon and justified to the side adjacent to the icon.

14

Heavy Forwarder

With router

Heavy Forwarder

With router

Heavy Forwarder

With router

L A B e L P L A C e M e n t G u I d e L I n e S ( C o n t. )

Whenever possible, place all labels in a diagram on the same side of the icons.

15

Indexer

IndexerIndexer

Forwarder, Mac

Forwarder, Mac

Forwarder, Mac

6px18px

L A B e L P L A C e M e n t A n d I C o n A L I G n M e n t G u I d e L I n e S

An icon’s label should not be influenced by any modifier. The label’s vertical

placement should be positioned as if the modifier does not exist. This rule

applies for the vertical alignment of icons.

16


Heavy Forwarder

With router


L A B e L t e X t B o X G u I d e L I n e S

The text box should be roughly 150% - 200% the width of the icon. Regardless of width,

the text should be as evenly distributed across the lines as possible. When possible the

top line should be longer than the lower lines.

In this example, the label should be manually broken into two lines so that the label does not have such a wide profile.

17

G u I d e L I n e S F o r S C A L I n G I C o n S u P

The label’s font size does not increase linearly with the icon. Below is the

basic guideline for scaling a label up with an icon.

IndexerIndexer

The label’s font size does not increase linearly with icon. The larger the icon gets, the less the label’s font size increases.

As icon size increases, the space between icon and label tightens.

18

Indexer

G u I d e L I n e S F o r S C A L I n G I C o n S d o W n

The label’s font size does not decrease linearly with the icon. Below is the basic

guideline for scaling a label down with an icon.

IndexerThe smaller the icon gets, the less the label’s font size decreases. The label should never go lower than 8pt.

As icon size decreases, the space between icon and label loosens.

19

G r o u P L A B e L G u I d e L I n e S

A group label is communicated with a 1px-stroke black bracket to the left of all

grouped elements. The label should be vertically center aligned to the bracket.

The group label should be given the same type treatment (e.g., typeface, font size,

leading and tracking) as an icon label.

40px

20px

9px

9px

Group Label

20

40px

20px

9px

9px

Group Label

G r o u P L A B e L G u I d e L I n e S ( C o n t. )

When a group contains icons of varying height, the bracket extends to the height

of the tallest icon to the bottom of the icon, regardless if the icon is labeled. The

group label remains vertically centered with the bracket. Group brackets ignore the

decender of icon modifiers (such as operating system).

Indexer WithLoad Balancer

System,Windows

Indexer

21

Group Label

r o W S C o n tA I n I n G M o r e t H A n A S I n G L e G r o u P

If a row is not wholly comprised of a single group, a closing bracket should be added

at its tail end denoting where the group ends. The element immediately following the

group should be spaced 80px away from the group’s end backet.

40px 40px 80px

22

G r o u P L A B e L G u I d e L I n e S ( C o n t I n u e d )

In the case where multiple rows need to be labeled, all rules from the previous page

still apply. The spacing, proportions and alignment do not change.

Indexers

Forwarders

23

CO LO rS

24

I C o n A n d A r r o W C o L o r PA L e t t e

The suggested colors for icons and arrows are listed below. The primary colors should

be the first choice for coloring icons and arrows with the secondary colors providing

extra options when different colors are needed.

b l ac k

b l ac k

C0 / m 0 / Y0 / k 1 0 0 r 0 / G 0 / B 0 h E x / 0 0 0 0 0 0

PMS cOOl GRaY 7

s p l u n k g r ay

C 2 0 / m 1 4 / Y 1 2 / k4 0r 1 5 1 / G 1 5 3 / B 1 5 5 h E x / 97 9 9 9 B

Pr I M A ry Co Lo r S

S eCo n dA ry Co Lo r S

PMS 381

PMS 7469

da r k b l u e

c 1 0 0 / m 3 1 / y8 / k4 2 R 0 / G 9 5 / B 13 4 He x / 0 0 5 F 8 6

PMS 180

r e d

c 17 / m 9 1 / y8 9 / k6 R 2 0 8 / G 3 2 / B 3 1 He x / d 02 01 F

o r a n g e

c0 / m 62 / y9 5 / k0 R 2 3 2 / G 1 1 9 / B 3 4He x / e 87 7 2 2

PMS 158 PMS 130PMS 2995

l i g h t b l u e

c 8 3 / m 1 / y0 / k0 R 0 / G 1 69 / B 2 2 4 He x / 0 0A 9 e 0

l i g h t o r a n g e

c0 / m 3 0 / y 1 0 0 / k0 R 2 4 2 / G 1 69 / B 0 He x / F 2 A 9 0 0

c h a r t r e u s e

c 2 5 / m 0/ y9 8 / k0 R 2 0 6 / G 2 2 0 / B 0He x / C e d C0 0

PMS 369

s p l u n k g r e e n

C 6 8 / m 0 / Y 1 0 0 / k0 r 1 01 / G 1 6 6 / B 5 5 h E x / 6 5A6 37

25

I C o n C o L o r u S A G e G u I d e L I n e S

Black is always the primary color for icons. colors should be used sparingly and only

be to highlight an item in a diagram (to communicate used to state or call an item

out). Red signifies error, problem, etc. Dark blue signifies working, online, etc. Gray

signifies disabled, hidden, etc. Light orange signifies warning, attention, etc. Light

blue is intended for generic highlighting of a specific items in a diagram. Green is used

when an item needs to be explicitly called out as related to Splunk. For optimal clarity,

it is advised to include the status in the icon label.

Indexer(default)

Settings(Warning)

database (offline)

Summary (Highlight)

Firewall (online)

Splunk Searchnetwork Input(disabled)

26

Indexer

IndexerIndexer Indexer

I C o n C o L o r G u I d e L I n e S

Icons should always be set on a white or light background. When color usage is

necessary, only the icon is filled in a single solid color from the swatches provided in

the previous page. The label remains black.

Indexer

27

Ar rOWS AN D TE x T BOxE S

28

4px4px

G u I d e L I n e S F o r A r r o W S

All arrows should have a 1 pixel stroke with a solid dot at its start (if it is a

one-way arrow). The lines should contain no curves. All arrows should be

straight-edged.

Arrows should never have curves of any kind in them.

One-way arrows should always have a solid circle at the beginning of the line (roughly 4px in diam-eter).

Arrowheads should never contain curves. The style should always be angular and have approximately a 2:1 height/width ratio.

29

G u I d e L I n e S F o r A r r o W S , C o L o r S

Arrows should always be set on a white or light background. An arrow’s color

should default to black. If specific arrows need to distinguish themselves,

only the colors specified on page 19 should be used. The tips of the arrows

should always be the same color as the line. Arrows should always use a

solid color.

30

G u I d e L I n e S F o r o V e r L A P P I n G A r r o W S

Arrows that overlap should have a round hop-over on the right side. The size

of the hop should not be especially large, but it should be legible at regular

sizes. Overlapping arrows of different color do not necessarily need to have

hops.

31

G u I d e L I n e S F o r A r r o W S , P o I n t I n G t o I C o n S

Arrows can start or end on any side of an icon, but must meet the icon

orthogonally at the center of the icon’s side, when possible. If an icon has a

label, the arrow should start/end below the label.

Indexer

Indexer

Indexer

Indexer

Indexer

Indexer

32

80px

105px

80px

horizontal center

I C o n P L A C e M e n t G u I d e L I n e S

Icons should have a horizontal gap of 80 pixels and a vertical gap of 105

pixels. Rows of icons should be horizontally aligned in relation to each other.

33

vertical center

vertical center

vertical center

H o r I Z o n tA L A r r o W P L A C e M e n t G u I d e L I n e S

Arrows that point to the side of an icon should be vertically aligned with

the icon. Arrows should have a 10 pixel gap between each other. Whenever

possible, limit the amount of arrows pointing to a single icon to three.

10px

10px10px

34

V e r t I C A L A r r o W P L A C e M e n t G u I d e L I n e S

Arrows that point to the top or bottom of an icon should be horizontally

aligned with the icon. Arrows should have a 10 pixel gap between each

other. Whenever possible, limit the amount of arrows pointing to a single

icon to three.

horizontal center horizontal center horizontal center

10px10px10px

35

S I M P L e A r r o W C o M P o S I t I o n

Arrows can be drawn directly from source to target as illustrated in the

example. Direct lines work well for small numbers of arrows between icons..

36

A r r o W o P t I C A L A d J u S t M e n t

The spacing of arrows can appear uneven based on the tilt of an arrow.

Therefore, the placement of arrows should always be adjusted to appear

evenly distributed to the human eye. The top example shows arrows that

have been optically adjusted compared to the bottom example in which all

arrow end-points are separated by 10 pixels.

37

A r r o W P L A C e M e n t G u I d e L I n e S

An arrow’s end-point placement should always be relative to the horizontal

order of the icon it originiates from. For instance, the right-most icon’s

arrows are always placed farthest to the right to the icon they are pointing

to.

38

A d VA n C e d A r r o W C o M P o S I t I o n

When arrow compositions become complex, a branched line style will help

organize lines into a more structured system. The branched line style helps

create less visual noise and more ordered line intersection.

39


Sometimes you will need to vertically offset each branch point to avoid

line hops at the point where a line should branch off. The vertical distance

needed to avoid placement conflicts will vary, but the distance should be

uniform for each set of arrows.

npxnpx

40


Arrow placement follows the same tenets of simple arrow composition.

Arrows originating farthest to the right have the endpoints placed farthest

to the right and vice-versa for left-most placed arrows..

41

Indexer IndexerIndexer IndexerIndexer

A r r o W P L A C e M e n t W I t H I n A r o W

In the case where icons need to point to other icons in a row, the arrows

point horizontally toward the target icon. In the case where the target icon

is occluded by another icon, the arrow breaks underneath the occluding

icon. The line segment that is underneath the occluding icon is signified with

a dotted line.

t Wo I Co n S tH r e e I Co n S

Fo u r I Co n S

Indexer Indexer Indexer Indexer

42

Shortest l ine on top

Longest l ine on bottom

A r r o W P L A C e M e n t W I t H I n A r o W G u I d e L I n e S

Indexer Indexer Indexer Indexer

10px

5px20px

25px5px

10px

43

t e X t B o X W I t H S H A d o W

t e X t B o X W I t H o u t S H A d o W

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei-usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre-henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


44


20px

20px

20px 20px

G u I d e L I n e S F o r t e X t B o X e S

All text boxes should have a 3 pixel black stroke with a 2 pixel rounded edge. The

background should be a solid white fill and the text set as Gotham Narrow Book at

12pt/18pt and neutral tracking. The container should have a 20 pixel padding on all

sides of the text. The proportions of the text box should be roughly 2:1.

45

G u I d e L I n e S F o r L e G e n d S

Legends should have a 3 pixel black stroke with a 2 pixel rounded edge. The

background should be a solid white fill. The title should be set as Gotham Narrow

Bold at 12pt/15pt with neutral tracking. Legend labels are set as Gotham Narrow at

10pt/12pt with neutral tracking. The sample lines for each label should be rotated at

45 degrees for space efficiency.

Legend

Forwarder load-balanced data

Peer node replicated data

Search data

Messages

20px

10px

10px

10px

10px

10px 10px

20px

VERTICAL LEGEND

46

Legend

Legend





Search data

Search data

Messages

Messages

125px

125px

10px

10px

20px

HORIZONTAL LEGEND

GRID LEGEND

G u I d e L I n e S F o r L e G e n d S ( C o n t )

In cases where horizontal space is limited, legends can be laid out to sit below a

diagram in a vertically shallow layout. Additionally, legends can be set in a grid. Both

legends conform to the prior rules unless specified.

47

SPECIAL C A SE S

48

F I e L d I C o n G u I d e L I n e S

The Field icon has two versions, one for medium/large sizes and one specifically for

small sizes. Only use the small version of the Field icon at sizes of 50 pixels or smaller.

49

e V e n t t y P e I C o n G u I d e L I n e S

The event Type icon has two versions, one for medium/large sizes and one

specifically for small sizes. Only use the small version of the event Type icon at sizes

of 50 pixels or smaller.

50

I C o n C o M P o n e n t G u I d e L I n e S

certain icons have pieces “attached” to them. examples include Forwarder With Load

Balancer (as shown), Indexer With Router and Search Head With Load Balancer. In all

cases, the icon create (e.g., Forwarder With Load Balancer, Indexer With Router, etc.)

should serve as the standard for structure and placement. For both Router and Load

Balancer components, special versions have been created for these purposes. Do not

use the stand-alone icons in these cases.

51

C o n tA I n e r I C o n S

“containers” are used to communicate when items are installed in a system.

containers should hold no more than 3 items. The contained items should be scaled

down to 1/3rd their normal size.

horizontal center horizontal center horizontal center

vertical center

24px 39px

10px

10px

39px24px

8pxradius

ONE-UP TWO-UP THREE-UP

DIAG r Am E x Am PLE S

53

e X A M P L e d I A G r A M # 1 ( W I t H C u r r e n t I C o n S )

54

e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S )

55

e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S , A Lt e r n At e L I n e S t r u C t u r e )

56

e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S & L A B e L S )

Forwarder with Load Balancer, Linux

Forwarder with Load Balancer, Windows

Forwarder with Load Balancer, Mac

IndexerIndexer

57

e X A M P L e d I A G r A M # 1 ( W I t H n e W I C o n S & L A B e L S , A Lt e r n At e L I n e S t r u C t u r e )

Forwarder with Load Balancer, Linux

Forwarder with Load Balancer, Windows

Forwarder with Load Balancer, Mac

IndexerIndexer

58

e X A M P L e d I A G r A M # 2 ( W I t H C u r r e n t I C o n S )

59

e X A M P L e d I A G r A M # 2 ( W I t H n e W I C o n S )

60

e X A M P L e d I A G r A M # 2

( W I t H n e W I C o n S & L A B e L S )

Search Head(Distributed Search)

Indexers

Forwarders

62

Router Firewall


Indexer


Data Sources

64

ES App Search Head Indexer

Router Firewall

Fowarders WithLoad Balancer

Splunk App forEnterprise Security

Forwarders WithTechnology Add-on

Data Sources

Add-on

66

Domain Controllers Member Servers

IndexersSearch Users

Domain Name Servers

Splunk App for Active Directory

Domain Controllers Member ServersDomain Name Servers

Domain: San Francisco

Domain: New York

Central Splunk Instance

Search Heads

Typical Splunk App for Active Directory Layout

68

Master Node Search Head

Peer Nodes

Cluster: Master node, search head, 3 peer nodes, replication factor = 3

Forwarders withLoad Balancer

Legend


Search data

Messages

Peer nodereplicated data

70

Search Head

Distributed Search

Indexers

Forwarders

Data Sources

72

Search Head(Distributed Search)

Indexers

Forwarders

74

License

Pool

License License

License Stacks

License GroupsA set of licenses that can be installed together

76

WAS Deployment Mgr. w/ Logs and Configs

Forwarder w/ Add-on

Splunk Instance w/ Splunk App

for WAS

JMX Forwarder Appliance w/ FA

Add-on

JMX

WAS Machine

App Servers w/ Logs

78

notable_events

Network - Attack Tracker - Lookup Gen

pci_summary

Network - All IDS Attacks- Base

PCI - Interesting Event Daily Counts - Summary Gen

Splunk Data assets

ids_attack_tracker

listen to your datacopyright © 2012 Splunk Inc. All rights reserved. Splunk enterprise is protected by U.S. and international copyright and intellectual property laws. Splunk is a registered trademark or trademark of Splunk Inc. in the United States and/or other jurisdictions. All other marks and names mentioned herein may be trademarks of their respective companies. Item # GL-Splunk-Brand-112

www.splunk.com

250 Brannan St, San Francisco, cA, 94107 [email protected] | [email protected] 866-438-7758 | 415-848-8400 www.splunkbase.com

ICON STYLE GUIDE - Splunk Wiki · PDF fileICON STYLE GUIDE VERSiON 1.1 May 2013. 2 Content ......

Documents

Transcript of ICON STYLE GUIDE - Splunk Wiki · PDF fileICON STYLE GUIDE VERSiON 1.1 May 2013. 2 Content ......