Design Docs

For sharing mockups of features not yet part of the initial push to the repo. TODO: Add SDS component names to sections

Update Pages

1. Election Infrastructure

Primary

• Need ability to add multiple election systems by pressing the Add Row button to pop down another row.

Secondary

• Use pre-determined list to help standardize the make/model options where possible, while providing the ability to add custom make/model.

/* Colors: */
--yellow-500: #FFDC17;
--yellow-300: #FFF1A2;
--yellow-400: #FFE75D;
--orange-500-warning-: #FDB515;
--blue-700: #006890;
--black: #000000;
--blue-200: #BFE2EF;
--blue-300: #99D1E6;
--gray-900-dark-: #1B1C1D;
--gray-100-light-: #EFEFEF;
--blue-500-primary-: #008BC0;
--red-500-danger-: #BB0000;
--gray-700-secondary-: #525356;
--gray-500-tertiary-: #88898D;
--red-50: #FCF2F2;
--red-700: #8C0000;
--red-800: #700000;
--red-300: #E49999;
--red-400: #CF4D4D;
--unnamed-color-a64d87: #A64D87;

/* Font/text values */
--unnamed-font-family-open-sans: Open Sans;
--unnamed-font-style-normal: normal;
--unnamed-font-weight-normal: normal;
--unnamed-font-size-14: 14px;
--unnamed-font-size-16: 16px;
--unnamed-character-spacing-0: 0px;
--unnamed-line-spacing-20: 20px;
--unnamed-line-spacing-24: 24px;
}

/* Character Styles */
.text-base-open-sans-—-16pt {
font-family: var(--unnamed-font-family-open-sans);
font-style: var(--unnamed-font-style-normal);
font-weight: var(--unnamed-font-weight-normal);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--black);
}
.text-sm-open-sans-—-14pt {
font-family: var(--unnamed-font-family-open-sans);
font-style: var(--unnamed-font-style-normal);
font-weight: var(--unnamed-font-weight-normal);
font-size: var(--unnamed-font-size-14);
line-height: var(--unnamed-line-spacing-20);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--black);
}

---

New Pages

1. Data Exfil page

Primary

• Needs a spot on the navbar somewhere

Secondary

• Provide CSV template that can be downloaded, filled in, and uploaded to populate table.

/* Colors: */
--blue-700: #006890;
--black: #000000;
--blue-200: #BFE2EF;
--blue-300: #99D1E6;
--gray-900-dark-: #1B1C1D;
--gray-100-light-: #EFEFEF;
--blue-500-primary-: #008BC0;
--red-500-danger-: #BB0000;
--gray-700-secondary-: #525356;
--gray-500-tertiary-: #88898D;
--red-50: #FCF2F2;
--red-700: #8C0000;
--red-800: #700000;
--red-300: #E49999;
--red-400: #CF4D4D;
--unnamed-color-a64d87: #A64D87;

2. Add KEVs from Nessus file

Primary

• Use the FileUploader to upload Nessus CSV file(s), parse, and display relevant KEVs in a list to select what should be reported. Show the KEVs selected for reporting so far. To link a KEV to a finding, do so through the Add Finding page.

Secondary

• Allow users to add additional KEVs that aren't in the Nessus results (in the event Nessus did not pick up on a vulnerability that is a KEV).
• Re-evaluate the UX design to determine if there is a better way to structure this process flow.

/* Colors: */
--blue-700: #006890;
--black: #000000;
--blue-200: #BFE2EF;
--blue-300: #99D1E6;
--gray-900-dark-: #1B1C1D;
--gray-100-light-: #EFEFEF;
--blue-500-primary-: #008BC0;
--red-500-danger-: #BB0000;
--gray-700-secondary-: #525356;
--gray-500-tertiary-: #88898D;
--red-50: #FCF2F2;
--red-700: #8C0000;
--red-800: #700000;
--red-300: #E49999;
--red-400: #CF4D4D;
--unnamed-color-a64d87: #A64D87;

3. Narrative/Attack Paths

Primary

• This is a work in progress, and will be updated with new versions of the SEI SDS (Specifically updates to components to select multiple techniques)

Secondary

• Provide a way for users to build attack path charts within the app itself.
• Re-evaluate the UX design to determine if there is a better way to structure this process flow.