--- tags: atom --- # Atom / Badge This is an overview of Badge atom in its Standby, Hover, and Pressed states. This atom is used for signalising Change (%) in Cap Tables, company verificaiton/unverification, as well as commitment amounts in Investor Analyics. ## States & Variables ... ### Positive State (+%/Verified) This is what the atom looks like when it is in a positive state. The **HEX** code of the colour used is: **00D97E**, used with a background of 10% opacity. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12117%253A264" allowfullscreen></iframe> ... ### Neutral (Unverified/No Commitment) This is what the atom looks like when it is in a neutral state. The **HEX** code of the colour used is: **6E84A3**, used with a background of 10% opacity. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D22021%253A56" allowfullscreen></iframe> ... ### Negative State (-%) This is what the atom looks like when it is in a positive state. The **HEX** code of the colour used is: **E74B3B**, used with a background of 10% opacity. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12117%253A265" allowfullscreen></iframe> ... ### Variables ... ## Questions